/* ==========================================================================
   Dark mode overrides — loaded ONLY when the user prefers dark
   (server-side by render_index injecting this sheet, client-side by
   app.js applyDarkMode appending <link id="dark-override">).
   data-bs-theme="dark" handles Bootstrap components; this file maps the
   custom palette of style.css / files.css onto dark tones. !important is
   used deliberately and only at the end of the file, to beat hardcoded
   inline styles set by templates/JS.
   ========================================================================== */

:root {
    --dm-bg: #14181f;
    --dm-surface: #1d232e;
    --dm-surface-2: #232a38;
    --dm-border: #2e3746;
    --dm-text: #dbe2ee;
    --dm-muted: #8b96a8;
}

/* --- base surfaces ------------------------------------------------------ */
body { background: var(--dm-bg); color: var(--dm-text); }
.admin-shell { background: var(--dm-bg); color: var(--dm-text); }
.board-page { background: var(--dm-bg); }
.main-content { color: var(--dm-text); }

/* --- generic light cards / panels → dark surfaces ------------------------ */
.admin-stat, .admin-card,
.board-lane,
.board-lane-group,
.ticket-card,
.ticket-comment-item,
.ticket-history-list li,
.ticket-tabs,
.ticket-description-box,
.ticket-description-box .ticket-description-rendered,
.ticket-attachment-item,
.ticket-link-item,
.lane-editor-item,
.group-editor-row,
.automation-step,
.ticket-card-table,
.ticket-hover-card,
.compact-tip,
.board-changes-popover,
.page-group-panel,
.user-group-panel,
.files-repo-card,
.files-explorer,
.files-gallery-item,
.files-context,
.files-split-section,
.files-changelog,
.files-page .board-perm-table,
.icon-option,
.highlight-custom,
.combo-select-toggle,
.ticket-appearance-row {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text);
}

/* subtle secondary surfaces (light-blue tints in the light theme) */
.ticket-child-card,
.admin-search,
.editor-toolbar,
.ticket-tabs-nav,
.ticket-description-header,
.ticket-description-rendered,
.icon-picker,
.highlight-picker,
.compact-tip-hint,
.automation-log,
.automation-vars,
.links-log-panel,
.links-secret-dropdown,
.files-folder,
.files-preview-cache,
.files-settings-panel,
.files-refcombo-panel,
.files-loading-box,
.files-split-sorthead,
.edit-row td {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text);
}

/* hover states that referenced light tints */
.ticket-link-item:hover,
.page-group-panel-row:hover,
.menu-icon-option:hover,
.files-refcombo-item:hover,
.ticket-tab-button:hover,
.ticket-card .ticket-compact-toggle:hover,
.files-crumb-link:hover,
.files-pathbar-link:hover {
    background: var(--dm-surface-2) !important;
}

/* --- borders ------------------------------------------------------------- */
.ticket-card:hover,
.ticket-card.has-custom-height,
.empty-lane,
.files-gallery-item:hover,
.files-repo-card:hover,
.files-folder:hover,
.icon-option:hover,
.board-settings-button,
.files-activity-wrap,
.files-sync-progress,
.admin-table th,
.board-perm-assigned,
.empty-lane:hover,
.ticket-card-table .ticket-desc-table th,
.ticket-card-table .ticket-desc-table td {
    border-color: var(--dm-border) !important;
}
.ticket-desc-table th, .ticket-desc-table td { border-color: var(--dm-border); }
.ticket-desc-table thead th, .automation-data-table thead th { background: var(--dm-surface-2); }

/* --- text ---------------------------------------------------------------- */
.ticket-card h3,
.ticket-comment-meta strong,
.ticket-comment-body,
.ticket-link-target,
.board-titlebar h1,
.board-meta strong,
.admin-card h2, .admin-subheading,
.settings-section > header h3,
.files-crumb, .files-repo-name, .files-toolbar-repo,
.files-context-name, .files-table td a, .files-gallery-name,
.files-split-head, .files-refcombo-item, .files-changelog code,
.links-dialog,
.compact-tip,
.ticket-hover-card,
.menu-icon-option,
.page-group-chip,
.history-change,
.automation-item-head,
.automation-step-type {
    color: var(--dm-text) !important;
}
.ticket-card p,
.board-titlebar p,
.board-meta p,
.admin-description, .admin-muted,
.admin-stat div span,
.user-cell small,
.ticket-comment-meta,
.history-meta,
.settings-section > header p,
.yaml-form-description, .yaml-form-panel p,
.compact-tip-desc, .compact-tip-hint,
.ticket-tab-button,
.ticket-links,
.files-crumb-root, .files-pathbar-counts, .files-split-table .files-cell-meta,
.files-sortable, .files-refcombo-group, .files-refcombo-subj,
.automation-item-meta, .automation-badge.muted {
    color: var(--dm-muted) !important;
}
.lane-dot, .lane-drag-handle, .ticket-compact-toggle,
.page-group-chip-x, .files-pathbar-sep, .files-crumb-sep {
    color: #66738a;
}

/* --- files settings dialog panels (headers keep muted text on dark surface) --- */
.files-settings-panel-head { color: var(--dm-muted) !important; }

/* --- files context menu (items had no dark rules: navy text on near-white hover) --- */
.files-context-item { color: var(--dm-text) !important; }
.files-context-item:hover { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; }
.files-alias-badge { background: #26314a !important; border-color: #3a4a6e !important; color: #9db9f0 !important; }
.files-alias-row td { background: #232c40 !important; }
.files-alias-item { outline-color: #3a4a6e; }
.files-table th:not(:first-child), .files-table td:not(:first-child) { border-left-color: var(--dm-border) !important; }
.files-col-grip:hover::after { background: #6f9bef; }
.files-split-sorthead .files-sortable { border-left-color: var(--dm-border) !important; }
.files-split-table td:not(:first-child) { border-left-color: var(--dm-border) !important; }
.tile-z-btn { background: #232a38 !important; color: #8b96a8 !important; }
.tile-z-btn:hover { background: #1769e0 !important; color: #fff !important; }

/* --- page-extractor designer (automation steps): inline light surfaces + badges --- */
/* Vue serializes inline hex backgrounds to rgb() in the DOM — match BOTH forms */
.automation-step [style*="background:#fafbfe"], .automation-step [style*="background: rgb(250, 251, 254)"],
.automation-step [style*="background:#fff"], .automation-step [style*="background: rgb(255, 255, 255)"] { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
.automation-step .badge.bg-light { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
.automation-step .text-muted { color: var(--dm-muted) !important; }
.automation-step .border { border-color: var(--dm-border) !important; }
.automation-step pre.small { color: var(--dm-muted) !important; }

/* --- CodeMirror snippets editor (links panel): dark theme + fonts --- */
.links-code-editor { border-color: var(--dm-border) !important; }
.links-code-editor .CodeMirror { background: var(--dm-surface) !important; color: var(--dm-text) !important; }
.links-code-editor .CodeMirror-gutters { background: var(--dm-surface-2) !important; border-right-color: var(--dm-border) !important; }
.links-code-editor .CodeMirror-linenumber { color: var(--dm-muted) !important; }
.links-code-editor .CodeMirror-cursor { border-left-color: var(--dm-text) !important; }
.links-code-editor .CodeMirror-selected,
.links-code-editor .CodeMirror-focused .CodeMirror-selected { background: rgba(111, 155, 239, .28) !important; }
.links-code-editor .CodeMirror-activeline-background { background: rgba(255, 255, 255, .05) !important; }
.links-code-editor .CodeMirror-matchingbracket { color: #ffd54f !important; text-decoration: underline; }
.links-code-editor .cm-s-default .cm-keyword { color: #c792ea !important; }
.links-code-editor .cm-s-default .cm-string, .links-code-editor .cm-s-default .cm-string-2 { color: #a5d6a7 !important; }
.links-code-editor .cm-s-default .cm-comment { color: #6b7789 !important; font-style: italic; }
.links-code-editor .cm-s-default .cm-number { color: #f0a869 !important; }
.links-code-editor .cm-s-default .cm-operator { color: #89ddff !important; }
.links-code-editor .cm-s-default .cm-variable, .links-code-editor .cm-s-default .cm-variable-2 { color: var(--dm-text) !important; }
.links-code-editor .cm-s-default .cm-def, .links-code-editor .cm-s-default .cm-builtin { color: #82aaff !important; }
.links-code-editor .cm-s-default .cm-property { color: #b0bec5 !important; }
.links-code-editor .cm-s-default .cm-tag { color: #f07178 !important; }
.links-code-editor .cm-s-default .cm-attribute { color: #ffcb6b !important; }
.links-code-editor .cm-s-default .cm-meta { color: #89ddff !important; }

/* --- upload status bar (dark) -------------------------------------------- */
.files-upload { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
.files-upload.is-error { border-color: #7a3b42 !important; background: #2a2126 !important; }
.files-upload-progress { background: var(--dm-surface-2) !important; }
.files-upload-pct { color: var(--dm-text) !important; }
.files-upload-meta, .files-upload-eta, .files-upload-speed { color: var(--dm-muted) !important; }
.files-upload-btn { color: var(--dm-muted) !important; }
.files-upload-btn:hover { color: #6f9bef !important; }

/* --- nav / tabs ---------------------------------------------------------- */
.ticket-tab-button { color: var(--dm-muted); }
.ticket-tab-button.active { background: var(--dm-surface) !important; }
.ticket-tabs-nav { border-bottom-color: var(--dm-border) !important; }
.compact-tip-title, .compact-tip-hint { border-color: var(--dm-border) !important; }

/* --- tiles layout: canvas + grid lines ----------------------------------- */
.board-tiles {
    background-color: var(--dm-bg) !important;
    background-image: linear-gradient(to right, var(--dm-border) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--dm-border) 1px, transparent 1px) !important;
    border-color: var(--dm-border);
}

/* --- settings sections ---------------------------------------------------- */
.settings-section { background: var(--dm-surface); border-color: var(--dm-border); }
.settings-section > header > i { background: #1d2c44; }

/* --- admin stat icons (light tint boxes → dark tint, same icon colors) ---- */
.admin-stat-icon.blue { background: #1d2c44; }
.admin-stat-icon.violet { background: #251d44; }
.admin-stat-icon.green { background: #14332a; }
.admin-stat-icon.orange { background: #3d2f14; }
.user-avatar { background: #1d2c44; }

/* --- lane/group counters, badges ------------------------------------------ */
.lane-count { background: var(--dm-surface-2); color: var(--dm-muted); }
.board-group-count { background: var(--dm-surface-2); color: var(--dm-muted); }
.estimate-badge { border-color: var(--dm-border) !important; color: var(--dm-muted); }
.due-badge.due-future { background: var(--dm-surface-2); color: var(--dm-muted); }
.automation-badge { background: var(--dm-surface-2); }
.automation-badge.warn { background: #3d2f14; color: #d29a3a; }
.automation-badge.err { background: #40201d; color: #e06c5f; }
.automation-item.active { background: var(--dm-surface-2); }
.automation-step-children { border-left-color: var(--dm-border); }

/* --- chips / picker options ------------------------------------------------ */
.menu-icon-option.active { background: #1d2c44; color: #8bb6ff; }
.icon-option.active { background: #1d2c44; border-color: #4c8dff !important; }
.page-group-chip { background: var(--dm-surface-2); border-color: var(--dm-border); }
.highlight-option { background: var(--dm-surface); border-color: var(--dm-border); box-shadow: inset 0 0 0 2px var(--dm-surface); }
.highlight-option.active { border-color: var(--dm-text); box-shadow: inset 0 0 0 2px var(--dm-surface), 0 0 0 2px var(--dm-text); }
.files-toolbar .btn.active { background: #1d2c44; border-color: #4c8dff; color: #8bb6ff; }
.files-refcombo-item.active { background: #1d2c44; color: #8bb6ff; }
.files-changelog-row:hover { background: var(--dm-surface-2); }
.files-changelog-row.active { background: #1d2c44; }
.files-changelog-row code { background: var(--dm-surface-2); }
.files-split-subhead { background: var(--dm-surface-2); }
.links-row-bad { background: #2a1b1b; border-color: #6b3230 !important; }
.links-row-warn { background: #2e2716; border-color: #6b5a2a !important; }
.links-chip-ok { background: #14332a; border-color: #2c5a48; }
.links-chip-bad { background: #40201d; border-color: #6b3230; }
.links-chip-warn { background: #3a2f14; border-color: #6b5a2a; }
/* task designer options box (was an inline #fafbfe background) */
.links-taskoptions { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; }
/* ticket link type badge + locked target */
.ticket-link-type { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
.board-changes-badge { background: #3d2f14; color: #d29a3a; }
.board-changes-badge:hover { background: #4a3a1a; color: #e0b058; }

/* --- files extras ----------------------------------------------------------- */
.files-gitbar, .files-pathbar { background: var(--dm-surface-2); border-color: var(--dm-border) !important; }
.files-folder.files-folder-empty { background: #2e2716; border-color: #6b5a2a; color: #c9a85a; }
.files-folder-empty i { color: #a8873a; }
.files-disk-bar, .files-sync-bar { background: var(--dm-border); }
.files-loading-overlay { background: rgba(20, 24, 31, .55); }
.files-gallery-item img { background: var(--dm-surface-2); }
.files-searchrow-sep { background: var(--dm-border); }
.files-context-name, .user-group-panel .picker-head { border-bottom-color: var(--dm-border); }
.files-sortable:hover, .files-sorted { color: var(--dm-text); }

/* --- inline-style guards -------------------------------------------------
   Templates and JS set a few hardcoded light backgrounds inline; beat those
   with attribute selectors. Dynamic colors (group/highlight colors, icon
   colors) are intentionally NOT matched. */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#fafbfe"],
[style*="background: #fafbfe"],
[style*="background:#f1f3f7"],
[style*="background: #f1f3f7"],
[style*="background:#f8faff"],
[style*="background: #f8faff"] {
    background: var(--dm-surface) !important;
}

/* This sheet is loaded only in dark mode (render_index server-side /
   applyDarkMode client-side); !important above targets inline styles only. */

/* --- CodeMirror 5 (CDN) — links snippets editor; textarea fallback is
   already handled by Bootstrap's data-bs-theme -------------------------- */
.CodeMirror { background: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); }
.CodeMirror-gutters { background: var(--dm-surface-2); border-right-color: var(--dm-border); }
.CodeMirror-linenumber { color: var(--dm-muted); }
.CodeMirror-cursor { border-left-color: var(--dm-text); }
.CodeMirror-selected { background: rgba(76,141,255,.28); }
.CodeMirror-focused .CodeMirror-selected { background: rgba(76,141,255,.35); }
.CodeMirror-activeline-background { background: rgba(255,255,255,.05); }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgba(76,141,255,.35); }

/* --- light utility classes that never follow data-bs-theme ------------- */
.badge.bg-light, .badge.text-bg-light { background-color: var(--dm-surface-2) !important; color: var(--dm-text) !important; }
.badge.border { border-color: var(--dm-border) !important; }
.bg-light { background-color: var(--dm-surface-2) !important; }
.btn-light { background-color: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
.btn-light:hover { background: var(--dm-border) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }
.btn-light.border { border-color: var(--dm-border) !important; }

/* --- board toolbar icon buttons (gear/robot/links/lock/trash) ----------- */
.board-settings-button { background: var(--dm-surface) !important; color: var(--dm-muted) !important; }
.board-settings-button:hover { color: #8bb6ff !important; border-color: #4c8dff !important; }

/* --- ticket card buttons & chips (thin dark tones, readable accents) ---- */
.ticket-card-action { background: var(--dm-surface) !important; border-color: #3d5a8a !important; color: #8bb6ff !important; }
.ticket-card-action:hover { background: var(--dm-surface-2) !important; }
.priority-chip.lowest, .priority-chip.low { background: #14332a; color: #4fd39a; }
.priority-chip.medium { background: #3d2f14; color: #e0a63a; }
.priority-chip.high, .priority-chip.highest { background: #40201d; color: #e06c5f; }
.due-badge.overdue { background: #40201d; color: #e06c5f; }
.due-badge.due-today, .due-badge.due-soon { background: #3d2f14; color: #e0a63a; }
.ticket-assignee { background: #1d2c44; color: #8bb6ff; }

/* --- board settings: lane colour column + icon picker previews ---------- */
.lane-colour-settings { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; }
.lane-colour-settings select { color: var(--dm-muted) !important; border-left-color: var(--dm-border) !important; }
.icon-preview, .highlight-preview { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
.icon-preview { color: var(--dm-muted) !important; }

/* --- admin menu: icon chips + icon picker button ------------------------- */
.group-icon, .menu-icon { background: #1d2c44; color: #8bb6ff; }
.menu-icon-editor .input-group-text { background: var(--dm-surface-2) !important; color: #8bb6ff !important; }

/* --- files: gallery/disk icons brighten against the dark explorer ------- */
.files-gallery-item i { color: #a9b8cd; }
.files-disk > i { color: #93a1b5; }
.files-disk-label { color: #93a1b5; }

/* --- combo dropdown menus (board settings icon picker, admin menu icon
   picker, ticket editor icon/highlight pickers) — surface + border ------- */
.combo-select-menu, .menu-icon-menu { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text); }

/* --- jQuery UI widgets (home page accordion/tabs demos) ------------------ */
.ui-accordion .ui-accordion-header {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}
.ui-accordion .ui-accordion-header:hover { background: var(--dm-surface) !important; }
.ui-accordion .ui-accordion-header.ui-state-active { background: var(--dm-surface) !important; }
.ui-tabs .ui-tabs-nav {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}
.ui-tabs .ui-tabs-nav li a { color: var(--dm-muted) !important; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li a:hover { color: var(--dm-text) !important; }

/* --- board permission dialog (assigned permission groups) ---------------- */
.board-perm-row { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
.board-perm-assigned { background: var(--dm-bg) !important; }

/* --- automation panel redesign (tile overview + breadcrumb editor) ------ */
.automation-tile { background: var(--dm-surface) !important; border-color: #3d4f6e !important; }
.automation-tile:hover { border-color: #54749f !important; box-shadow: 0 4px 12px rgba(0,0,0,.35) !important; }
.automation-tile.active { border-color: #4c8dff !important; }
.automation-tile .automation-item-head strong { color: #8bb6ff; }
.automation-crumb-path { color: var(--dm-text) !important; }
.automation-crumb-path strong { color: #8bb6ff; }

/* --- apps page (remote app streaming) -------------------------------------- */
.apps-tile { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
.apps-tile-head strong { color: var(--dm-text) !important; }
.apps-tile-meta { color: var(--dm-muted) !important; }
.apps-state-stopped { background: var(--dm-surface-2); color: var(--dm-muted); }
.apps-state-starting { background: #3d2f14; color: #e0a63a; }
.apps-state-running { background: #14332a; color: #4fd39a; }
.apps-state-error { background: #40201d; color: #e06c5f; }
.apps-subtitle { color: var(--dm-muted) !important; }
.apps-toolbar h1 { color: var(--dm-text) !important; }

/* --- Hyper-V panel (VM host management) ------------------------------------ */
.hyperv-tile { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
.hyperv-tile:hover { border-color: var(--dm-muted) !important; }
.hyperv-tile-add { color: var(--dm-muted) !important; }
.hyperv-dialog { background: var(--dm-surface) !important; color: var(--dm-text); }
.hyperv-dd-col { border-color: var(--dm-border) !important; }

/* --- Container panel (Docker/Podman host management) ------------------------ */
.container-tile { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
.container-tile:hover { border-color: var(--dm-muted) !important; }
.container-tile-add { color: var(--dm-muted) !important; }
.container-panel-box { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text); }
.container-table th { border-bottom-color: var(--dm-border) !important; color: var(--dm-text); }
.container-table td { border-top-color: var(--dm-border) !important; }
.container-dialog { background: var(--dm-surface) !important; color: var(--dm-text); }

/* --- ticket feedback-required banner -------------------------------------- */
.ticket-feedback-banner { background: rgba(232, 163, 61, .14) !important; border-color: rgba(232, 163, 61, .5) !important; }
.ticket-feedback-banner .ticket-feedback-question { color: var(--dm-muted) !important; }
.ticket-feedback-options .btn { border-color: var(--dm-border); }

/* --- Lanes panel (TCP forwarding dashboard) --------------------------------- */
.lanes-card, .lanes-editor-node { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text); }
.lanes-card-add { color: var(--dm-muted) !important; }
.lanes-node { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; }
.lanes-node .lanes-node-sub, .lanes-hint, .lanes-meta { color: var(--dm-muted) !important; }
.lanes-pipe { background: #26303f; }
.lanes-chip-ok { background: #14332a; border-color: #2c5a48; }
.lanes-chip-off { background: #2a3140; border-color: var(--dm-border); }
.lanes-chip-err { background: #40201d; border-color: #6b3230; }
.lanes-chip-proto { background: #2a3140 !important; border-color: var(--dm-border) !important; color: var(--dm-muted) !important; }
.lanes-node-in { background: #262038 !important; border-color: #4a3f6b !important; }
.lanes-node-out { background: #1c2b25 !important; border-color: #2c5a48 !important; }
.lanes-pos { color: var(--dm-muted) !important; }
.lanes-pipe-down { background: #40201d; }
.lanes-io-in { color: #4c9e7a !important; }
.lanes-io-out { color: #6ea8fe !important; }
.lanes-node-ports { color: var(--dm-muted) !important; }
.lanes-chip-rate { background: #1b2b45 !important; border-color: #2c4a77 !important; color: #8fb8f5 !important; }
.lanes-chip-pipes { background: #2a3140 !important; border-color: var(--dm-border) !important; color: var(--dm-muted) !important; }
.lanes-ed-extras { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
.lanes-ed-grid .form-label { color: var(--dm-muted) !important; }
.lanes-palette, .lanes-builder { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
.lanes-pal-item, .lanes-hop { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text); }
.lanes-hop-fields input { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text); }
.lanes-pal-hint, .lanes-builder-empty { color: var(--dm-muted) !important; }