/* Matthew (AI), 2026-09-19, per MP - dark-theme styles for the Boards subsystem.
 *
 * WHY THIS FILE EXISTS. IO2's dark mode swaps the TELERIK stylesheet (ThemeChanger.applyTheme). Everything IO2 styles
 * itself stayed on its hard-coded light colours - the board columns and card tiles in BoardView's own <style> block,
 * the Bootstrap tiles on /boards, and the hand-rolled card dialog - so a board in dark mode was a sheet of white.
 *
 * Bootstrap here is 5.1.0, which predates data-bs-theme, so none of this comes for free: every surface, border and
 * text colour below has to be stated.
 *
 * SCOPING. Every rule is under html[data-io-theme="dark"] (set by ThemeChanger.markTheme), and then under a
 * boards-specific class - .board-cols / .boards-grid / .board-card-modal. Nothing here can reach another page's
 * .card or .modal.
 *
 * The palette deliberately mirrors the Telerik dark swatch rather than inventing one, so the board sits in the same
 * visual family as the chrome around it.
 */

html[data-io-theme="dark"] {
    --io-board-bg: #1e1e1e;          /* page/canvas behind the columns */
    --io-board-col-bg: #2a2a2a;      /* a list column */
    --io-board-card-bg: #333333;     /* a card tile */
    --io-board-card-hover: #3a3a3a;
    --io-board-border: #454545;
    --io-board-text: #e4e4e4;
    --io-board-text-muted: #a8a8a8;
    --io-board-input-bg: #2a2a2a;
    --io-board-input-border: #555555;
}

/* ============================================================ board view: columns and cards */

html[data-io-theme="dark"] .board-col {
    background: var(--io-board-col-bg);
    border-color: var(--io-board-border);
    color: var(--io-board-text);
}

html[data-io-theme="dark"] .board-card {
    background: var(--io-board-card-bg);
    color: var(--io-board-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

html[data-io-theme="dark"] .board-card:hover {
    background: var(--io-board-card-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}

/* A card carrying a per-card colour sets background via an inline style, which wins over the rule above. Only the TEXT
   is corrected here: those swatches are pale, so the near-black default body colour is the readable choice on them. */
html[data-io-theme="dark"] .board-card[style*="background"] {
    color: #1a1a1a;
}

html[data-io-theme="dark"] .board-col-head,
html[data-io-theme="dark"] .board-col-head strong {
    color: var(--io-board-text);
}

html[data-io-theme="dark"] .board-cols .text-muted {
    color: var(--io-board-text-muted) !important;
}

/* the drag handle / splitter between the card list and the comments panel */
html[data-io-theme="dark"] .board-splitter::before {
    background: var(--io-board-border);
}

/* ============================================================ board view: the search filter */

html[data-io-theme="dark"] .board-search .form-control,
html[data-io-theme="dark"] .board-card-modal .form-control,
html[data-io-theme="dark"] .board-card-modal .form-select {
    background-color: var(--io-board-input-bg);
    border-color: var(--io-board-input-border);
    color: var(--io-board-text);
}

html[data-io-theme="dark"] .board-card-modal .form-control::placeholder,
html[data-io-theme="dark"] .board-search .form-control::placeholder {
    color: var(--io-board-text-muted);
}

html[data-io-theme="dark"] .board-card-modal .form-control:focus,
html[data-io-theme="dark"] .board-search .form-control:focus {
    background-color: var(--io-board-input-bg);
    color: var(--io-board-text);
    border-color: #6ea8fe;
    box-shadow: 0 0 0 .2rem rgba(110, 168, 254, .25);
}

/* the input-group wrapper the search sits in (magnifying-glass / button edges) */
html[data-io-theme="dark"] .board-search .input-group-text {
    background-color: var(--io-board-col-bg);
    border-color: var(--io-board-input-border);
    color: var(--io-board-text-muted);
}

/* ============================================================ /boards listing tiles */

html[data-io-theme="dark"] .boards-grid .card {
    background-color: var(--io-board-card-bg);
    border-color: var(--io-board-border);
    color: var(--io-board-text);
}

html[data-io-theme="dark"] .boards-grid .card:hover {
    background-color: var(--io-board-card-hover);
}

html[data-io-theme="dark"] .boards-grid .card-title,
html[data-io-theme="dark"] .boards-grid .card-body {
    color: var(--io-board-text);
}

html[data-io-theme="dark"] .boards-grid .text-muted {
    color: var(--io-board-text-muted) !important;
}

/* the "N lists / N cards" pills and the dark-on-light soft badges sbadmin ships */
html[data-io-theme="dark"] .boards-grid .bg-secondary-soft,
html[data-io-theme="dark"] .board-card-modal .bg-secondary-soft {
    background-color: #3d3d3d !important;
    color: var(--io-board-text) !important;
}

/* ============================================================ the card dialog */

html[data-io-theme="dark"] .board-card-modal .modal-content {
    background-color: var(--io-board-col-bg);
    border-color: var(--io-board-border);
    color: var(--io-board-text);
}

html[data-io-theme="dark"] .board-card-modal .modal-header,
html[data-io-theme="dark"] .board-card-modal .modal-footer {
    background-color: var(--io-board-bg);
    border-color: var(--io-board-border);
}

html[data-io-theme="dark"] .board-card-modal .modal-title,
html[data-io-theme="dark"] .board-card-modal strong,
html[data-io-theme="dark"] .board-card-modal label {
    color: var(--io-board-text);
}

html[data-io-theme="dark"] .board-card-modal .text-muted {
    color: var(--io-board-text-muted) !important;
}

/* ---- the card TITLE box in the header ----
   The input carries an INLINE style="background:#f8f9fa" (added to make it look editable), and an inline style beats a
   stylesheet rule - so these need !important. That is the reason for it here, not carelessness: the alternative was
   editing the markup, which would have changed the light theme too. */
html[data-io-theme="dark"] .board-card-modal .modal-header .form-control {
    background: var(--io-board-input-bg) !important;
    border-color: var(--io-board-input-border) !important;
    color: var(--io-board-text) !important;
}

html[data-io-theme="dark"] .board-card-modal .modal-header .form-control::placeholder {
    color: var(--io-board-text-muted) !important;
}

/* the pencil affordance sitting on the end of that input (.bg-light) */
html[data-io-theme="dark"] .board-card-modal .input-group-text.bg-light,
html[data-io-theme="dark"] .board-card-modal .modal-header .input-group-text {
    background-color: var(--io-board-col-bg) !important;
    border-color: var(--io-board-input-border) !important;
}

html[data-io-theme="dark"] .board-card-modal .modal-header .input-group-text .text-muted {
    color: var(--io-board-text-muted) !important;
}

/* ---- the READ-ONLY description ----
   The wrapper inherits its colour from .modal-content, but the content inside is sanitised HTML that was very often
   pasted from Word, Outlook or a web page and carries its own inline colours - chosen for a white background, so
   near-black on a dark panel. The descendant rule is what actually makes the text readable. */
html[data-io-theme="dark"] .board-card-modal .board-desc-readonly,
html[data-io-theme="dark"] .board-card-modal .board-desc-readonly * {
    color: var(--io-board-text) !important;
}

html[data-io-theme="dark"] .board-card-modal .board-desc-readonly a {
    color: #6ea8fe !important;
}

html[data-io-theme="dark"] .board-card-modal .board-desc-readonly code {
    background-color: #1a1a1a !important;
    color: #e6a44c !important;
}

/* Bootstrap's close button is a dark SVG on a transparent ground - invisible on a dark header without this */
html[data-io-theme="dark"] .board-card-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* bordered blocks inside the dialog: the read-only description, attachment tiles, comment rows */
html[data-io-theme="dark"] .board-card-modal .border,
html[data-io-theme="dark"] .board-card-modal .border-top,
html[data-io-theme="dark"] .board-card-modal .border-bottom,
html[data-io-theme="dark"] .board-card-modal .card {
    border-color: var(--io-board-border) !important;
}

html[data-io-theme="dark"] .board-card-modal .card {
    background-color: var(--io-board-card-bg);
    color: var(--io-board-text);
}

/* checklist rows and their progress track */
html[data-io-theme="dark"] .board-card-modal .progress {
    background-color: #1a1a1a;
}

html[data-io-theme="dark"] .board-card-modal .form-check-input {
    background-color: var(--io-board-input-bg);
    border-color: var(--io-board-input-border);
}

html[data-io-theme="dark"] .board-card-modal .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* comment bodies: code spans and links, which app.css colours for a light ground */
html[data-io-theme="dark"] .board-card-modal .board-comment-body code,
html[data-io-theme="dark"] .board-card-modal code {
    background-color: #1a1a1a;
    color: #e6a44c;
}

html[data-io-theme="dark"] .board-card-modal .board-comment-body a,
html[data-io-theme="dark"] .boards-grid a {
    color: #6ea8fe;
}

/* The Telerik editor inside the dialog brings its own dark styling from the swatch, but its CONTENT area is an iframe
   whose document has no stylesheet of ours - it stays white. Left deliberately alone: forcing a dark background there
   without also restyling the pasted content inside it produces black-on-black text. */