/* Salmon Color Utilities */
:root {
    --salmon: #FA8072;
    --salmon-dark: #E9695A;
    --salmon-light: #FFA49A;
}

.page-title{
    padding: 0px !important;;
}

h3, h2 {
    color: #00b0ff;
}

.text-black {
    color: #fff !important;
}

 select.form-control {
    background-color: rgba(50, 51, 58, 0) !important;
    color: #fff;
}

/* Native <select> popups are painted from color-scheme, not from the
   element's own colours: without this Chromium draws the option list light
   while the text inherits white, so unselected options read white-on-white.
   Bare `select`, not select.form-control, because the config renderer
   (cognitiveSOUL_guessInput) emits selects with no class. This sheet loads
   only in dark mode (index.tpl), so the rules need no theme scoping.
   (The ::picker(select) rule that used to sit here only styled
   appearance:base-select selects, which the admin does not use.) */
select {
    color-scheme: dark;
}

select option,
select optgroup {
    background-color: #2c2d33;
    color: #e6e6e6;
}

/* A <select multiple> renders as a LISTBOX, and its selected rows must stay
   distinguishable. The rule above deliberately sets a uniform background on
   EVERY option to fix Chromium's white-on-white native popup -- but that also
   overpaints the browser's own selection highlight, so an option carrying
   `selected="selected"` looked identical to an unselected one.

   Reported 2026-09-22 against the user-edit "Group Memberships" list: a real
   group membership rendered with selected="selected" in the HTML and still
   read as unselected, which looks like a data bug and is not one.

   Same palette as the .fm-list selected row below, so the cue reads as one
   design language. Two browser quirks are handled deliberately:
     - the linear-gradient repeats the colour because Chromium ignores a plain
       background-color on option:checked in a listbox;
     - -webkit-text-fill-color is needed or Chromium keeps its own ink colour. */
select[multiple] option:checked,
select[size]:not([size="1"]) option:checked {
    background: #2a3a52 linear-gradient(0deg, #2a3a52 0%, #2a3a52 100%);
    color: #cfe1ff;
    -webkit-text-fill-color: #cfe1ff;
    font-weight: 600;
}

/* Text */
.text-salmon { color: #FA8072 !important; }
.text-salmon-dark { color: #E9695A !important; }

/* Background */
.bg-salmon { background-color: #FA8072 !important; }
.bg-salmon-light { background-color: #FFA49A !important; }

/* Buttons */
.btn-salmon {
    color: #fff;
    background-color: #FA8072;
    border-color: #FA8072;
}
.btn-salmon:hover,
.btn-salmon:focus {
    color: #fff;
    background-color: #E9695A;
    border-color: #E9695A;
}
.btn-salmon:active,
.btn-salmon.active {
    color: #fff;
    background-color: #D85A4B;
    border-color: #D85A4B;
}
.btn-salmon:disabled,
.btn-salmon.disabled {
    color: #fff;
    background-color: #FA8072;
    border-color: #FA8072;
    opacity: 0.65;
}

/* Outline Button */
.btn-outline-salmon {
    color: #FA8072;
    border-color: #FA8072;
    background-color: transparent;
}
.btn-outline-salmon:hover,
.btn-outline-salmon:focus {
    color: #fff;
    background-color: #FA8072;
    border-color: #FA8072;
}
.btn-outline-salmon:active,
.btn-outline-salmon.active {
    color: #fff;
    background-color: #E9695A;
    border-color: #E9695A;
}

/* Badge */
.badge-salmon {
    color: #fff;
    background-color: #FA8072;
}
.badge-salmon[href]:hover,
.badge-salmon[href]:focus {
    color: #fff;
    background-color: #E9695A;
}

/* Alert */
.alert-salmon {
    color: #7D302A;
    background-color: #FEE5E2;
    border-color: #FDD9D5;
}
.alert-salmon .alert-link {
    color: #5C231F;
}

/* Border */
.border-salmon { border-color: #FA8072 !important; }

.list-group{
    background-color: transparent !important;
}
.table-info a {
    color: #000;
}
.ripple-animation { display:none; }
.bg-body{ background-color: #202126 !important; }
.col-form-label { color: #fff; }

.om-page .card {
    flex: 1;
    padding: 20px;
    background: #32333a !important;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.om-page .table th {
    background-color: #32333a !important;
    font-weight: 600;
}

.om-page .card-title {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}

.analytics-section .card-header {
    background: #32333a !important;
}

.om-page .summary-cards .card-title {
    color: #fff;
}

.om-page .summary-cards .card-value {
    color: #fff;
}

.om-page .info-section {
    background: #32333a !important;
}

.om-page .info-section h4 {
    color: #fff;
}

.om-fulfillment > .card .card-header {
    background: #32333a !important;
}

.om-help-accordion .card-body strong {
    color: #ddd !important;
}

.om-help-accordion .card-body h1 {
    color: #00b0ff !important;
}

.om-help-accordion .card-body h2 {
    color: #00b0ff !important;
}

.om-help-accordion .card-body h3 {
    color: #00b0ff !important;
}

.om-help-accordion .card-body h4 {
    color: #00b0ff !important;
}

.om-help-accordion .card-body h5 {
    color: #00b0ff !important;
}

#productBrowserList .product-item:hover {
    background: #222 !important;
}

.percentile-tile {
    color: #000 !important;
}

.funnel-row-label {
    color: #eee !important;
}

.funnel-row-label .value {
    color: #ddd !important;
}

#imageDropZone {
    background: #32333a !important;
}

.alert-info .text-muted {
    color: #005964 !important;
}

.ui-menu .ui-menu-item-wrapper {
    color: #000 !important;
}

.fm-bulk-ac-item {
    color: #000 !important;
}

/* Admin list tables — dark surface override (NOT related to .fm-* rules below;
   targets the legacy `table.admin_list` pattern used in older admin pages). */
table.admin_list td {
    background: #32333a !important;
}

/* Image Map Pro editor — dark-mode overrides.
   Vendor CSS has `html, body { background: #fff !important }` which would otherwise repaint
   the admin page white. We use `:root` (specificity 0,1,0 beats `html` 0,0,1) and
   `body#cognitiveSOUL_admin_page` (0,1,1 beats `body` 0,0,1) so our `!important` wins
   regardless of stylesheet load order. The actual image canvas (#wcp-editor-canvas) is
   intentionally left white — it's the document surface where the gallery image is shown. */
:root,
body#cognitiveSOUL_admin_page {
    background: #202125 !important;
    background-color: #202125 !important;
}
#wcp-editor {
    background: #2c2d33 !important;
}
#wcp-editor-object-list-wrap {
    background: #2c2d33 !important;
    color: #e6e6e6;
}
#wcp-editor-object-list-wrap a,
#wcp-editor-object-list-wrap span,
#wcp-editor-object-list-wrap label {
    color: #e6e6e6;
}
#wcp-editor-list {
    color: #444;
}

#wcp-editor-right #wcp-editor-object-list-wrap #wcp-editor-object-list-buttons .wcp-editor-object-list-button {
    color: #000;
}

.imap-pro-parsed-table .imap-pro-part{
    color: #00bcd4 !important;
    font-weight: bold;
}

#imap-pro-part-resolution-blurb .text-muted {
    color: #000 !important;
}

/* File manager layout: a card whose body is constrained to the viewport so
   only the file list scrolls. The toolbar sticks to the top of that scroll. */
.fm-card-body { padding: 0; }

/* Create-Map modal: lightweight self-contained overlay (mirrors the Bulk
   Actions modal pattern from image_map_pro_editor.tpl). We deliberately
   do NOT use Bootstrap's .modal / .modal-backdrop classes -- the admin
   theme renders those as a fully-opaque black overlay, which is jarring.
   The translucent backdrop here matches the rest of the admin's modals. */
.fm-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.65);
    z-index: 100000; display: none;
}
.fm-modal-backdrop.show { display: flex; align-items: center; justify-content: center; }
.fm-modal {
    background: #32333a; border-radius: 6px; box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    width: 640px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column;
    overflow: hidden;
    color: #e6e6e6;
}
.fm-modal-header {
    padding: 12px 16px; border-bottom: 1px solid #3a3d44;
    display: flex; align-items: center; justify-content: space-between;
    background: #2c2d33; font-weight: 600;
    color: #f0f0f0;
}
.fm-modal-close {
    cursor: pointer; padding: 4px 10px; border: 0; background: transparent;
    font-size: 18px; line-height: 1; color: #bbb;
}
.fm-modal-close:hover { color: #fff; }
.fm-modal-body {
    padding: 14px 16px; overflow-y: auto; flex: 1; font-size: 13px; line-height: 1.4;
}
.fm-modal-footer {
    padding: 10px 16px; border-top: 1px solid #3a3d44; background: #2c2d33;
    display: flex; justify-content: flex-end; gap: 6px;
}
.fm-modal-footer button {
    padding: 7px 14px; border-radius: 3px; border: 1px solid #444851; cursor: pointer;
    background: #3a3d44; color: #e6e6e6; font-size: 13px;
}
.fm-modal-footer button:hover:not(:disabled) {
    background: #444851; border-color: #5a5e68;
}
.fm-modal-footer button:disabled { opacity: 0.5; cursor: not-allowed; }
.fm-modal-footer button.primary { background: #2c6fbb; color: #fff; border-color: #2c6fbb; }
/* Two-up choice cards inside the body. */
.fm-create-map-choices { display: flex; gap: 12px; flex-wrap: wrap; }
.fm-create-map-choice {
    flex: 1 1 240px; min-width: 220px;
    background: #2c2d33; border: 1px solid #444851; border-radius: 5px;
    padding: 16px; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 6px;
    font-family: inherit; font-size: 13px; color: #e6e6e6;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.fm-create-map-choice:hover:not(:disabled) {
    border-color: #4d92dd; background: #2e3540;
    box-shadow: 0 2px 8px rgba(77,146,221,0.18);
}
.fm-create-map-choice:disabled { opacity: 0.55; cursor: not-allowed; }
.fm-create-map-choice .fm-choice-icon { font-size: 22px; color: #4d92dd; }
.fm-create-map-choice.ai .fm-choice-icon { color: #5fbf5f; }
.fm-create-map-choice .fm-choice-title { font-weight: 600; font-size: 14px; color: #f0f0f0; }
.fm-create-map-choice .fm-choice-desc { color: #999; font-size: 12px; }
.fm-create-map-status { font-size: 13px; padding: 8px 10px; border-radius: 3px; min-height: 18px; margin-top: 12px; }
.fm-create-map-status.info  { background: #1c2a3a; color: #7faaff; }
.fm-create-map-status.error { background: #3a1c1c; color: #f0a0a0; }
.fm-create-map-status.ok    { background: #1f3a1f; color: #8fcf8f; }
.fm-scroll {
    max-height: calc(100vh - 280px);
    min-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    /* `position: relative` so the drop overlay (.fm-drop-overlay) can be
       absolutely positioned to cover the scroll viewport when a drag
       enters the file list. */
    position: relative;
}

/* ---- Drag & drop file upload -------------------------------------
   Drop zone == .fm-scroll (the file list area). When a drag enters,
   `.fm-drag-active` is added and the overlay becomes visible. The JS
   tracks dragenter/dragleave with a counter to avoid the overlay
   flickering as the cursor crosses child rows. */
.fm-drop-overlay {
    position: absolute; inset: 0;
    display: none; pointer-events: none;
    background: rgba(77, 146, 221, 0.18);
    border: 2px dashed #4d92dd;
    border-radius: 4px;
    z-index: 6;
    align-items: center; justify-content: center;
    color: #cfe1ff; font-size: 16px; font-weight: 600;
    text-align: center;
}
.fm-drop-overlay .fm-drop-overlay-msg {
    background: rgba(50, 51, 58, 0.95);
    padding: 14px 22px; border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45);
    color: #f0f0f0;
}
.fm-drop-overlay .fm-drop-overlay-msg i { font-size: 22px; margin-right: 6px; }
.fm-drop-overlay .fm-drop-overlay-target {
    display: block; font-size: 12px; font-weight: normal;
    color: #aaa; margin-top: 4px;
}
.fm-scroll.fm-drag-active .fm-drop-overlay {
    display: flex;
}
/* Per-row highlight: when dragging files over a folder row, that row
   becomes the upload target (amber tinted background + left border).
   Mutually exclusive with the regular .selected highlight in practice
   since drag-over is transient. */
.fm-list tbody tr.fm-drop-target {
    background: #3a2f12 !important;
    box-shadow: inset 4px 0 0 0 #d49314;
}
.fm-toolbar-sticky {
    position: sticky; top: 0; z-index: 5;
    background: #2c2d33;
    padding: 10px 12px;
    border-bottom: 1px solid #3a3d44;
}
.fm-toolbar-sticky .btn { margin-right: 4px; }

/* Toolbar button affordance: outlined+dimmed when disabled, solid filled
   when enabled. This is the inverse of Bootstrap's default `btn-outline-*`
   behavior (which is just slightly dimmed when disabled), and makes "this
   action is available right now" read at a glance. The non-outline buttons
   in the toolbar (e.g. New Folder, Upload using `btn-primary`) are already
   solid and unaffected by these rules.
   Coverage: every `btn-outline-*` color that the toolbar actually uses
   today (secondary, danger, success, info). Add more if a new color is
   introduced. */
.fm-toolbar-sticky .btn-outline-secondary:not(:disabled),
.fm-toolbar-sticky .btn-outline-secondary:not(:disabled):focus {
    background-color: #6c757d; color: #fff; border-color: #6c757d;
}
.fm-toolbar-sticky .btn-outline-secondary:not(:disabled):hover {
    background-color: #5a6268; border-color: #545b62; color: #fff;
}
.fm-toolbar-sticky .btn-outline-danger:not(:disabled),
.fm-toolbar-sticky .btn-outline-danger:not(:disabled):focus {
    background-color: #b53a3a; color: #fff; border-color: #b53a3a;
}
.fm-toolbar-sticky .btn-outline-danger:not(:disabled):hover {
    background-color: #962e2e; border-color: #962e2e; color: #fff;
}
.fm-toolbar-sticky .btn-outline-success:not(:disabled),
.fm-toolbar-sticky .btn-outline-success:not(:disabled):focus {
    background-color: #2a8a2a; color: #fff; border-color: #2a8a2a;
}
.fm-toolbar-sticky .btn-outline-success:not(:disabled):hover {
    background-color: #226c22; border-color: #226c22; color: #fff;
}
.fm-toolbar-sticky .btn-outline-info:not(:disabled),
.fm-toolbar-sticky .btn-outline-info:not(:disabled):focus {
    background-color: #2c8eb1; color: #fff; border-color: #2c8eb1;
}
.fm-toolbar-sticky .btn-outline-info:not(:disabled):hover {
    background-color: #237390; border-color: #237390; color: #fff;
}

/* Disabled outline buttons: explicit transparent fill + stronger opacity
   dim than the Bootstrap default (0.65). Cursor stays not-allowed for the
   usual hint. */
.fm-toolbar-sticky .btn-outline-secondary:disabled,
.fm-toolbar-sticky .btn-outline-danger:disabled,
.fm-toolbar-sticky .btn-outline-success:disabled,
.fm-toolbar-sticky .btn-outline-info:disabled {
    background-color: transparent !important;
    opacity: 0.42;
    cursor: not-allowed;
}
.fm-breadcrumb {
    padding: 6px 12px;
    border-bottom: 1px solid #3a3d44;
    font-size: 13px;
    background: #262a30;
    color: #ccc;
}
.fm-breadcrumb a { cursor: pointer; color: #7faaff; text-decoration: none; }
.fm-breadcrumb a:hover { text-decoration: underline; color: #a0c0ff; }
/* Move (drag-to-move + the Move modal's folder list). A breadcrumb folder
   highlights like a folder row while rows are dragged over it. */
.fm-list tbody tr[draggable="true"] { cursor: grab; }
.fm-breadcrumb a.fm-drop-target { background: #3a2f12; box-shadow: inset 0 -2px 0 0 #d49314; border-radius: 2px; }
.fm-move-list { width: 100%; }
.fm-move-list tbody tr[data-fm-move-path] { cursor: pointer; }
.fm-move-list tbody tr.fm-move-disabled { cursor: not-allowed; }
.fm-status { padding: 6px 12px; font-size: 12px; min-height: 18px; border-bottom: 1px solid #3a3d44; color: #ccc; }
.fm-status.ok { background: #1f3a1f; color: #8fcf8f; }
.fm-status.err { background: #3a1c1c; color: #f0a0a0; }
.fm-list { width: 100%; border-collapse: collapse; }
.fm-list th, .fm-list td { border-bottom: 1px solid #2c2d33; padding: 8px 12px; text-align: left; font-size: 13px; vertical-align: middle; color: #e0e0e0; }
.fm-list thead th { background: #32333a; font-weight: 600; position: sticky; top: 0; z-index: 4; color: #f0f0f0; }
/* Sortable column headers (dark mirror of the light-mode rules). */
.fm-list thead th.fm-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.fm-list thead th.fm-sortable:hover { background: #3a3b43; }
.fm-list thead th .fm-sort-caret { font-size: 10px; margin-left: 4px; color: #7fb3ec; visibility: hidden; }
.fm-list thead th.fm-sort-asc  .fm-sort-caret,
.fm-list thead th.fm-sort-desc .fm-sort-caret { visibility: visible; }
.fm-list thead th.fm-sort-asc  .fm-sort-caret::before { content: "\25B2"; }
.fm-list thead th.fm-sort-desc .fm-sort-caret::before { content: "\25BC"; }
.fm-list tr { cursor: pointer; }
.fm-list tbody tr:hover { background: #2a2c33; }
/* Selection beats hover via specificity + !important. The blue left-border
   gives a clear, unambiguous "this is the active row" cue. We use a deeper
   surface tint here so the bright left-border accent does the heavy lifting
   for the cue rather than a tinted-blue background that reads muddy on dark. */
.fm-list tbody tr.selected,
.fm-list tbody tr.selected:hover {
    background: #2a3a52 !important;
    box-shadow: inset 4px 0 0 0 #4d92dd;
    color: #cfe1ff;
}
.fm-list tbody tr.selected td .text-muted { color: #a0bee0 !important; }
.fm-list .fm-icon { width: 40px; padding: 4px 6px; }
.fm-list .fm-icon i { font-size: 18px; }
/* Per-row image thumbnail. Replaces the generic image icon with a tiny
   preview of the actual file. Browsers handle loading="lazy" natively
   so off-screen rows don't bandwidth-bomb when scrolling a deep folder.
   If the image fails to load, the JS onerror handler swaps it back to
   the icon so the row still has a visual indicator. */
.fm-list .fm-thumb {
    display: block;
    width: 32px; height: 32px;
    object-fit: cover;
    border: 1px solid #444851;
    border-radius: 3px;
    background: #1c1d21;
}
.fm-list tbody tr.fm-row-hidden .fm-thumb { opacity: 0.55; }
.badge-imap   { background: #2a6a2a; color: #fff; }

/* Hidden-item badges + dimmed rows.
   Four states (server-driven via item.hidden_state):
     hidden        -- solid red, row dimmed (currently hidden, no end)
     hidden_until  -- red+clock, row dimmed (currently hidden, will auto-show)
     will_hide     -- yellow+clock, row NOT dimmed (currently visible, will hide)
     window        -- red, row dimmed (currently hidden, both endpoints set)
   The clock icon comes from the existing icomoon set bundled with the
   admin theme. */
.badge-hidden        { background: #b53a3a; color: #fff; }
.badge-hidden-until  { background: #b53a3a; color: #fff; }
.badge-will-hide     { background: #d49314; color: #2c2c2c; }
.badge-hidden-window { background: #b53a3a; color: #fff; }
.fm-list tbody tr.fm-row-hidden td > * { opacity: 0.55; }
/* Banner shown across the top of the file list when current folder OR an
   ancestor is currently hidden. Mirrors the .fm-status "err" coloring. */
.fm-hidden-banner {
    padding: 8px 12px; font-size: 13px;
    background: #3a2f12; color: #e6b34d;
    border-bottom: 1px solid #5a4a20;
    display: none;
}
.fm-hidden-banner.show { display: block; }
.fm-hidden-banner i { margin-right: 6px; color: #e6b34d; }
.fm-hidden-banner a {
    color: #7faaff; cursor: pointer; text-decoration: underline; margin-left: 8px;
}

/* Filter input row sits below the toolbar buttons inside the sticky
   header. Layout: input grows to fill, count label + clear button on
   the right. The clear button only appears when the filter has text. */
.fm-filter-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 8px 12px;
    border-bottom: 1px solid #3a3d44;
    background: #262a30;
}
.fm-filter-row label {
    font-size: 12px; color: #aaa; margin: 0; flex-shrink: 0;
}
.fm-filter-row input[type="text"] {
    flex: 1; min-width: 0;
    border: 1px solid #444851; border-radius: 3px;
    padding: 5px 9px; font-size: 13px;
    background: #2c2d33; color: #e6e6e6;
}
.fm-filter-row input[type="text"]::placeholder { color: #777; }
.fm-filter-row input[type="text"]:focus {
    outline: 0; border-color: #4d92dd;
    box-shadow: 0 0 0 2px rgba(77,146,221,0.25);
}
.fm-filter-count {
    font-size: 12px; color: #999; flex-shrink: 0;
    min-width: 90px; text-align: right;
}
.fm-filter-clear {
    background: transparent; border: 0; cursor: pointer;
    color: #999; font-size: 16px; line-height: 1; padding: 2px 6px;
}
.fm-filter-clear:hover { color: #f0a0a0; }
.fm-list tbody tr.fm-empty-msg { cursor: default; }
.fm-list tbody tr.fm-empty-msg:hover { background: transparent; }

/* ---- Right-click context menu ----
   Floating <ul> appended to <body> by the JS. Visible only when the user
   right-clicks on a row in the file table. */
.fm-context-menu {
    position: absolute;
    z-index: 100050;
    display: none;
    min-width: 220px; max-width: 360px;
    margin: 0; padding: 4px 0;
    list-style: none;
    background: #32333a;
    border: 1px solid #444851;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    font-size: 13px;
}
.fm-context-menu.show { display: block; }
.fm-context-menu .fm-ctx-item {
    display: flex; align-items: center;
    padding: 6px 14px;
    cursor: pointer; color: #e6e6e6;
    white-space: nowrap;
}
.fm-context-menu .fm-ctx-item i { width: 16px; text-align: center; }
.fm-context-menu .fm-ctx-item:hover { background: #2a3a52; color: #cfe1ff; }
.fm-context-menu .fm-ctx-item.disabled {
    color: #6c7077; cursor: not-allowed;
    pointer-events: none;
}
.fm-context-menu .fm-ctx-divider {
    height: 1px; margin: 4px 0;
    background: #3a3d44;
    list-style: none;
}

/* ---- AI Bulk Progress modal ----
   Custom progress modal opened when the user fires the AI Image Map
   generator on a multi-selection. Per-row status icons, plus an overall
   determinate progress bar at the top. */
.fm-ai-bulk-progress-wrap {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #2c2d33;
    border: 1px solid #3a3d44;
    border-radius: 4px;
}
.fm-ai-bulk-progress-stats {
    font-size: 13px; color: #e6e6e6;
    margin-bottom: 6px;
    display: flex; align-items: baseline;
}
.fm-ai-bulk-progress-bar-track {
    height: 10px;
    background: #1c1d21;
    border-radius: 5px;
    overflow: hidden;
}
.fm-ai-bulk-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4d92dd 0%, #6fb3ff 100%);
    transition: width 240ms ease-out;
}
.fm-ai-bulk-progress-bar-fill.done {
    background: linear-gradient(90deg, #3eaa3e 0%, #5fbf5f 100%);
}

.fm-ai-bulk-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #e6e6e6;
}
.fm-ai-bulk-list tr { border-bottom: 1px solid #2c2d33; }
.fm-ai-bulk-list td {
    padding: 6px 8px;
    vertical-align: middle;
}
.fm-ai-bulk-list .status-cell {
    width: 28px; text-align: center;
}
.fm-ai-bulk-list .status-cell i { font-size: 16px; }
.fm-ai-bulk-list .name-cell .name { font-weight: 600; color: #f0f0f0; }
.fm-ai-bulk-list .name-cell .folder {
    font-size: 11px; line-height: 1.3;
    color: #999;
}
.fm-ai-bulk-list .info-cell { width: 180px; text-align: right; color: #999; }

/* Pending dot: small gray circle. */
.fm-ai-pending-dot {
    display: inline-block;
    width: 10px; height: 10px;
    background: #5a5e68;
    border-radius: 50%;
}
/* Spinning "working" icon. icon-spinner3 is from the bundled icomoon set. */
@keyframes fm-ai-spin-kf {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.fm-ai-spin {
    display: inline-block;
    color: #4d92dd;
    animation: fm-ai-spin-kf 1.1s linear infinite;
}

/* ---- Activity Feed slide-out panel ----
   Anchored to the right edge of the viewport. Slides in over the FM with
   a translucent backdrop. Self-contained CSS (no Bootstrap modal classes)
   to match the rest of the FM-bespoke widgets. */
.fm-activity-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 99999; display: none;
}
.fm-activity-backdrop.show { display: block; }
.fm-activity-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 380px; max-width: 95vw;
    background: #2c2d33; box-shadow: -4px 0 20px rgba(0,0,0,0.5);
    z-index: 100000; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 200ms ease-out;
    color: #e6e6e6;
}
.fm-activity-panel.open { transform: translateX(0); }
.fm-activity-panel-header {
    padding: 14px 16px; border-bottom: 1px solid #3a3d44;
    display: flex; align-items: center; justify-content: space-between;
    background: #32333a; flex-shrink: 0;
}
.fm-activity-panel-header h5 { margin: 0; font-size: 15px; font-weight: 600; color: #f0f0f0; }
.fm-activity-panel-header h5 i { margin-right: 6px; color: #4d92dd; }
.fm-activity-panel-close {
    cursor: pointer; padding: 4px 10px; border: 0; background: transparent;
    font-size: 22px; line-height: 1; color: #bbb;
}
.fm-activity-panel-close:hover { color: #fff; }
.fm-activity-filter-row {
    padding: 6px 12px; border-bottom: 1px solid #3a3d44;
    background: #2b2c33; flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
}
.fm-activity-filter-row input,
.fm-activity-filter-row .k-datepicker {
    flex: 1; max-width: 160px; font-size: 12px;
}
.fm-activity-filter-row .k-datepicker .k-input-inner { height: 26px; padding: 2px 6px; font-size: 12px; }
.fm-activity-filter-row .k-datepicker .k-input-button { padding: 0 6px; }
.fm-activity-date-clear {
    cursor: pointer; border: 0; background: transparent;
    font-size: 18px; line-height: 1; color: #aaa; padding: 0 4px;
}
.fm-activity-date-clear:hover { color: #e87b6c; }
.fm-activity-panel-body { flex: 1; overflow-y: auto; padding: 0; }
.fm-activity-panel-empty {
    padding: 32px 18px; text-align: center; color: #888; font-size: 13px;
}
.fm-activity-sentinel { min-height: 0; }
.fm-activity-loading-more {
    padding: 14px 18px; text-align: center; color: #888; font-size: 12px;
}
.fm-activity-panel-footer {
    padding: 8px 12px; border-top: 1px solid #3a3d44; background: #262a30;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
    font-size: 12px; color: #aaa;
}
.fm-activity-panel-footer button {
    padding: 5px 10px; border-radius: 3px; border: 1px solid #444851; cursor: pointer;
    background: #3a3d44; color: #e6e6e6; font-size: 12px;
}
.fm-activity-panel-footer button:hover { background: #444851; }
/* One activity entry. Action category drives the left-border color. */
.fm-activity-entry {
    padding: 12px 14px; border-bottom: 1px solid #3a3d44;
    display: grid; grid-template-columns: 22px 1fr auto; gap: 8px;
    align-items: start; font-size: 13px; line-height: 1.35;
    border-left: 3px solid transparent;
}
.fm-activity-entry .icn { color: #aaa; font-size: 16px; padding-top: 1px; }
.fm-activity-entry .body { min-width: 0; word-break: break-word; }
.fm-activity-entry .summary { color: #f0f0f0; font-weight: 500; }
.fm-activity-entry .meta { color: #999; font-size: 11px; margin-top: 2px; }
.fm-activity-entry .meta b { color: #ccc; font-weight: 600; }
.fm-activity-entry .undo-btn {
    cursor: pointer; padding: 4px 10px; border-radius: 3px;
    border: 1px solid #444851; background: #32333a; color: #7faaff;
    font-size: 11px; font-weight: 600;
}
.fm-activity-entry .undo-btn:hover:not(:disabled) {
    background: #4d92dd; color: #fff; border-color: #4d92dd;
}
.fm-activity-entry .undo-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}
.fm-activity-entry.undone { opacity: 0.6; }
.fm-activity-entry.undone .summary { text-decoration: line-through; }
.fm-activity-entry .undone-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
    background: #5a5e68; color: #f0f0f0; font-size: 10px; font-weight: 600;
    text-decoration: none;
}
/* Per-action-type left-border accent. */
.fm-activity-entry[data-action="create_folder"] { border-left-color: #2a8a2a; }
.fm-activity-entry[data-action="rename"]        { border-left-color: #2c8eb1; }
.fm-activity-entry[data-action="delete"]        { border-left-color: #b53a3a; }
.fm-activity-entry[data-action="move"]          { border-left-color: #d49314; }
.fm-activity-entry[data-action="upload"]        { border-left-color: #2a8a2a; }
.fm-activity-entry[data-action="add_map"],
.fm-activity-entry[data-action="ai_map"]        { border-left-color: #6f42c1; }
.fm-activity-entry[data-action="remove_map"]    { border-left-color: #b53a3a; }
.fm-activity-entry[data-action="save_image_map"]{ border-left-color: #6f42c1; }
.fm-activity-entry[data-action="hide"],
.fm-activity-entry[data-action="hide_bulk"],
.fm-activity-entry[data-action="set_schedule"]  { border-left-color: #6c757d; }
.fm-activity-entry[data-action="unhide"],
.fm-activity-entry[data-action="unhide_bulk"]   { border-left-color: #2c6fbb; }

.imap-pro-modal-header {
    color: #000 !important;
}

#fm-bulk-title {
    color: #000 !important;
}

.table .thead-light th {
    background-color: rgba(255, 255, 255, .4) !important;
}

.om-packing-slip-view .stat-label {
    color: #fff;
}
.om-packing-slip-view .stat-value {
    color: #fff;
}

.om-packing-slip-view .detail-row strong {
    color: #fff;
}

.om-shipment-detail .detail-group label {
    color: #fff;
}

.om-shipments .card-pending-packing .table-light {
    background: #717174;
}

.om-shipments .card-pending-packing .card-header h5 {
    color: #000 !important;
}

.om-ready-packing .table-hover tbody tr:hover {
    background-color: transparent !important;
}

.picking-qty.completed
{
    background-color: #142222 !important;
}

/* ─── Rich-text content: neutralize inline color:#000 ────────────────
   Content authored in Kendo Editor (FeatureBear articles, product
   long descriptions, themagicqr landing HTML, scv_show item panels)
   often carries inline `style="color:#000"` from Word/GDocs pastes,
   the editor's foreColor "black" swatch, or legacy migrated rows.
   That renders invisible-on-dark-grey when the saved HTML is shown
   in dark admin views. Override here mirrors the iframe-side rule in
   /assets/css/kendo-editor-dark.css. Scope is admin-only because
   style_dark.css is only loaded by the admin shell.
   ─────────────────────────────────────────────────────────────────── */
[style*="color: #000"],
[style*="color:#000"],
[style*="color: rgb(0, 0, 0)"],
[style*="color:rgb(0,0,0)"],
[style*="color: black"],
[style*="color:black"] {
    color: inherit !important;
}

[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color:rgb(255,255,255)"] {
    background-color: transparent !important;
}

/* ─── FeatureBear Live Chat (chat_dashboard.tpl + chat_history.tpl) ──
   The chat dashboard uses CSS custom properties (--fbc-*) for its
   palette — re-defining them on .fb-chat-dashboard cascades to ~130
   downstream references for free. The pieces that hard-code hex
   values (timeline event chips, toggle slider, status tags) and the
   modal surfaces that hard-code inline styles need explicit rules.
   Scoped intentionally so other admin pages keep their original
   color treatment. Palette borrows from the surface tier system —
   see [[project_admin_dark_mode]].
   ──────────────────────────────────────────────────────────────── */

/* 1. Palette override — cascades through all var(--fbc-*) references.
      `!important` is required on each declaration because the in-template
      <style> block in chat_dashboard.tpl (~line 1660) loads AFTER this
      file (it sits in the page body, not <head>) and defines the same
      vars at identical specificity — without !important, source order
      would let the light-mode defaults win. CSS custom properties fully
      support !important per CSS Custom Properties Level 1. */
.fb-chat-dashboard {
    --fbc-bg: #202125 !important;
    --fbc-surface: #2c2d33 !important;
    --fbc-surface-hover: #32333a !important;
    --fbc-border: #3a3d44 !important;
    --fbc-border-light: #32333a !important;
    --fbc-text: #f0f0f0 !important;
    --fbc-text-secondary: #aaa !important;
    --fbc-text-muted: #777 !important;
    --fbc-bg-hover: #32333a !important;
    --fbc-primary-light: #1c2a3a !important;    /* dark-tinted info bg */
    --fbc-success-light: #1f3a1f !important;    /* dark-tinted ok bg */
    --fbc-warning-light: #3a2f12 !important;    /* dark-tinted warn bg */
    --fbc-danger-light: #3a1c1c !important;     /* dark-tinted err bg */
}

/* 2. Timeline event chips — pale pastels hard-coded → dark-tinted equivalents. */
.fb-chat-dashboard .fbc-timeline-custom {
    background: #3a2f12 !important;
    color: #e6b34d !important;
}
.fb-chat-dashboard .fbc-timeline-widget {
    background: #2a1f3a !important;
    color: #c8a8f0 !important;
}
.fb-chat-dashboard .fbc-timeline-friction {
    background: #3a1c1c !important;
    color: #f0a0a0 !important;
}
.fb-chat-dashboard .fbc-timeline-open-page {
    background: #32333a !important;
    color: #aaa !important;
}

/* 3. Toggle slider — gray track + white knob would burn out on dark surface. */
.fb-chat-dashboard .fbc-toggle-slider {
    background: #444851 !important;
}
.fb-chat-dashboard .fbc-toggle-slider::after {
    background: #e0e0e0 !important;
}

/* 4. Status tags + offline confirm — pale amber → dark amber. */
.fb-chat-dashboard .fbc-tag-warning,
.fb-chat-dashboard .fbc-offline-confirm {
    background: #3a2f12 !important;
    color: #e6b34d !important;
}

/* 5. Gray indicator dot — too-light on dark → muted neutral. */
.fb-chat-dashboard .fbc-dot-gray {
    background: #777 !important;
}

/* 6. Notification preferences modal (chat_dashboard.tpl ~line 76):
      modal body is inline style="background:#fff" and helper text uses
      inline color:#666 — attribute selectors with !important override. */
#fb-notify-prefs-modal [style*="background:#fff"],
#fb-notify-prefs-modal [style*="background: #fff"] {
    background: #2c2d33 !important;
    color: #e0e0e0;
}
#fb-notify-prefs-modal [style*="color:#666"],
#fb-notify-prefs-modal [style*="color: #666"] {
    color: #aaa !important;
}

/* 7. Visitor detail modal (chat_history.tpl): two .bg-light section headers
      + JS-injected event-timeline <li>s with hard-coded inline background
      hexes for friction / widget / custom event types. Scoped to the modal
      so .bg-light elsewhere keeps its Limitless treatment. */
#fb-visitor-detail-modal .bg-light {
    background-color: #32333a !important;
    color: #e0e0e0 !important;
}
#fb-visitor-detail-modal [style*="background:#fef2f2"] {
    background: #3a1c1c !important;
    color: #f0a0a0 !important;
}
#fb-visitor-detail-modal [style*="background:#f5f3ff"] {
    background: #2a1f3a !important;
    color: #c8a8f0 !important;
}
#fb-visitor-detail-modal [style*="background:#fef3c7"] {
    background: #3a2f12 !important;
    color: #e6b34d !important;
}
.fb-help-body {
    color: #fff !important;
}
.fb-help-body .card-body strong {
    color: #eee !important;
}
.fb-help-accordion .card-body strong {
    color: #eee !important;
}
.fb-help-accordion .card-body h5 {
    color: #268bd2 !important;
}

#personalCard th {
    background-color: #1d1e21 !important;
    color: #fff !important;
}

#personalCard th a {
    color: #fff !important;
}

#personalCard input[type="text"], #personalCard input[type="password"], #configCard input[type="file"], #personalCard select, #personalCard textarea {
    color: #fff !important;
    background-color: #1d1e21 !important;
}

#configCard, #userEditCard th {
    background-color: #1d1e21 !important;
    color: #fff !important;
}

#configCard, #userEditCard th a {
    color: #fff !important;
}

#configCard input[type="text"], #configCard input[type="password"], #configCard input[type="file"], #configCard select, #configCard textarea {
    color: #fff !important;
    background-color: #1d1e21 !important;
}

#userEditCard input[type="text"], #userEditCard input[type="password"], #userEditCard input[type="file"], #userEditCard select, #userEditCard textarea {
    color: #fff !important;
    background-color: #1d1e21 !important;
}

/* CogWork kanban dark tokens */
.cw-card-inner .cw-card-title { color: #d7dde6; }
/* Scoped by the body id: tasks.css loads later with the same specificity and won while these
   were bare selectors, so the pills stayed light unless the CogSOUL theme layer was on. */
body#cognitiveSOUL_admin_page .cw-awaiting-deploy { background: #3d3418; color: #e0c46c; }
body#cognitiveSOUL_admin_page .cw-due-pill, body#cognitiveSOUL_admin_page .cw-created-pill { background: #2a2f3a; color: #9aa3b2; }
.cw-tag-chip { color: #fff; }
.cw-card.cw-done .cw-card-title { color: #7a828f; }
body#cognitiveSOUL_admin_page .cw-due-pill.cw-overdue { background: #3d1e1e; color: #e57373; }
.cw-card-flag { color: #e57373; }
/* Phase colour on a dark surface (#3160). Phase colours are user-picked and many
   are dark (#103351, #074611) -- invisible on navy. Raise lightness to at least
   0.62 keeping hue and chroma, so a phase still reads as its own colour. The
   first declaration is the fallback for a browser without relative colour syntax.
   Id-scoped like the surfaces below: this file loads BEFORE tasks.css, so an
   equal-specificity rule here loses to tasks.css's own background. */
#cw-view-kanban .cw-cover-phase,
#cw-view-kanban .cw-phase-dot,
#cw-view-list .cw-phase-dot,
#cw-phase-strip .cw-phase-chip-fill { background: var(--cw-phase-color, #8a94a6); background: oklch(from var(--cw-phase-color, #8a94a6) max(l, 0.62) c h); }
#cw-phase-strip .cw-phase-chip { background: #22262e; border-color: #3a4150; color: #d7dde6; }
#cw-phase-strip .cw-phase-chip:hover { border-color: var(--cw-accent); }
/* After the border-color shorthands above, which would otherwise reset it. */
#cw-phase-strip .cw-phase-chip,
#cw-phase-strip .cw-phase-chip:hover { border-left-color: oklch(from var(--cw-phase-color, #8a94a6) max(l, 0.62) c h); }
#cw-phase-strip .cw-phase-chip-count { color: #9aa3b2; }
#cw-phase-strip .cw-phase-chip-bar { background: #3a4150; }
/* Buckets column colour bar (#3159): same lift as the phase colours. */
.cs-flow-panel .cs-field-col { border-top-color: oklch(from var(--ck-node-color, #8a94a6) max(l, 0.62) c h); }
/* Surfaces — id-scoped (#cw-view-kanban / #cw-task-drawer) so they beat
   applications/cogwork/assets/css/tasks.css, which loads AFTER this file; an
   equal-specificity class rule here would lose the cascade and stay white.
   NOT scoped under body[data-admin-theme="dark"] — in "auto" mode this sheet
   loads via media=(prefers-color-scheme:dark) while the body attr is "auto".
   Kanban 15: the column background (.cw-kanban-col) and column name
   (.cw-col-name) rules that used to live here are DELETED, not ported — the
   board no longer renders those classes (the framework component's injected
   .cs-kanban-col / .cs-kanban-colname pick up --ck-surface-tray / --ck-ink-2
   instead).
   Kanban 16 (fix round 1): the #cw-view-kanban .cw-card SURFACE rule
   (background/border-color) that used to live here is DELETED too, for the
   same reason — .cs-kanban-card in cogsoul-kanban.css now declares
   background: var(--ck-surface-raised) and border: 1px solid var(--ck-border)
   itself, and outranks tasks.css's .cw-card the same way this ID-scoped rule
   used to. Task 4's "Keep .cw-card*" was about card CONTENT (title, due
   pill, tag chip, flag, done-state) — those stay below — never about
   surface, which the component owns now. Leaving this rule in place after
   the component took over the surface was what let it silently outrank
   .cs-kanban-card:hover's border-color regardless of hover state. */
/* Task drawer ("task modal") surface */
#cw-task-drawer               { background: #202125; }
#cw-task-drawer .cw-drawer-tabs { background: #1a1b1e; }
/* Pinned comment composer — opaque drawer surface so the thread scrolling
   under it can't show through (tasks.css's --cw-card-bg has no dark value). */
#cw-task-drawer .cw-comment-composer-dock,
#cw-task-drawer .cw-comment-filter-bar { background: #202125; }
/* @mention autocomplete — the "elevated" surface (popovers/menus). tasks.css
   reads --cw-card-bg, which has no dark value, so it rendered white with the
   inherited light text nearly invisible on it. The editors' popup is appended to
   <body> (.cw-mention-popup-floating, #2828), outside the drawer, so it is
   matched on its own too. */
#cw-task-drawer .cw-mention-popup,
.cw-mention-popup.cw-mention-popup-floating {
    background: #32333a;
    border-color: #3d3e46;
    color: #e6e6e6;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
#cw-task-drawer .cw-mention-popup-item:hover,
#cw-task-drawer .cw-mention-popup-item.active,
.cw-mention-popup-floating .cw-mention-popup-item:hover,
.cw-mention-popup-floating .cw-mention-popup-item.active { background: #444851; color: #f0f0f0; }
/* Tag picker dropdown inside the drawer */
#cw-task-drawer .cw-tag-dropdown { background: #2a2f3a; border-color: #3a4150; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
#cw-task-drawer .cw-tag-option { color: #d7dde6; }
#cw-task-drawer .cw-tag-option:hover { background: rgba(255,255,255,.07); }
#cw-task-drawer .cw-tag-edit-btn { border-color: #3a4150; color: #9aa3b2; }
#cw-task-drawer .cw-tag-filter,
#cw-task-drawer .cw-tag-create .cw-tag-new-name { background: #1c2027; border-color: #3a4150; color: #d7dde6; }
#cw-task-drawer .cw-tag-create { border-top-color: #3a4150; }

/* OM Pipeline opportunity drawer dark surfaces. Kanban column dark styling now
   lives in the framework component's tokens (cogsoul-kanban.css handles both modes). */
.om-page #om-oppdrawer { background: #202125; border-left-color: #313844; }
.om-page #om-oppdrawer-body { color: #d7dde6; }
.om-page #om-oppdrawer-body .table { color: #d7dde6; }

/* Suggestions slideout (product-intel-panel.css). Scoped .om-page #pip-drawer so
   it out-specifies the app CSS that loads AFTER this dark-only sheet. */
.om-page #pip-drawer { background: #202125; color: #d7dde6; box-shadow: -2px 0 10px rgba(0,0,0,.55); }
.om-page #pip-drawer .card-header { background: #1a1b1e; border-bottom-color: #313844; }
.om-page #pip-drawer .pip-group > .text-muted { color: #c3cad6; }   /* group headings */
.om-page #pip-drawer .close { color: #d7dde6; text-shadow: none; opacity: .8; }
.om-page #pip-drawer .pip-thumb--empty { background: #2a2f3a; border-color: #3a4150 !important; color: #9aa3b2; }

.cognitiveSOUL_admin_list_item.cognitiveSOUL_admin_list_item_uneven
{
   background: transparent !important;
}

.cognitiveSOUL_admin_list_item.cognitiveSOUL_admin_list_item_even
{
    background: transparent !important;
}
/* CogWork "Log Your Time" widget — dark-mode tokens.
   time-widget.css declares --cw-tlp-* on :root and is <link>ed from
   applications/cogwork/templates/admin/time/_widget.tpl, i.e. AFTER this file in
   document order — so a plain `:root` override here would LOSE the
   same-specificity tie. `body#cognitiveSOUL_admin_page` wins twice over: higher
   specificity (0,1,1 vs 0,1,0), and it is a nearer ancestor of the widget, which
   is what custom-property inheritance resolves against. Same reasoning as the
   Image Map Pro block above.

   Only the inline EDIT form looked wrong: it carries .cw-tlp-entry-form, which
   paints --cw-tlp-form-bg (#fafafa) — a white card that left the light-on-dark
   labels almost invisible. The ADD form lands in a bare #cw-tlp-add-form.mt-3
   with no background of its own, so it stayed transparent and looked correct by
   accident rather than by design. */
body#cognitiveSOUL_admin_page {
    --cw-tlp-form-bg:        #2c2d33;
    --cw-tlp-form-border:    #3d3e46;
    /* Entry cards used black-alpha washes, which are invisible on a dark panel;
       the white-alpha equivalents restore the intended subtle lift. */
    --cw-tlp-entry-bg:       rgba(255, 255, 255, 0.03);
    --cw-tlp-entry-bg-hover: rgba(255, 255, 255, 0.07);
}

/* CogWork Billing — sticky "Create Draft from Selected" bar (Unbilled tab).
   Same shape as the time-log block above: billing.css declares --cw-bil-* on
   :root and is <link>ed from the billing templates, i.e. AFTER this file in
   document order, so a plain `:root` override here would LOSE the
   same-specificity tie. body#cognitiveSOUL_admin_page wins on both counts —
   higher specificity (0,1,1 vs 0,1,0) and nearer ancestor, which is what
   custom-property inheritance resolves against.

   The bar previously read var(--cw-card-bg, #fff). That token is declared only
   in tasks.css, which billing pages do not load, so the #fff fallback always
   won and the bar rendered as a bright white band across the bottom of an
   otherwise dark page. Fixed at the source in billing.css (its own tokens);
   this block supplies the dark values. #2c2d33 / #3d3e46 match the surface and
   border used by the time-log form block above, so the two read as the same
   elevation rather than two different panels. */
body#cognitiveSOUL_admin_page {
    --cw-bil-actions-bg:     #2c2d33;
    --cw-bil-actions-border: #3d3e46;
    --cw-bil-marker-border:  rgba(255, 255, 255, 0.35);
    /* Earnability chart series (Committed/Earnable/At risk) — lighter than the
       light-mode values so they keep contrast against the dark chart
       background instead of reading muddy. At risk stays amber, never green. */
    --cw-bil-earn-committed: #64b5f6;
    --cw-bil-earn-earnable:  #4db6ac;
    --cw-bil-earn-atrisk:    #ffb74d;
    --cw-bil-earn-prepaid:   #b39ddb;
    /* Monthly caps card (spec §3.7). Track lightened off pure black so the
       unfilled portion of the bar reads as a track rather than a void; fill
       colours lightened the same way as the earnability series above so both
       cards keep contrast against the dark chart/card background. Marker
       switches to a white-alpha wash — the light-mode black-alpha value would
       be nearly invisible on a dark track. */
    --cw-bil-cap-track:  #3d3e46;
    --cw-bil-cap-ok:     #4db6ac;
    --cw-bil-cap-low:    #ffb74d;
    --cw-bil-cap-over:   #ef5350;
    --cw-bil-cap-marker: rgba(255, 255, 255, 0.55);
}

/* CogWork project/portfolio timeline dark palette. project-timeline.css loads
   after this sheet and declares its light values on .cw-timeline, so the body
   ID plus descendant class is required to win the cascade. Sticky labels and
   the date axis must be opaque while scrolling; inheriting Bootstrap --white
   made their near-white text unreadable in dark mode. */
body#cognitiveSOUL_admin_page .cw-timeline {
    --cw-timeline-surface: var(--ck-surface-raised, #1a2238);
    --cw-timeline-track-surface: rgba(11, 16, 32, .58);
    --cw-timeline-grid: var(--ck-border-strong, rgba(255, 255, 255, .16));
    --cw-timeline-ink-muted: var(--ck-ink-4, #9fb0cb);
    --cw-timeline-hover: var(--ck-hover-overlay, rgba(255, 255, 255, .09));
    --cw-timeline-focus: var(--ck-accent-ink, #7fe7f5);
    --cw-timeline-scrollbar: var(--ck-ink-6, #6f7f9d);
    --cw-timeline-bar: #3f78e0;
    --cw-timeline-progress: #2454b8;
    --cw-timeline-today: #4ade80;
}

body#cognitiveSOUL_admin_page .cw-pulse {
    --cw-pulse-surface: var(--ck-surface-raised, #1a2238);
    --cw-pulse-grid: var(--ck-border-strong, rgba(255, 255, 255, .16));
    --cw-pulse-zero: #202b43;
    --cw-pulse-level-1: #173e43;
    --cw-pulse-level-2: #15565a;
    --cw-pulse-level-3: #11706f;
    --cw-pulse-level-4: #0b8f88;
    --cw-pulse-level-5: #13b8ad;
    --cw-pulse-text: var(--ck-ink-2, #e7edf7);
    --cw-pulse-muted: var(--ck-ink-4, #9fb0cb);
    --cw-pulse-level-4-text: #061719;
    --cw-pulse-strong-text: #071d1f;
    --cw-pulse-hover: var(--ck-hover-overlay, rgba(255, 255, 255, .09));
    --cw-pulse-focus: var(--ck-accent-ink, #7fe7f5);
}

/* EasyMDE (memory editor) — dark-mode overrides.
   The vendored easymde.min.css is unconditionally light-themed and is loaded
   AFTER this file, so plain `.editor-toolbar button` (0,1,1) would lose the tie.
   body#cognitiveSOUL_admin_page raises every rule below above the vendor's.

   Measured before this block, in dark mode: the 12 toolbar buttons computed
   color rgb(0,0,0) against a rgb(50,51,58) modal — black on charcoal, which is
   what made them look missing. EasyMDE never sets a dark palette; it also pins
   .CodeMirror to background:#fff / color:#000, so the writing surface stayed a
   white slab inside the dark modal. */
body#cognitiveSOUL_admin_page .editor-toolbar {
    border-color: #3d3e46;
}
body#cognitiveSOUL_admin_page .editor-toolbar button,
body#cognitiveSOUL_admin_page .editor-toolbar .easymde-dropdown {
    color: #e6e6e6;
}
body#cognitiveSOUL_admin_page .editor-toolbar button.active,
body#cognitiveSOUL_admin_page .editor-toolbar button:hover {
    /* Vendor uses #fcfcfc — a white flash on every hover in dark mode. */
    background: #3a3b42;
    border-color: #55565f;
    color: #ffffff;
}
body#cognitiveSOUL_admin_page .editor-toolbar i.separator {
    border-left-color: #3d3e46;
    border-right-color: transparent;
}
body#cognitiveSOUL_admin_page .editor-toolbar button.disabled,
body#cognitiveSOUL_admin_page .editor-toolbar button:disabled {
    color: #7a7b83;
}

/* Writing surface. Specificity must clear the vendor's .EasyMDEContainer
   .CodeMirror (0,2,0), hence the body# prefix. */
body#cognitiveSOUL_admin_page .EasyMDEContainer .CodeMirror {
    background: #2b2c31;
    color: #e6e6e6;
    border-color: #3d3e46;
}
body#cognitiveSOUL_admin_page .EasyMDEContainer .CodeMirror-cursor {
    /* Vendor: 1px solid #000 — an invisible caret on a dark surface. */
    border-left-color: #e6e6e6;
}
body#cognitiveSOUL_admin_page .EasyMDEContainer .CodeMirror-selected,
body#cognitiveSOUL_admin_page .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
    background: #3f4a63;
}
body#cognitiveSOUL_admin_page .EasyMDEContainer .CodeMirror-line::selection,
body#cognitiveSOUL_admin_page .EasyMDEContainer .CodeMirror-line > span::selection {
    background: #3f4a63;
}
body#cognitiveSOUL_admin_page .editor-preview,
body#cognitiveSOUL_admin_page .editor-preview-side {
    background: #2b2c31;
    color: #e6e6e6;
    border-color: #3d3e46;
}
body#cognitiveSOUL_admin_page .editor-preview pre {
    background: #22232a;
}
body#cognitiveSOUL_admin_page .editor-statusbar {
    color: #9a9ba3;
}

/* CogWork invoice preview — keep the document on white paper in dark mode.
   InvoiceRenderer emits a self-contained <style> with LITERAL hex ink colours
   (its own docblock says so) because the exact same HTML is reused for the PDF
   and for the .doc that gets emailed to the client. Those colours are also
   tenant-configurable branding (ar_*_color). It sets `color` but never a
   background, so on the dark admin card the invoice rendered dark-on-dark.

   Lightening the ink would be the wrong fix twice over: the on-screen preview
   would stop matching what actually prints, and we'd be overriding the tenant's
   chosen brand colours with values that may not survive on a dark ground. So the
   invoice keeps its paper instead — the same call already made for the Image Map
   Pro canvas above. Only the background is set here; the ink is left entirely to
   the renderer. */
body#cognitiveSOUL_admin_page .cw-invoice {
    background: #ffffff;
    padding: 28px 32px;
    border-radius: 3px;
}

/* OM order/quote/price-list forms — typeahead result panels (.search-results:
   product search, customer search) + the line-adjustment editor row. All ship
   hardcoded LIGHT colours: white panels from assets/templates/default/admin/
   style.css plus per-form <style> blocks (quotes/form.tpl, price_lists/
   items.tpl), and the cream #fff8e6 .adj-editor-row. Those <style> blocks
   render in the body, after this stylesheet — the body#... prefix makes the
   ID out-specify their bare class rules regardless of load order. The item
   text has no colour of its own (it inherits the theme's light text), so
   darkening the ground is the whole fix. */
body#cognitiveSOUL_admin_page .search-results {
    background: #2b2c31;
    border-color: #3d3e46;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
body#cognitiveSOUL_admin_page .search-result-item {
    border-bottom-color: #3a3d44;
}
/* Plain :hover (not :hover:not(.disabled)) — quotes/form.tpl's copy uses the
   plain variant, and the ID prefix must beat both. Disabled items still read
   as disabled via their opacity rule. */
body#cognitiveSOUL_admin_page .search-result-item:hover {
    background: #32333a;
    background-color: #32333a;
}
/* Line-adjustment editor row — keep the amber "editing in progress" intent,
   just on a dark ground. */
body#cognitiveSOUL_admin_page .adj-editor-row > td {
    background: #332e1d;
    border-top-color: #6b5d2a;
    border-bottom-color: #6b5d2a;
}

/* --- CogSOUL kanban component: dark token overrides -------------------------
   These live HERE and not in cogsoul/cogsoul-theme-dark.css: the cogsoul theme
   layer is optional ($admin_cogsoul_theme == "off") while style_dark.css always
   loads in dark mode. Putting them there would lose the board's dark palette for
   anyone with the cogsoul theme disabled.

   Dark builds depth from LUMINANCE (stacked white alphas over near-black);
   light builds it from SHADOW over opaque hexes. Elevation runs the other way,
   which is why these are semantic token overrides and not a mechanical flip.

   SELECTOR: body#cognitiveSOUL_admin_page, NOT :root. cogsoul-kanban.css
   declares its (light) :root block on the board's own page and is <link>ed
   AFTER this file in document order (verified live: cogsoul-kanban.css is the
   LAST stylesheet on both the CogWork and OM board pages) — a same-specificity
   :root rule here would lose that tie and every one of these overrides would
   be silently dead in dark mode. body#cognitiveSOUL_admin_page wins on
   specificity (1 ID beats 1 pseudo-class) regardless of load order, and every
   kanban element is a descendant of that body, so the override still reaches
   them. Same fix already applied twice above in this file for the identical
   problem (CogWork time-widget --cw-tlp-*, EasyMDE toolbar). */
body#cognitiveSOUL_admin_page {
    --ck-surface-desk:        var(--cs-void, #0b1020);
    --ck-surface-tray:        var(--cs-void-2, #0e1426);
    --ck-surface-raised:      var(--cs-steel, #1a2238);
    --ck-surface-raised-hover: var(--cs-steel-2, #232d48);
    --ck-surface-sunken:      rgba(255, 255, 255, 0.07);

    --ck-ink-1: #f2f7ff;  --ck-ink-2: #e8eef7;  --ck-ink-3: #cdd8ea;
    --ck-ink-4: #9fb0cb;  --ck-ink-5: #8494b0;  --ck-ink-6: #6f7f9d;
    /* r,g,b twins of the inks above, for rgba(var(--ck-ink-N-rgb), a) in
       cogsoul-kanban-flow.css — without them dark mode used the light values. */
    --ck-ink-1-rgb: 242, 247, 255;  --ck-ink-2-rgb: 232, 238, 247;  --ck-ink-3-rgb: 205, 216, 234;
    --ck-ink-4-rgb: 159, 176, 203;  --ck-ink-5-rgb: 132, 148, 176;  --ck-ink-6-rgb: 111, 127, 157;
    /* Layer chart fallback slices (#3167): lifted to read on the dark desk. */
    --ck-chart-1: #5b9cf0;  --ck-chart-2: #3fc4b9;  --ck-chart-3: #e7a93a;  --ck-chart-4: #a585ee;
    --ck-chart-5: #ee6f8e;  --ck-chart-6: #6cbd5a;  --ck-chart-7: #8c9dbb;  --ck-chart-8: #f08a4e;

    --ck-hairline:      rgba(255, 255, 255, 0.07);
    --ck-border:        rgba(255, 255, 255, 0.08);
    --ck-border-strong: rgba(255, 255, 255, 0.16);
    --ck-hover-overlay: rgba(255, 255, 255, 0.09);

    /* Elevation comes from luminance here, so the shadows go quiet. The tokens
       stay DEFINED in both themes so component code never branches. */
    --ck-shadow-raised:   none;   /* dark builds lift from luminance, not shadow */
    /* But hover still needs a lift. This was `none`, which left dark hover
       with only a border tint and translateY(-1px) while light steps
       raised -> hover. Cool near-black rather than pure black, matching the
       ramp's convention. */
    --ck-shadow-hover:    0 6px 16px rgba(3, 7, 18, 0.55);
    --ck-shadow-popover:  0 22px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.4);
    --ck-shadow-dragging: 0 26px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --ck-shadow-rack-overlap: 0 -5px 12px rgba(3, 7, 18, 0.65);

    /* Accent alphas rise: a saturated hue reads weaker on near-black than on white. */
    --ck-a-tint:       0.14;
    --ck-a-tint-over:  0.20;
    --ck-a-pill-hover: 0.26;
    --ck-a-advance:    0.30;
    --ck-a-seg-border: 0.30;
    --ck-a-col-fill:   0.07;
    --ck-a-col-border: 0.60;
    --ck-a-col-glow:   0.18;   /* light keeps 0 — an inset wash reads as smudge on pale */

    --ck-hatch-gap:  rgba(0, 0, 0, 0.35);
    --ck-flash-peak: 0.90;
    --ck-fade-to:    var(--ck-surface-tray);

    --ck-over-chroma: #f87171;  --ck-over-ink: #fca5a5;  --ck-over-rgb: 248, 113, 113;
    --ck-cap-chroma:  #f6b23c;  --ck-cap-ink:  #fbd38d;  --ck-cap-rgb:  246, 178, 60;

    --ck-accent-rgb: 56, 214, 240;
    --ck-accent-ink: #7fe7f5;

    /* Sidecar bucket bar surfaces (LIGHT_MODE.md §6b "Sidecar buckets" table)
       — the subtractive dark values, white alpha over the near-black column.
       --ck-bucket-default carries no override: it is theme-neutral (see
       cogsoul-kanban.css's own comment on it). */
    --ck-bucket-bar-surface:       rgba(255, 255, 255, 0.028);
    --ck-bucket-bar-surface-hover: rgba(255, 255, 255, 0.06);
}

/* OM B4-1 order drawer — dark surface.
   fulfillment-board.css declares --om-drawer-* on :root and is <link>ed from
   board/index.tpl, i.e. AFTER this file in document order, so a plain `:root`
   override here would LOSE the same-specificity tie. body#cognitiveSOUL_admin_page
   wins on both counts — higher specificity (0,1,1 vs 0,1,0) and nearer ancestor,
   which is what custom-property inheritance resolves against. Same reasoning as
   the CogWork billing block above.

   #2c2d33 / #3d3e46 are not invented: #2c2d33 is exactly what all_dark.min.css
   already gives .card and .list-group-item, so the drawer reads as the same
   elevation as the rows inside it rather than a second panel floating over them.
   The CogWork billing bar uses the same pair. */
body#cognitiveSOUL_admin_page {
    --om-drawer-bg:     #2c2d33;
    --om-drawer-border: #3d3e46;

    /* Order-weight ramp, dark column — four rungs, violet to hot pink. Same
       selector for the same reason as the drawer above: fulfillment-board.css
       is <link>ed after this file, so a plain :root override would lose the
       same-specificity tie.

       Lifted two steps up the scale rather than reused from light. The 500s are
       legible on white but sink into #2c2d33, and these sit on the card
       surface, which is darker still. The lift is applied uniformly so the
       ramp keeps its ORDER — a rung brightened out of sequence would make tier
       3 read hotter than tier 4. */
    --om-heft-1-chroma: #a78bfa;  --om-heft-1-rgb: 167, 139, 250;  --om-heft-1-ink: #c4b5fd;
    --om-heft-2-chroma: #c084fc;  --om-heft-2-rgb: 192, 132, 252;  --om-heft-2-ink: #d8b4fe;
    --om-heft-3-chroma: #e879f9;  --om-heft-3-rgb: 232, 121, 249;  --om-heft-3-ink: #f0abfc;
    --om-heft-4-chroma: #f472b6;  --om-heft-4-rgb: 244, 114, 182;  --om-heft-4-ink: #f9a8d4;

    /* Ready-to-release chip, dark ink only — the border chroma (#4ade80) stays
       legible on the dark card surface as-is. The light ink (#15803d) measures
       2.65:1 against the chip's dark background (rgba(74,222,128,0.16) over
       --ck-surface-tray #0e1426); #86efac measures ~9.47:1, clearing the WCAG
       AA floor of 4.5:1 with room to spare. */
    --om-ready-ink: #86efac;
}

/* ---------------------------------------------------------------------------
   CogSOUL (featurebear) category icon picker — dark surface tokens.
   Consumed by the <style> block in
   applications/featurebear/templates/admin/category_edit.tpl, which supplies
   the LIGHT value as each var()'s fallback.

   Declared here rather than in cogsoul-theme-dark.css because the CogSOUL theme
   layer is a per-user toggle ($admin_cogsoul_theme) and can be off, while this
   file always loads in dark mode. Each value therefore chains to the CogSOUL
   token first and falls back to the plain Limitless-dark equivalent: #2c2d33 is
   exactly what all_dark.min.css gives .card, and #3d3e46 is the border the OM
   drawer above uses for the same reason.

   :root (not body#cognitiveSOUL_admin_page like the blocks above) is safe here:
   no other sheet declares --fb-icon-*, so there is no same-specificity tie to
   lose. The inner var(--cs-*) lookups resolve at USE time on the picker
   element, so cogsoul-theme-dark.css loading after this file is fine.

   Why the picker needed this at all: its dropdown is an absolutely-positioned
   overlay that was using .card for a surface, and cogsoul-theme-dark.css paints
   .card as linear-gradient(rgba(255,255,255,.024), rgba(255,255,255,.01)) —
   measured 2.4% opaque, so the page showed straight through the open panel. */
:root {
    --fb-icon-surface:           var(--cs-steel, #2c2d33);
    --fb-icon-border:            var(--cs-hairline-2, #3d3e46);
    --fb-icon-shadow:            0 18px 40px rgba(0, 0, 0, 0.6);

    /* The cells shipped #4b5563 — a mid-slate that measures ~1.9:1 on the
       #0b1020 page and was effectively unreadable. --cs-ink-mute clears AA. */
    --fb-icon-ink:               var(--cs-ink-mute, #a0a9c2);
    --fb-icon-cell-hover:        var(--cs-steel-2, #3d3e46);
    --fb-icon-cell-hover-border: var(--cs-hairline-2, rgba(255, 255, 255, 0.18));

    /* Neutral lift + accent border/ink, so the selected tile reads the same
       whether --cs-cyan resolves (theme on) or the blue fallback does. */
    --fb-icon-cell-sel:          rgba(255, 255, 255, 0.08);
    --fb-icon-accent:            var(--cs-cyan, #60a5fa);
}

/* ---------------------------------------------------------------------------
   CogQuery guide editor -- sticky answer-table header, dark surface + ink
   tokens. Consumed by #cq-questions .cq-choices-scroll thead th in
   applications/cogquery/assets/css/guide-editor.css, which supplies the LIGHT
   value of each as the var()'s fallback (Bootstrap's own .thead-light
   #e9ecef for the surface, #333 for the ink).

   --cq-sticky-head-bg needed because .thead-light (Bootstrap, re-themed above
   as `.table .thead-light th { background-color: rgba(255,255,255,.4)
   !important; }`) is only 40% translucent in dark mode -- fine sitting still,
   but a scrolled row's text shows straight through a STICKY copy of it.
   #32333a matches .fm-list thead th above, the existing sticky-table-header
   precedent in this file.

   --cq-sticky-head-ink exists because taking over a surface's background
   means taking over its foreground too: the CogSOUL theme layer's #6B7796
   header text was only legible against the translucent-white surface
   .thead-light used to render in dark mode, so once --cq-sticky-head-bg
   replaced that surface with an opaque #32333a, #6B7796 measured 2.82:1 on it
   -- fails WCAG AA (needs 4.5:1). #f0f0f0 again matches .fm-list thead th
   above (11.03:1 on #32333a).

   :root is safe here for the same reason as --fb-icon-* above: nothing else
   declares --cq-sticky-head-bg or --cq-sticky-head-ink, so there is no
   same-specificity tie to lose. */
:root {
    --cq-sticky-head-bg: #32333a;
    --cq-sticky-head-ink: #f0f0f0;
}

/* Password meter tokens -- consumed by assets/css/cogsoul-password-meter.css,
   whose var() fallbacks are the light values. */
:root {
    --cs-pw-track: #3a3d44;
    --cs-pw-weak: #f0a0a0;
    --cs-pw-acceptable: #e6b34d;
    --cs-pw-secure: #8fcf8f;
}

/* Unchecked custom checkboxes / radios / switches.
   Limitless's all_dark.min.css draws .custom-control-label::before as #1d1e21 with a
   TRANSPARENT border, on #2c2d33 cards — about 1.3:1, so an unchecked box is effectively
   invisible (reported 2026-09-28 on the groups permissions page; every admin page with a
   custom-control has it). The :not(:checked) selector outranks Limitless's bare
   .custom-control-label::before, which matters because in prefers-color-scheme mode
   index.tpl loads this sheet BEFORE all_dark.min.css. Checked, focus and validation
   states are Limitless's own and are left alone. */
.custom-control-input:not(:checked) ~ .custom-control-label::before {
    border-color: rgba(255, 255, 255, .45);
}
.custom-control-input:not(:checked):not(:disabled):hover ~ .custom-control-label::before {
    border-color: rgba(255, 255, 255, .65);
}
.custom-control-input:not(:checked):disabled ~ .custom-control-label::before {
    border-color: rgba(255, 255, 255, .2);
}

/* Fill window backing (shared, /assets/css/fill-window.css) — dark value: the dark .card colour. */
html:root { --cs-fill-bg: #2c2d33; }

/* CogCore Floor scene — dark values (C6-R5a). Light values: applications/order_management/assets/css/admin_floor.css
   `html:root`, not `:root`: admin_floor.css is linked from the page body, AFTER this sheet, and
   declares the light values on `:root` — at equal specificity the later light block would win. */
html:root {
    --wms-scene-bg: #1f2126;
    --wms-scene-zone: rgba(100, 181, 246, 0.10);
    --wms-scene-zone-stroke: #607d8b;
    --wms-scene-aisle: #b0bec5;
    --wms-scene-cross-aisle: #cfd8dc;
    --wms-scene-route-walk: #ce93d8;
    --wms-scene-route-gap: #9e9e9e;
    --wms-scene-route-plan: #ffb74d;
    --wms-scene-route-sim: #4db6ac;
    --wms-scene-label: #eceff1;
    --wms-scene-label-bg: rgba(31, 33, 38, 0.85);
    --wms-scene-heat-0: rgba(55, 71, 79, 0.45);
    --wms-scene-heat-1: rgba(102, 187, 106, 0.45);
    --wms-scene-heat-2: rgba(212, 225, 87, 0.45);
    --wms-scene-heat-3: rgba(255, 167, 38, 0.5);
    --wms-scene-heat-4: rgba(239, 83, 80, 0.5);
    --wms-iso-heat-0: #37474f; --wms-iso-heat-1: #4c8c4f; --wms-iso-heat-2: #9aa63f;
    --wms-iso-heat-3: #b9782a; --wms-iso-heat-4: #a8443f; --wms-iso-none: #2b3035;
    --wms-iso-edge: #90a4ae; --wms-iso-top: #2c2f35;
    --wms-pick-0: #2e353b; --wms-pick-1: #1f4e6e; --wms-pick-2: #3b8fd0;
    --wms-pick-3: #e0b040; --wms-pick-4: #f07a2a; --wms-pick-5: #ff4d3a;
    --wms-panel-bg: #2c2d33;
    --wms-cell-full: #2f5e3b; --wms-cell-full-text: #e8f5e9; --wms-cell-empty: #24272c; --wms-cell-empty-text: #78909c;
}
.wms-scene-blueprint { filter: invert(1) hue-rotate(180deg); opacity: 0.55; }

/* OM Picking activity (E1c) trend chart — dark values. Light values:
   applications/order_management/assets/css/picking_activity.css. `html:root` for the same
   reason as the Floor scene block above: that sheet is linked from the page body, after this one. */
html:root {
    --om-pa-line-1: #64b5f6;
    --om-pa-line-2: #ce93d8;
    --om-pa-text: #e0e0e0;
    --om-pa-grid: rgba(255, 255, 255, 0.12);
}

/* CogWork team presence strip (#3243): avatar ring must match the dark page-header surface. */
body#cognitiveSOUL_admin_page .cw-team-strip { --cw-team-ring: #2c2d33; }