/* ============================================================
   Theme variables.
   :root holds the light-mode (default) values — these match the
   hex colors that were previously hardcoded throughout the app,
   so light mode remains pixel-identical. html.dark-mode redefines
   the same variables; anything (including inline style="...")
   that uses var(--lms-*) picks up the dark values automatically
   because custom properties cascade through the DOM.
   ============================================================ */

:root {
    /* Monochrome / "ink" palette (shadcn-flavoured, matches the Vantage brand). */
    --lms-bg:             #ffffff;
    --lms-bg-alt:         #f4f4f5;
    --lms-bg-panel:       #fafafa;
    --lms-text:           #18181b;
    --lms-text-muted:     #71717a;
    --lms-text-faint:     #a1a1aa;
    --lms-text-dim:       #52525b;
    --lms-text-label:     #52525b;
    --lms-border:         #e4e4e7;
    --lms-border-light:   #f0f0f1;
    --lms-danger-text:    #dc2626;
    --lms-active-tint:    rgba(24, 24, 27, 0.055);
    --lms-accent-warm:    #e8623c;   /* warm accent — data-viz tick bars / meters */

    /* Semantic status colors used for grid row/cell highlighting */
    --lms-success-bg:     #d4edda;
    --lms-warning-bg:     #ffe5b3;
    --lms-warning-bg-2:   #fff3cd;
    --lms-danger-bg:      #f8d7da;
    --lms-info-bg:        #cce5ff;
    --lms-disabled-bg:    #e2e3e5;
    --lms-disabled-text:  #6c757d;
    --lms-highlight-bg:   #fff59d;
    --lms-highlight-bg-2: #fff8d6;

    /* Primary/danger action buttons (dialogs, popups) — same value works in
       both themes (already relied on elsewhere, e.g. dm-bubble-mine), so no
       html.dark-mode override is needed. */
    --lms-accent:         #18181b;   /* ink primary — active states, primary buttons */
    --lms-accent-text:    #fafafa;
    --lms-danger-btn:     #e5484d;
    --lms-danger-btn-text: #ffffff;
}

html.dark-mode {
    /* Near-black, lifted-surface dark to match the marketing site. */
    --lms-bg:             #0a0a0c;
    --lms-bg-alt:         #18181b;
    --lms-bg-panel:       #121214;
    --lms-text:           #fafafa;
    --lms-text-muted:     #a1a1aa;
    --lms-text-faint:     #71717a;
    --lms-text-dim:       #d4d4d8;
    --lms-text-label:     #a1a1aa;
    --lms-border:         #27272a;
    --lms-border-light:   #1f1f23;
    --lms-danger-text:    #f87171;
    --lms-active-tint:    rgba(250, 250, 250, 0.10);
    --lms-accent-warm:    #f0734d;   /* warm accent — slightly brighter on near-black */

    /* Ink inverts to near-white in dark mode (white primary buttons, etc.) */
    --lms-accent:         #fafafa;
    --lms-accent-text:    #0a0a0c;

    --lms-success-bg:     #1e3b29;
    --lms-warning-bg:     #4a3a1a;
    --lms-warning-bg-2:   #4a3f15;
    --lms-danger-bg:      #4a1f24;
    --lms-info-bg:        #1f3a52;
    --lms-disabled-bg:    #2a2a2a;
    --lms-disabled-text:  #9a9a9a;
    --lms-highlight-bg:   #5a4f12;
    --lms-highlight-bg-2: #4a4012;
}

/* ============================================================
   Base
   ============================================================ */

html.dark-mode,
html.dark-mode body {
    background: var(--lms-bg);
    color: var(--lms-text);
}

/* ============================================================
   Layout / panels
   ============================================================ */

html.dark-mode .w2ui-layout,
html.dark-mode .w2ui-layout-panel,
html.dark-mode .w2ui-panel,
html.dark-mode .w2ui-panel-content,
html.dark-mode .lms-layout,
html.dark-mode .lms-panel-left,
html.dark-mode .lms-panel-main {
    background-color: var(--lms-bg);
    color: var(--lms-text);
    border-color: var(--lms-border);
}

html.dark-mode .lms-panel-left {
    background-color: var(--lms-bg-panel) !important;
    border-right-color: var(--lms-border) !important;
}

html.dark-mode .w2ui-panel-title {
    background-color: var(--lms-bg-alt);
    color: var(--lms-text);
    border-color: var(--lms-border);
}

/* ============================================================
   Sidebar
   ============================================================ */

html.dark-mode .w2ui-sidebar,
html.dark-mode .w2ui-sidebar-body {
    background-color: var(--lms-bg-panel) !important;
    color: var(--lms-text);
}

html.dark-mode .w2ui-sidebar .w2ui-node,
html.dark-mode .w2ui-sidebar .w2ui-node-text,
html.dark-mode .w2ui-sidebar .w2ui-node-caption,
html.dark-mode .w2ui-sidebar .w2ui-node-group,
html.dark-mode .w2ui-sidebar .w2ui-group-text {
    color: var(--lms-text) !important;
    background-color: transparent;
}

html.dark-mode .w2ui-sidebar .w2ui-node:hover,
html.dark-mode .w2ui-sidebar .w2ui-node.w2ui-selected,
html.dark-mode .w2ui-sidebar .w2ui-node.sel {
    background-color: var(--lms-bg-alt) !important;
    color: var(--lms-text) !important;
}

/* Count badges keep their light pill background in both themes —
   force black text so the numbers stay legible on it. */
html.dark-mode .w2ui-node-badge,
html.dark-mode .w2ui-node-count {
    color: #000 !important;
}

/* ============================================================
   Toolbar
   ============================================================ */

html.dark-mode .w2ui-toolbar {
    background-color: var(--lms-bg-panel);
    border-color: var(--lms-border);
}

html.dark-mode .w2ui-toolbar .w2ui-tb-button,
html.dark-mode .w2ui-toolbar .w2ui-tb-text,
html.dark-mode .w2ui-toolbar .w2ui-tb-caption {
    color: var(--lms-text);
}

html.dark-mode .w2ui-toolbar .w2ui-tb-button:hover,
html.dark-mode .w2ui-toolbar .w2ui-tb-button.checked,
html.dark-mode .w2ui-toolbar .w2ui-tb-button.down {
    background-color: var(--lms-bg-alt) !important;
    color: var(--lms-text) !important;
}

html.dark-mode .w2ui-toolbar .w2ui-tb-button.disabled,
html.dark-mode .w2ui-toolbar .w2ui-tb-button.disabled .w2ui-tb-text {
    color: var(--lms-text-muted) !important;
}

/* ============================================================
   Grid
   ============================================================ */

html.dark-mode .w2ui-grid,
html.dark-mode .w2ui-grid-box,
html.dark-mode .w2ui-grid-body,
html.dark-mode .w2ui-grid-toolbar,
html.dark-mode .w2ui-grid-header,
html.dark-mode .w2ui-grid-footer,
html.dark-mode .w2ui-grid-summary,
html.dark-mode .w2ui-grid-searches {
    background-color: var(--lms-bg) !important;
    color: var(--lms-text);
    border-color: var(--lms-border);
}

html.dark-mode .w2ui-grid-columns,
html.dark-mode .w2ui-grid-column-label,
html.dark-mode .w2ui-grid th {
    background-color: var(--lms-bg-alt) !important;
    color: var(--lms-text) !important;
    border-color: var(--lms-border) !important;
}

/* Header cells paint a near-white linear-gradient background-image over
   their (transparent) background-color — override the image too. */
html.dark-mode .w2ui-grid-columns .w2ui-head {
    background-color: var(--lms-bg-alt) !important;
    background-image: none !important;
    color: var(--lms-text) !important;
    border-color: var(--lms-border) !important;
}

html.dark-mode .w2ui-grid-records {
    background-color: var(--lms-bg);
    color: var(--lms-text);
}

/* Empty (no-record) rows are not part of the alternating row striping —
   flat white in light mode / flat black in dark mode (var(--lms-bg)). */
.w2ui-grid-records tr.w2ui-empty-record {
    background-color: var(--lms-bg) !important;
}

/* Cells are transparent so per-row background (striping below, or an
   inline record.w2ui.style set by JS for reconciliation/highlight
   colors) shows through instead of being painted over. Borders are
   hidden — alternating row shading already separates rows/columns,
   so the grid-line borders are unnecessary clutter in dark mode. */
html.dark-mode .w2ui-grid-data,
html.dark-mode .w2ui-grid td {
    background-color: transparent !important;
    color: var(--lms-text) !important;
    border-color: transparent !important;
}

html.dark-mode .w2ui-grid tr.w2ui-odd {
    background-color: var(--lms-bg-alt) !important;
}

html.dark-mode .w2ui-grid tr.w2ui-even {
    background-color: var(--lms-bg) !important;
}

/* Same specificity as the odd/even rules above, placed after them so it
   wins the cascade and overrides striping for empty rows in dark mode too. */
html.dark-mode .w2ui-grid tr.w2ui-empty-record {
    background-color: var(--lms-bg) !important;
}

/* Row separator lines (border-bottom on each <tr>) default to a light
   grey (#f5f5f5) — hidden, since alternating row shading already
   separates rows without needing a visible line. */
html.dark-mode .w2ui-grid-records tr {
    border-color: transparent !important;
}

/* Extra .dark-mode repeats bump specificity above w2ui's own
   (dynamically-injected) .w2ui-selected rule. */
html.dark-mode.dark-mode.dark-mode .w2ui-grid .w2ui-selected,
html.dark-mode.dark-mode.dark-mode .w2ui-grid .w2ui-grid-data.w2ui-selected {
    background-color: #2c4a6e !important;
    color: var(--lms-text) !important;
}

/* ============================================================
   Popups / messages / overlays
   ============================================================ */

html.dark-mode .w2ui-popup,
html.dark-mode .w2ui-popup .w2ui-box,
html.dark-mode .w2ui-popup-body,
html.dark-mode .w2ui-msg-popup,
html.dark-mode .w2ui-message {
    background-color: var(--lms-bg);
    color: var(--lms-text);
    border-color: var(--lms-border);
}

html.dark-mode .w2ui-popup .w2ui-popup-title,
html.dark-mode .w2ui-popup-title,
html.dark-mode .w2ui-popup .w2ui-popup-buttons,
html.dark-mode .w2ui-popup-buttons {
    background-color: var(--lms-bg-alt);
    color: var(--lms-text);
    border-color: var(--lms-border);
}

html.dark-mode .w2ui-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Forms / inputs (both w2ui-managed and plain HTML form elements
   used in custom popup/settings markup)
   ============================================================ */

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .w2ui-input {
    background-color: var(--lms-bg-alt);
    color: var(--lms-text);
    border-color: var(--lms-border);
}

html.dark-mode .w2ui-field label,
html.dark-mode .w2ui-field-label {
    color: var(--lms-text-label);
}

/* Native date/time input pickers (Tabulator grid date editors and the
   hand-built popup forms in context_menus.js both use <input type="date">)
   render their calendar/clock icon as a dark glyph baked into the browser's
   own UA styling — invisible against the dark background above. Only
   WebKit/Blink expose this pseudo-element (Firefox has no equivalent hook),
   which covers this app's supported browsers. */
html.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
html.dark-mode input[type="time"]::-webkit-calendar-picker-indicator,
html.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* ============================================================
   Tabs
   ============================================================ */

html.dark-mode .w2ui-tabs {
    background-color: var(--lms-bg-panel);
    border-color: var(--lms-border);
}

html.dark-mode .w2ui-tabs .w2ui-tab {
    color: var(--lms-text);
}

html.dark-mode .w2ui-tabs .w2ui-tab.active,
html.dark-mode .w2ui-tabs .w2ui-tab:hover {
    background-color: var(--lms-bg);
    color: var(--lms-text);
}

/* ============================================================
   Context / drop-down menus (w2menu, rendered inside a
   #w2overlay-* container appended to <body>)
   ============================================================ */

html.dark-mode .w2ui-overlay-body,
html.dark-mode .w2ui-overlay-body.w2ui-white,
html.dark-mode .w2ui-menu {
    background-color: var(--lms-bg-alt) !important;
    color: var(--lms-text) !important;
    border-color: var(--lms-border) !important;
}

html.dark-mode .w2ui-menu-item,
html.dark-mode .w2ui-menu-item .menu-text,
html.dark-mode .w2ui-menu-item .menu-icon {
    color: var(--lms-text) !important;
}

html.dark-mode .w2ui-menu-item:hover,
html.dark-mode .w2ui-menu-item.w2ui-selected {
    background-color: var(--lms-bg-panel) !important;
}

/* ============================================================
   Scrollbars (WebKit/Blink)
   ============================================================ */

/* lms.css sets `scrollbar-color` directly on every element via `*`, which
   beats inheriting the dark-mode color from <html> — override it on every
   element here too, not just on <html>. */
html.dark-mode,
html.dark-mode * {
    scrollbar-color: #1e3355 var(--lms-bg-alt);
}

html.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background-color: var(--lms-bg-alt) !important;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #1e3355 !important;
    border-radius: 6px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #2a4575 !important;
}

html.dark-mode ::-webkit-scrollbar-corner {
    background-color: var(--lms-bg-alt) !important;
}

/* ============================================================
   Tabulator dark mode (Phase 2 grids)
   ============================================================ */

html.dark-mode .tabulator {
    background-color: var(--lms-bg);
    border-color: var(--lms-border);
    color: var(--lms-text);
}

html.dark-mode .tabulator .tabulator-header,
html.dark-mode .tabulator .tabulator-header .tabulator-col {
    background-color: var(--lms-bg-alt) !important;
    border-color: var(--lms-border) !important;
    color: var(--lms-text) !important;
}

html.dark-mode .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    color: var(--lms-text-label) !important;
}

html.dark-mode .tabulator .tabulator-tableholder,
html.dark-mode .tabulator .tabulator-table {
    background-color: var(--lms-bg);
    color: var(--lms-text);
}

html.dark-mode .tabulator .tabulator-row {
    color: var(--lms-text);
    border-color: transparent !important;
}

html.dark-mode .tabulator .tabulator-row.tabulator-row-even {
    background-color: var(--lms-bg-alt) !important;
}

html.dark-mode .tabulator .tabulator-row.tabulator-row-odd {
    background-color: var(--lms-bg) !important;
}

html.dark-mode .tabulator .tabulator-row:not(.tabulator-selected):hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark-mode .tabulator .tabulator-row.tabulator-selected,
html.dark-mode .tabulator .tabulator-row.tabulator-selected:hover {
    background-color: var(--lms-active-tint) !important;
    color: var(--lms-text) !important;
}

html.dark-mode .ch-item.active {
    background-color: #2c4a6e;
    color: var(--lms-text);
}

html.dark-mode .dm-list-item.active {
    background-color: #2c4a6e;
    color: var(--lms-text);
}

html.dark-mode .dm-bubble-other {
    background-color: var(--lms-bg-alt);
    color: var(--lms-text);
}

html.dark-mode .tabulator .tabulator-cell {
    color: var(--lms-text) !important;
    border-color: transparent !important;
}

html.dark-mode .tabulator .tabulator-placeholder .tabulator-placeholder-contents {
    color: var(--lms-text-muted);
}

html.dark-mode .tabulator .tabulator-tableholder::-webkit-scrollbar-track {
    background-color: var(--lms-bg-alt) !important;
}

html.dark-mode .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb {
    background-color: #1e3355 !important;
}

/* TabulatorGrid toolbar buttons — dark mode */
html.dark-mode .lms-tabgrid-toolbar button.w2ui-tb-button {
    color: var(--lms-text);
}

html.dark-mode .lms-tabgrid-toolbar button.w2ui-tb-button:hover:not(.disabled):not([disabled]) {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   lmsPopup — dark mode
   ============================================================ */

html.dark-mode .lms-popup-box {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.dark-mode .lms-popup-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   Tabulator polish — dark mode (Phase 5)
   ============================================================ */

/* Sort arrows */
html.dark-mode .tabulator .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: var(--lms-text-muted) !important;
    border-top-color:    var(--lms-text-muted) !important;
}

/* Context menu */
html.dark-mode .tabulator-menu {
    background:  var(--lms-bg-panel) !important;
    border-color: var(--lms-border) !important;
    color:       var(--lms-text) !important;
    box-shadow:  0 12px 34px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .tabulator-menu .tabulator-menu-item {
    color: var(--lms-text) !important;
}

html.dark-mode .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background: var(--lms-active-tint) !important;
    color:      var(--lms-text) !important;
}

html.dark-mode .tabulator-menu .tabulator-menu-separator {
    border-color: var(--lms-border) !important;
}

/* List-editor dropdown */
html.dark-mode .tabulator-edit-list {
    background:   var(--lms-bg-alt) !important;
    border-color: var(--lms-border) !important;
}

html.dark-mode .tabulator-edit-list .tabulator-edit-list-item {
    color: var(--lms-text) !important;
}

html.dark-mode .tabulator-edit-list .tabulator-edit-list-item.active,
html.dark-mode .tabulator-edit-list .tabulator-edit-list-item:hover {
    background: #2c4a6e !important;
    color:      var(--lms-text) !important;
}

html.dark-mode .tabulator-edit-list .tabulator-edit-list-placeholder {
    color: var(--lms-text-muted) !important;
}