:root{
    --navy:#12213E; --navy-light:#1C3157; --navy-lighter:#28406e;
    --gold:#C99A44; --gold-dark:#A87F35; --gold-bg:#FBF3E4;
    --bg:#F3F4F7; --surface:#FFFFFF; --border:#E4E6EC; --border-strong:#D3D6E0;
    --text:#16213A; --text-secondary:#616B82; --text-muted:#98A0B3;
    --success:#1F8A4C; --success-bg:#E8F6EE;
    --danger:#B3261E; --danger-bg:#FBEAE9;
    --warning:#B45309; --warning-bg:#FDF1E1;
    --radius:10px; --radius-lg:16px;
    /* Başlıq mətni rəngi — çox yerdə "var(--navy)" birbaşa mətn rəngi kimi
       işlədilib, amma --navy eyni zamanda sidebar/hero/düymə FONU üçün də
       istifadə olunur. Qaranlıq rejimdə fon rolunda olan --navy dəyişməməlidir
       (artıq tünddür, brendə uyğundur), amma mətn rolunda olanda açıq rəngə
       keçməlidir — ona görə ayrıca token: açıq rejimdə --navy-ə bərabərdir,
       qaranlıq rejimdə isə #app[data-theme=dark] bloku onu ayrıca dəyişir. */
    --heading:var(--navy);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--text);
    font-variant-numeric: tabular-nums;
    min-height:100vh; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brand{font-family:'Manrope',sans-serif;}
  button{font-family:inherit; cursor:pointer;}
  input,select{font-family:inherit;}
  ::selection{background:var(--gold-bg);}

  /* ===== LOGIN ===== */
  #login-screen{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: var(--navy); position:relative; overflow:hidden;
  }
  #login-screen::before{
    content:''; position:absolute; inset:0;
    background-image: radial-gradient(circle at 20% 30%, rgba(201,154,68,0.08) 0%, transparent 45%),
                       radial-gradient(circle at 80% 75%, rgba(201,154,68,0.06) 0%, transparent 40%);
  }
  .login-card{
    position:relative; background:var(--surface); border-radius:var(--radius-lg);
    padding:2.75rem 2.5rem 2.25rem; width:100%; max-width:420px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
  }
  .login-mark{
    width:52px; height:52px; border-radius:14px; background:var(--navy);
    display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem;
    color:var(--gold); font-family:'Manrope'; font-weight:800; font-size:22px;
  }
  .login-card h1{font-size:24px; font-weight:800; color:var(--navy); margin-bottom:0.35rem;}
  .login-card p.sub{color:var(--text-secondary); font-size:14.5px; margin-bottom:1.85rem; line-height:1.5;}
  .user-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:1.5rem;}
  .user-btn{
    display:flex; flex-direction:column; align-items:flex-start; gap:8px;
    padding:14px 14px; border:1.5px solid var(--border); border-radius:var(--radius);
    background:var(--surface); text-align:left; transition:border-color .15s, background .15s;
  }
  .user-btn:hover{border-color:var(--gold); background:var(--gold-bg);}
  .user-btn.selected{border-color:var(--gold); background:var(--gold-bg); box-shadow:0 0 0 3px rgba(201,154,68,0.18);}
  .user-avatar{
    width:34px; height:34px; border-radius:50%; background:var(--navy); color:var(--gold);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
  }
  .user-btn .uname{font-weight:600; font-size:14.5px; color:var(--text);}
  .user-btn .urole{font-size:12px; color:var(--text-muted);}
  #login-btn{
    width:100%; padding:13px; background:var(--navy); color:#fff; border:none;
    border-radius:var(--radius); font-weight:700; font-size:15px; letter-spacing:0.01em;
    transition:background .15s; opacity:0.5; pointer-events:none;
  }
  #login-btn.ready{opacity:1; pointer-events:auto;}
  #login-btn.ready:hover{background:var(--navy-light);}
  .login-foot{margin-top:1.25rem; font-size:12px; color:var(--text-muted); text-align:center;}

  /* ===== APP SHELL ===== */
  #app{display:none; min-height:100vh;}
  #app.active{display:flex;}
  .sidebar{
    width:230px; background:var(--navy); color:#fff; flex-shrink:0;
    display:flex; flex-direction:column; padding:1.5rem 1rem;
    position:sticky; top:0; height:100vh;
  }
  /* Nav item count has grown (Komissiya, Xərclər, Mənfəət-Zərər, İşçi
     məhsuldarlığı, etc. all added over time) and the sidebar itself has a
     fixed height:100vh with no scroll of its own — once the brand + all
     nav buttons + the user/logout footer together exceed the viewport
     height, everything below the visible area became unreachable
     (notably #logout-btn), with no way to scroll down to it. Making just
     the middle <nav> scrollable (flex:1 so it claims the space between
     the fixed brand header and the fixed footer, min-height:0 so a flex
     child is actually allowed to shrink below its content size instead of
     forcing the whole sidebar taller than the viewport, overflow-y:auto
     for the scrollbar itself) keeps the brand and Çıxış et/logout footer
     always pinned in place and reachable, on every screen size, no matter
     how many nav items get added later. */
  .sidebar nav{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;}
  /* Default OS/browser scrollbar (light grey) looked jarring against the
     dark navy sidebar. Thin, translucent-white track/thumb matching the
     sidebar's existing rgba(255,255,255,..) accents used elsewhere in this
     same panel (border, muted text) — subtle at rest, a bit brighter on
     hover so it's still easy to grab. Firefox uses the two-value
     scrollbar-color shorthand (thumb, track); WebKit browsers (Chrome/Edge,
     what Laragon's default test browser and most users run) use the
     ::-webkit-scrollbar-* pseudo-elements instead. */
  .sidebar nav{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.28) transparent;}
  .sidebar nav::-webkit-scrollbar{width:6px;}
  .sidebar nav::-webkit-scrollbar-track{background:transparent;}
  .sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.28); border-radius:100px;}
  .sidebar nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.45);}
  .sidebar-brand{display:flex; align-items:center; gap:10px; padding:0 0.5rem 1.75rem; flex-shrink:0;}
  #sidebar-close-btn{
    margin-left:auto; width:26px; height:26px; border-radius:7px; border:none;
    background:none; color:rgba(255,255,255,0.45); display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:background .12s, color .12s;
  }
  #sidebar-close-btn:hover{background:rgba(255,255,255,0.08); color:#fff;}
  .sidebar-brand .mark{
    width:36px; height:36px; border-radius:50%; background:rgba(201,154,68,0.15);
    color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px;
    overflow:hidden; flex-shrink:0;
  }
  .sidebar-brand .mark img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
  .sidebar-brand .name{font-weight:800; font-size:16px; letter-spacing:-0.01em;}
  .sidebar-brand .name span{display:block; font-family:'Inter'; font-weight:500; font-size:11px; color:rgba(255,255,255,0.45); margin-top:1px;}
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
    color:rgba(255,255,255,0.68); font-size:14px; font-weight:500; margin-bottom:2px;
    background:none; border:none; width:100%; text-align:left; transition:background .12s, color .12s;
  }
  .nav-item .ic{width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
  .nav-item.active{background:var(--navy-lighter); color:#fff;}
  .nav-item.active .ic svg{stroke:var(--gold);}
  .sidebar-foot{margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.1); flex-shrink:0;}
  .sidebar-user{display:flex; align-items:center; gap:10px; padding:8px; border-radius:9px;}
  .sidebar-user .user-avatar{width:32px; height:32px; font-size:12px; background:rgba(201,154,68,0.18); color:var(--gold);}
  .sidebar-user .uname{font-size:13.5px; font-weight:600; color:#fff;}
  .sidebar-user .urole{font-size:11px; color:rgba(255,255,255,0.45);}
  #logout-btn{
    margin-top:8px; width:100%; background:none; border:none; color:rgba(255,255,255,0.5);
    font-size:12.5px; text-align:left; padding:6px 8px; border-radius:7px; transition:background .12s, color .12s;
  }
  #logout-btn:hover{background:rgba(255,255,255,0.06); color:#fff;}

  .main{flex:1; min-width:0; padding:2rem 2.5rem 3rem;}
  .topbar{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:10px;}
  .topbar h2{font-size:22px; font-weight:800; color:var(--heading);}
  .topbar .date{font-size:13px; color:var(--text-muted);}
  .view{display:none;}
  .view.active{display:block;}

  /* ===== MONTH TABS ===== */
  .month-tabs{display:flex; gap:6px; margin-bottom:1.1rem; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:0;}
  .month-tab{
    padding:8px 14px; font-size:13px; font-weight:600; color:var(--text-secondary); background:none; border:none;
    border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:color .12s, border-color .12s;
  }
  .month-tab:hover{color:var(--heading);}
  .month-tab.active{color:var(--heading); border-color:var(--gold);}
  .month-tab .n{display:inline-block; margin-left:6px; font-size:11px; background:var(--bg); color:var(--text-muted); padding:1px 6px; border-radius:100px;}
  .month-tab.active .n{background:var(--gold-bg); color:var(--gold-dark);}

  /* ===== DASHBOARD ===== */
  .hero-strip{
    background:var(--navy); border-radius:var(--radius-lg); padding:1.75rem 2rem;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
    margin-bottom:1.5rem; position:relative; overflow:hidden;
  }
  .hero-strip::after{
    content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,154,68,0.16) 0%, transparent 70%);
  }
  .hero-main{position:relative;}
  .hero-main .label{color:rgba(255,255,255,0.55); font-size:13px; font-weight:500; margin-bottom:6px;}
  .hero-main .value{color:#fff; font-family:'Manrope'; font-weight:800; font-size:38px; letter-spacing:-0.01em;}
  .hero-main .value .cur{font-size:20px; color:var(--gold); margin-left:6px; font-weight:700;}
  .hero-support{display:flex; gap:2rem; position:relative; flex-wrap:wrap;}
  .hero-support .stat .label{color:rgba(255,255,255,0.5); font-size:12px; margin-bottom:5px;}
  .hero-support .stat .value{color:#fff; font-size:19px; font-weight:700; font-family:'Manrope';}
  .hero-support .stat.owe .value{color:#F0B7B0;}
  .hero-support .stat.owed .value{color:#9FDBB8;}

  .kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:1.75rem;}
  .kpi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.25rem;}
  .kpi-card .label{font-size:12.5px; color:var(--text-secondary); margin-bottom:8px; font-weight:500;}
  .kpi-card .value{font-size:21px; font-weight:700; font-family:'Manrope'; color:var(--heading);}
  .kpi-card .value.pos{color:var(--success);}
  .kpi-card .value.neg{color:var(--danger);}

  .stats-panel{margin-bottom:1.25rem;}
  .stats-chart-wrap{padding:1.1rem 1.4rem 1.4rem;}
  .stats-chart{width:100%; height:auto; display:block;}
  .stats-legend{display:flex; gap:14px; font-size:12px; color:var(--text-secondary);}
  .stats-legend-item{display:inline-flex; align-items:center; gap:6px;}
  .stats-legend-item i{width:10px; height:10px; border-radius:3px; display:inline-block;}
  .stats-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:1.25rem;}
  @media (max-width:900px){ .stats-grid-2{grid-template-columns:1fr;} }
  .stats-hbar-row{display:grid; grid-template-columns:140px 1fr 92px; align-items:center; gap:10px; padding:7px 0;}
  .stats-hbar-label{font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .stats-hbar-track{background:var(--bg); border-radius:6px; height:14px; overflow:hidden;}
  .stats-hbar-fill{height:100%; border-radius:6px;}
  .stats-hbar-value{font-size:12.5px; color:var(--text-secondary); text-align:right; font-variant-numeric:tabular-nums;}
  .stats-empty{padding:1.5rem; text-align:center; color:var(--text-muted); font-size:13px;}

  .panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.25rem;}
  .panel-head{display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.4rem; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:8px;}
  .panel-head h3{font-size:15px; font-weight:700; color:var(--heading);}
  .panel-head .count{font-size:12.5px; color:var(--text-muted);}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{
    text-align:left; padding:9px 1rem; font-size:11px; font-weight:600;
    color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0; background:var(--surface);
  }
  td{padding:10px 1rem; border-bottom:1px solid var(--border); color:var(--text); white-space:nowrap;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:#FAFAFB;}
  td.num{font-variant-numeric:tabular-nums; font-weight:600; text-align:right;}
  td.muted{color:var(--text-muted);}
  .empty-row td{color:var(--text-muted); text-align:center; padding:2.25rem; font-style:normal;}

  .badge{display:inline-flex; align-items:center; padding:3px 9px; border-radius:100px; font-size:11px; font-weight:600; white-space:nowrap;}
  .badge.paid{background:var(--success-bg); color:var(--success);}
  .badge.pending{background:var(--warning-bg); color:var(--warning);}
  .badge.partial{background:var(--gold-bg); color:var(--gold-dark);}

  /* ===== TICKETS VIEW ===== */
  .ticket-toolbar{display:flex; gap:10px; margin-bottom:1rem; flex-wrap:wrap;}
  .btn{
    padding:9px 16px; border-radius:8px; font-size:13.5px; font-weight:600; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--text); transition:background .12s, border-color .12s; white-space:nowrap;
  }
  .btn:hover{background:#F7F7F9;}
  .btn.primary{background:var(--navy); color:#fff; border-color:var(--navy);}
  .btn.primary:hover{background:var(--navy-light);}
  .btn.sm{padding:6px 11px; font-size:12.5px;}
  /* Destructive actions (e.g. permanent account deletion) — visually
     distinct from a normal/primary button so a "Sil" click reads as
     irreversible at a glance, not just another routine action. */
  .btn.danger{background:var(--danger-bg); color:var(--danger); border-color:var(--danger);}
  .btn.danger:hover{background:var(--danger); color:#fff;}
  /* #search-input (əsas bilet siyahısı) ilə eyni qutuya sarılan hər axtarış
     input-i (.search-wrap içindəki) — məs. Fəaliyyət jurnalındakı
     #auditlog-search — əvvəllər YALNIZ #search-input ID-sinə bağlı olduğu
     üçün heç bir stil almırdı və brauzerin çılpaq defolt görünüşü ilə
     (sərhədsiz, boşluqsuz) çıxırdı. İndi wrapper class-ı üzərindən ümumi
     qaydaya çevrilib ki, gələcəkdə əlavə olunan hər .search-wrap axtarışı
     avtomatik eyni görünsün. */
  #search-input, .search-wrap input[type="text"]{
    flex:1; min-width:180px; padding:9px 14px; border:1px solid var(--border-strong); border-radius:8px;
    font-size:13.5px; background:var(--surface); color:var(--text);
  }
  #search-input:focus, .search-wrap input[type="text"]:focus{outline:none; border-color:var(--gold);}
  /* Eyni səbəb: .filter-select əvvəllər yalnız <select>-lərə bağlı idi,
     amma Fəaliyyət jurnalındakı başlanğıc/bitmə tarix qutuları
     <input type="date" class="filter-select"> kimi eyni class-ı daşıyır —
     nəticədə həmin iki tarix qutusu yanındakı <select>-lərdən fərqli
     hündürlük/padding ilə, çılpaq brauzer görünüşündə çıxırdı. İndi hər
     iki element növü eyni qaydadan keçir ki, süzgəc cərgəsi bir-birinə
     bənzəsin. */
  select.filter-select, input.filter-select{
    padding:9px 12px; border:1px solid var(--border-strong); border-radius:8px;
    font-size:13.5px; background:var(--surface); color:var(--text); line-height:1.3;
  }
  input.filter-select:focus{outline:none; border-color:var(--gold);}

  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(18,33,62,0.45); z-index:50;
    align-items:flex-start; justify-content:center; padding:4vh 20px; overflow-y:auto;
  }
  .modal-overlay.active{display:flex;}
  .modal{
    background:var(--surface); border-radius:var(--radius-lg); padding:1.75rem 2rem; width:100%; max-width:680px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,0.35);
  }
  .modal h3{font-size:18px; font-weight:800; color:var(--heading); margin-bottom:0.35rem;}
  .modal .sec-label{font-size:11.5px; font-weight:700; color:var(--gold-dark); text-transform:uppercase; letter-spacing:0.04em; margin:1.25rem 0 0.65rem;}
  .modal .sec-label:first-of-type{margin-top:1rem;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
  .form-grid.cols3{grid-template-columns:1fr 1fr 1fr;}
  .form-field{display:flex; flex-direction:column; gap:5px;}
  .form-field.full{grid-column:1 / -1;}
  .form-field label{font-size:12px; font-weight:600; color:var(--text-secondary);}
  .form-field input, .form-field select{
    padding:8px 10px; border:1px solid var(--border-strong); border-radius:8px; font-size:13px; color:var(--text);
    background:var(--surface);
  }
  .form-field input:focus, .form-field select:focus{outline:none; border-color:var(--gold);}
  .form-field .err{font-size:11px; color:var(--danger); display:none;}
  .form-field.invalid input, .form-field.invalid select{border-color:var(--danger);}
  .form-field.invalid .err{display:block;}
  /* 2026-10-12: kiçik ödəniş modalları (Tur ödənişi əlavə/redaktə, tədarükçüyə ödəniş,
     bilet geri qaytarma). Grid sütunları minmax(0,1fr) + sahələr min-width:0 —
     date/number inputun daxili minimal eni sütunu modaldan kənara itələmir. */
  .modal.modal-compact{max-width:460px;}
  .modal-compact .form-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .modal-compact .form-field{min-width:0;}
  .modal-compact .form-field input, .modal-compact .form-field select{width:100%; min-width:0; max-width:100%;}
  .modal-compact .modal-actions{flex-wrap:wrap;}
  @media (max-width:480px){
    .modal.modal-compact{padding:1.25rem 1rem;}
    .modal-compact .form-grid{grid-template-columns:minmax(0, 1fr);}
    .modal-compact .modal-actions{margin:1.25rem -1rem -1.25rem; padding:12px 1rem;}
  }
  /* Sticky footer — uzun formalarda (əsasən bilet modalı) Yadda saxla/Ləğv et
     düymələri scroll edəndə də görünən qalsın. Mənfi kənar boşluqları
     .modal-un öz padding-inə (1.75rem 2rem) qədər "sızdırıb" tam eninə
     çatdırır, sonra eyni padding-i özü bərpa edir — vizual olaraq əvvəlki
     yerində görünür, sadəcə indi modalın altına yapışıb qalır. Qısa
     modallarda (scroll olmadıqda) sticky-nin heç bir görünən effekti yoxdur,
     yalnız üstündə incə ayırıcı xətt əlavə olunur. */
  .modal-actions{
    display:flex; justify-content:flex-end; gap:10px;
    position:sticky; bottom:0; z-index:2; background:var(--surface);
    margin:1.6rem -2rem -1.75rem; padding:14px 2rem; border-top:1px solid var(--border);
  }

  .row-actions{display:flex; gap:6px;}
  .icon-btn{
    width:27px; height:27px; border-radius:7px; border:1px solid var(--border); background:var(--surface);
    display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:background .12s;
  }
  .icon-btn:hover{background:#F2F3F5;}
  .icon-btn.mark-paid:hover{background:var(--success-bg); color:var(--success); border-color:var(--success);}

  .table-scroll{overflow-x:auto; max-height:560px; overflow-y:auto;}

  /* ===== DEBT CENTER ===== */
  .debt-columns{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;}
  @media (max-width:900px){.debt-columns{grid-template-columns:1fr;}}
  .debt-total{padding:1.1rem 1.4rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:baseline;}
  .debt-total .amt{font-size:20px; font-weight:800; font-family:'Manrope';}
  .debt-list{max-height:420px; overflow-y:auto;}
  .debt-list-row{display:flex; justify-content:space-between; align-items:center; padding:11px 1.4rem; border-bottom:1px solid var(--border);}
  .debt-list-row:last-child{border-bottom:none;}
  .debt-list-row .who{font-size:13.5px; font-weight:600; color:var(--text);}
  .debt-list-row .meta{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
  .debt-list-row .amt{font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;}

  /* ===== MANAT BALANSI ===== */
  .balance-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:1.25rem;}
  @media (max-width:900px){.balance-grid{grid-template-columns:1fr;}}
  /* Fixed-column grid, NOT flex space-between: with space-between, the
     amount input's on-screen position depended on how wide the account
     name happened to be (equal gaps get distributed between whatever
     children exist, not fixed column positions), so a long name visibly
     shifted the input/currency/delete controls of ITS OWN row relative to
     every other row. A CSS grid with explicit column tracks gives every
     row the SAME pixel-for-pixel column boundaries regardless of content
     length in any one row — a long or short name only ever affects its
     own name cell (wrapping there, never truncated), never the position
     of the amount/currency/delete columns. Columns: Account name | Amount
     | Currency | Delete-or-Archive (the 4th column is simply empty on a
     row with no button — grid-template-columns still reserves its track,
     so columns 1-3 stay aligned with rows that DO have a button). */
  .card-row{display:grid; grid-template-columns:minmax(0,1fr) 110px 40px auto; align-items:center; gap:10px; padding:9px 1.4rem; border-bottom:1px solid var(--border);}
  .card-row:last-child{border-bottom:none;}
  .card-row .cname{font-size:13.5px; color:var(--text); font-weight:500; overflow-wrap:break-word; min-width:0;}
  .card-row input{
    width:100%; box-sizing:border-box; text-align:right; padding:6px 10px; border:1px solid var(--border-strong); border-radius:7px; font-size:13.5px;
  }
  .card-row input:focus{outline:none; border-color:var(--gold);}

  /* Multi-field flexible rows (2026-09-26 fix) — for a row of SEVERAL
     free-sized inputs + a remove button (əlavə sərnişin, RUB tədarükçüsü),
     as opposed to .card-row above which is a FIXED 4-column grid built for
     exactly one [name | 110px input | 40px label | button] shape. Reusing
     .card-row for these mismatched rows left them stuck in that same
     4-column grid (an inline "flex-wrap:wrap" style has no effect on a
     display:grid container) — fields got crammed into 110px/40px columns
     regardless of how many there actually were, and every input inherited
     `text-align:right` meant for a single money figure. .field-row is a
     genuine flex row: each input keeps its own inline flex/min-width and
     wraps onto a new line as a whole group when the modal is narrow. */
  .field-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:9px 1.4rem; border-bottom:1px solid var(--border);}
  .field-row:last-child{border-bottom:none;}
  .field-row input, .field-row select{
    box-sizing:border-box; text-align:left; padding:6px 10px; border:1px solid var(--border-strong); border-radius:7px; font-size:13.5px; color:var(--text); background:var(--surface);
  }
  .field-row input:focus, .field-row select:focus{outline:none; border-color:var(--gold);}
  .balance-summary-row{display:flex; justify-content:space-between; padding:12px 1.4rem; font-size:13.5px;}
  .balance-summary-row.total{font-weight:800; font-size:16px; color:var(--heading); border-top:1px solid var(--border); padding-top:14px;}
  .balance-summary-row .lbl{color:var(--text-secondary);}
  .balance-summary-row.total .lbl{color:var(--heading);}

  /* Report column picker rows (Excel hesabatları → "Sütunlar") — a column
     label can be long and wrap to 2-3 lines (e.g. "Tədarükçüyə Ödədim
     (AZN)" plus the "⚠ daxili" badge), so this is a plain flex row rather
     than the fixed-grid .card-row above (which was purpose-built for a
     DIFFERENT, unrelated 4-column account-balance layout and mismatched
     the ↑/↓ buttons to two very different widths when reused here). The
     label wraps freely while the ↑/↓ buttons stay a fixed, equal width and
     vertically centered against the row regardless of how many lines the
     label takes. */
  .rpt-col-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 1.4rem; border-bottom:1px solid var(--border);}
  .rpt-col-row:last-child{border-bottom:none;}
  .rpt-col-row .rpt-col-actions{display:flex; gap:6px; flex-shrink:0;}
  .rpt-col-row .rpt-col-actions .btn{width:34px; padding:6px 0; text-align:center;}

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(0); z-index:80;
    background:var(--navy); color:#fff; padding:11px 20px; border-radius:9px; font-size:13.5px; font-weight:500;
    box-shadow:0 12px 28px -8px rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}

  @media (max-width:760px){
    .sidebar{position:fixed; z-index:40; transform:translateX(-100%); transition:transform .2s; height:100vh;}
    .sidebar.open{transform:translateX(0);}
    .main{padding:1.25rem 1.25rem 2.5rem;}
    #menu-toggle{display:flex !important;}
    /* Bildiriş zəngi (+ nişanı) həmişə fixed, sağ yuxarı küncdə üzür —
       .topbar-ın öz sıra düzülüşü (flex + space-between) bunu HESABA
       ALMIR, ona görə uzun başlıq (məs. "İstifadəçilər və icazələr") və ya
       ikinci element (illik <select>, "+ Yeni ..." düyməsi s.) bəzi
       görünüşlərdə tam sağ kənara qədər uzanıb zəngin altına düşürdü —
       eynən əvvəllər #menu-toggle-in sol yuxarı küncdə başlığın üstünə
       düşdüyü kimi. Sağdan boşluq ayırıb (zəngin eni + aralıq) ki, topbar
       öz məzmununu bu zonaya girmədən sətirə bölsün/kiçiltsin. */
    .topbar{padding-right:50px;}
    /* Mobil ekranda menyu artıq üst-üstə düşən (overlay) panel kimi açılıb-
       bağlanır və bunun üçün ekranın özündə kifayət qədər imkan var (yuxarı
       #menu-toggle + panelin kənarına toxunmaqla bağlanma), ona görə
       sidebar-brand-in içindəki bağlama düyməsi mobil enində gizlədilir. */
    #sidebar-close-btn{display:none;}
    .form-grid, .form-grid.cols3{grid-template-columns:1fr;}
    /* Narrower fixed columns on phone width — still a grid (never back to
       flex space-between), so alignment stays consistent row-to-row; just
       tighter so the amount input/currency/delete button don't crowd a
       narrow screen. */
    .card-row{grid-template-columns:minmax(0,1fr) 88px 32px auto; gap:6px; padding:9px 1rem;}
    .card-row input{padding:6px 6px; font-size:13px;}
    .rpt-col-row{padding:9px 1rem; gap:6px;}
  }
  /* Künclə düz-bərabər (heç bir kənar boşluğu olmadan) yapışıq görünürdü.
     Qeyd: bunu əvvəlcə fixed mövqeli edib bildiriş zənginin yanına
     "üzən" düymə kimi qurmuşdum, amma mobil enində #main-in özünün üst
     paddinqi bunu nəzərə almadığı üçün "Dashboard" başlığının üstünə
     düşürdü (test zamanı screenshot-da göründü) — ona görə əvvəlki axın-
     daxili (in-flow) mövqe saxlanılıb, sadəcə kənar boşluqlar (margin)
     əlavə olunub ki, künc konturuna toxunmasın, və görüntüsü bildiriş
     zənginin dairəvi/kölgəli/hover effektli stilinə uyğunlaşdırılıb. */
  #menu-toggle{
    display:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--text-secondary);
    align-items:center; justify-content:center;
    margin:16px 0 12px 20px;
    box-shadow:0 4px 14px -6px rgba(0,0,0,0.18);
    transition:border-color .15s, color .15s, background .15s;
  }
  #menu-toggle:hover{color:var(--text); border-color:var(--gold);}
  /* Masaüstündə menyunu tam gizlədib yenidən açmaq (daimi aç/bağla) — mobil
     overlay davranışından asılı olmayan, ayrıca sinif (#app.sidebar-collapsed).
     Bağlı olanda .sidebar özü display:none olur və onu yenidən açmaq üçün
     yuxarı küncdəki #menu-toggle (normalda yalnız mobil enində görünən)
     masaüstündə də görünən olur. */
  @media (min-width:761px){
    #app.sidebar-collapsed .sidebar{display:none;}
    #app.sidebar-collapsed #menu-toggle{display:flex;}
  }

  /* ===== Bildiriş zəngi/paneli — bütün görünüşlərdə sabit (fixed), sağ
     yuxarı künc. Gələcəkdə başqa bildiriş növləri əlavə olunsa da eyni
     düymə/panel istifadə olunacaq (bax notifications_list.php). */
  .notif-bell{
    position:fixed; top:16px; right:20px; z-index:60;
    width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--text-secondary);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px -6px rgba(0,0,0,0.18);
  }
  .notif-bell:hover{color:var(--text); border-color:var(--gold);}
  .notif-badge{
    position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
    border-radius:100px; background:var(--danger); color:#fff; font-size:10.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px var(--surface);
  }
  .notif-panel{
    position:fixed; top:60px; right:20px; width:340px; max-width:calc(100vw - 32px);
    max-height:min(70vh, 460px); overflow-y:auto; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius-lg); z-index:60;
    box-shadow:0 24px 60px -20px rgba(0,0,0,0.35);
  }
  .notif-panel-head{
    padding:14px 16px; font-weight:800; font-size:14px; border-bottom:1px solid var(--border);
    position:sticky; top:0; background:var(--surface);
  }
  .notif-list{padding:6px;}
  .notif-empty{padding:20px 16px; text-align:center; color:var(--text-muted); font-size:13px;}
  .notif-item{
    display:block; width:100%; text-align:left; background:none; border:none; border-radius:9px;
    padding:10px 10px; cursor:pointer; transition:background .12s;
  }
  .notif-item:hover{background:var(--bg);}
  .notif-item .n-title{font-size:13px; font-weight:600; color:var(--text);}
  .notif-item .n-sub{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
  .notif-item .n-badge{
    display:inline-block; font-size:10.5px; font-weight:700; color:var(--warning);
    background:var(--warning-bg); padding:1px 7px; border-radius:100px; margin-bottom:4px;
  }
  /* Mənfi marja digər (vaxt əsaslı) xatırlatmalardan fərqli olaraq artıq baş
     vermiş maliyyə itkisidir — eyni sarı "warning" rənginə qarışmasın deyə
     daha ciddi qırmızı ("danger") tonda ayrılır. */
  .notif-item .n-badge.danger{color:var(--danger); background:var(--danger-bg);}
  .checkin-flag{margin-left:5px; font-size:12px; opacity:0.55;}
  .checkin-flag.due{opacity:1; filter:drop-shadow(0 0 0 var(--warning)); color:var(--warning);}
  @media (max-width:480px){
    .notif-bell{top:10px; right:10px;}
    .notif-panel{top:54px; right:10px; left:10px; width:auto;}
  }

  .login-error{
    background:var(--danger-bg); color:var(--danger); padding:10px 14px; border-radius:8px;
    font-size:13px; margin-bottom:1rem; font-weight:500;
  }
  .conflict-banner{
    background:var(--warning-bg); color:var(--warning); padding:10px 16px; border-radius:8px;
    font-size:13px; margin-bottom:1rem; font-weight:500; display:none;
  }
  .conflict-banner.show{display:block;}
  /* 2026-10-29: hər bölmədə və açıq pəncərənin (modal, z-index 50) üstündə görünür; səhifə sürüşdürülsə də ekranın yuxarısında qalır. */
  .conflict-banner{
    position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:300; margin:0;
    width:max-content; max-width:min(720px, calc(100vw - 32px)); box-sizing:border-box;
    box-shadow:0 8px 24px rgba(0,0,0,0.15); cursor:pointer; line-height:1.45;
  }
  .loading-overlay{
    position:fixed; inset:0; background:rgba(243,244,247,0.7); z-index:100;
    display:flex; align-items:center; justify-content:center; font-size:13.5px; color:var(--text-secondary);
  }

  /* Password show/hide eye toggle — shared across login, setup, change-
     password, user modals, and the restore flow. */
  .pw-field-wrap{ position:relative; display:flex; align-items:center; }
  .pw-field-wrap input[type="password"],
  .pw-field-wrap input[type="text"]{
    width:100%; padding-right:38px; box-sizing:border-box;
  }
  .pw-toggle-btn{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:30px; height:30px; padding:0; border:none; background:transparent;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--text-muted); border-radius:6px;
  }
  .pw-toggle-btn:hover{ color:var(--text-secondary); background:var(--bg); }
  .pw-toggle-btn:focus-visible{ outline:2px solid var(--heading); outline-offset:1px; }
  .pw-toggle-btn svg{ width:18px; height:18px; pointer-events:none; }
  @media (max-width:480px){
    .pw-toggle-btn{ width:34px; height:34px; }
  }

  /* ===== QARANLIQ REJİM (dark mode) =====
     Yalnız #app (giriş etdikdən sonrakı əsas panel) daxilində aktivdir —
     login.php toxunulmaz qalır. <html data-theme="dark"> atributu ilə açılır
     (bax app.js-də applyTheme()/initTheme() və index.php-nin <head>-indəki
     "yanıb-sönməni" (FOUC) qabaqlayan blok skript). Demək olar bütün rənglər
     artıq CSS dəyişənləri (custom properties) üzərindən istifadə olunduğu
     üçün əksər hissə token-ləri bir yerdə yenidən təyin etməklə həll olunur;
     yalnız bir neçə yer (cədvəl/düymə hover fonu, loading overlay) birbaşa
     hex rəng işlədib, onlar da aşağıda ayrıca override olunur. Sidebar/hero/
     əsas düymələrin fonu (--navy) qəsdən DƏYİŞMİR — artıq tünddür və
     brendin bir hissəsidir; yalnız SƏTHLƏR (bg/surface) və ÜZƏRİNDƏKİ MƏTN
     rəngləri qaranlıq rejimə uyğunlaşdırılır. */
  html[data-theme="dark"]{
    --bg:#0B1220; --surface:#131B2E; --border:#2A3654; --border-strong:#46567A;
    --text:#E7EAF2; --text-secondary:#A7B0C4; --text-muted:#6E7893;
    --heading:#F3F5FA;
    --success:#34C77D; --success-bg:rgba(52,199,125,0.14);
    --danger:#E5534B; --danger-bg:rgba(229,83,75,0.16);
    --warning:#F0A93B; --warning-bg:rgba(240,169,59,0.14);
    --gold-bg:rgba(201,154,68,0.16); --gold-dark:#E4B972;
    /* Brauzerin ÖZ (native) elementləri — <select> açılan siyahısı, tarix
       seçici təqvimi, defolt scrollbar — bu token-lərdən xəbərsizdir və
       özbaşına HƏMİŞƏ ağ fon + qara yazı ilə çəkilir, "color-scheme"
       olmadan. Bunu təyin etmək dəstəkləyən brauzerlərdə (Chrome/Edge/
       Firefox) həhəmin elementləri avtomatik tünd render etdirir —
       "ağ qutular" və "qara yazılar" şikayətinin əsas mənbəyi budur. */
    color-scheme: dark;
  }
  html[data-theme="dark"] tbody tr:hover{background:#1A2338;}
  /* Cədvəl sətir xətləri (td/th border-bottom) — 1px həndəsi xətt, ekranın
     miqyaslamasından (Windows display scaling və s.) asılı olaraq bəzən
     tam pikselə düşmür və qismən "sınıq"/kəsik görünür — xüsusən aşağı
     kontrastlı --border rəngi tünd fonda buna daha meyllidir, aşağı
     sətirlərə doğru fərq yığılıb daha nəzərə çarpan olur. Sabit rəng yerinə
     yarımşəffaf ağ overlay istifadə edirik ki, hansı piksel qismən örtülsə
     də xətt heç vaxt fona "yox olmasın" — nəticədə hər zaman görünən, düz
     xətt qalır. */
  html[data-theme="dark"] td, html[data-theme="dark"] th{border-bottom-color:rgba(255,255,255,0.10);}
  /* Scroll edilən bütün sahələr (cədvəllər, modallar, siyahılar) üçün
     brendə uyğun, incə scrollbar — sidebar-dakı eyni naxışın ümumiləşməsi.
     Xüsusilə "Xidmətlər" cədvəlinin üfüqi sürüşdürmə zolağı (.table-scroll)
     əvvəl defolt açıq-boz idi və qaranlıq fonda çox nəzərə çarpırdı. */
  html[data-theme="dark"]{scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;}
  html[data-theme="dark"] ::-webkit-scrollbar{width:9px; height:9px;}
  html[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:100px;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#5A6B96;}
  /* Modal overlay (arxa fon) işıq rejimində tünd-üstündə-ağ kontrastı ilə
     kartı aydın ayırır, amma qaranlıq rejimdə eyni rgba(18,33,62,0.45) demək
     olar --surface/--bg ilə eyni tona düşür — nəticədə modal kart öz arxa
     fonundan seçilmir və "Yadda saxla/Ləğv et" zolağı bütün ekrana yayılan
     tək bir zolaq kimi görünür. Daha tünd/qatı overlay + modala aydın kontur
     kartı yenidən ayırır. */
  html[data-theme="dark"] .modal-overlay{background:rgba(3,7,16,0.72);}
  html[data-theme="dark"] .modal{border:1px solid var(--border-strong); box-shadow:0 30px 70px -15px rgba(0,0,0,0.6);}
  /* Kiçik konturlu ikon-düymələr (məs. #menu-toggle) --surface fonu ilə
     səhifə fonuna (--bg) çox yaxın olduğu üçün qaranlıq rejimdə demək olar
     görünmür idi — buna görə bir az daha açıq fon veririk ki, kontur aydın
     seçilsin. */
  html[data-theme="dark"] #menu-toggle{background:#1C2740;}
  html[data-theme="dark"] .btn:hover{background:#1C2B45;}
  html[data-theme="dark"] .icon-btn:hover{background:#1C2B45;}
  html[data-theme="dark"] .loading-overlay{background:rgba(11,18,32,0.75);}
  /* Şəkillər (logo və s.) qaranlıq fonda çox "işıqlı ağ kvadrat" kimi
     görünməsin deyə yüngül saydamlıq + kontrast azaltma. */
  html[data-theme="dark"] #app img, html[data-theme="dark"] .modal img{filter:brightness(.94) contrast(.96);}

  /* Tema keçid düyməsi — sidebar-foot-da, Çıxış et-in yanında. */
  #theme-toggle-btn{
    display:flex; align-items:center; gap:8px; width:100%; background:none; border:none;
    color:rgba(255,255,255,0.5); font-size:12.5px; text-align:left; padding:6px 8px;
    border-radius:7px; transition:background .12s, color .12s; margin-top:2px;
  }
  #theme-toggle-btn:hover{background:rgba(255,255,255,0.06); color:#fff;}
  #theme-toggle-btn .ic{width:15px; height:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  #theme-toggle-btn .ic svg{width:100%; height:100%;}
  #theme-toggle-btn .lbl-dark{display:none;}
  html[data-theme="dark"] #theme-toggle-btn .lbl-light{display:none;}
  html[data-theme="dark"] #theme-toggle-btn .lbl-dark{display:inline;}
  #theme-toggle-btn .ic-moon{display:inline-flex;}
  #theme-toggle-btn .ic-sun{display:none;}
  html[data-theme="dark"] #theme-toggle-btn .ic-moon{display:none;}
  html[data-theme="dark"] #theme-toggle-btn .ic-sun{display:inline-flex;}

/* 2026-11-04: il/ay seçiciləri və "cari vəziyyət" işarəsi */
.period-current-tag{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10.5px; font-weight:600; letter-spacing:.02em; background:rgba(127,127,127,0.14); color:inherit; opacity:.85; vertical-align:middle; white-space:nowrap;}
select.period-month:disabled{opacity:.55; cursor:not-allowed;}
@media (max-width: 600px){
  .topbar select.period-year, .topbar select.period-month{flex:1 1 120px; min-width:0;}
}