/* ── Fonts ────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ── CSS tokens — Light Mode ──────────────────────────────── */
:root {
    --brand-primary:        #0F766E;
    --brand-primary-hover:  #115E59;
    --brand-primary-active: #134E4A;
    --brand-primary-light:  #CCFBF1;
    --brand-primary-subtle: #F0FDFA;

    --bg-app:       #F7F9FC;
    --bg-surface:   #FFFFFF;
    --bg-hover:     #F1F5F9;
    --bg-selected:  #F0FDFA;
    --bg-disabled:  #F3F4F6;

    --border-subtle:  #E4E7EB;
    --border-default: #D1D5DB;
    --border-strong:  #9CA3AF;
    --border-focus:   #0F766E;

    --text-primary:    #1F2937;
    --text-secondary:  #6B7280;
    --text-tertiary:   #9CA3AF;
    --text-on-brand:   #FFFFFF;
    --text-link:       #0F766E;
    --text-link-hover: #115E59;

    --success:       #059669;
    --success-light: #D1FAE5;
    --warning:       #D97706;
    --warning-light: #FEF3C7;
    --danger:        #DC2626;
    --danger-light:  #FEE2E2;
    --info:          #2563EB;
    --info-light:    #DBEAFE;
}

/* ── CSS tokens — Dark Mode ───────────────────────────────── */
html.dark {
    --brand-primary:        #14B8A6;
    --brand-primary-hover:  #2DD4BF;
    --brand-primary-active: #5EEAD4;
    --brand-primary-light:  #134E4A;
    --brand-primary-subtle: #042F2E;

    --bg-app:       #0F172A;
    --bg-surface:   #1E293B;
    --bg-hover:     #334155;
    --bg-selected:  #134E4A;
    --bg-disabled:  #1E293B;

    --border-subtle:  #334155;
    --border-default: #475569;
    --border-strong:  #64748B;
    --border-focus:   #14B8A6;

    --text-primary:    #F1F5F9;
    --text-secondary:  #CBD5E1;
    --text-tertiary:   #94A3B8;
    --text-on-brand:   #FFFFFF;
    --text-link:       #14B8A6;
    --text-link-hover: #2DD4BF;

    --success:       #059669;
    --success-light: #064E3B;
    --warning:       #D97706;
    --warning-light: #451A03;
    --danger:        #DC2626;
    --danger-light:  #450A0A;
    --info:          #2563EB;
    --info-light:    #1E3A8A;
}

/* ── Global ───────────────────────────────────────────────── */
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg-app);
    color: var(--text-primary);
    margin: 0;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s ease, color 0.2s ease;
}

#react-entry-point,
._dash-app-content {
    background: var(--bg-app);
    min-height: 100vh;
}

/* ── Layout ───────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 240px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.sidebar-nav-section {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.sidebar-footer {
    flex-shrink: 0;
    padding: 0 0 8px;
    border-top: 1px solid var(--border-subtle);
}

.page-content {
    margin-left: 240px;
    padding: 24px 32px;
    min-height: 100vh;
    background: var(--bg-app);
    transition: background 0.2s ease;
}

/* ── Sidebar header ───────────────────────────────────────── */
.sidebar-header {
    padding: 8px 16px 16px;
}

.sidebar-logo {
    height: 28px;
    width: auto;
    display: block;
    margin-bottom: 2px;
}

html.dark .sidebar-logo {
    filter: brightness(0) invert(1);
}

.sidebar-subtitle {
    color: var(--text-secondary);
    font-size: 0.7rem;
    margin-bottom: 0;
    font-weight: 400;
}

.sidebar-divider {
    border-color: var(--border-subtle);
    margin: 0 0 8px;
}

/* ── Sidebar nav ──────────────────────────────────────────── */
.sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 0;
    border-left: 3px solid transparent;
    transition: background 0.12s ease, color 0.12s ease;
    margin-bottom: 0;
}

.sidebar .nav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar .nav-link.active {
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
    border-left-color: var(--brand-primary);
    font-weight: 600;
}

/* ── Theme toggle button ──────────────────────────────────── */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    width: calc(100% - 24px);
    margin: 8px 12px 4px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    letter-spacing: 0.02em;
    gap: 6px;
}

.theme-toggle-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-default);
}

/* ── Toolbar pills ────────────────────────────────────────── */
.page-toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}

.toolbar-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    cursor: default;
    letter-spacing: 0.02em;
}

.toolbar-pill.active {
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
    border-color: var(--brand-primary-light);
    font-weight: 600;
}

/* ── Table card ───────────────────────────────────────────── */
.table-card {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(31, 41, 55, 0.04);
    background: var(--bg-surface);
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.table-card .card-body {
    padding: 0;
}

/* ── DataTable: Poppins + tabular-nums ────────────────────── */
.dash-table-container {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
}

.dash-table-container .dash-spreadsheet-container
.dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-container
.dash-spreadsheet-inner th {
    font-family: 'Poppins', sans-serif !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
}

/* Sticky column shadow */
.dash-fixed-column {
    box-shadow: 2px 0 6px rgba(31, 41, 55, 0.06) !important;
}

/* Pagination */
.previous-next-container {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 16px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    transition: background 0.2s ease;
}

/* ── Dark mode — DataTable overrides ─────────────────────── */
html.dark .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #0F172A !important;
    color: #CBD5E1 !important;
    border-bottom-color: #334155 !important;
}

html.dark .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: #1E293B !important;
    color: #F1F5F9 !important;
    border-bottom-color: #334155 !important;
}

html.dark .dash-spreadsheet-container .dash-spreadsheet-inner
tr.odd td {
    background-color: #0F172A !important;
}

html.dark .dash-table-container .dash-spreadsheet-inner input {
    background-color: #1E293B !important;
    color: #F1F5F9 !important;
}

html.dark .previous-next-container {
    background: #1E293B;
    color: #CBD5E1;
    border-top-color: #334155;
}

html.dark .dash-fixed-column {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4) !important;
}

/* ── Dark mode — Bootstrap card override ─────────────────── */
html.dark .card {
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
}

html.dark .table-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-app); }
::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-default); }

/* ── Focus states ─────────────────────────────────────────── */
*:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
    border-color: var(--border-focus);
}

html.dark *:focus-visible {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25);
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Header account / logout links ───────────────────────── */
.header-account-link,
.header-logout-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.header-account-link {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    margin-right: 6px;
}

.header-account-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-default);
    text-decoration: none;
}

.header-logout-btn {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    margin-right: 10px;
}

.header-logout-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-default);
    text-decoration: none;
}