/* ============================================================
 * IDS Portal theme layer (Tier 1 visual refresh)
 *
 * Loads AFTER Bootstrap and re-skins it via CSS variables and
 * targeted component overrides. No page markup depends on this
 * file — removing it degrades gracefully to stock Bootstrap.
 *
 * Sections:
 *   1. Font (Inter, self-hosted — /public/fonts)
 *   2. Design tokens
 *   3. Bootstrap global variable overrides
 *   4. Typography scale
 *   5. Buttons
 *   6. Forms
 *   7. Cards
 *   8. Tables
 *   9. Badges + unified ticket-status colors
 *  10. Nav / pagination / dropdowns / modals / alerts
 *  11. App chrome refinements (topbar, sidebar, breadcrumbs)
 * ============================================================ */

/* ---------- 1. Font ---------- */
/* Inter variable font, latin subset, weights 100-900 in one 47 KB file.
   Self-hosted so the PWA works offline and no CDN request blocks paint. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin-var.woff2') format('woff2');
}

/* ---------- 2. Design tokens ---------- */
:root {
    /* Brand greens — anchored on the existing IDS green (#2e7d32). */
    --ids-green-050: #f0f7f0;
    --ids-green-100: #e7f3e8;
    --ids-green-500: #2e7d32;
    --ids-green-600: #256428;   /* hover / link (4.5:1 on white) */
    --ids-green-700: #1f5e23;
    --ids-green-800: #174a1b;

    /* Neutrals */
    --ids-gray-050: #f6f7f9;
    --ids-gray-100: #f1f3f5;
    --ids-gray-200: #e5e7eb;
    --ids-gray-300: #d1d5db;
    --ids-gray-400: #9ca3af;
    --ids-gray-500: #6b7280;
    --ids-gray-600: #4b5563;
    --ids-gray-700: #374151;
    --ids-gray-800: #1f2937;
    --ids-gray-900: #111827;

    /* Elevation */
    --ids-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ids-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
    --ids-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);
}

/* ---------- 3. Bootstrap global variable overrides ---------- */
:root {
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    --bs-body-bg: var(--ids-gray-050);
    --bs-body-color: var(--ids-gray-800);
    --bs-body-font-size: 0.9375rem;          /* 15px — denser, more app-like */
    --bs-border-color: var(--ids-gray-200);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;

    /* Re-point "primary" at the brand green everywhere Bootstrap uses it
       (bg-primary, text-primary, borders, focus rings, etc.). */
    --bs-primary: var(--ids-green-500);
    --bs-primary-rgb: 46, 125, 50;
    --bs-link-color: var(--ids-green-600);
    --bs-link-color-rgb: 37, 100, 40;
    --bs-link-hover-color: var(--ids-green-700);
    --bs-link-hover-color-rgb: 31, 94, 35;
    --bs-focus-ring-color: rgba(46, 125, 50, 0.22);

    /* Secondary text a touch darker than stock for AA contrast on gray bg. */
    --bs-secondary-color: var(--ids-gray-500);
}

/* Links: quiet by default, underline appears on hover (app convention). */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* …but never inside buttons, navs, badges, or cards-as-links. */
.btn:hover, .nav-link:hover, .navbar-brand:hover, .dropdown-item:hover,
.badge:hover, .page-link:hover, .ids-nav-item:hover, .kpi-card-link:hover,
.list-group-item-action:hover { text-decoration: none; }

/* ---------- 4. Typography scale ---------- */
/* Stock Bootstrap h1 (2.5rem) reads as a marketing page, not an ops tool.
   Tighter scale + heavier weight = data-dense, deliberate. */
/* No explicit color — headings inherit their context (dark on light pages,
   white inside dark heroes/cards) via Bootstrap's --bs-heading-color. */
:root { --bs-heading-color: var(--ids-gray-900); }
.auth-hero, .ids-sidebar, .text-white, .text-bg-dark, .bg-dark { --bs-heading-color: inherit; }
h1, .h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.015em; }
h2, .h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.1rem;  font-weight: 650; }
h4, .h4 { font-size: 1rem;    font-weight: 650; }
h5, .h5 { font-size: 0.9375rem; font-weight: 600; }
h6, .h6 { font-size: 0.875rem;  font-weight: 600; }
/* The login hero keeps its large display title. */
.auth-hero-title { font-size: 2.8rem; color: #fff; }

/* Page-title line: <h1> followed by a lead paragraph — pull them together. */
h1 + .text-muted, h1 + p.text-muted { font-size: 0.875rem; margin-bottom: 0.25rem; }

/* Inline code (ticket numbers etc.) — neutral chip, not Bootstrap pink. */
code {
    color: var(--ids-gray-700);
    background: var(--ids-gray-100);
    border: 1px solid var(--ids-gray-200);
    padding: 0.1em 0.4em;
    border-radius: 0.3rem;
    font-size: 0.8125em;
}

/* ---------- 5. Buttons ---------- */
.btn {
    font-weight: 550;
    letter-spacing: 0.005em;
}
.btn-primary {
    --bs-btn-bg: var(--ids-green-500);
    --bs-btn-border-color: var(--ids-green-500);
    --bs-btn-hover-bg: var(--ids-green-600);
    --bs-btn-hover-border-color: var(--ids-green-600);
    --bs-btn-active-bg: var(--ids-green-700);
    --bs-btn-active-border-color: var(--ids-green-700);
    --bs-btn-disabled-bg: var(--ids-green-500);
    --bs-btn-disabled-border-color: var(--ids-green-500);
    --bs-btn-focus-shadow-rgb: 46, 125, 50;
}
.btn-outline-primary {
    --bs-btn-color: var(--ids-green-600);
    --bs-btn-border-color: var(--ids-green-500);
    --bs-btn-hover-bg: var(--ids-green-500);
    --bs-btn-hover-border-color: var(--ids-green-500);
    --bs-btn-active-bg: var(--ids-green-700);
    --bs-btn-active-border-color: var(--ids-green-700);
    --bs-btn-focus-shadow-rgb: 46, 125, 50;
}
/* Quick-filter pills and secondary outline buttons: neutral, not blue-gray. */
.btn-outline-secondary {
    --bs-btn-color: var(--ids-gray-600);
    --bs-btn-border-color: var(--ids-gray-300);
    --bs-btn-hover-color: var(--ids-gray-800);
    --bs-btn-hover-bg: var(--ids-gray-100);
    --bs-btn-hover-border-color: var(--ids-gray-300);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ids-gray-700);
    --bs-btn-active-border-color: var(--ids-gray-700);
}

/* ---------- 6. Forms ---------- */
.form-control, .form-select {
    border-color: var(--ids-gray-300);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ids-green-500);
    box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.15);
}
.form-check-input:checked {
    background-color: var(--ids-green-500);
    border-color: var(--ids-green-500);
}
.form-check-input:focus {
    border-color: var(--ids-green-500);
    box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.15);
}
.form-label { font-weight: 550; color: var(--ids-gray-700); }
.form-label-sm, .form-label.form-label-sm {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ids-gray-500);
    font-weight: 600;
}

/* ---------- 7. Cards ---------- */
.card {
    border: 1px solid var(--ids-gray-200);
    border-radius: 0.625rem;
}
/* Nearly every card in the app carries .shadow-sm — refine that shadow
   globally to a soft, modern elevation instead of Bootstrap's default. */
.shadow-sm { box-shadow: var(--ids-shadow-sm) !important; }
.shadow    { box-shadow: var(--ids-shadow-md) !important; }
.card .card-header {
    background: transparent;
    border-bottom-color: var(--ids-gray-200);
    font-weight: 600;
}
.card .card-footer {
    background: var(--ids-gray-050);
    border-top-color: var(--ids-gray-200);
}

/* ---------- 8. Tables ---------- */
.table {
    font-variant-numeric: tabular-nums;   /* columns of figures align */
    --bs-table-hover-bg: var(--ids-green-050);
}
.table > thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--ids-gray-500);
    border-bottom-width: 1px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
/* Neutralize the gray .table-light header fill — the type treatment above
   does the work; the fill just adds visual weight. */
.table > thead.table-light, .table .table-light {
    --bs-table-bg: transparent;
    background: transparent;
}
.table > tbody td { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.table > :not(caption) > * > * { border-bottom-color: var(--ids-gray-100); }

/* ---------- 9. Badges + unified ticket-status colors ---------- */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 0.375rem;
    padding: 0.32em 0.55em;
}
/* Soft-tint status pills — one source of truth for the ticket lifecycle.
   Use: <span class="badge status-badge status-approved">approved</span> */
.status-badge {
    text-transform: capitalize;
    border: 1px solid transparent;
}
.status-draft     { background: var(--ids-gray-100);  color: var(--ids-gray-600);  border-color: var(--ids-gray-200); }
.status-submitted { background: #fff7e6; color: #92610e; border-color: #f5d9a8; }
.status-approved  { background: var(--ids-green-050); color: var(--ids-green-600); border-color: #c4e0c5; }
.status-invoiced  { background: #eef4ff; color: #3450a2; border-color: #c9d8f5; }
.status-paid      { background: #e6f6f1; color: #0e6e54; border-color: #b8e0d4; }
.status-voided    { background: #fdecec; color: #a13030; border-color: #f2c6c6; }
.status-archived  { background: var(--ids-gray-100);  color: var(--ids-gray-500);  border-color: var(--ids-gray-200); }

/* ---------- 10. Nav / pagination / dropdowns / modals / alerts ---------- */
.pagination {
    --bs-pagination-color: var(--ids-gray-600);
    --bs-pagination-hover-color: var(--ids-green-700);
    --bs-pagination-focus-color: var(--ids-green-700);
    --bs-pagination-active-bg: var(--ids-green-500);
    --bs-pagination-active-border-color: var(--ids-green-500);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.15);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ids-green-500);
}
.nav-tabs .nav-link { color: var(--ids-gray-600); }
.nav-tabs .nav-link.active { font-weight: 600; }
.dropdown-menu {
    border: 1px solid var(--ids-gray-200);
    border-radius: 0.625rem;
    box-shadow: var(--ids-shadow-lg);
    font-size: 0.9rem;
}
.modal-content {
    border: none;
    border-radius: 0.75rem;
    box-shadow: var(--ids-shadow-lg);
}
.alert { border-radius: 0.625rem; }
.breadcrumb { font-size: 0.8125rem; }

/* progress bars pick up the brand */
.progress-bar { background-color: var(--ids-green-500); }

/* ---------- 11. App chrome refinements ---------- */
.ids-topbar {
    border-bottom-color: var(--ids-gray-200);
}
.ids-search .form-control {
    background: var(--ids-gray-100);
    border-color: transparent;
    border-radius: 0.5rem;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.ids-search .form-control:focus {
    background: #fff;
    border-color: var(--ids-green-500);
}
/* Sidebar: slightly larger brand area, brand-green active rail refined. */
.ids-nav-item.active {
    background: rgba(46, 125, 50, 0.22);
    font-weight: 600;
}
.ids-main-content { padding: 1.5rem 1.75rem 2.25rem; }

/* Flash messages stay visible while the page scrolls (sticky under topbar).
   (Legacy — the app shell now renders flashes as toasts; auth pages still
   use .auth-flash.) */
.ids-flash-wrap {
    position: sticky;
    top: 3.4rem;
    z-index: 1025;
    padding: 0.75rem 1.75rem 0;
}
.ids-flash-wrap .alert {
    box-shadow: var(--ids-shadow-md);
    margin-bottom: 0;
}

/* ---------- 12. Toasts ---------- */
.ids-toast-region {
    position: fixed;
    top: calc(3.6rem + env(safe-area-inset-top, 0px));
    right: 1rem;
    z-index: 2060;               /* above modals (1055) and preview banners */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(420px, calc(100vw - 2rem));
}
.ids-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid var(--ids-gray-200);
    border-radius: 0.625rem;
    box-shadow: var(--ids-shadow-lg);
    font-size: 0.875rem;
    animation: ids-toast-in 0.22s ease-out;
}
@keyframes ids-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ids-toast-leaving { opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s; }
.ids-toast-icon { font-size: 1rem; margin-top: 1px; }
.ids-toast-success .ids-toast-icon { color: var(--ids-green-500); }
.ids-toast-danger  .ids-toast-icon { color: #b91c1c; }
.ids-toast-warning .ids-toast-icon { color: #b45309; }
.ids-toast-info    .ids-toast-icon { color: #2563eb; }
.ids-toast-success { border-left: 3px solid var(--ids-green-500); }
.ids-toast-danger  { border-left: 3px solid #b91c1c; }
.ids-toast-warning { border-left: 3px solid #d97706; }
.ids-toast-info    { border-left: 3px solid #2563eb; }
.ids-toast-text { flex: 1; min-width: 0; }
.ids-toast-close {
    background: none; border: none; padding: 0 0.15rem;
    font-size: 1.1rem; line-height: 1; color: var(--ids-gray-400); cursor: pointer;
}
.ids-toast-close:hover { color: var(--ids-gray-700); }

/* ---------- 13. Page header + empty states ---------- */
.ids-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ids-page-header h1 { margin-bottom: 0.15rem; }
.ids-page-header .ids-page-subtitle {
    font-size: 0.875rem;
    color: var(--ids-gray-500);
    margin: 0;
}
.ids-page-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.ids-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #fff;
    border: 1px dashed var(--ids-gray-300);
    border-radius: 0.75rem;
    color: var(--ids-gray-500);
}
.ids-empty-icon {
    width: 3rem; height: 3rem;
    margin: 0 auto 0.75rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--ids-gray-100);
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--ids-gray-400);
}
.ids-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ids-gray-700);
    margin-bottom: 0.2rem;
}
.ids-empty-text { font-size: 0.875rem; margin-bottom: 0; }
.ids-empty .btn { margin-top: 0.9rem; }

/* ---------- 14. Loading buttons, stat tiles, nav cards ---------- */
.ids-btn-loading {
    pointer-events: none;
    opacity: 0.8;
}

/* KPI stat tile — headline number with a micro-label and support line.
   Numbers use tabular figures so tiles align in a row. */
.ids-stat-tile .card-body { padding: 1rem 1.15rem; }
.ids-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--ids-gray-500);
    margin-bottom: 0.15rem;
}
.ids-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ids-gray-900);
    line-height: 1.2;
}
.ids-stat-sub {
    font-size: 0.78rem;
    color: var(--ids-gray-500);
    margin-top: 0.15rem;
}
.ids-stat-tile.is-positive .ids-stat-value { color: var(--ids-green-600); }

/* Navigation card — icon chip + title + description, whole card clickable. */
a.ids-nav-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.12s ease, transform 0.08s ease;
}
a.ids-nav-card:hover {
    text-decoration: none;
    box-shadow: var(--ids-shadow-md);
}
a.ids-nav-card:active { transform: scale(0.995); }
.ids-nav-card .ids-nav-card-title {
    font-weight: 600;
    color: var(--ids-gray-900);
    margin-bottom: 0.1rem;
}
.ids-nav-card .ids-nav-card-text {
    font-size: 0.8125rem;
    color: var(--ids-gray-500);
    margin: 0;
}
.ids-icon-chip {
    width: 2.4rem; height: 2.4rem;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.6rem;
    font-size: 1.05rem;
}
.ids-chip-green  { background: var(--ids-green-050); color: var(--ids-green-600); }
.ids-chip-blue   { background: #eef4ff; color: #1565c0; }
.ids-chip-amber  { background: #fff7e6; color: #b45309; }
.ids-chip-purple { background: #f3e8ff; color: #7c3aed; }
.ids-chip-cyan   { background: #e6f7fb; color: #0e7490; }
.ids-chip-gray   { background: var(--ids-gray-100); color: var(--ids-gray-600); }

/* ============================================================
 * 15. Dark mode
 *
 * Driven by data-bs-theme="dark" on <html> (set pre-paint by the
 * boot script in the layout head; user preference in localStorage
 * key 'ids-theme': light | dark | auto). Bootstrap 5.3's built-in
 * dark theme restyles its own components; this section re-points
 * our tokens and skins the custom pieces.
 * ============================================================ */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-body-bg: #12161d;
    --bs-body-color: #cbd2dc;
    --bs-border-color: #2a3240;
    --bs-heading-color: #eef1f5;
    --bs-secondary-color: #8b94a3;
    --bs-tertiary-bg: #1a202a;
    --bs-link-color: #6cbf72;
    --bs-link-color-rgb: 108, 191, 114;
    --bs-link-hover-color: #85d18b;
    --bs-link-hover-color-rgb: 133, 209, 139;
    --bs-focus-ring-color: rgba(108, 191, 114, 0.25);

    --ids-surface: #1a202a;
    --ids-surface-2: #202836;
    --ids-border: #2a3240;
    --ids-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ids-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --ids-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] body { background: var(--bs-body-bg); }

/* Surfaces */
[data-bs-theme="dark"] .card {
    background: var(--ids-surface);
    border-color: var(--ids-border);
}
[data-bs-theme="dark"] .card .card-footer { background: #171d26; border-top-color: var(--ids-border); }
[data-bs-theme="dark"] .card .card-header { border-bottom-color: var(--ids-border); }
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .ids-toast {
    background: var(--ids-surface-2);
    border-color: var(--ids-border);
}
[data-bs-theme="dark"] .ids-topbar {
    background: #161b23;
    border-bottom-color: var(--ids-border);
}
[data-bs-theme="dark"] .ids-search .form-control { background: #202836; color: var(--bs-body-color); }
[data-bs-theme="dark"] .ids-search .form-control:focus { background: #232c3c; }

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: #1a212c;
    border-color: #333c4b;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .form-control::placeholder { color: #6b7484; }
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-label-sm,
[data-bs-theme="dark"] .form-label.form-label-sm { color: #a3adbd; }

/* Tables */
[data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(108, 191, 114, 0.06); }
[data-bs-theme="dark"] .table > thead th { color: #8b94a3; }
[data-bs-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: #232a35; }

/* Buttons */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #b6bfcc;
    --bs-btn-border-color: #3a4453;
    --bs-btn-hover-color: #e5e9ef;
    --bs-btn-hover-bg: #232c3c;
    --bs-btn-hover-border-color: #3a4453;
    --bs-btn-active-bg: #39424f;
    --bs-btn-active-border-color: #39424f;
}

/* Bootstrap color utilities that hardcode near-black/white (with !important)
   — remap so table sort-header links and light chips survive dark mode. */
[data-bs-theme="dark"] .text-dark { color: #dee3ea !important; }
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .bg-light {
    background-color: #2a3240 !important;
    color: #cbd2dc !important;
}
[data-bs-theme="dark"] .table-light { --bs-table-bg: transparent; color: inherit; }

/* Code chips + status badges */
[data-bs-theme="dark"] code {
    color: #b9c2cf;
    background: #232a35;
    border-color: #2f3846;
}
[data-bs-theme="dark"] .status-draft     { background: #262c37; color: #9aa3b2; border-color: #333b49; }
[data-bs-theme="dark"] .status-submitted { background: #37290f; color: #e3b34f; border-color: #57431a; }
[data-bs-theme="dark"] .status-approved  { background: #16301b; color: #7fc985; border-color: #24512c; }
[data-bs-theme="dark"] .status-invoiced  { background: #182647; color: #8fb0f0; border-color: #23386b; }
[data-bs-theme="dark"] .status-paid      { background: #10322b; color: #5fd0b0; border-color: #1c4f44; }
[data-bs-theme="dark"] .status-voided    { background: #3b1a1a; color: #ef8f8f; border-color: #5c2626; }
[data-bs-theme="dark"] .status-archived  { background: #232933; color: #7e8898; border-color: #2f3745; }

/* Icon chips */
[data-bs-theme="dark"] .ids-chip-green  { background: rgba(87, 169, 93, 0.16);  color: #7fc985; }
[data-bs-theme="dark"] .ids-chip-blue   { background: rgba(74, 139, 199, 0.16); color: #8fb0f0; }
[data-bs-theme="dark"] .ids-chip-amber  { background: rgba(201, 130, 26, 0.16); color: #e3b34f; }
[data-bs-theme="dark"] .ids-chip-purple { background: rgba(152, 120, 232, 0.18); color: #b9a3f2; }
[data-bs-theme="dark"] .ids-chip-cyan   { background: rgba(29, 151, 174, 0.16); color: #55c3d8; }
[data-bs-theme="dark"] .ids-chip-gray   { background: #262c37; color: #9aa3b2; }

/* Empty states + stat tiles */
[data-bs-theme="dark"] .ids-empty { background: var(--ids-surface); border-color: #333c4b; color: #8b94a3; }
[data-bs-theme="dark"] .ids-empty-icon { background: #232a35; color: #6b7484; }
[data-bs-theme="dark"] .ids-empty-title { color: #cbd2dc; }
[data-bs-theme="dark"] .ids-stat-value { color: #eef1f5; }
[data-bs-theme="dark"] .ids-stat-tile.is-positive .ids-stat-value { color: #7fc985; }
[data-bs-theme="dark"] .ids-nav-card .ids-nav-card-title { color: #e5e9ef; }

/* Auth pages */
[data-bs-theme="dark"] .auth-body { background: #0f1319; }
[data-bs-theme="dark"] .auth-panel { background: #141920; }
[data-bs-theme="dark"] .auth-card-title { color: #eef1f5; }
[data-bs-theme="dark"] .auth-card-subtitle,
[data-bs-theme="dark"] .auth-card-footer { color: #8b94a3; }
[data-bs-theme="dark"] .auth-card .input-group-text { background: #1a212c; border-color: #333c4b; color: #6b7484; }

/* Theme toggle button icon color */
.ids-theme-toggle { min-width: 2.15rem; }

/* ============================================================
 * 16. Command palette (Ctrl/Cmd+K)
 * ============================================================ */
.ids-cmdk-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2070;                /* above toasts */
    background: rgba(10, 14, 20, 0.55);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 1rem 1rem;
}
.ids-cmdk {
    width: min(580px, 100%);
    background: #fff;
    border: 1px solid var(--ids-gray-200);
    border-radius: 0.75rem;
    box-shadow: var(--ids-shadow-lg);
    overflow: hidden;
    animation: ids-toast-in 0.15s ease-out;
}
.ids-cmdk-inputrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--ids-gray-100);
    color: var(--ids-gray-400);
}
.ids-cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--ids-gray-800);
}
.ids-cmdk kbd {
    background: var(--ids-gray-100);
    border: 1px solid var(--ids-gray-200);
    border-radius: 0.3rem;
    color: var(--ids-gray-500);
    font-size: 0.68rem;
    padding: 0.1rem 0.35rem;
}
.ids-cmdk-list {
    max-height: min(46vh, 420px);
    overflow-y: auto;
    padding: 0.35rem;
}
.ids-cmdk-group {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--ids-gray-400);
    padding: 0.5rem 0.65rem 0.2rem;
}
.ids-cmdk-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
    color: var(--ids-gray-800);
    cursor: pointer;
}
.ids-cmdk-item i { color: var(--ids-gray-400); font-size: 0.95rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.ids-cmdk-item .ids-cmdk-title { flex-shrink: 0; }
.ids-cmdk-item .ids-cmdk-sub {
    color: var(--ids-gray-400);
    font-size: 0.78rem;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ids-cmdk-item.active {
    background: var(--ids-green-050);
    color: var(--ids-green-700);
}
.ids-cmdk-item.active i { color: var(--ids-green-600); }
.ids-cmdk-empty {
    text-align: center;
    color: var(--ids-gray-400);
    font-size: 0.85rem;
    padding: 1.6rem 1rem;
}
.ids-cmdk-foot {
    display: flex;
    gap: 1rem;
    padding: 0.45rem 1rem;
    border-top: 1px solid var(--ids-gray-100);
    font-size: 0.72rem;
    color: var(--ids-gray-400);
}
.ids-search { position: relative; }
.ids-search-kbd {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid var(--ids-gray-200);
    border-radius: 0.3rem;
    color: var(--ids-gray-400);
    font-size: 0.66rem;
    padding: 0.1rem 0.35rem;
    cursor: pointer;
}

[data-bs-theme="dark"] .ids-cmdk { background: var(--ids-surface-2); border-color: var(--ids-border); }
[data-bs-theme="dark"] .ids-cmdk-inputrow { border-bottom-color: #232a35; }
[data-bs-theme="dark"] .ids-cmdk-input { color: #e5e9ef; }
[data-bs-theme="dark"] .ids-cmdk kbd { background: #262c37; border-color: #333b49; color: #8b94a3; }
[data-bs-theme="dark"] .ids-cmdk-item { color: #cbd2dc; }
[data-bs-theme="dark"] .ids-cmdk-item.active { background: rgba(87, 169, 93, 0.16); color: #a5d8a9; }
[data-bs-theme="dark"] .ids-cmdk-item.active i { color: #7fc985; }
[data-bs-theme="dark"] .ids-cmdk-foot { border-top-color: #232a35; }
[data-bs-theme="dark"] .ids-search-kbd { background: #232c3c; border-color: #333b49; color: #8b94a3; }

/* ============================================================
 * 17. Offline capture chip (queued reports awaiting sync)
 * ============================================================ */
.ids-offline-chip {
    position: fixed;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2050;
    background: var(--ids-gray-800);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 550;
    padding: 0.45rem 0.9rem;
    border-radius: 2rem;
    box-shadow: var(--ids-shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    max-width: calc(100vw - 2rem);
}
[data-bs-theme="dark"] .ids-offline-chip { background: #2a3240; }