/* Overview layout: financial summary, work status, then secondary details. */
#tab-dashboard { --overview-muted: #6b786f; }
#tab-dashboard .page-header { margin-bottom: 14px; gap: 20px; }
#tab-dashboard .page-header h2 { font-size: clamp(23px, 2.1vw, 30px); letter-spacing: -.9px; }
#tab-dashboard .studio-eyebrow { font-size: 9px; margin-bottom: 5px; }
#tab-dashboard .page-header p { font-size: 11px; }
.dashboard-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#tab-dashboard .range-tabs { padding: 3px; }
#tab-dashboard .range-tab { min-height: 30px; padding: 6px 11px; font-size: 10px; }
.dashboard-muted { color: var(--overview-muted); font-size: 11px; }
#tab-dashboard .today-callout { background: transparent; color: #263c2e; box-shadow: none; border: 0; padding: 0 0 17px; margin: 0; border-radius: 0; gap: 7px; flex-wrap: wrap; align-items: center; font-size: 11px; overflow: visible; }
#tab-dashboard .today-callout::after { display: none; }
#tab-dashboard .today-callout-label { margin: 0 4px 0 0; font-size: 11px; color: #62776a; }
#tab-dashboard .today-callout-stat-value { font-size: 10px; margin-left: 6px; }
#tab-dashboard .today-callout-stat-value.down { color: #976647; }
#tab-dashboard .today-callout-stat-value.up { color: #357454; }
.dashboard-today-dot { width: 6px; height: 6px; border-radius: 50%; background: #679775; }
.dashboard-separator { margin: 0 6px; color: #c4cdc3; }
#tab-dashboard .dashboard-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
#tab-dashboard .stat-card { padding: 18px 20px; border-radius: 12px; box-shadow: none; }
#tab-dashboard .stat-sparkline { display: none; }
#tab-dashboard .stat-card .stat-icon { font-size: 11px; margin-bottom: 10px; min-height: 18px; }
#tab-dashboard .stat-value { font-size: clamp(22px, 1.9vw, 29px); font-weight: 600; letter-spacing: -.7px; }
#tab-dashboard .stat-profit { background: #294d3b; border-color: #294d3b; }
#tab-dashboard .stat-profit .stat-value { color: #f2f7ec; }
#tab-dashboard .stat-profit .stat-icon, #tab-dashboard .stat-profit .stat-icon .studio-icon { color: #c4d6bb; }
.dashboard-deductions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 20px; color: #748077; font-size: 10px; margin: 0 2px 23px; }
.dashboard-deductions strong { font-weight: 500; color: #506558; margin-left: 3px; }
.dashboard-deductions b { margin: 0 5px; color: #8b988b; font-weight: 400; }
.dashboard-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 278px; gap: 18px; margin-bottom: 19px; align-items: start; }
.dashboard-primary, .dashboard-secondary { min-width: 0; display: grid; gap: 17px; }
#tab-dashboard .dashboard-workspace .premium-panel { margin: 0; padding: 19px; border-radius: 13px; box-shadow: none; }
#tab-dashboard .panel-heading { margin-bottom: 13px; gap: 9px; }
#tab-dashboard .panel-heading h3 { font-size: 12px; letter-spacing: 0; }
.dashboard-text-button { appearance: none; background: transparent; border: 0; padding: 4px 0; color: #476c51; font-size: 10px; font-weight: 500; cursor: pointer; text-align: left; }
.dashboard-text-button:hover { color: #25472f; text-decoration: underline; }
.dashboard-chart { width: 100%; height: 145px; display: block; }
.dashboard-chart text { font-family: Inter, 'Segoe UI', sans-serif; font-size: 9px; fill: #7b887f; }
.dashboard-chart-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; color: #7b887f; }
#tab-dashboard .dashboard-workspace .data-table { font-size: 10px; }
#tab-dashboard .dashboard-workspace .data-table th { font-size: 8px; letter-spacing: .3px; padding: 10px 8px; }
#tab-dashboard .dashboard-workspace .data-table td { padding: 13px 8px; }
#tab-dashboard .data-table .num-deduct { color: #846d5a; }
#tab-dashboard .dashboard-workspace .data-table tbody tr { cursor: default; }
.dashboard-primary .data-table-wrap { max-height: 330px; overflow: auto; }
.dashboard-primary .data-table thead { position: sticky; top: 0; z-index: 1; }
.dashboard-chip { font-size: 8px; letter-spacing: .5px; border: 1px solid #dce5d6; border-radius: 5px; padding: 3px 6px; color: #698164; }
#tab-dashboard .dashboard-wallet { background: #eef3e9; border-color: #dce7d4; }
#dashboard-balance { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.9px; margin: 3px 0 13px; font-variant-numeric: tabular-nums; }
.dashboard-wallet-paid { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #dbe5d4; padding-bottom: 11px; font-size: 11px; color: #70806e; }
.dashboard-wallet-paid strong { font-weight: 500; color: #426247; }
.dashboard-latest-payout { margin-top: 10px; padding: 10px; border: 1px solid #cfe0c7; border-radius: 9px; background: #f8fbf5; }
.dashboard-latest-payout[hidden] { display: none; }
.dashboard-latest-payout-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dashboard-latest-payout-head span { color: #52705a; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dashboard-latest-payout-head strong { color: #245c37; font-size: 14px; font-variant-numeric: tabular-nums; }
.dashboard-latest-payout p { margin: 6px 0 0; color: #657568; font-size: 9px; line-height: 1.55; overflow-wrap: anywhere; }
.dashboard-latest-payout a { color: #2d6740; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#dashboard-payment-status { font-size: 10px; line-height: 1.6; margin: 11px 0; }
.dashboard-wallet .btn { width: 100%; min-height: 35px; font-size: 10px; padding: 8px 10px; }
.dashboard-gallery-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dashboard-gallery-counts span { color: #7c867d; font-size: 10px; }
.dashboard-gallery-counts strong { display: block; font-size: 21px; font-weight: 600; color: #3d5744; margin-bottom: 2px; }
.dashboard-status-note { font-size: 10px; color: #74816f; margin: 12px 0 0; }
.dashboard-attention { background: #fbf0df; border: 1px solid #ebd8b9; color: #805823; cursor: pointer; border-radius: 7px; padding: 8px; width: 100%; text-align: left; font-size: 10px; margin-top: 13px; }
.dashboard-sale { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px; padding: 11px 0; border: 0; border-top: 1px solid #eef0eb; background: transparent; cursor: pointer; text-align: left; }
.dashboard-sale:first-child { border-top: 0; padding-top: 2px; }
.dashboard-sale > span { min-width: 0; }
.dashboard-sale strong { font-size: 10px; font-weight: 500; color: #395441; }
.dashboard-sale > span strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 155px; color: #4d5a4e; }
.dashboard-sale > strong { white-space: nowrap; }
.dashboard-sale small { display: block; font-size: 9px; color: #839081; margin-top: 3px; }
.dashboard-sale:hover strong { color: #1e3b25; }
.dashboard-empty-note { font-size: 11px; line-height: 1.7; color: #788577; margin: 8px 0; }
#tab-dashboard #achievements-panel { margin-bottom: 19px; }
.dashboard-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#tab-dashboard .dashboard-bottom .premium-panel { margin: 0; padding: 19px; border-radius: 13px; }
.dashboard-best > strong { display: block; font-size: 13px; margin-top: 9px; font-weight: 600; }
.dashboard-best > p { font-size: 11px; color: #71806f; margin: 6px 0; }
#tab-dashboard .dashboard-insights .insights-grid { display: block; }
#tab-dashboard .dashboard-photos .top-photos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; max-height: 250px; overflow: auto; }
#tab-dashboard .dashboard-photos .top-photo-meta, #tab-dashboard .dashboard-photos .top-photo-album { font-size: 9px; }
#tab-dashboard .dashboard-photos .empty-state { padding: 13px 5px; text-align: left; }
#tab-dashboard .dashboard-photos .empty-state-icon { display: none; }
#tab-dashboard .dashboard-photos .empty-state-title { font-size: 12px; font-weight: 500; }
#tab-dashboard .dashboard-photos .empty-state-text { font-size: 11px; margin: 5px 0; max-width: none; }
.dashboard-load-status { background: #fff3df; color: #835b2c; border-radius: 8px; padding: 10px 13px; margin-bottom: 14px; font-size: 11px; }
.dashboard-load-status[hidden] { display: none; }
@media (min-width: 1600px) { .dashboard-workspace { grid-template-columns: minmax(0, 1fr) 305px; } #tab-dashboard .dashboard-workspace .data-table { font-size: 11px; } }
@media (max-width: 1100px) { .dashboard-workspace { grid-template-columns: 1fr; } .dashboard-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dashboard-wallet .panel-heading { flex-wrap: wrap; } #dashboard-balance { font-size: 23px; } }
@media (max-width: 768px) {
    #tab-dashboard .page-header { gap: 14px; }
    #tab-dashboard .page-header > .dashboard-header-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    .dashboard-header-actions > .btn { align-self: flex-start; min-height: 36px; padding: 8px 13px; font-size: 11px; }
    #tab-dashboard .dashboard-header-actions .range-tabs { display: flex; flex-direction: row; width: 100%; }
    #tab-dashboard .today-callout { font-size: 10px; gap: 5px; padding-bottom: 14px; }
    #tab-dashboard .today-callout .dashboard-muted { font-size: 10px; }
    #tab-dashboard .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #tab-dashboard .stat-card { padding: 15px; }
    #tab-dashboard .stat-value { font-size: 23px; }
    #tab-dashboard .stat-card .stat-icon { font-size: 10px; min-height: 18px; margin-bottom: 8px; }
    .dashboard-deductions { font-size: 9px; line-height: 1.8; margin-bottom: 17px; }
    .dashboard-workspace { display: flex; flex-direction: column; gap: 15px; }
    .dashboard-primary, .dashboard-secondary { width: 100%; }
    .dashboard-secondary { display: grid; grid-template-columns: 1fr; }
    .dashboard-primary { order: 2; }
    .dashboard-secondary { order: 1; }
    .dashboard-secondary .dashboard-recent { display: none; }
    .dashboard-secondary .dashboard-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
    .dashboard-wallet .panel-heading { grid-column: 1 / -1; margin-bottom: 7px !important; }
    .dashboard-wallet > .dashboard-muted { grid-column: 1; }
    #dashboard-balance { grid-column: 1; font-size: 25px; margin: 0; }
    .dashboard-wallet-paid { grid-column: 2; grid-row: 2 / 4; border-bottom: 0; align-self: center; display: block; padding: 0; }
    .dashboard-wallet-paid strong { display: block; font-size: 18px; margin-top: 5px; }
    .dashboard-latest-payout, #dashboard-payment-status, .dashboard-wallet > .btn { grid-column: 1 / -1; }
    .dashboard-gallery-counts { grid-template-columns: repeat(3, 1fr); }
    .dashboard-gallery-counts strong { display: inline; font-size: 18px; margin-right: 5px; }
    .dashboard-chart { height: 125px; }
    .dashboard-chart-caption { font-size: 8px; }
    .dashboard-bottom { grid-template-columns: 1fr; gap: 15px; }
}
.dashboard-primary { grid-template-columns: minmax(0, 1fr); }
.dashboard-workspace .premium-panel { min-width: 0; }
.dashboard-bottom { grid-template-columns: minmax(0, 1fr); }
#tab-dashboard .dashboard-workspace .data-table { font-size: 11px; }
#tab-dashboard .dashboard-workspace .data-table th { font-size: 9px; }
#tab-dashboard .dashboard-workspace .premium-panel { padding: 17px; }
#tab-dashboard .dashboard-wallet .panel-heading { margin-bottom: 9px; }
#dashboard-balance { margin-bottom: 9px; }
.dashboard-wallet-paid { padding-bottom: 8px; }
#dashboard-payment-status { margin: 8px 0; }
.dashboard-status-note { margin-top: 9px; }
.dashboard-sale { padding: 8px 0; }
.dashboard-sale strong { font-size: 11px; }
.dashboard-bottom .top-photo-img { max-height: 150px; object-fit: cover; }
.dashboard-action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; padding: 10px 14px; margin-bottom: 15px; background: #faf1df; border: 1px solid #eaddc0; border-radius: 9px; color: #79613a; font-size: 11px; }
.dashboard-action-bar[hidden] { display: none; }
.dashboard-action-bar button { border: 0; background: transparent; color: #6a542e; font: inherit; font-weight: 600; padding: 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dashboard-top-badge { display: inline-block; white-space: nowrap; font-size: 8px; padding: 2px 5px; margin-left: 5px; color: #537246; background: #edf3e5; border-radius: 4px; }
.dashboard-trend { position: relative; padding-top: 23px; }
.dashboard-chart { touch-action: pan-y; cursor: crosshair; }
.dashboard-chart-tooltip { position: absolute; top: 0; right: 0; max-width: 100%; font-size: 11px; font-weight: 500; color: #355e45; background: #eef5e9; border: 1px solid #deead5; border-radius: 5px; padding: 4px 8px; pointer-events: none; }
.dashboard-chart-tooltip[hidden] { display: none; }
#tab-dashboard .dashboard-photos.is-empty { display: flex; align-items: center; gap: 18px; padding-top: 13px; padding-bottom: 13px; }
#tab-dashboard .dashboard-photos.is-empty .panel-heading { margin: 0; flex-shrink: 0; }
#tab-dashboard .dashboard-photos.is-empty .dashboard-empty-note { margin: 0; font-size: 10px; }
@media (max-width: 768px) { .dashboard-secondary .dashboard-recent { display: block; } #tab-dashboard .dashboard-photos.is-empty { flex-wrap: wrap; gap: 5px; } .dashboard-action-bar { font-size: 10px; } }

/* Final dashboard density pass. Keep the overview compact without changing
   the spacing of the gallery, upload or settings sections. */
#tab-dashboard .page-header {
    margin-bottom: 12px;
}
#tab-dashboard .page-header h2 {
    font-size: clamp(22px, 2vw, 28px);
}
#tab-dashboard #plan-widget-panel {
    margin-bottom: 10px !important;
    padding: 12px 15px;
    border-radius: 13px;
}
#tab-dashboard #plan-widget-panel .panel-heading {
    margin-bottom: 7px;
}
#tab-dashboard #plan-widget {
    padding: 0 !important;
}
#tab-dashboard #plan-widget .plan-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
#tab-dashboard #plan-widget .plan-widget-head > div > strong {
    color: #294d3b !important;
    font-size: .95rem !important;
}
#tab-dashboard #plan-widget .plan-widget-head > div > div {
    color: #768477 !important;
    font-size: .72rem !important;
}
#tab-dashboard #plan-widget .plan-widget-head > span {
    background: #e8f3df !important;
    color: #39704f !important;
    font-size: .66rem !important;
    padding: .18rem .5rem !important;
}
#tab-dashboard #plan-widget .plan-widget-head + div {
    margin-top: .55rem !important;
}
#tab-dashboard #plan-widget .plan-widget-head + div > div:first-child {
    color: #768477 !important;
    font-size: .7rem !important;
    margin-bottom: .25rem !important;
}
#tab-dashboard #plan-widget .plan-widget-head + div > div:last-child {
    height: 6px !important;
    border-radius: 999px !important;
    background: #edf2ec !important;
}
#tab-dashboard #plan-widget .plan-widget-head + div > div:last-child > div {
    background: #4b8060 !important;
    border-radius: inherit;
}
#tab-dashboard #achievements-panel {
    margin-bottom: 12px;
    padding: 13px 15px;
    border-radius: 14px;
}
#tab-dashboard #achievements-panel .achievements-heading {
    gap: 12px;
}
#tab-dashboard #achievements-panel .achievements-heading h3 {
    font-size: 16px;
}
#tab-dashboard .today-callout {
    padding-bottom: 11px;
}
#tab-dashboard .dashboard-kpis {
    gap: 9px;
    margin-bottom: 8px;
}
#tab-dashboard .stat-card {
    padding: 12px 14px;
    border-radius: 11px;
}
#tab-dashboard .stat-card .stat-icon {
    margin-bottom: 6px;
    min-height: 16px;
}
#tab-dashboard .stat-value {
    font-size: clamp(20px, 1.7vw, 26px);
}
#tab-dashboard .dashboard-deductions {
    margin-bottom: 14px;
    line-height: 1.5;
}
#tab-dashboard .dashboard-workspace {
    gap: 12px;
    margin-bottom: 14px;
}
#tab-dashboard .dashboard-primary,
#tab-dashboard .dashboard-secondary {
    gap: 12px;
}
#tab-dashboard .dashboard-workspace .premium-panel {
    padding: 14px 16px;
    border-radius: 12px;
}
#tab-dashboard .dashboard-workspace .panel-heading {
    margin-bottom: 9px;
}
#tab-dashboard .dashboard-chart {
    height: 126px;
}
#tab-dashboard #dashboard-balance {
    font-size: 25px;
    margin-top: 2px;
    margin-bottom: 8px;
}
#tab-dashboard .dashboard-wallet-paid {
    padding-bottom: 7px;
}
#tab-dashboard .dashboard-gallery-counts strong {
    font-size: 19px;
}
#tab-dashboard .dashboard-sale {
    padding: 7px 0;
}

/* Balance the two dashboard columns so the short performance table does not
   leave a large dead zone beside a long vertical sidebar. */
@media (min-width: 1101px) {
    #tab-dashboard .dashboard-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 10px;
    }
    #tab-dashboard .dashboard-secondary .dashboard-wallet {
        grid-column: 1 / -1;
    }
    #tab-dashboard .dashboard-wallet .payout-balance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 10px 0;
    }
    #tab-dashboard .dashboard-wallet .payout-balance-item {
        padding: 10px;
        border-radius: 9px;
    }
    #tab-dashboard .dashboard-wallet .payout-balance-item span {
        font-size: 10px;
    }
    #tab-dashboard .dashboard-wallet .payout-balance-item strong {
        margin: 4px 0;
        font-size: 18px;
    }
    #tab-dashboard .dashboard-wallet .payout-balance-item small {
        font-size: 9px;
        line-height: 1.35;
    }
    #tab-dashboard .dashboard-secondary .dashboard-gallery-status,
    #tab-dashboard .dashboard-secondary .dashboard-recent {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    #tab-dashboard #plan-widget-panel { padding: 11px 13px; }
    #tab-dashboard #achievements-panel { padding: 11px 13px; }
    #tab-dashboard .dashboard-workspace .premium-panel { padding: 13px 14px; }
}

/* Desktop composition: use the full dashboard width instead of leaving a
   dead column under the shorter performance section. */
@media (min-width: 1101px) {
    #tab-dashboard .dashboard-workspace {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 12px;
        max-width: none;
        width: 100%;
        margin-inline: 0;
    }
    #tab-dashboard .dashboard-primary,
    #tab-dashboard .dashboard-secondary {
        display: contents;
    }
    #tab-dashboard .dashboard-primary > .dashboard-trend-panel {
        grid-column: 1 / span 8;
        grid-row: 1;
        min-height: 365px;
        height: 100%;
        align-self: stretch;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    #tab-dashboard .dashboard-secondary > .dashboard-wallet {
        grid-column: 9 / -1;
        grid-row: 1;
        height: 100%;
        align-self: stretch;
        box-sizing: border-box;
    }
    #tab-dashboard .dashboard-primary > section:not(.dashboard-trend-panel) {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    #tab-dashboard .dashboard-secondary > .dashboard-gallery-status {
        grid-column: 1 / span 6;
        grid-row: 3;
    }
    #tab-dashboard .dashboard-secondary > .dashboard-recent {
        grid-column: 7 / -1;
        grid-row: 3;
    }
    #tab-dashboard .dashboard-secondary .dashboard-wallet .payout-balance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #tab-dashboard .dashboard-trend-panel .dashboard-trend {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 0;
        padding-top: 8px;
    }
    #tab-dashboard .dashboard-trend-panel .dashboard-chart {
        height: 245px;
    }
}

/* At medium desktop widths, stack the panels before the 12-column layout
   becomes cramped. This keeps the graph inside its card and prevents the
   balance card from being clipped on smaller laptop windows. */
@media (min-width: 769px) and (max-width: 1250px) {
    #tab-dashboard .dashboard-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
    #tab-dashboard .dashboard-primary,
    #tab-dashboard .dashboard-secondary {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    #tab-dashboard .dashboard-primary > *,
    #tab-dashboard .dashboard-secondary > * {
        grid-column: auto;
        grid-row: auto;
    }
    #tab-dashboard .dashboard-primary > .dashboard-trend-panel {
        min-height: 0;
        height: auto;
    }
    #tab-dashboard .dashboard-trend-panel .dashboard-chart {
        height: 220px;
    }
}

/* Premium chart treatment: the data stays simple, while the visual hierarchy
   makes the active day and the profit trend easy to read at a glance. */
#tab-dashboard .dashboard-trend { position:relative; padding:8px 0 0; }
#tab-dashboard .dashboard-chart { overflow:visible; }
#tab-dashboard .dashboard-chart .chart-grid { stroke:#e4ece6; stroke-width:1; stroke-dasharray:3 5; }
#tab-dashboard .dashboard-chart .chart-grid-zero { stroke:#cbdacf; stroke-dasharray:none; }
#tab-dashboard .dashboard-chart .chart-axis-label { fill:#7b887f; font-size:9px; font-weight:500; }
#tab-dashboard .dashboard-chart-area { fill:url(#dashboard-area-gradient); }
#tab-dashboard .dashboard-chart-line { fill:none; stroke:#347b5d; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
#tab-dashboard .dashboard-chart-point { fill:#347b5d; stroke:#fff; stroke-width:.7; vector-effect:non-scaling-stroke; transition:r .15s ease, fill .15s ease; }
#tab-dashboard .dashboard-chart-point:hover { r:4.5; fill:#1f5b43; }
#tab-dashboard .dashboard-chart-selection line { stroke:#6e9c80; stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
#tab-dashboard .dashboard-chart-selection circle { fill:#2f7658; stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke; }
#tab-dashboard .dashboard-chart-tooltip { z-index:2; padding:6px 9px; border:1px solid #d7e8d9; border-radius:8px; background:#f4faf2; color:#2b6548; box-shadow:0 5px 14px rgba(42,86,60,.1); font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
#tab-dashboard .dashboard-chart-caption { padding-top:4px; color:#849187; font-size:10px; }

/* ── Executive / VIP dashboard finish ── */
#tab-dashboard {
    --vip-ink: #17382a;
    --vip-green: #2e6d50;
    --vip-line: #dce7de;
    --vip-gold: #c7a35a;
}
#tab-dashboard .page-header {
    padding-bottom: 4px;
}
#tab-dashboard .page-header h2 {
    color: var(--vip-ink);
    font-family: Sora, Inter, sans-serif;
    font-weight: 700;
    letter-spacing: -.055em;
}
#tab-dashboard .page-header p { color: #708176; }
#tab-dashboard .dashboard-header-actions .btn-primary {
    min-height: 38px;
    padding-inline: 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #347859, #255c43);
    box-shadow: 0 8px 18px rgba(39, 94, 65, .18);
}
#tab-dashboard .range-tabs {
    border: 1px solid #dbe6dc;
    background: #edf4ed;
    border-radius: 10px;
}
#tab-dashboard .range-tab.active {
    color: #245b3e;
    box-shadow: 0 2px 8px rgba(37, 81, 52, .12);
}

/* The plan card is the photographer's capacity signal, so make it read like
   a premium account summary instead of a generic form panel. */
#tab-dashboard #plan-widget-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid #28583f;
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 0%, rgba(194, 223, 166, .18), transparent 33%),
        linear-gradient(115deg, #1a3d2d 0%, #244e39 58%, #173a2b 100%);
    color: #f4f8f0;
    box-shadow: 0 12px 28px rgba(28, 77, 49, .14);
}
#tab-dashboard #plan-widget-panel::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    right: -70px;
    bottom: -105px;
    border: 1px solid rgba(214, 237, 170, .2);
    border-radius: 50%;
}
#tab-dashboard #plan-widget-panel .panel-heading {
    position: relative;
    z-index: 1;
    border-bottom-color: rgba(214, 237, 170, .15);
}
#tab-dashboard #plan-widget-panel .panel-heading h3 {
    color: #f4f8f0;
    font-family: Sora, Inter, sans-serif;
    font-size: 13px;
    letter-spacing: .01em;
}
#tab-dashboard #plan-widget .plan-widget-head > div > strong { color: #fff !important; }
#tab-dashboard #plan-widget .plan-widget-head > div > div { color: #b9d0c0 !important; }
#tab-dashboard #plan-widget .plan-widget-head > span {
    background: rgba(214, 237, 170, .16) !important;
    border: 1px solid rgba(214, 237, 170, .24);
    color: #d9efb2 !important;
}
#tab-dashboard #plan-widget .plan-widget-head + div > div:first-child { color: #b9d0c0 !important; }
#tab-dashboard #plan-widget .plan-widget-head + div > div:last-child { background: rgba(255,255,255,.13) !important; }
#tab-dashboard #plan-widget .plan-widget-head + div > div:last-child > div {
    background: linear-gradient(90deg, #d3edaa, #83b77f) !important;
}

#tab-dashboard .dashboard-kpis { gap: 12px; }
#tab-dashboard .stat-card {
    position: relative;
    overflow: hidden;
    min-height: 105px;
    border: 1px solid var(--vip-line);
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 20px rgba(24, 58, 39, .045);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#tab-dashboard .stat-card::after {
    content: '';
    position: absolute;
    right: -22px;
    bottom: -30px;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(46, 109, 80, .08);
    border-radius: 50%;
}
#tab-dashboard .stat-card:hover {
    transform: translateY(-2px);
    border-color: #c9dccd;
    box-shadow: 0 12px 26px rgba(24, 58, 39, .09);
}
#tab-dashboard .stat-card .stat-icon { color: #6b8374; }
#tab-dashboard .stat-card .stat-icon .studio-icon { color: #638371; }
#tab-dashboard .stat-value { position: relative; z-index: 1; color: var(--vip-ink); font-weight: 700; }
#tab-dashboard .stat-profit {
    border-color: #28583f;
    background: linear-gradient(135deg, #1d4935, #2d674b);
    box-shadow: 0 10px 24px rgba(34, 91, 61, .16);
}
#tab-dashboard .stat-profit::after { border-color: rgba(214, 237, 170, .2); }
#tab-dashboard .stat-profit .stat-icon { color: #c9e1bd; }
#tab-dashboard .stat-profit .stat-icon .studio-icon { color: #d4e8c4; }

#tab-dashboard .dashboard-deductions {
    color: #7d8b81;
    margin-top: 3px;
    margin-bottom: 16px;
}
#tab-dashboard .dashboard-deductions > span:last-child {
    padding: 5px 9px;
    border: 1px solid #e0e9e1;
    border-radius: 8px;
    background: rgba(255,255,255,.52);
}
#tab-dashboard .dashboard-workspace .premium-panel {
    border-color: var(--vip-line);
    box-shadow: 0 9px 24px rgba(24, 58, 39, .045);
}
#tab-dashboard .dashboard-workspace .panel-heading h3 {
    color: var(--vip-ink);
    font-family: Sora, Inter, sans-serif;
    font-weight: 700;
}
#tab-dashboard .dashboard-trend-panel {
    background: linear-gradient(180deg, #fff 0%, #fbfdfb 100%);
}
#tab-dashboard .dashboard-trend-panel .panel-heading {
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2ed;
}
#tab-dashboard .dashboard-trend-panel .dashboard-chart { min-height: 190px; }
#tab-dashboard .dashboard-wallet {
    background: linear-gradient(145deg, #eef6e9, #f9fbf5) !important;
    border-color: #d3e2cc !important;
}
#tab-dashboard #dashboard-balance { color: var(--vip-ink); font-weight: 700; }
#tab-dashboard .dashboard-wallet .btn-primary {
    background: linear-gradient(135deg, #347859, #255c43);
    box-shadow: 0 7px 15px rgba(39, 94, 65, .14);
}
#tab-dashboard .dashboard-gallery-status,
#tab-dashboard .dashboard-recent { background: rgba(255,255,255,.94); }
#tab-dashboard .dashboard-gallery-status .panel-heading,
#tab-dashboard .dashboard-recent .panel-heading {
    padding-bottom: 9px;
    border-bottom: 1px solid #edf2ed;
}
#tab-dashboard .dashboard-gallery-counts strong { color: var(--vip-green); font-weight: 700; }
#tab-dashboard .dashboard-sale { padding: 10px 0; }
#tab-dashboard .dashboard-sale > strong { color: #2e6d50; font-weight: 700; }

#tab-dashboard .plan-feature-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; }
#tab-dashboard .plan-feature-strip span { display: inline-flex; align-items: center; min-height: 24px; padding: 5px 9px; border: 1px solid rgba(214,237,170,.22); border-radius: 999px; background: rgba(255,255,255,.06); color: #e5f2dd; font-size: 10px; line-height: 1.2; white-space: nowrap; }
#tab-dashboard .plan-upgrade-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(214,237,170,.2); border-radius: 10px; background: rgba(214,237,170,.08); }
#tab-dashboard .plan-upgrade-strip div { display: grid; gap: 2px; }
#tab-dashboard .plan-upgrade-strip strong { color: #eff8e7; font-size: 11px; }
#tab-dashboard .plan-upgrade-strip span { color: #b6c9bb; font-size: 10px; }
#tab-dashboard .plan-upgrade-strip button { border: 1px solid rgba(214,237,170,.35); border-radius: 7px; background: transparent; color: #d6edaa; padding: 6px 9px; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#tab-dashboard .plan-upgrade-strip button:hover { background: rgba(214,237,170,.12); }
#tab-dashboard .plan-upgrade-complete { display: grid; justify-content: start; gap: 2px; }
.billing-panel { max-width: 860px; }
.billing-summary-head, .billing-history-heading, .billing-history-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.billing-summary-head h3 { margin: 5px 0; color: var(--vip-ink); font-family: Sora, Inter, sans-serif; font-size: 22px; }
.billing-summary-head p, .billing-history-heading span, .billing-actions span, .billing-history-row span { color: var(--overview-muted); font-size: 11px; }
.billing-status { padding: 6px 10px; border-radius: 999px; color: #2e6d50; background: #e5f2dd; font-size: 10px; font-weight: 800; }
.billing-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--vip-line); }
.billing-history-heading { margin-top: 18px; padding: 12px 0 8px; border-top: 1px solid var(--vip-line); }
.billing-history-heading h3 { margin: 0; color: var(--vip-ink); font-size: 14px; }
.billing-history-row { padding: 12px 0; border-bottom: 1px solid #edf2ed; }
.billing-history-row > div { display: grid; gap: 3px; }
.billing-history-row > strong { margin-left: auto; color: var(--vip-ink); }
.billing-history-row a { color: #2e6d50; font-size: 11px; font-weight: 700; text-decoration: none; }
.billing-empty { display: grid; gap: 8px; color: var(--vip-ink); }
.billing-empty span { color: var(--overview-muted); font-size: 12px; }
.billing-empty .btn { width: fit-content; margin-top: 5px; }

@media (max-width: 768px) {
    #tab-dashboard #plan-widget-panel { border-radius: 14px; }
    #tab-dashboard .stat-card { min-height: 96px; }
    #tab-dashboard .dashboard-trend-panel .dashboard-chart { min-height: 150px; }
    #tab-dashboard .plan-upgrade-strip { align-items: flex-start; flex-direction: column; }
    .billing-summary-head, .billing-actions, .billing-history-row { align-items: flex-start; flex-direction: column; }
    .billing-history-row > strong { margin-left: 0; }
}