/*
 * tokens.css — design tokens for BaseSource.WebAppBill.
 * Two themes on the <html> element via data-theme: "navy" (default) and "sheet".
 * app.css consumes ONLY these variables — never hardcodes a colour.
 *
 * The 8 badge-* classes + matching text-* utilities are REQUIRED: the server emits colorClass
 * as one of badge-{warning,info,primary,success,danger,secondary,dark,light} (BmInvoiceStatusMeta,
 * fallback badge-light) and the client derives the dot colour via replace('badge-','text-').
 * Every pill keeps text/background contrast >= 4.5:1.
 */

:root,
:root[data-theme="navy"] {
    /* Brand + accents */
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-contrast: #FFFFFF;

    /* Sidebar (navy) */
    --sidebar-bg: #0F172A;
    --sidebar-active: #1E293B;
    --sidebar-active-text: #FFFFFF;
    --sidebar-icon: #60A5FA;
    --sidebar-text: #E2E8F0;
    --sidebar-text-muted: #94A3B8;
    --sidebar-border: #1E293B;

    /* Surfaces */
    --page-bg: #F8FAFC;
    --card-bg: #FFFFFF;
    --topbar-bg: #FFFFFF;
    --overlay: rgba(15, 23, 42, 0.45);

    /* Lines */
    --grid-line: #E2E8F0;
    --grid-line-soft: #EEF2F7;
    --border: #E2E8F0;

    /* Text */
    --text: #1E293B;
    /* #475569 on --page-bg is ~7:1 — secondary text is read by older collectors outdoors, so the muted
       colour is a contrast floor, not a decoration. */
    --text-muted: #475569;
    --text-inverse: #F8FAFC;

    /* Semantic */
    --money-pos: #16A34A;
    --money-neg: #DC2626;
    --warn: #D97706;
    --danger: #DC2626;
    --success: #16A34A;
    --info: #2563EB;

    /* Table states */
    --row-hover: #F6F9FF;
    --row-selected: #EFF6FF;

    /* Radius + shadow */
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18);

    /* Layout metrics */
    --sidebar-width: 248px;
    --topbar-height: 60px;
    /* 48px: the floor for anything pressed — collectors are often older, on a phone, outdoors. */
    --touch: 48px;
    /* Height of the mobile bottom nav bar, shared with the content padding that keeps rows clear of it. */
    --bottom-nav-height: 60px;

    /* Type scale. Every font-size in app.css / pages / components reads one of these, so "Chữ lớn"
       below can raise the whole screen by changing six numbers. print.css keeps its own fixed sizes:
       a receipt is ink on paper and must not grow with a screen preference. */
    --fs-body: 16px;
    --fs-sub: 14px;
    --fs-label: 14px;
    --fs-title: 20px;
    --fs-money: 40px;
}

/* Sheet Light: only the sidebar cluster flips to a bright surface; content stays as-is. */
:root[data-theme="sheet"] {
    --sidebar-bg: #FFFFFF;
    --sidebar-active: #EFF6FF;
    --sidebar-active-text: #1D4ED8;
    --sidebar-icon: #2563EB;
    --sidebar-text: #1E293B;
    --sidebar-text-muted: #64748B;
    --sidebar-border: #E2E8F0;
}

/* "Chữ lớn" (per machine, localStorage bcTextSize; set on <html> before paint by _Layout). Only the
   scale and the touch floor move — layout rules read the tokens and follow. */
:root[data-text="large"] {
    --fs-body: 18px;
    --fs-sub: 16px;
    --fs-label: 16px;
    --fs-title: 22px;
    --fs-money: 48px;
    --touch: 56px;
    --bottom-nav-height: 72px;
}

/* ===================== Badges (8 server-emitted variants) ===================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.5;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge-warning   { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.badge-info      { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.badge-primary   { background: #E0E7FF; color: #3730A3; border-color: #C7D2FE; }
.badge-success   { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.badge-danger    { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
.badge-secondary { background: #E2E8F0; color: #334155; border-color: #CBD5E1; }
.badge-dark      { background: #334155; color: #F8FAFC; border-color: #334155; }
.badge-light     { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }

/* text-* utilities (coloured filter dots — client derives from badge class). */
.text-warning   { color: #B45309; }
.text-info      { color: #1E40AF; }
.text-primary   { color: #3730A3; }
.text-success   { color: #15803D; }
.text-danger    { color: #B91C1C; }
.text-secondary { color: #475569; }
.text-dark      { color: #1E293B; }
.text-light     { color: #94A3B8; }
.text-muted     { color: var(--text-muted); }