/* ------------------------------------------------------------
   Brand tokens
   The only place Kromeka colors, spacing, and control sizes are defined.
   Change a button color or height here. Screen CSS must use these variables.
   Load this file before every other Kromeka stylesheet.
------------------------------------------------------------ */
:root {
    color-scheme: light;

    /* Brand Colors */
    --kromeka-red: #af161e;
    --kromeka-red-dark: #841117;
    --kromeka-grey: #878787;
    --kromeka-dark: #1d1d1b;
    --kromeka-yellow: #F5B51F;
    --kromeka-dark-grey: #575756;
    --kromeka-light-grey: #EDEDED;
    /* Workflow status fills. White badge text meets 4.5:1 except yellow, which uses dark text. */
    --kromeka-success: #2f7a4a;
    --kromeka-status-neutral: #6b6b69;
    --kromeka-status-info: #3d5a73;
    --kromeka-status-progress: var(--kromeka-yellow);
    --kromeka-status-progress-text: var(--kromeka-dark);
    --kromeka-status-revision-bg: #f6e3a8;
    --kromeka-status-revision-text: var(--kromeka-dark);
    --kromeka-status-revision-border: var(--kromeka-yellow);
    --kromeka-status-testing: var(--kromeka-dark-grey);
    --kromeka-status-muted: #4a4a48;
    --kromeka-status-installation: #a8501c;
    --kromeka-status-startup: #2e6b66;
    --kromeka-status-shipped: #5b4a6b;
    --kromeka-status-danger: var(--kromeka-red);
    --task-status-check-color: var(--kromeka-success);
    --kromeka-breakpoint-md: 768px;
    --note-font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* Theme Variables - Light Mode (Default) */
    --bg-body: #f8f9fa;
    --bg-card: #ffffff;
    --bg-card-header: var(--kromeka-dark-grey);
    --text-main: var(--kromeka-dark);
    --text-card-header: #ffffff;
    --text-muted: var(--kromeka-grey);
    /* Brand emphasis (headings, titles, active tabs). Dark theme switches this to yellow. */
    --text-accent: var(--kromeka-red);
    /* Warnings (errors, overdue, required, Delete). Dark theme uses a lighter red. */
    --text-danger: var(--kromeka-red);
    --link-color: var(--kromeka-red-dark);
    --link-hover-color: var(--kromeka-red);
    /* Bootstrap paints links, .text-primary, .bg-primary, and spinners from these. */
    --bs-primary: var(--kromeka-red);
    --bs-primary-rgb: 175, 22, 30;
    --bs-primary-text-emphasis: var(--kromeka-red-dark);
    --bs-primary-bg-subtle: #f8e8e9;
    --bs-primary-border-subtle: #e3b4b7;
    --bs-link-color: var(--kromeka-red-dark);
    --bs-link-hover-color: var(--kromeka-red);
    --bs-link-color-rgb: 132, 17, 23;
    --bs-link-hover-color-rgb: 175, 22, 30;
    --border-color: #dee2e6;
    --hover-bg: #f0f0f0;
    --navbar-bg: var(--kromeka-dark);
    --navbar-text: rgba(255,255,255,0.8);
    --navbar-hover: var(--kromeka-yellow);
    --footer-border: #ddd;
    /* Tab text: readable in light theme (inactive tabs) */
    --tab-inactive-text: #495057;

    /* Input Variables - Light Mode */
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #dee2e6;
    --input-hover-bg: #f8f9fa;
    --input-focus-bg: #ffffff;
    --input-focus-text: #212529;
    --input-placeholder: #6c757d;
    --bg-secondary: #e9ecef;
    --action-primary-bg: var(--kromeka-red);
    --action-primary-text: #ffffff;
    --action-primary-hover: var(--kromeka-red-dark);
    --action-secondary-bg: transparent;
    --action-secondary-text: var(--text-main);
    --action-secondary-border: var(--border-color);
    --action-secondary-hover-bg: var(--hover-bg);
    --action-danger-bg: #7c2b2f;
    --action-danger-text: #ffffff;
    --action-danger-hover: #652226;
    --unsaved-bg: rgba(245, 181, 31, 0.18);
    --unsaved-text: #7a5b12;
    --notebook-select-bg: rgba(175, 22, 30, 0.08);
    --table-header-text: #212529;
    --table-sort-link: #212529;
    --table-sort-link-hover: #111111;
    --table-sort-icon: #495057;
    --pagination-bg: #ffffff;
    --pagination-text: #343a40;
    --pagination-border: #ced4da;
    --pagination-hover-bg: #f0f2f4;
    --pagination-hover-text: #1f2327;
    --pagination-active-bg: var(--kromeka-red);
    --pagination-active-text: #ffffff;
    --pagination-active-border: var(--kromeka-red);
    --pagination-disabled-bg: #f4f5f6;
    --pagination-disabled-text: #8a9096;
    --table-striped-bg: #f3f3f1;

    /* Toolbar / card-header filter strips (labels on grey or dark surfaces) */
    --toolbar-surface-bg: var(--bg-card-header);
    --toolbar-label-text: #f0f0f0;
    --toolbar-label-muted: #d6d6d6;
    --card-header-label-text: var(--toolbar-label-text);
    --card-header-btn-bg: #f0f0f0;
    --card-header-btn-text: #212529;
    --card-header-btn-border: rgba(255, 255, 255, 0.5);
    --card-header-btn-hover-bg: #ffffff;
    --card-header-btn-hover-text: #212529;
    --card-header-btn-hover-border: rgba(255, 255, 255, 0.8);

    /* App shell layout tokens (aligned with .kromeka-app-navbar__shell) */
    --kromeka-content-gutter: max(1.5rem, env(safe-area-inset-left, 0px));
    --kromeka-content-gutter-end: max(1.5rem, env(safe-area-inset-right, 0px));
    --kromeka-section-gap: 1rem;
    --kromeka-readable-max-width: 52rem;
    --kromeka-surface-border: var(--border-color);
    --kromeka-surface-shadow: 0 1px 2px rgba(29, 29, 27, 0.06);
    --kromeka-card-header-pad-y: 0.65rem;
    --kromeka-card-header-pad-x: 1rem;

    /* Open-style action button (yellow accent) - light theme uses dark text for contrast */
    --btn-open-border: var(--kromeka-yellow);
    --btn-open-text: var(--kromeka-dark);
    --btn-open-hover-border: #d4a01b;

    /* Kromeka data tables: inner vertical scrollbar — thicker and higher contrast
       than the browser bar so users notice the table scrolls separately. */
    --kromeka-table-v-scrollbar-width: 16px;
    --kromeka-table-v-scrollbar-track: var(--kromeka-light-grey);
    --kromeka-table-v-scrollbar-thumb: #9b9b98;
    --kromeka-table-v-scrollbar-thumb-hover: var(--kromeka-red);
    --kromeka-table-v-scrollbar-thumb-inset: 3px;

    /* Sticky thead strip + column filter funnel (WO list, list pages, PP alignment) */
    --kromeka-data-table-thead-bg: #565554;
    --kromeka-data-table-thead-text: #fbfaf8;
    --kromeka-data-table-thead-sort-link: #fbfaf8;
    --kromeka-data-table-thead-sort-link-hover: #ffffff;
    --kromeka-data-table-thead-sort-icon: rgba(255, 255, 255, 0.88);
    --kromeka-data-table-filter-icon: #eeb01f;
    --kromeka-data-table-filter-glow: rgba(238, 176, 31, 0.45);

    /* Toolbar control tokens — single source for all .kromeka-table-toolbar controls */
    --toolbar-control-height: 34px;
    --toolbar-control-font-size: 0.8125rem;
    --toolbar-control-radius: 4px;
    --toolbar-select-min-width: 140px;

    /* Standard button metrics (page actions, forms, modals) */
    --kromeka-btn-height: 44px;
    --kromeka-btn-height-sm: 34px;
    --kromeka-btn-padding-x: 18px;
    --kromeka-btn-font-size: 0.95rem;
    --kromeka-btn-font-weight: 600;
    --kromeka-btn-line-height: 1;
    --kromeka-btn-radius: 0;

    /* Standard single-line form controls (inputs, selects, Select2, input-group) */
    --kromeka-control-height: calc(1.5em + 0.75rem + 2px);
    --kromeka-control-padding-y: 0.375rem;
    --kromeka-control-padding-x: 0.75rem;

    /* Milestone plan status (Pre-Manufacturing Smart links) */
    --wo-ms-plan-upcoming-bg: rgba(245, 181, 31, 0.22);
    --wo-ms-plan-delayed-bg: rgba(175, 22, 30, 0.14);
    --wo-ms-plan-done-bg: rgba(25, 135, 84, 0.16);
    --wo-ms-plan-done-border: var(--kromeka-success);
    --wo-ms-plan-late-border: var(--kromeka-red);
    --wo-ms-plan-alert-text: var(--text-danger);
}

@media (max-width: 575.98px) {
    :root {
        --kromeka-content-gutter: max(1.25rem, env(safe-area-inset-left, 0px));
        --kromeka-content-gutter-end: max(1.25rem, env(safe-area-inset-right, 0px));
    }
}

[data-theme="dark"] {
    color-scheme: dark;

    /* Theme Variables - Dark Mode */
    --bg-body: #121211; /* Slightly darker version of Kromeka Dark */
    --bs-body-bg: #121211;
    --bg-card: #2c2c2a; /* Slightly lighter for contrast */
    --bg-card-header: #000000;
    --text-main: #e0e0e0; /* Off-white for better readability than pure white */
    --text-card-header: #ffffff;
    --toolbar-label-text: #f0f0f0;
    --toolbar-label-muted: #cfcfcf;
    --card-header-label-text: var(--toolbar-label-text);
    --text-muted: #b8b8b8; /* Lighter grey for readability on dark (hints, secondary text) */
    /* Brand red (#af161e) is about 2:1 on the dark card. Yellow stays the brand accent. */
    --text-accent: var(--kromeka-yellow);
    /* #ff8a80 is about 6:1 on the dark card, so warnings stay red and stay readable. */
    --text-danger: #ff8a80;
    --link-color: var(--kromeka-yellow); /* Yellow accent for dark mode (no blue) */
    --link-hover-color: #f7c94a;
    --border-color: #495057;
    --kromeka-surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --hover-bg: #3d3d3b;
    --navbar-bg: #000000;
    --navbar-text: rgba(255,255,255,0.8);
    --navbar-hover: var(--kromeka-yellow);
    --footer-border: #333;

    /* Input Variables - Dark Mode */
    --input-bg: #2c2c2a;
    --input-text: #e0e0e0;
    --input-border: #495057;
    --input-hover-bg: #3d3d3b;
    --input-focus-bg: #3d3d3b;
    --input-focus-text: #ffffff;
    --input-placeholder: #b8b8b8; /* Match muted for readable placeholders on dark */
    --bg-secondary: #1a1a19;
    --tab-inactive-text: var(--text-muted);
    --action-primary-bg: var(--kromeka-red);
    --action-primary-text: #ffffff;
    --action-primary-hover: #921219;
    --action-secondary-bg: transparent;
    --action-secondary-text: var(--text-main);
    --action-secondary-border: #5a5a58;
    --action-secondary-hover-bg: #343432;
    --action-danger-bg: #7c2b2f;
    --action-danger-text: #ffffff;
    --action-danger-hover: #652226;
    --unsaved-bg: rgba(245, 181, 31, 0.2);
    --unsaved-text: #e5c879;
    --notebook-select-bg: rgba(175, 22, 30, 0.16);
    --table-header-text: #e8e8e8;
    --table-sort-link: #e8e8e8;
    --table-sort-link-hover: #ffffff;
    --table-sort-icon: #d0d0d0;
    --table-striped-bg: #323230;
    --pagination-bg: #272725;
    --pagination-text: #e3e3e3;
    --pagination-border: #555b61;
    --pagination-hover-bg: #3a3a38;
    --pagination-hover-text: #ffffff;
    --pagination-active-bg: var(--kromeka-red);
    --pagination-active-text: #ffffff;
    --pagination-active-border: var(--kromeka-red);
    --pagination-disabled-bg: #21211f;
    --pagination-disabled-text: #868c93;

    /* Bootstrap variable overrides so form-text and other secondary text are light on dark */
    --bs-secondary-color: #b8b8b8;
    --bs-secondary-color-rgb: 184, 184, 184;
    --bs-body-color: var(--text-main);
    /* BS 5.3 .text-body uses --bs-body-color-rgb (not --bs-body-rgb); without this, headings stay near-black */
    --bs-body-color-rgb: 224, 224, 224;
    --bs-body-rgb: 224, 224, 224;
    /* Bootstrap .nav-tabs / .nav-underline active label uses --bs-emphasis-color (see BS _nav.scss).
       App uses data-theme= on html, not data-bs-theme=, so BS never switches :root emphasis off #000
       while --bs-body-bg above is dark → unreadable active tabs (Backups, bulk edit modals, etc.). */
    --bs-emphasis-color: var(--text-main);
    --bs-emphasis-color-rgb: var(--bs-body-color-rgb);

    /* Open-style action button - dark theme uses yellow text for readability */
    --btn-open-text: var(--kromeka-yellow);

    --kromeka-data-table-thead-bg: #010100;

    --kromeka-table-v-scrollbar-track: #232322;
    --kromeka-table-v-scrollbar-thumb: #9a9a97;
    --kromeka-table-v-scrollbar-thumb-hover: var(--kromeka-yellow);

    /* Bootstrap 5 link/nav variables — app uses data-theme= not data-bs-theme=, so BS stays “light” by default; override so no blue nav/link text on dark surfaces */
    --bs-link-color: var(--kromeka-yellow);
    --bs-link-hover-color: #f7c94a;
    --bs-link-color-rgb: 245, 181, 31;
    --bs-link-hover-color-rgb: 247, 201, 74;
    --bs-link-rgb: 245, 181, 31;
    --bs-primary-text-emphasis: #f7c94a;
    --bs-primary-bg-subtle: #3a3218;
    --bs-primary-border-subtle: #8a6a12;
    --bs-nav-link-color: var(--kromeka-yellow);
    --bs-nav-link-hover-color: #f7c94a;

    --wo-ms-plan-upcoming-bg: rgba(245, 181, 31, 0.28);
    --wo-ms-plan-delayed-bg: rgba(220, 53, 69, 0.28);
    --wo-ms-plan-done-bg: rgba(25, 135, 84, 0.28);
    --wo-ms-plan-done-border: #3dd68c;
    --wo-ms-plan-late-border: #ff8a80;
    --wo-ms-plan-alert-text: var(--text-danger);
}