/* ================================================================
   dashboard.css — Dual theme: light (default) / dark
   ================================================================ */

/* ── CSS variables — light (default) ────────────────────────── */
:root {
    --bg-page:          #f2f5fb;
    --bg-card:          #ffffff;
    --bd-card:          #e4ecf5;
    --bd-inner:         #eef3fb;
    --bg-topbar:        #ffffff;
    --bd-topbar:        #e4ecf5;
    --text-title:       #1e3a5f;
    --text-label:       #9db0c8;
    --text-sub:         #b8c8d8;
    --text-tick:        #94a3b8;
    --color-grid:       rgba(148,163,184,0.18);
    --bg-sel:           #f0f4fb;
    --bd-sel:           #d1dce9;
    --text-sel:         #374151;
    --kpi-val-blue:     #1d4ed8;
    --kpi-val-green:    #047857;
    --kpi-val-amber:    #b45309;
    --kpi-val-red:      #b91c1c;
    --text-kpi-sub:     #9db0c8;
    --kpi-glyph-op:     0.10;
    --card-shadow:      0 1px 3px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.04);
    --card-hover-shadow:0 4px 20px rgba(0,0,0,0.10);
    --text-sname:       #374151;
    --text-samt:        #2563eb;
    --text-slabel:      #64748b;
    --text-scount:      #9ca3af;
    --text-samount:     #374151;
    --bd-srow:          #eef3fb;
    --dot-cancelled:    #cbd5e1;
    --bg-rank:          #f0f4fb;
    --bd-rank:          #e4ecf5;
    --text-rank:        #9db0c8;
    --bg-rank-top:      #dbeafe;
    --bd-rank-top:      #93c5fd;
    --text-rank-top:    #1d4ed8;
    --bg-track:         #e8f0fa;
    --fill-start:       #1d4ed8;
    --fill-mid:         #3b82f6;
    --fill-end:         #93c5fd;
    --text-pamt:        #2563eb;
    --text-pname:       #374151;
    --loading-color:    #c8d8e8;
    --toggle-pill:      #d0e0f5;
    --toggle-knob:      #3b6ea6;
    --ts-sun-color:     #f59e0b;
    --ts-moon-color:    #94a3b8;
    --sel-arrow:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doughnut-border:  #ffffff;
}

/* ── CSS variables — dark ────────────────────────────────────── */
[data-theme="dark"] {
    --bg-page:          #080e1c;
    --bg-card:          #0f1c30;
    --bd-card:          #182236;
    --bd-inner:         #111f34;
    --bg-topbar:        #0c1526;
    --bd-topbar:        #182236;
    --text-title:       #c8d8ea;
    --text-label:       #3a5070;
    --text-sub:         #2e4260;
    --text-tick:        #3a5070;
    --color-grid:       rgba(30,45,69,0.6);
    --bg-sel:           #111f34;
    --bd-sel:           #233047;
    --text-sel:         #7a94b0;
    --kpi-val-blue:     #7dd3fc;
    --kpi-val-green:    #6ee7b7;
    --kpi-val-amber:    #fde68a;
    --kpi-val-red:      #fca5a5;
    --text-kpi-sub:     #2e4260;
    --kpi-glyph-op:     0.14;
    --card-shadow:      none;
    --card-hover-shadow:0 8px 32px rgba(0,0,0,0.4);
    --text-sname:       #7a94b0;
    --text-samt:        #7dd3fc;
    --text-slabel:      #4b6277;
    --text-scount:      #2e4260;
    --text-samount:     #6888a0;
    --bd-srow:          #111f34;
    --dot-cancelled:    #1e2d45;
    --bg-rank:          #111f34;
    --bd-rank:          #1e2d45;
    --text-rank:        #3a5070;
    --bg-rank-top:      #0f2a5a;
    --bd-rank-top:      #3b82f6;
    --text-rank-top:    #7dd3fc;
    --bg-track:         #111f34;
    --fill-start:       #1e3a8a;
    --fill-mid:         #3b82f6;
    --fill-end:         #7dd3fc;
    --text-pamt:        #7dd3fc;
    --text-pname:       #7a94b0;
    --loading-color:    #1e2d45;
    --toggle-pill:      #1e3a6e;
    --toggle-knob:      #7dd3fc;
    --ts-sun-color:     #94a3b8;
    --ts-moon-color:    #93c5fd;
    --sel-arrow:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234b6277' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --doughnut-border:  #0f1c30;
}

/* ── Smooth theme transitions ────────────────────────────────── */
body, .main, .topbar, .kpi-card, .dash-card, .card-hd,
.year-sel, .theme-toggle .ts-pill {
    transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}

/* ── Page layout ─────────────────────────────────────────────── */
body  { background: var(--bg-page); }
.main { background: var(--bg-page); }

.topbar {
    background:    var(--bg-topbar);
    border-bottom-color: var(--bd-topbar);
}

.topbar h2 {
    color:       var(--text-title);
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size:   16px;
    letter-spacing: 0.02em;
}

/* ── Topbar right cluster ────────────────────────────────────── */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Year selector ───────────────────────────────────────────── */
.year-sel {
    padding:     6px 30px 6px 12px;
    border:      1px solid var(--bd-sel);
    border-radius: 6px;
    font-size:   13px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    outline:     none;
    cursor:      pointer;
    background:  var(--bg-sel) var(--sel-arrow) no-repeat right 10px center;
    color:       var(--text-sel);
    appearance:  none;
}

.year-sel:hover  { border-color: #3b82f6; }
.year-sel:focus  { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.14); }
.year-sel option { background: var(--bg-sel); color: var(--text-sel); }

/* ── Theme toggle ────────────────────────────────────────────── */
.theme-toggle {
    display:     flex;
    align-items: center;
    gap:         7px;
    cursor:      pointer;
    user-select: none;
    outline:     none;
}

.theme-toggle:focus-visible .ts-pill {
    box-shadow: 0 0 0 2px rgba(59,130,246,0.35);
}

.ts-sun, .ts-moon {
    width:  15px;
    height: 15px;
    flex-shrink: 0;
    transition: color 0.28s, opacity 0.28s;
}

.ts-sun  { color: var(--ts-sun-color);  opacity: 0.5; }
.ts-moon { color: var(--ts-moon-color); opacity: 0.5; }

[data-theme="light"] .ts-sun  { opacity: 1; }
[data-theme="dark"]  .ts-moon { opacity: 1; }

.ts-pill {
    width:  38px;
    height: 22px;
    border-radius: 11px;
    background:  var(--toggle-pill);
    position:    relative;
    flex-shrink: 0;
}

.ts-knob {
    position:    absolute;
    top:  3px;
    left: 3px;
    width:  16px;
    height: 16px;
    border-radius: 50%;
    background: var(--toggle-knob);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.28s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

[data-theme="dark"] .ts-knob { transform: translateX(16px); }

/* ── KPI grid ────────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:           12px;
    margin-bottom: 14px;
}

.kpi-card {
    background:   var(--bg-card);
    border:       1px solid var(--bd-card);
    border-radius: 10px;
    padding:      20px 18px 16px;
    position:     relative;
    overflow:     hidden;
    box-shadow:   var(--card-shadow);
    animation:    kpiSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.kpi-card:nth-child(1) { animation-delay: 0.04s; }
.kpi-card:nth-child(2) { animation-delay: 0.10s; }
.kpi-card:nth-child(3) { animation-delay: 0.16s; }
.kpi-card:nth-child(4) { animation-delay: 0.22s; }

@keyframes kpiSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kpi-card[data-color="blue"]  { border-top: 2px solid #3b82f6; }
.kpi-card[data-color="green"] { border-top: 2px solid #10b981; }
.kpi-card[data-color="amber"] { border-top: 2px solid #f59e0b; }
.kpi-card[data-color="red"]   { border-top: 2px solid #ef4444; }

.kpi-card:hover { box-shadow: var(--card-hover-shadow); }

.kpi-card[data-color="blue"]:hover  { border-color: rgba(59,130,246,0.4);  border-top-color: #3b82f6; }
.kpi-card[data-color="green"]:hover { border-color: rgba(16,185,129,0.4);  border-top-color: #10b981; }
.kpi-card[data-color="amber"]:hover { border-color: rgba(245,158,11,0.4);  border-top-color: #f59e0b; }
.kpi-card[data-color="red"]:hover   { border-color: rgba(239,68,68,0.4);   border-top-color: #ef4444; }

.kpi-label {
    font-size:      11px;
    font-family:    'Syne', sans-serif;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--text-label);
    margin-bottom:  10px;
}

.kpi-value {
    font-family:     'JetBrains Mono', monospace;
    font-size:       21px;
    font-weight:     600;
    line-height:     1;
    letter-spacing: -0.03em;
}

.kpi-card[data-color="blue"]  .kpi-value { color: var(--kpi-val-blue); }
.kpi-card[data-color="green"] .kpi-value { color: var(--kpi-val-green); }
.kpi-card[data-color="amber"] .kpi-value { color: var(--kpi-val-amber); }
.kpi-card[data-color="red"]   .kpi-value { color: var(--kpi-val-red); }

.kpi-sub {
    font-size:      10px;
    font-family:    'JetBrains Mono', monospace;
    color:          var(--text-kpi-sub);
    margin-top:     7px;
    letter-spacing: 0.01em;
}

.kpi-glyph {
    position: absolute;
    right:    14px;
    bottom:   12px;
    width:    32px;
    height:   32px;
}

.kpi-card[data-color="blue"]  .kpi-glyph { color: #3b82f6; opacity: var(--kpi-glyph-op); }
.kpi-card[data-color="green"] .kpi-glyph { color: #10b981; opacity: var(--kpi-glyph-op); }
.kpi-card[data-color="amber"] .kpi-glyph { color: #f59e0b; opacity: var(--kpi-glyph-op); }
.kpi-card[data-color="red"]   .kpi-glyph { color: #ef4444; opacity: var(--kpi-glyph-op); }

/* ── Chart cards ─────────────────────────────────────────────── */
.dash-card {
    background:   var(--bg-card);
    border:       1px solid var(--bd-card);
    border-radius: 10px;
    box-shadow:   var(--card-shadow);
    overflow:     hidden;
    display:      flex;
    flex-direction: column;
}

.card-hd {
    padding:       14px 18px 12px;
    border-bottom: 1px solid var(--bd-inner);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    flex-shrink:   0;
}

.card-hd h3 {
    font-family:    'Syne', sans-serif;
    font-size:      11px;
    font-weight:    600;
    color:          var(--text-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.card-sub {
    font-size:   11px;
    font-family: 'JetBrains Mono', monospace;
    color:       var(--text-sub);
}

.card-bd {
    padding:   16px 18px;
    flex:      1;
    display:   flex;
    flex-direction: column;
    min-height: 0;
}

.chart-wrap {
    position:   relative;
    flex:       1;
    min-height: 0;
}

.chart-wrap-sm {
    flex:          0 0 170px;
    margin-bottom: 14px;
}

/* ── Layouts ─────────────────────────────────────────────────── */
.charts-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                   12px;
    margin-bottom:         12px;
    min-height:            330px;
}

.partners-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         12px;
    min-height:            280px;
}

/* ── Status list ─────────────────────────────────────────────── */
.status-list { margin-top: 12px; }

.status-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       7px 0;
    border-bottom: 1px solid var(--bd-srow);
}

.status-row:last-child { border-bottom: none; }

.status-dot {
    width:        7px;
    height:       7px;
    border-radius: 50%;
    flex-shrink:  0;
}

.status-dot[data-status="PAID"]      { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.55); }
.status-dot[data-status="SENT"]      { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.55); }
.status-dot[data-status="DRAFT"]     { background: #94a3b8; }
.status-dot[data-status="OVERDUE"]   { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.55); animation: pulseRed 2.4s ease-in-out infinite; }
.status-dot[data-status="CANCELLED"] { background: var(--dot-cancelled); }

@keyframes pulseRed {
    0%, 100% { box-shadow: 0 0 5px rgba(239,68,68,0.5); }
    50%       { box-shadow: 0 0 11px rgba(239,68,68,0.85); }
}

.status-label {
    flex:           1;
    font-size:      11px;
    font-family:    'Syne', sans-serif;
    font-weight:    700;
    color:          var(--text-slabel);
    letter-spacing: 0.03em;
}

.status-count {
    font-size:   10px;
    font-family: 'JetBrains Mono', monospace;
    color:       var(--text-scount);
    min-width:   26px;
    text-align:  right;
}

.status-amount {
    font-size:   11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color:       var(--text-samount);
    min-width:   72px;
    text-align:  right;
}

/* ── Top partners ────────────────────────────────────────────── */
.partner-row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       9px 0;
    border-bottom: 1px solid var(--bd-srow);
}

.partner-row:last-child { border-bottom: none; }

.partner-rank {
    width:         21px;
    height:        21px;
    border-radius: 50%;
    background:    var(--bg-rank);
    border:        1px solid var(--bd-rank);
    color:         var(--text-rank);
    font-size:     9px;
    font-family:   'JetBrains Mono', monospace;
    font-weight:   600;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}

.partner-rank.top3 {
    background:  var(--bg-rank-top);
    border-color: var(--bd-rank-top);
    color:        var(--text-rank-top);
}

.partner-info  { flex: 1; min-width: 0; }

.partner-meta {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             8px;
    margin-bottom:   5px;
}

.partner-name {
    font-size:     12px;
    color:         var(--text-pname);
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    flex:          1;
}

.partner-amount {
    font-size:   11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color:       var(--text-pamt);
    white-space: nowrap;
}

.partner-track {
    height:        2px;
    background:    var(--bg-track);
    border-radius: 1px;
    overflow:      hidden;
}

.partner-fill {
    height:        2px;
    width:         var(--w, 0%);
    background:    linear-gradient(90deg, var(--fill-start) 0%, var(--fill-mid) 55%, var(--fill-end) 100%);
    border-radius: 1px;
    transition:    width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Loading ─────────────────────────────────────────────────── */
.dash-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          120px;
    color:           var(--loading-color);
    font-size:       12px;
    font-family:     'JetBrains Mono', monospace;
    letter-spacing:  0.05em;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .kpi-grid      { grid-template-columns: repeat(2, 1fr); }
    .charts-grid   { grid-template-columns: 1fr; min-height: auto; }
    .partners-grid { grid-template-columns: 1fr; min-height: auto; }
}

@media (max-width: 600px) {
    .kpi-grid  { gap: 10px; }
    .content   { padding: 14px; }
    .kpi-card  { padding: 16px 14px 14px; }
    .kpi-value { font-size: 18px; }
}