/* ================================================================
   TAXMAN DESIGN SYSTEM
   Redesign Milestone 2 — May 2026
   Previous stylesheet archived as taxman.old
   ================================================================ */

/* ═══════════════════════════════════════════════════════
   THEME TOKENS
═══════════════════════════════════════════════════════ */
:root {
    --bg:           #f1f5f9;
    --surface:      #ffffff;
    --surface-2:    #f8fafc;
    --border:       #e2e8f0;
    --text:         #1e293b;
    --text-2:       #64748b;
    --text-3:       #94a3b8;
    --icon:         #94a3b8;
    --hover:        #f1f5f9;
    --shadow:       rgba(15,23,42,.07);
    --shadow-lg:    rgba(15,23,42,.13);
    --input-bg:     #ffffff;
    --input-border: #d1d5db;
    --modal-bg:     #ffffff;
    --btn-sec-bg:    #64748b;
    --btn-sec-text:  #ffffff;
    --btn-sec-border:#64748b;
    --danger-text:  #dc2626;
    --danger-icon:  #fca5a5;
    --danger-hover: #fef2f2;
    --alert-ok-bg:  #ecfdf5; --alert-ok-text: #065f46;
    --alert-err-bg: #fef2f2; --alert-err-text: #991b1b;
    --card-border:  #e2e8f0;
    --progress-bg:  #f1f5f9;
}

/* Dark — system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:           #0b1120;
        --surface:      #1a2235;
        --surface-2:    #243049;
        --border:       #2e3f5c;
        --text:         #e2e8f0;
        --text-2:       #94a3b8;
        --text-3:       #64748b;
        --icon:         #64748b;
        --hover:        #243049;
        --shadow:       rgba(0,0,0,.25);
        --shadow-lg:    rgba(0,0,0,.4);
        --input-bg:     #243049;
        --input-border: #3b4f6e;
        --modal-bg:     #1a2235;
        --btn-sec-bg:   #243049;
        --btn-sec-text: #cbd5e1;
        --btn-sec-border:#3b4f6e;
        --danger-text:  #fca5a5;
        --danger-icon:  #ef4444;
        --danger-hover: rgba(239,68,68,.12);
        --alert-ok-bg:  #052e1a; --alert-ok-text: #86efac;
        --alert-err-bg: #2c0909; --alert-err-text: #fca5a5;
        --card-border:  #2e3f5c;
        --progress-bg:  #243049;
    }
}
/* Dark — manual override */
html[data-theme="dark"] {
    --bg:           #0b1120;
    --surface:      #1a2235;
    --surface-2:    #243049;
    --border:       #2e3f5c;
    --text:         #e2e8f0;
    --text-2:       #94a3b8;
    --text-3:       #64748b;
    --icon:         #64748b;
    --hover:        #243049;
    --shadow:       rgba(0,0,0,.25);
    --shadow-lg:    rgba(0,0,0,.4);
    --input-bg:     #243049;
    --input-border: #3b4f6e;
    --modal-bg:     #1a2235;
    --btn-sec-bg:   #243049;
    --btn-sec-text: #cbd5e1;
    --btn-sec-border:#3b4f6e;
    --danger-text:  #fca5a5;
    --danger-icon:  #ef4444;
    --danger-hover: rgba(239,68,68,.12);
    --alert-ok-bg:  #052e1a; --alert-ok-text: #86efac;
    --alert-err-bg: #2c0909; --alert-err-text: #fca5a5;
    --card-border:  #2e3f5c;
    --progress-bg:  #243049;
}
/* Light — manual override */
html[data-theme="light"] {
    --bg:           #f1f5f9;
    --surface:      #ffffff;
    --surface-2:    #f8fafc;
    --border:       #e2e8f0;
    --text:         #1e293b;
    --text-2:       #64748b;
    --text-3:       #94a3b8;
    --icon:         #94a3b8;
    --hover:        #f1f5f9;
    --shadow:       rgba(15,23,42,.07);
    --shadow-lg:    rgba(15,23,42,.13);
    --input-bg:     #ffffff;
    --input-border: #d1d5db;
    --modal-bg:     #ffffff;
    --btn-sec-bg:    #64748b;
    --btn-sec-text:  #ffffff;
    --btn-sec-border:#64748b;
    --danger-text:  #dc2626;
    --danger-icon:  #fca5a5;
    --danger-hover: #fef2f2;
    --alert-ok-bg:  #ecfdf5; --alert-ok-text: #065f46;
    --alert-err-bg: #fef2f2; --alert-err-text: #991b1b;
    --card-border:  #e2e8f0;
    --progress-bg:  #f1f5f9;
}

/* ═══════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════ */
html, body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; height: 100%; overflow: hidden; }
body { background: var(--bg) !important; color: var(--text) !important; margin: 0; }
[x-cloak] { display: none !important; }

/* Pre-collapsed sidebar: beats the hardcoded style="width:240px" before Alpine runs */
html.txm-sidebar-pre-collapsed #txm-sidebar { width: 72px !important; transition: none !important; }
html.txm-sidebar-pre-collapsed #txm-sidebar .txm-label,
html.txm-sidebar-pre-collapsed #txm-sidebar .txm-section-label { display: none !important; }
html.txm-sidebar-pre-collapsed #txm-sidebar .txm-nav-link {
    gap: 0 !important;
    justify-content: center !important;
    border-left-color: transparent !important;
}

::-webkit-scrollbar            { width: 5px; height: 5px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: var(--text-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--text-2); }

/* ═══════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════ */
.txm-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px var(--shadow);
}
.txm-topbar-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: .5rem; border: none; background: none;
    color: var(--text-2) !important; cursor: pointer;
    transition: background .13s, color .13s;
    font-family: inherit;
    -webkit-appearance: none; appearance: none;
}
.txm-topbar-btn:hover { background: var(--hover); color: var(--text) !important; }
.txm-topbar-btn i { color: inherit !important; }

.txm-year-btn {
    display: flex; align-items: center; gap: .375rem;
    padding: .375rem .75rem;
    border-radius: .625rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .875rem; font-weight: 500;
    cursor: pointer; transition: background .13s;
    font-family: inherit;
}
.txm-year-btn:hover { background: var(--hover); }

.txm-user-btn {
    display: flex; align-items: center; gap: .5rem;
    padding: .25rem .5rem .25rem .25rem;
    border-radius: .625rem; border: none;
    background: none; cursor: pointer;
    transition: background .13s; font-family: inherit;
}
.txm-user-btn:hover { background: var(--hover); }
.txm-user-name { font-size: .875rem; font-weight: 500; color: var(--text); }

/* ═══════════════════════════════════════════════════════
   DROPDOWNS (topbar)
═══════════════════════════════════════════════════════ */
.txm-dropdown {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .875rem;
    box-shadow: 0 8px 30px var(--shadow-lg);
    z-index: 200; overflow: hidden;
}
.txm-dropdown-header { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.txm-dropdown-header h3 { margin: 0; font-size: .875rem; font-weight: 600; color: var(--text); }
.txm-dropdown-footer { border-top: 1px solid var(--border); padding: .5rem 1rem; }
.txm-dropdown-footer a { font-size: .75rem; font-weight: 500; color: var(--text-3); text-decoration: none; }
.txm-dropdown-footer a:hover { color: var(--text); }
.txm-dropdown-divider { border-top: 1px solid var(--border); margin: .25rem 0; }

.txm-dropdown-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .625rem 1rem;
    font-size: .875rem; color: var(--text);
    text-decoration: none !important; background: none; border: none;
    width: 100%; text-align: left; cursor: pointer;
    transition: background .1s; font-family: inherit;
}
.txm-dropdown-item:hover { background: var(--hover); }
.txm-dropdown-item i { width: 1rem; text-align: center; color: var(--icon); font-size: .8125rem; flex-shrink: 0; }
.txm-dropdown-item.danger { color: var(--danger-text); }
.txm-dropdown-item.danger i { color: var(--danger-icon); }
.txm-dropdown-item.danger:hover { background: var(--danger-hover); }

.txm-notif-item {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--surface-2);
    cursor: pointer; transition: background .1s;
}
.txm-notif-item:hover { background: var(--hover); }
.txm-notif-item:last-child { border-bottom: none; }
.txm-notif-date { margin: 0 0 2px; font-size: .75rem; color: var(--text-3); }
.txm-notif-body { margin: 0; font-size: .875rem; color: var(--text); font-weight: 500; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════ */
#txm-sidebar {
    background: linear-gradient(160deg, #090f2e 0%, #0f1d4d 45%, #1a3079 100%);
    transition: width .25s cubic-bezier(.4,0,.2,1);
    will-change: width;
}
.txm-nav-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .5625rem 1rem; margin: .125rem .5rem;
    border-radius: .5rem; border-left: 2px solid transparent;
    background: transparent;
    color: rgba(255,255,255,.58); text-decoration: none !important;
    font-size: .875rem; font-weight: 500;
    transition: background .13s, color .13s, border-color .13s;
    white-space: nowrap;
}
.txm-nav-link:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.9); }
.txm-nav-link.active { background: rgba(255,255,255,.16); color: #fff; border-left-color: #60a5fa; }
.txm-nav-icon { width: 1.125rem; text-align: center; flex-shrink: 0; font-size: .875rem; }
.txm-section-label {
    padding: .875rem 1.25rem .25rem;
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(165,180,252,.45);
    white-space: nowrap; overflow: hidden;
}
.txm-divider { border-top: 1px solid rgba(255,255,255,.1); margin: .5rem .75rem; }

#txm-sidebar.collapsed .txm-nav-link { gap: 0; justify-content: center; border-left-color: transparent !important; }
#txm-sidebar.collapsed .txm-nav-link.active { background: rgba(255,255,255,.18); }
#txm-sidebar.collapsed .txm-label { display: none; }
#txm-sidebar.collapsed .txm-section-label { display: none; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.txm-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: .625rem 1.5rem;
    text-align: center; flex-shrink: 0;
}
.txm-footer span { font-size: .75rem; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════
   BOOTSTRAP COMPONENT OVERRIDES (dark-aware)
═══════════════════════════════════════════════════════ */
.card  { border-radius: .875rem !important; border: 1px solid var(--card-border) !important; box-shadow: 0 1px 4px var(--shadow) !important; background: var(--surface) !important; }
.card-header { background: transparent !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; }
.card-body { color: var(--text) !important; }
.table { color: var(--text) !important; }
.table thead th { border-bottom-color: var(--border) !important; color: var(--text-2) !important; background-color: var(--surface-2) !important; }
.table td, .table th { border-top-color: var(--border) !important; }
.list-group-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; position: relative; }
.list-group-item:has(.retard-float-right) { padding-right: 3.5rem !important; }
.list-group-item.active { background: linear-gradient(135deg,#325aca,#1e3a96) !important; border-color: #325aca !important; color: #fff !important; }

.btn { border-radius: .625rem !important; font-weight: 500 !important; font-family: 'Inter',sans-serif !important; transition: all .15s ease !important; }
.btn-primary { background: linear-gradient(135deg,#325aca,#1e3a96) !important; border: none !important; color: #fff !important; }
.btn-primary:hover { background: linear-gradient(135deg,#2548b8,#162e7a) !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(50,90,202,.4) !important; color: #fff !important; }
.btn-secondary { background: var(--btn-sec-bg) !important; border-color: var(--btn-sec-border) !important; color: var(--btn-sec-text) !important; }
.btn-secondary:hover { filter: brightness(.95); }

/* btn-circle */
.btn-circle { width: 2.25rem !important; height: 2.25rem !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; }
.btn-circle.btn-sm { width: 2rem !important; height: 2rem !important; font-size: .875rem !important; }
.btn-circle.btn-lg { width: 3rem !important; height: 3rem !important; font-size: 1.25rem !important; }

/* btn-white */
.btn-white { background-color: transparent !important; border-color: var(--border) !important; color: var(--text-3) !important; }
.btn-white:hover { background-color: var(--hover) !important; color: var(--text) !important; }

/* list-group */
.list-group { border-radius: .875rem !important; overflow: hidden; }

/* btn-icon-split */
.btn-icon-split { padding: 0 !important; overflow: hidden; display: inline-flex !important; align-items: stretch !important; }
.btn-icon-split .icon { display: flex; align-items: center; gap: .375rem; padding: .5rem .875rem; font-weight: 600; flex-shrink: 0; background: rgba(0,0,0,.18); }
.btn-icon-split .icon.match-widths { min-width: 5.5rem; justify-content: center; }
.btn-icon-split .text { display: flex; align-items: center; padding: .5rem 1rem; flex: 1; }

/* Plan / renewal CTA buttons */
.btn-plan { display: flex !important; align-items: center !important; gap: .75rem; padding: .75rem 1.25rem !important; font-size: .9375rem !important; font-weight: 600 !important; border-radius: .75rem !important; transition: all .15s ease !important; text-decoration: none !important; }
.btn-plan .plan-price { opacity: .7; font-size: .875rem; font-weight: 500; }
.btn-plan-light { background: linear-gradient(135deg, #475569, #334155) !important; border: none !important; color: #fff !important; }
.btn-plan-light:hover { background: linear-gradient(135deg, #3d4f63, #293445) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(71,85,105,.45) !important; }
.btn-plan-premium { background: linear-gradient(135deg, #7c3aed, #5b21b6) !important; border: none !important; color: #fff !important; }
.btn-plan-premium:hover { background: linear-gradient(135deg, #6d28d9, #4c1d95) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,.45) !important; }

.btn-secondary.btn-glow:hover { background: #4f6180 !important; filter: none !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(100,116,139,.5) !important; }

/* Form controls */
.form-control, .custom-select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text) !important; border-radius: .625rem !important;
}
.form-control::placeholder { color: var(--text-3) !important; }
.form-control:focus, .custom-select:focus {
    background-color: var(--input-bg) !important; color: var(--text) !important;
    border-color: #325aca !important; box-shadow: 0 0 0 3px rgba(50,90,202,.15) !important;
}
/* select.form-control: add Bootstrap's custom-select arrow */
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 8px 10px !important;
    padding-right: 1.75rem !important;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
/* Dark mode: swap to light arrow */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .custom-select,
    :root:not([data-theme="light"]) select.form-control {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%2394a3b8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
    }
}
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%2394a3b8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
}

/* Input groups */
.input-group-text { background-color: var(--surface-2) !important; border-color: var(--input-border) !important; color: var(--text-2) !important; }
.input-group { align-items: center !important; }
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group-append > .input-group-text, .input-group-append > .btn { border-radius: 0 .625rem .625rem 0 !important; }
.input-group-prepend > .input-group-text, .input-group-prepend > .btn { border-radius: .625rem 0 0 .625rem !important; }

.alert { border-radius: .875rem !important; border: none !important; }
.alert-success { background: var(--alert-ok-bg) !important; color: var(--alert-ok-text) !important; }
.alert-danger  { background: var(--alert-err-bg) !important; color: var(--alert-err-text) !important; }

.progress     { border-radius: 999px !important; background: var(--progress-bg) !important; }
.progress-bar { border-radius: 999px !important; }
.badge   { border-radius: .375rem !important; }
.rounded { border-radius: .875rem !important; }

/* bg-white: override taxman.old dark-mode setting */
.bg-white { background-color: var(--surface) !important; color: var(--text) !important; }
.border   { border-color: var(--border) !important; }

/* ═══════════════════════════════════════════════════════
   TABLES & DATATABLES
═══════════════════════════════════════════════════════ */
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--border) !important; }

/* Non-DataTables bordered tables: same rounded treatment as the DataTables wrapper */
.table-bordered:not(.dataTable) {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: .875rem !important;
    overflow: hidden !important;
}
@media (max-width: 767px) {
    .table-bordered:not(.dataTable) {
        margin-left: -30px !important;
        margin-right: -30px !important;
        width: calc(100% + 60px) !important;
        border-radius: 0 !important;
    }
}

@media (max-width: 767px) {
    /* Escape both <main> padding (15px) and container-fluid padding (15px) = 30px per side */
    .dataTables_wrapper {
        margin-left: -30px !important;
        margin-right: -30px !important;
        width: calc(100% + 60px) !important;
        border-radius: 0 !important;
    }
}

.dataTables_wrapper { border: 1px solid var(--border); border-radius: .875rem; overflow: hidden; }
table.dataTable.table-bordered { border: none !important; }

.dataTables_wrapper .top    { padding: .75rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: end; gap: 1rem; }
.dataTables_wrapper .bottom { padding: .75rem 1rem; background: var(--surface-2); border-top:    1px solid var(--border); display: flex; align-items: center; justify-content: end; gap: 1rem; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { float: none !important; }
.dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap; }
.dataTables_wrapper .dataTables_length { display: flex !important; align-items: center; gap: .375rem; flex-wrap: wrap; }
.dataTables_wrapper .dataTables_length label { display: inline-flex !important; align-items: center; gap: .375rem; margin: 0; white-space: nowrap; }
.dataTables_wrapper > .row:first-child { margin: 0; padding: .375rem 0; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.dataTables_wrapper > .row:last-child  { margin: 0; padding: .375rem 0; background: var(--surface-2); border-top:    1px solid var(--border); }
.dataTables_wrapper > .row:first-child > [class*="col-"],
.dataTables_wrapper > .row:last-child  > [class*="col-"] { padding: .375rem 1rem; }
.dataTables_wrapper .dataTables_filter { display: flex; justify-content: flex-end; }
.dataTables_wrapper .dataTables_info { display: flex; align-items: center; height: 100%; padding-top: 0 !important; }
.dataTables_wrapper .dataTables_paginate { display: flex; align-items: center; justify-content: flex-end; }
.dataTables_wrapper table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td { border-top: none !important; border-bottom-width: 1px !important; }

/* Pagination (DataTables + general Bootstrap) */
.page-link {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-2) !important;
}
.page-link:hover { background-color: var(--hover) !important; color: var(--text) !important; }
.page-item.active .page-link {
    background: linear-gradient(135deg,#325aca,#1e3a96) !important;
    border-color: #325aca !important;
    color: #fff !important;
}
.page-item.disabled .page-link { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-3) !important; }

/* ═══════════════════════════════════════════════════════
   COLLAPSE / COLLAPSIBLE CARDS
═══════════════════════════════════════════════════════ */
.collapse, .collapsing { visibility: visible !important; }

.card-header.collapsed { border-bottom: none !important; }
.card-header:has(+ .collapse:not(.show)) { border-bottom: none !important; }
.collapse .card-header { border-bottom: none !important; }

a[data-toggle="collapse"].card-header,
button[data-toggle="collapse"].card-header { display: flex !important; align-items: center; text-decoration: none !important; }
a[data-toggle="collapse"].card-header::after,
button[data-toggle="collapse"].card-header::after {
    content: '';
    flex-shrink: 0; margin-left: auto;
    width: 1rem; height: 1rem;
    background-color: var(--text-3);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") no-repeat center / contain;
    transition: transform .2s ease;
    transform: rotate(180deg);
}
a[data-toggle="collapse"].card-header.collapsed::after,
button[data-toggle="collapse"].card-header.collapsed::after,
a[data-toggle="collapse"].card-header:has(+ .collapse:not(.show))::after,
button[data-toggle="collapse"].card-header:has(+ .collapse:not(.show))::after { transform: rotate(0deg); }

/* ═══════════════════════════════════════════════════════
   CHART.JS CONTAINERS
═══════════════════════════════════════════════════════ */
.chart-area { position: relative; height: 10rem; width: 100%; }
.chart-pie  { position: relative; height: 15rem; width: 100%; }
@media (min-width: 768px) {
    .chart-area { height: 20rem; }
    .chart-pie  { height: 15rem; }
}

/* ═══════════════════════════════════════════════════════
   DROPDOWNS (Bootstrap, page-level)
═══════════════════════════════════════════════════════ */
.no-arrow .dropdown-toggle::after { display: none; }
.no-arrow .dropdown-toggle { color: var(--icon) !important; text-decoration: none !important; }
.no-arrow .dropdown-toggle:hover { color: var(--text-2) !important; }

.dropdown-menu { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: .875rem !important; box-shadow: 0 8px 30px var(--shadow-lg) !important; padding: .25rem 0 !important; overflow: hidden; }
.dropdown-item { color: var(--text) !important; font-size: .875rem; padding: .625rem 1rem !important; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; transition: background .1s; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hover) !important; color: var(--text) !important; }
.dropdown-item.disabled, .dropdown-item:disabled { color: var(--text-3) !important; }
.dropdown-item i { color: var(--icon); }
.dropdown-header { color: var(--text-2) !important; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .5rem 1rem .25rem; }
.dropdown-divider { border-color: var(--border) !important; margin: .25rem 0; }

/* ═══════════════════════════════════════════════════════
   POPOVERS
═══════════════════════════════════════════════════════ */
.popover { border-radius: .875rem !important; border: 1px solid var(--border) !important; background: var(--surface) !important; box-shadow: 0 8px 30px var(--shadow-lg) !important; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; }
.popover-header { border-radius: .875rem .875rem 0 0 !important; background: var(--surface-2) !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; padding: .75rem 1rem !important; font-weight: 600 !important; }
.popover-body { color: var(--text) !important; padding: .875rem 1rem !important; }
.popover .arrow::before { border-color: transparent !important; }
.bs-popover-top    > .arrow::after, .bs-popover-auto[x-placement^="top"]    > .arrow::after { border-top-color:    var(--surface) !important; }
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--surface) !important; }
.bs-popover-left   > .arrow::after, .bs-popover-auto[x-placement^="left"]   > .arrow::after { border-left-color:   var(--surface) !important; }
.bs-popover-right  > .arrow::after, .bs-popover-auto[x-placement^="right"]  > .arrow::after { border-right-color:  var(--surface) !important; }
.bs-popover-top    > .arrow::before, .bs-popover-auto[x-placement^="top"]    > .arrow::before { border-top-color:    var(--border) !important; }
.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--border) !important; }
.bs-popover-left   > .arrow::before, .bs-popover-auto[x-placement^="left"]   > .arrow::before { border-left-color:   var(--border) !important; }
.bs-popover-right  > .arrow::before, .bs-popover-auto[x-placement^="right"]  > .arrow::before { border-right-color:  var(--border) !important; }

/* ═══════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════ */
.modal-content  { border: none !important; border-radius: 1.125rem !important; overflow: hidden; box-shadow: 0 24px 64px var(--shadow-lg) !important; background: var(--modal-bg) !important; }
.modal-header   { background: linear-gradient(135deg,#325aca 0%,#1a3079 100%); border: none !important; padding: 1.125rem 1.5rem !important; }
.modal-title    { color: #fff !important; font-weight: 600 !important; font-size: .9375rem !important; }
.modal-header .close { color: #fff !important; opacity: .65 !important; text-shadow: none !important; }
.modal-header .close:hover { opacity: 1 !important; }
.modal-body     { padding: 1.5rem !important; color: var(--text) !important; background: var(--modal-bg) !important; }
.modal-footer   { background: var(--modal-bg) !important; border-top: 1px solid var(--border) !important; padding: 1rem 1.5rem !important; }
.modal-backdrop { backdrop-filter: blur(4px); background: rgba(5,10,25,.65) !important; }
.modal-backdrop.show { opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════
   DICHIARAZIONE PAGE
═══════════════════════════════════════════════════════ */
.dichiarazione-header {
    margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    padding: 1.5rem;
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border);
    border-radius: .875rem;
    color: var(--text) !important;
}
.dichiarazione-header h1, .dichiarazione-header h4 { color: var(--text) !important; }

/* Stepper — base structural styles (must precede theme overrides) */
.steps { padding: 0; margin: 0; list-style: none; display: flex; overflow-x: auto; }
.steps .step:first-child { margin-left: auto; }
.steps .step:last-child  { margin-right: auto; }
.step:first-of-type .step-circle::before { display: none; }
.step:last-of-type .step-content { padding-right: 0; }
.step-content {
    box-sizing: content-box;
    display: flex; align-items: center; flex-direction: column;
    padding-top: .5rem; padding-right: 1rem;
}
.step-circle {
    font-size: 18px; position: relative;
    display: flex; justify-content: center; align-items: center;
    width: 3rem; height: 3rem;
    border-radius: 100%;
    border: 2px solid;
}
.step-circle::before {
    content: ''; display: block; position: absolute;
    top: 50%; left: -2px; height: 2px;
    transform: translate(-100%, -50%);
    background-color: currentColor;
}
.step-text { margin-top: .25em; }

/* Stepper — theme-aware colour overrides */
.step-circle { color: var(--text-3) !important; border-color: var(--border) !important; background-color: var(--surface) !important; }
.step-circle::before { background-color: var(--border) !important; color: var(--border) !important; }
.step-text { color: var(--text-3) !important; word-break: normal !important; white-space: nowrap; }
.step-content { width: 9rem !important; min-width: 9rem !important; max-width: 9rem !important; }
.step-circle::before { width: calc(9rem + 1rem - 3rem) !important; }
.step-active .step-circle  { color: #fff !important; background-color: #5cd4cc !important; border-color: #5cd4cc !important; }
.step-active .step-circle::before { background-color: var(--border) !important; color: var(--border) !important; }
.step-active .step-text    { color: #5cd4cc !important; }
.step-success .step-circle { color: var(--surface) !important; background-color: #5cd4cc !important; border-color: #5cd4cc !important; }
.step-success .step-circle::before { background-color: #5cd4cc !important; color: #5cd4cc !important; }
.step-success .step-text   { color: var(--text-2) !important; }

.currency-input { background-color: var(--surface) !important; color: var(--text) !important; }
.currency-input:focus { outline: none; box-shadow: none; }

.custom-file-label { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text) !important; border-radius: .625rem !important; }
.custom-file-label::after { background-color: var(--surface-2) !important; border-color: var(--input-border) !important; color: var(--text-2) !important; border-radius: 0 .625rem .625rem 0 !important; }

/* ═══════════════════════════════════════════════════════
   MOBILE SIDEBAR OVERLAY
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    #txm-sidebar {
        position: fixed !important; top: 0; left: 0;
        height: 100% !important; width: 260px !important;
        z-index: 300;
        transform: translateX(-260px);
        transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s !important;
        box-shadow: none;
    }
    #txm-sidebar.mobile-open { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,.5); }
    #txm-sidebar .txm-label, #txm-sidebar .txm-section-label { display: block !important; }
    #txm-sidebar .txm-nav-link { gap: .75rem !important; justify-content: flex-start !important; border-left-color: transparent; }
    #txm-sidebar .txm-nav-link.active { border-left-color: #60a5fa; }
    #txm-sidebar-collapse-btn { display: none !important; }

    /* Escape both <main> padding (15px) and container-fluid padding (15px) = 30px per side */
    .sm-fill { margin-left: -30px; margin-right: -30px; width: calc(100% + 60px); border-radius: 0 !important; }
}

/* ═══════════════════════════════════════════════════════
   IMPERSONATION BANNER
═══════════════════════════════════════════════════════ */
.txm-impersonate { display: flex; align-items: center; gap: .5rem; padding: .25rem .75rem; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); border-radius: .625rem; }
.txm-impersonate span { font-size: .8125rem; font-weight: 500; color: #b45309; }
html[data-theme="dark"] .txm-impersonate span { color: #fde68a; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .txm-impersonate span { color: #fde68a; } }

/* ═══════════════════════════════════════════════════════
   RETAINED UTILITIES (from taxman.css.old)
═══════════════════════════════════════════════════════ */

/* Card height helper for same-row chart cards */
.card-stretch { height: calc(100% - 30px); }

/* Utility text sizes */
.text-responsive { font-size: calc(100% + 1vw + 1vh); }
.text-small { display: inline-block; font-size: 12px; line-height: 1.3; }

/* Login page backgrounds */
.bg-login {
    margin: 0; height: 100vh;
    background: linear-gradient(135deg, #b2eaea 0%, #b2eaea 25%, #a0e6e6 25%, #a0e6e6 50%, #8cd9d9 50%, #8cd9d9 75%, #78cece 75%, #78cece 100%);
    background-repeat: no-repeat; background-size: 100% 100%;
    font-family: sans-serif;
}
.bg-gradient-login { background-color: #378a84; background-image: linear-gradient(180deg, #5cd4cc 10%, #378a84 100%); background-size: cover; }
.bg-login-image    { background: url("/img/login-hero.jpg") center / cover; }
.bg-register-image { background: url("/img/register-hero.jpg") center / cover; }
.bg-password-image { background: url("/img/recover-hero.jpg"); background-color: #6eded3; background-position: bottom; background-size: 80%; background-repeat: no-repeat; }
.bg-taxman-green   { background-color: #6eded3; }
.bg-blue           { background-color: #0d6efd !important; }

/* Animated clouds (login page) */
.clouds {
    z-index: -1; background-color: #6eded3;
    background-image: url("/img/clouds.png");
    position: absolute; width: 800%; height: 100%;
    background-size: 467px auto; background-position: 100% bottom; background-repeat: repeat-x;
    transform: translate3d(0,0,0);
    animation: animatedBackground 15s linear infinite;
}
@keyframes animatedBackground {
    0%   { transform: translate3d(0,0,0); }
    100% { transform: translate3d(-467px,0,0); }
}

/* Login logo (dark mode swaps to light version) */
.login-logo { display: inline-block; width: 111px; height: 30px; background-image: url("/img/logo_text_black.png"); background-size: contain; }
@media (prefers-color-scheme: dark) { .login-logo { background-image: url("/img/logo_text.png") !important; } }
html[data-theme="dark"] .login-logo { background-image: url("/img/logo_text.png") !important; }

/* Stealth links (unobtrusive anchors) */
a.stealth { color: var(--text-2); text-decoration: none; }

/* Invoice receipt image */
img.ricevuta { height: 400px; border: 1px solid var(--border); border-radius: 4px; }

/* Absolutely-positioned action button inside list items */
.retard-float-right { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }

/* Purple CTA button (used for service purchase actions) */
.btn-purple { color: #fff; background-color: #7b83ca; border-color: #7b83ca; border-radius: .625rem !important; }
.btn-purple:hover { color: #fff; background-color: #6269a2; border-color: #6269a2; }
.btn-purple:focus, .btn-purple.focus { color: #fff; background-color: #6269a2; border-color: #6269a2; box-shadow: 0 0 0 0.2rem rgba(98,105,162,.5); }
.btn-purple:not(:disabled):not(.disabled):active { color: #fff; background-color: #6269a2; border-color: #6269a2; }

/* Form utilities */
.help-block    { margin-bottom: 1rem; }
.invalid-feedback { display: block; margin-bottom: 1rem; }
.form-control-outline { background-color: white !important; border-color: #9F9F9F !important; }
.form-control-user { border-radius: 0 !important; }
.btn-user { border-radius: 6px !important; }
.btn-black { background-color: black; color: white; }

/* Text colour utilities */
.text-taxman-green { color: #6eded3 !important; }
.text-black, .text-darker, .text-always-black { color: black; }
@media (prefers-color-scheme: dark) { .text-black { color: white !important; } }
html[data-theme="dark"] .text-black { color: white !important; }

/* Profile page */
.profile h5 { font-weight: bold; margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* List accessory (coloured badge inside list items) */
.list-accessory { background-color: var(--surface); }
.list-group-item.active .list-accessory { background-color: #325aca; }

/* Stripe payment element */
.StripeElement { box-sizing: border-box; height: 40px; padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; background-color: white; box-shadow: 0 1px 3px 0 #e6ebf1; transition: box-shadow 150ms ease; }
.StripeElement--focus   { box-shadow: 0 1px 3px 0 #cfd7df; }
.StripeElement--invalid { border-color: #fa755a; }
.StripeElement--webkit-autofill { background-color: #fefde5 !important; }

/* DataTables checkbox cursor */
table.dataTable.dt-checkboxes-select tbody tr,
table.dataTable thead th.dt-checkboxes-select-all,
table.dataTable tbody td.dt-checkboxes-cell { cursor: default !important; }

/* Fatture send button full-width on narrow screens */
@media (max-width: 920px) { .send_fattura { width: 100%; margin-bottom: .5em; } }

/* Pratiche tipo picker minimum width */
@media (min-width: 576px) { #tipo_pratica { min-width: 180px; } }

/* Responsive width/height utilities */
@media (min-width: 992px) {
    .w-lg-100 { width: 100% !important; }
    .w-lg-75  { width: 75%  !important; }
    .w-lg-50  { width: 50%  !important; }
    .w-lg-25  { width: 25%  !important; }
    .h-lg-100 { height: 100% !important; }
    .h-lg-75  { height: 75%  !important; }
    .h-lg-50  { height: 50%  !important; }
    .h-lg-25  { height: 25%  !important; }
}
@media (min-width: 1280px) {
    .col-xxl-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
}

/* Custom switch (big variant) */
.custom-switch.big .custom-control-label { padding-left: .65em; }
.custom-switch.big .custom-control-label::before { left: -2.25rem; width: 2.4rem; height: 1.5rem; pointer-events: all; border-radius: 3rem; top: -1px; }
.custom-switch.big .custom-control-label::after { top: calc(0.2rem - 1px); left: calc(-2.25rem + 2px); width: calc(1.4rem - 4px); height: calc(1.4rem - 4px); background-color: #b7b9cc; border-radius: 1rem; transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.custom-switch.big .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; transform: translateX(0.9rem); }

/* bootstrap-select compatibility */
.bootstrap-select .dropdown-menu { max-width: 100% !important; }

/* form-control-sm extra padding (kept from old dark-mode fix, now always applied) */
.form-control-sm { padding-top: 4px !important; padding-bottom: 4px !important; }

/* icon-circle (SB Admin 2 compatible) */
.icon-circle {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Smaller font weight utility */
.smaller { font-weight: 400; }

/* hr */
hr { border-top: 1px solid var(--border); }

/* ── text-gray-* overrides ─────────────────────────────────────────────────
   SB Admin 2 used these for text on white cards. Tailwind CDN generates them
   with hardcoded dark values (#1f2937 etc.) which become invisible in dark mode.
   Map to our theme tokens so they adapt to both themes. */
.text-gray-100 { color: var(--text-3)  !important; }
.text-gray-200 { color: var(--text-3)  !important; }
.text-gray-300 { color: var(--text-3)  !important; }
.text-gray-400 { color: var(--text-3)  !important; }
.text-gray-500 { color: var(--text-2)  !important; }
.text-gray-600 { color: var(--text-2)  !important; }
.text-gray-700 { color: var(--text)    !important; }
.text-gray-800 { color: var(--text)    !important; }
.text-gray-900 { color: var(--text)    !important; }