/*
 * Design tokens: the single source of truth for colour, shape, type and motion.
 * Loaded through app/views/general/partials/ui_styles.php in every shell, after style.css and
 * darkmode.css. Views and components only use var(--ui-*); never hex/rgb literals.
 *
 * --primary / --primary-rgb come from the account's brand colour (seller_header/center_header).
 */

:root {
    --ui-field-border: var(--ui-border);
    /* Surfaces */
    --ui-page: #f7f9fc;
    --ui-surface: #fff;
    --ui-subtle: #f4f6f9;
    --ui-track: #eef1f5;
    --ui-logo-bg: #fff;

    /* Text */
    --ui-text: #212529;
    --ui-body: #495057;
    --ui-muted: #6c757d;
    --ui-faint: #adb5bd;
    --ui-img-placeholder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23adb5bd'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    --ui-placeholder: #8a939b;

    /* Lines */
    --ui-border: #e9ecef;
    --ui-border-strong: #dee2e6;

    /* Accent (brand) */
    --ui-primary: var(--primary, #0077ff);
    --ui-primary-rgb: var(--primary-rgb, 0, 119, 255);
    --ui-primary-hover: color-mix(in srgb, var(--ui-primary) 82%, #000);
    --ui-primary-tint: rgba(var(--ui-primary-rgb), .10);
    --ui-primary-soft: rgba(var(--ui-primary-rgb), .06);
    --ui-primary-line: rgba(var(--ui-primary-rgb), .25);
    --ui-row-hover: rgba(var(--ui-primary-rgb), .03);
    --ui-focus-ring: 0 0 0 3px rgba(var(--ui-primary-rgb), .12);

    /* Status: one meaning each, everywhere. `-text` for text on a tint, `-tint` for backgrounds. */
    --ui-success: #3fc77d;
    --ui-success-text: #1f7546;
    --ui-success-tint: rgba(63, 199, 125, .12);
    --ui-info: #4d9aff;
    --ui-info-text: #1f6fd1;
    --ui-info-tint: rgba(77, 154, 255, .12);
    --ui-warning: #e5a54b;
    --ui-warning-text: #a8670f;
    --ui-warning-tint: rgba(229, 165, 75, .16);
    --ui-danger: #dc3545;
    --ui-danger-text: #b02a37;
    --ui-danger-tint: rgba(220, 53, 69, .08);
    --ui-danger-soft: #e87878;
    --ui-neutral: #b8c2ce;
    --ui-neutral-text: #6c757d;
    --ui-neutral-tint: #f4f6f9;
    --ui-purple: #6f42c1;
    --ui-on-primary: #fff;
    --ui-purple-tint: rgba(111, 66, 193, .12);
    --ui-gold: #e6a700;

    /* Tone: the one colour a component and its parts share (timeline dots, accent bars, status
       variants). A component or its modifier sets these; its parts read var(--ui-tone) etc. */
    --ui-tone: var(--ui-primary);
    --ui-tone-rgb: var(--ui-primary-rgb);
    --ui-tone-soft: var(--ui-primary-tint);
    --ui-tone-line: var(--ui-primary-line);
    --ui-tone-text: var(--ui-primary);

    /* RGB triples for rgba(var(--ui-*-rgb), alpha): overlays, shadows and tints at any strength */
    --ui-black-rgb: 0, 0, 0;
    --ui-white-rgb: 255, 255, 255;
    --ui-ink-rgb: 15, 23, 42;
    --ui-text-rgb: 33, 37, 41;
    --ui-muted-rgb: 108, 117, 125;
    --ui-success-rgb: 63, 199, 125;
    --ui-info-rgb: 77, 154, 255;
    --ui-warning-rgb: 229, 165, 75;
    --ui-danger-rgb: 220, 53, 69;
    --ui-purple-rgb: 111, 66, 193;

    /* Chart series (categorical, in this order) */
    --ui-series-1: #2a78d6;
    --ui-series-2: #eb6834;
    --ui-series-3: #1baf7a;
    --ui-series-4: #eda100;
    --ui-series-5: #8b5cf6;
    --ui-series-6: #64748b;
    --ui-silver: #9aa3ae;
    --ui-bronze: #b8743a;

    /* Shape */
    --ui-radius: 12px;
    --ui-radius-md: 10px;
    --ui-radius-sm: 8px;
    --ui-radius-xs: 6px;
    --ui-radius-pill: 999px;
    --ui-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    --ui-shadow-hover: 0 4px 14px rgba(0, 0, 0, .11);
    --ui-shadow-pop: 0 8px 24px rgba(0, 0, 0, .18);
    --ui-backdrop: rgba(15, 23, 42, .45);
    --ui-tooltip-bg: #1f2633;
    --ui-tooltip-text: #f8fafc;

    /* Type */
    --ui-fs-2xs: .65rem;
    --ui-fs-xs: .72rem;
    --ui-fs-sm: .8rem;
    --ui-fs-base: .85rem;
    --ui-fs-md: .9rem;
    --ui-fs-lg: 1rem;
    --ui-fs-xl: 1.25rem;
    --ui-fs-kpi: 1.35rem;

    /* Spacing */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;

    /* Motion */
    --ui-ease: 140ms ease;
    --ui-ease-slow: 300ms ease;

    /* One height for every standard control: inputs, selects, Select2, table toolbars, header buttons */
    --ui-control-h: 40px;
}

/* Touch screens: same standard, a little taller for fingers */
@media (max-width: 767.98px) {
    :root {
        --ui-control-h: 44px;
    }
}

body[data-theme=dark] {
    /* re-declared here: the :root value is resolved against the light --ui-border and inherited as-is */
    --ui-field-border: var(--ui-border-strong);
    --ui-page: var(--cd-surface-base, #16181b);
    --ui-surface: var(--cd-surface-raised, #202124);
    --ui-subtle: rgba(255, 255, 255, .04);
    --ui-track: rgba(255, 255, 255, .07);
    --ui-logo-bg: #fff;

    --ui-text: #f1f5f9;
    --ui-body: #cbd5e1;
    --ui-muted: #94a3b8;
    --ui-faint: #64748b;
    --ui-img-placeholder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    --ui-placeholder: #7f838e;
    --ui-text-rgb: 241, 245, 249;
    --ui-muted-rgb: 148, 163, 184;

    --ui-border: var(--cd-border-subtle, rgba(255, 255, 255, .08));
    --ui-border-strong: var(--cd-border-default, rgba(255, 255, 255, .12));

    --ui-primary-tint: rgba(var(--ui-primary-rgb), .18);
    --ui-primary-soft: rgba(var(--ui-primary-rgb), .12);
    --ui-primary-line: rgba(var(--ui-primary-rgb), .4);
    --ui-row-hover: rgba(255, 255, 255, .03);
    --ui-focus-ring: 0 0 0 3px rgba(var(--ui-primary-rgb), .25);

    --ui-success-text: #86efac;
    --ui-success-tint: rgba(63, 199, 125, .16);
    --ui-info-text: #93c5fd;
    --ui-info-tint: rgba(77, 154, 255, .18);
    --ui-purple-tint: rgba(111, 66, 193, .24);
    --ui-warning-text: #f6c97f;
    --ui-warning-tint: rgba(229, 165, 75, .18);
    --ui-danger-text: #f1a7ae;
    --ui-danger-tint: rgba(220, 53, 69, .16);
    --ui-neutral: #5f6b7a;
    --ui-neutral-text: #94a3b8;
    --ui-neutral-tint: rgba(255, 255, 255, .06);
    --ui-series-1: #3987e5;
    --ui-series-2: #d95926;
    --ui-series-3: #199e70;
    --ui-series-4: #c98500;
    --ui-series-5: #a78bfa;
    --ui-series-6: #94a3b8;

    --ui-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    --ui-shadow-hover: 0 4px 14px rgba(0, 0, 0, .45);
    --ui-shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
    --ui-backdrop: rgba(0, 0, 0, .6);
    --ui-tooltip-bg: #f1f5f9;
    --ui-tooltip-text: #0f172a;
}

/* ------------------------------------------------------------------
 * Readability for warehouse screens (old, washed-out monitors, glare):
 * every text colour meets WCAG AA (4.5:1) on cards AND on the page background, lines are visible, and
 * cards stand off the page with a hairline as well as a shadow (a soft shadow alone disappears on a
 * low-contrast panel). Light: text 18.5:1, body 14:1, muted 7.7:1, faint/placeholder ~4.5:1.
 * Dark: body 13:1, muted 8.9:1, faint 5.5:1. Bootstrap's and darkmode.css' variables follow the same
 * values so legacy pages read the same.
 * ------------------------------------------------------------------ */
:root {
    --ui-page: #f1f3f6;
    --ui-subtle: #f2f4f7;
    --ui-track: #e7eaee;

    --ui-text: #16191d;
    --ui-body: #363c43;
    --ui-muted: #5a626a;
    --ui-faint: #6b737c;
    --ui-placeholder: #757d85;
    --ui-text-rgb: 22, 25, 29;
    --ui-muted-rgb: 90, 98, 106;
    --ui-img-placeholder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23959ca3'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");

    --ui-border: #e0e4e9;
    --ui-border-strong: #cdd3da;

    --ui-success-text: #1f7546;
    --ui-info-text: #1a62c2;
    --ui-warning-text: #935c05;
    --ui-danger-text: #ab2333;
    --ui-neutral-text: #5a626a;
    --ui-success-tint: rgba(63, 199, 125, .15);
    --ui-info-tint: rgba(77, 154, 255, .14);
    --ui-warning-tint: rgba(229, 165, 75, .19);
    --ui-danger-tint: rgba(220, 53, 69, .10);
    --ui-neutral-tint: #eef0f3;
    --ui-primary-tint: rgba(var(--ui-primary-rgb), .11);
    --ui-row-hover: rgba(var(--ui-primary-rgb), .045);
    --ui-focus-ring: 0 0 0 3px rgba(var(--ui-primary-rgb), .22);

    --ui-shadow: 0 0 0 1px rgba(15, 23, 42, .035), 0 1px 4px rgba(15, 23, 42, .10);
    --ui-shadow-hover: 0 0 0 1px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .14);

    /* small type a step larger: the smallest text on screen is 12px, not 10.4px */
    --ui-fs-2xs: .7rem;
    --ui-fs-xs: .75rem;
    --ui-fs-sm: .82rem;
    --ui-fs-base: .875rem;
}
body:not([data-theme=dark]) {
    --bs-body-color: #363c43;
    --bs-body-color-rgb: 54, 60, 67;
    --bs-emphasis-color: #16191d;
    --bs-heading-color: #16191d;
    --bs-secondary-color: #5a626a;
    --bs-secondary-color-rgb: 90, 98, 106;
    --bs-tertiary-color: #848c94;
    --bs-border-color: #e0e4e9;
    --bs-gray-600: #5a626a;
}

/* Dark mode: "Graphite" (picked 2026-10-26 from six options). Neutral cool greys with clear steps:
   page #121519, sidebar/top bar #0e1013, cards #1b1f24, raised #262b32, solid borders. Text 15.7:1, body 13:1,
   muted 8.3:1, faint 5.4:1 on cards; status colours as bright tints that read on the dark cards. */
body[data-theme=dark] {
    --cd-surface-base: #121519;
    --cd-surface-sidebar: #0e1013;
    --cd-surface-raised: #1b1f24;
    --cd-surface-overlay: #22272d;
    --cd-surface-elevated: #262b32;
    --cd-surface-input: #14171b;
    --cd-surface-hover: rgba(255, 255, 255, .05);
    --cd-border-subtle: #2c323a;
    --cd-border-default: #3d454f;
    --cd-text-muted: #aab4c0;
    --cd-text-secondary: #dce1e7;

    --ui-page: #121519;
    --ui-surface: #1b1f24;
    --ui-subtle: #20252b;
    --ui-track: #262b32;

    --ui-text: #f4f6f8;
    --ui-body: #dce1e7;
    --ui-muted: #aab4c0;
    --ui-faint: #8794a3;
    --ui-placeholder: #8f9aa8;
    --ui-text-rgb: 244, 246, 248;
    --ui-muted-rgb: 170, 180, 192;

    --ui-border: #2c323a;
    --ui-border-strong: #3d454f;

    --ui-success: #3fc77d;
    --ui-info: #60a5fa;
    --ui-warning: #fbbf24;
    --ui-danger: #f87171;
    --ui-success-rgb: 63, 199, 125;
    --ui-info-rgb: 96, 165, 250;
    --ui-warning-rgb: 251, 191, 36;
    --ui-danger-rgb: 248, 113, 113;
    --ui-success-text: #3fc77d;
    --ui-info-text: #60a5fa;
    --ui-warning-text: #fbbf24;
    --ui-danger-text: #f87171;
    --ui-success-tint: rgba(63, 199, 125, .14);
    --ui-info-tint: rgba(96, 165, 250, .15);
    --ui-warning-tint: rgba(251, 191, 36, .14);
    --ui-danger-tint: rgba(248, 113, 113, .14);
    --ui-neutral-text: #aab4c0;
    --ui-neutral-tint: #262b32;
    --ui-primary-tint: rgba(var(--ui-primary-rgb), .22);
    --ui-row-hover: rgba(255, 255, 255, .04);
    --ui-focus-ring: 0 0 0 3px rgba(var(--ui-primary-rgb), .45);

    --ui-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    --ui-shadow-hover: 0 4px 14px rgba(0, 0, 0, .5);
    --ui-tooltip-bg: #f4f6f8;
    --ui-tooltip-text: #121519;

    --bs-body-bg: #121519;
    --bs-body-bg-rgb: 18, 21, 25;
    --bs-body-color: #dce1e7;
    --bs-body-color-rgb: 220, 225, 231;
    --bs-emphasis-color: #f4f6f8;
    --bs-secondary-color: #aab4c0;
    --bs-tertiary-color: #8794a3;
    --bs-border-color: #2c323a;
    --bs-card-bg: #1b1f24;
    --bs-card-bg-rgb: 27, 31, 36;
    --bs-modal-bg: #1b1f24;
    --bs-modal-bg-rgb: 27, 31, 36;
    --bs-dropdown-bg: #1b1f24;
    --bs-popover-bg: #22272d;
    --bs-offcanvas-bg: #1b1f24;
    --bs-list-group-bg: #1b1f24;
    --bs-table-bg: transparent;
    --bs-input-bg: #14171b;
    --bs-input-bg-rgb: 20, 23, 27;
    --bs-tertiary-bg: #20252b;
    --bs-secondary-bg: #1b1f24;
    --cd-menu-bg-color: #0e1013;
    /* Graphite cards carry a solid 1px edge (a shadow alone vanishes on dark) */
    --ui-shadow: 0 0 0 1px #2c323a, 0 1px 3px rgba(0, 0, 0, .4);
    --ui-shadow-hover: 0 0 0 1px #3d454f, 0 4px 14px rgba(0, 0, 0, .5);
}
body[data-theme=dark] .secondary-background-color,
body[data-theme=dark] :is(#sidebar, .sidebar, .sidebar-content) {
    background-color: #0e1013 !important;
}
body[data-theme=dark] nav.navbar,
body[data-theme=dark] .navbar.navbar-bg {
    background-color: #0e1013 !important;
    border-bottom-color: #2c323a !important;
}
body[data-theme=dark] div.DTED_Lightbox_Wrapper div.DTED_Lightbox_Container div.DTED_Lightbox_Content_Wrapper div.DTED_Lightbox_Content div.DTE,
body[data-theme=dark] div.DTED_Lightbox_Wrapper div.DTE div.DTE_Header,
body[data-theme=dark] div.DTED_Lightbox_Wrapper div.DTE div.DTE_Footer {
    background-color: #1b1f24 !important;
}
body[data-theme=dark] div.DTED_Lightbox_Wrapper div.DTE div.DTE_Body_Content {
    background-color: #22272d !important;
}

/* Brand colour: the account colour (--primary-brand, ChannelDock #0077ff) is used as it is for fills, links,
   active tabs and borders in light mode; dark mode lifts it only where it is text on the dark surfaces. */
body {
    --primary: var(--primary-brand, #0077ff);
    --primary-hover: color-mix(in srgb, var(--primary-brand, #0077ff) 88%, #000);
    --primary-darker: var(--primary-hover);
    --ui-primary-strong: var(--primary-brand, #0077ff);
    --ui-primary: var(--primary);
    --ui-primary-hover: var(--primary-hover);
    --ui-link: var(--primary-brand, #0077ff);
}
body[data-theme=dark] {
    --primary: color-mix(in srgb, var(--primary-brand, #0077ff) 88%, #fff);
    --primary-hover: color-mix(in srgb, var(--primary-brand, #0077ff) 76%, #fff);
    --ui-link: color-mix(in srgb, var(--primary-brand, #0077ff) 72%, #fff);
}
body {
    --ui-primary-hover-strong: color-mix(in srgb, var(--primary-brand, #0077ff) 88%, #000);
}