/* Dark theme — the components a token flip cannot reach (issue #111).
   ═══════════════════════════════════════════════════════════════════
   Read theme-surfaces.css first. Its [data-bs-theme="dark"] block re-points five raw palette
   tokens that are each used in exactly one role — --ink, --muted, --rule, --offwhite, --mid —
   and that carries about 160 rules written long before --surface-* existed.

   What is left here is the residue that cannot follow a token:

     * fills pinned to a LITERAL (#fff, #f0f2f5, #eff0f1) — no token to re-point;
     * fills pinned to var(--white), which must stay white because 18 other rules use it as
       text on navy chrome. Re-pointing it would fix these dozen and break those eighteen;
     * INK pinned to var(--navy) or var(--navy2) on an element that declares no fill of its
       own. --navy is used as ink 45 times and as a fill 11 times, so it is in the same
       untouchable position as --white. Where the ink sits on an accent chip it is correct in
       both themes and left alone; where it sits on a surface the element inherits, that
       surface is now navy and the text disappears. 53 rules are in that second group and
       every one of them is a heading, a card title or a hover state, so they take one
       declaration between them.

   Fill and ink for a component belong in the same commit. Fixing .cp-tile's background
   without .cp-tile-title's colour gives a correctly dark card with invisible text, which is
   not a reviewable intermediate state — so this file is organised by area, not by property.

   So this file is a list of surfaces, not a second theme. If a rule here is doing anything
   other than naming a fill, a border or the ink that goes with one, it probably belongs in
   theme-surfaces.css as a token instead.

   PLAIN CSS, NEVER SCSS. Styles/**.scss compiles into customerportal.min.css via `npx sass`,
   which does not run without Node: the build reports success and the committed bundle is not
   regenerated, so a rule added there may never reach a browser. See Styles/README.md section 3.
   A test fails if `data-bs-theme` appears anywhere under Styles/.

   Loaded last in both layouts, so it beats the bundle on equal specificity. Every selector is
   prefixed [data-bs-theme="dark"], which also raises specificity by one attribute — enough to
   win against a bare class in the bundle without !important. */


/* ── Bootstrap surfaces the CDN build does not know about ──────────────────────────────── */

/* .card is _industrial.scss's own, not Bootstrap's: `background: var(--white)` with a --navy2
   header. Three admin views use it instead of .admin-panel, and it is the same surface, so it
   gets the same fill as one. */
[data-bs-theme="dark"] .card {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

/* The header is --navy2 in the bundle, which is exactly what --surface-1 becomes — so without
   this the strip and the card body are the same colour and the header stops being a header.
   Same reason --chrome-fill moves to --blue in theme-surfaces.css. */
[data-bs-theme="dark"] .card-header {
    background: var(--chrome-fill);
    border-bottom-color: var(--chrome-rule);
}

/* The bundle re-declares these with a white fill and --ink text, which overrides Bootstrap's
   own dark-theme form control. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: var(--surface-2);
    border-color: var(--surface-rule);
    color: var(--surface-ink);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--surface-muted);
    opacity: .75;
}

/* Focus keeps the accent ring it has in light mode; only the fill needs saying. */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: var(--surface-2);
    color: var(--surface-ink);
}


/* ── Code ─────────────────────────────────────────────────────────────────────────────────
   `code` and `pre` are #eff0f1 literals in the bundle. --code-ink already follows the token
   flip to accent; the chip behind it does not. Recessed rather than raised: a code sample
   reads as inset on both surfaces. */
[data-bs-theme="dark"] code,
[data-bs-theme="dark"] pre {
    background: var(--surface-2);
}

[data-bs-theme="dark"] pre {
    border: 1px solid var(--surface-rule);
}


/* ── Page chrome ──────────────────────────────────────────────────────────────────────── */

/* The article-page sidebar. #fff !important in the bundle, so this needs it back — the only
   !important in this file, and only because the rule it answers has one. */
[data-bs-theme="dark"] #menu-container {
    background: var(--surface-2) !important;
    border-right-color: var(--surface-rule) !important;
}

/* The header search field: a white pill on the navy bar in light mode, which already reads as
   chrome. On a dark page it wants the chrome treatment rather than a white slab. */
[data-bs-theme="dark"] .Search-Bar {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--chrome-control-border);
    color: var(--chrome-ink);
}

[data-bs-theme="dark"] .Search-Bar::placeholder {
    color: var(--chrome-control-ink);
}

/* site.css's generic button. Its fill is #ffffff with --navy text, which inverts to unreadable. */
[data-bs-theme="dark"] .buttonStyling {
    background: var(--surface-1);
    border-color: var(--surface-rule);
    color: var(--surface-ink);
}


/* ── Home: tiles, updates, news, blog ─────────────────────────────────────────────────── */

[data-bs-theme="dark"] .cp-tile {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

/* The tile lifts toward the light on hover, rather than deepening its shadow. */
[data-bs-theme="dark"] .cp-tile:hover {
    background: var(--chrome-fill);
    border-color: var(--chrome-rule);
}

[data-bs-theme="dark"] .cp-updates-section > ul,
[data-bs-theme="dark"] .cp-updates-section > ol {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

[data-bs-theme="dark"] .cp-blog-card {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}


/* ── Docs and Vis-University hubs ─────────────────────────────────────────────────────────
   #f0f2f5 is these hubs' own canvas tone, a shade off --offwhite; it becomes the page canvas
   rather than the card, because that is the role it played. */
[data-bs-theme="dark"] .visu-hub-body,
[data-bs-theme="dark"] .visu-two-col,
[data-bs-theme="dark"] .visu-search-body,
[data-bs-theme="dark"] .visu-crumb {
    background: var(--surface-2);
}

[data-bs-theme="dark"] .visu-module-card,
[data-bs-theme="dark"] .visu-feature-card,
[data-bs-theme="dark"] .visu-sidebar,
[data-bs-theme="dark"] .visu-search-wrap,
[data-bs-theme="dark"] .visu-search-result,
[data-bs-theme="dark"] .docs-search-result {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}


/* ── Chat ─────────────────────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .chat-panel,
[data-bs-theme="dark"] .chat-post,
[data-bs-theme="dark"] .chat-empty,
[data-bs-theme="dark"] .chat-thread-row,
[data-bs-theme="dark"] .chat-mine-row,
[data-bs-theme="dark"] .chat-result {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

[data-bs-theme="dark"] .chat-thread-row:hover,
[data-bs-theme="dark"] .chat-result:hover {
    background: var(--chrome-fill);
}


/* ── Capabilities ─────────────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .cap-card {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}


/* ── Conferences, partners, releases, downloads, general info, compliance ─────────────── */

[data-bs-theme="dark"] .conf-card,
[data-bs-theme="dark"] .vcc-resource-card,
[data-bs-theme="dark"] .vcc-pres-card,
[data-bs-theme="dark"] .rel-card,
[data-bs-theme="dark"] .dl-accordion,
[data-bs-theme="dark"] .gi-card,
[data-bs-theme="dark"] .gi-service-card,
[data-bs-theme="dark"] .gi-datasheet,
[data-bs-theme="dark"] .compliance-report-card,
[data-bs-theme="dark"] .compliance-report-card--featured {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

[data-bs-theme="dark"] .vcc-resource-card:hover,
[data-bs-theme="dark"] .vcc-pres-card:hover {
    background: var(--chrome-fill);
}

/* Three surfaces keep a light fill DELIBERATELY, so a future survey does not read them as gaps:

   .partner-logo and .chat-attach-thumb are mats behind customer-supplied artwork — partner
   logos and pasted screenshots are drawn for white paper, and a transparent PNG on navy loses
   its dark strokes entirely. A white mat in a dark UI is a choice here, not an oversight.

   .site-login is the login card, and the login screen is the one place in the app that is
   full-page dark in BOTH themes (see Styles/README.md section 1). A white card on a dark page
   is already its light-mode design; dark mode changes nothing there. */


/* ── Ink that would otherwise be navy on navy ─────────────────────────────────────────────
   All 53 of them, in one declaration. Each is a heading, a card title, a section label or a
   hover state that sets `color: var(--navy)` and no fill: correct on the white card it was
   written for, invisible on the navy one it now sits on.

   Grouped by area only for reading. Adding a component means adding its title here as well as
   its fill above — that is the pairing this file exists to keep. */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .article-body h1,
[data-bs-theme="dark"] .article-body h2,
[data-bs-theme="dark"] .article-body h3,
[data-bs-theme="dark"] .article-body h4,
[data-bs-theme="dark"] .article-body h5,
[data-bs-theme="dark"] .article-body h6,
[data-bs-theme="dark"] .toc-group-header,
[data-bs-theme="dark"] .cp-toc li.selected,
/* home and shared */
[data-bs-theme="dark"] .cp-tile-title,
[data-bs-theme="dark"] .cp-updates-section > h2,
[data-bs-theme="dark"] .cp-page-title,
[data-bs-theme="dark"] .cp-page-content h1,
[data-bs-theme="dark"] .cp-page-content h2,
[data-bs-theme="dark"] .cp-page-content h3,
[data-bs-theme="dark"] .cp-submit-success-title,
[data-bs-theme="dark"] .cp-news-label,
[data-bs-theme="dark"] .cp-news-all:hover,
[data-bs-theme="dark"] .cp-blog-title,
/* hubs */
[data-bs-theme="dark"] .visu-module-name,
[data-bs-theme="dark"] .visu-module-title,
[data-bs-theme="dark"] .visu-section-title,
[data-bs-theme="dark"] .visu-article-title,
[data-bs-theme="dark"] .visu-article-body h2,
[data-bs-theme="dark"] .visu-article-body h3,
[data-bs-theme="dark"] .visu-gate-title,
[data-bs-theme="dark"] .visu-feature-title,
[data-bs-theme="dark"] .docs-search-result-title,
/* chat and capabilities */
[data-bs-theme="dark"] .chat-thread-title,
[data-bs-theme="dark"] .chat-result-title,
[data-bs-theme="dark"] .chat-panel-title,
[data-bs-theme="dark"] .chat-author,
[data-bs-theme="dark"] .cap-section-h2,
[data-bs-theme="dark"] .cap-card-name,
/* conferences, partners */
[data-bs-theme="dark"] .conf-title,
[data-bs-theme="dark"] .conf-theme,
[data-bs-theme="dark"] .conf-link:hover,
[data-bs-theme="dark"] .vcc-resource-title,
[data-bs-theme="dark"] .vcc-pres-title,
[data-bs-theme="dark"] .partner-name a,
[data-bs-theme="dark"] .partner-tagline,
/* releases and downloads */
[data-bs-theme="dark"] .rel-year-header h2,
[data-bs-theme="dark"] .rel-version,
[data-bs-theme="dark"] .rel-milestone-label,
[data-bs-theme="dark"] .rel-notes-link:hover,
[data-bs-theme="dark"] .dl-section-title,
[data-bs-theme="dark"] .dl-accordion-label,
[data-bs-theme="dark"] .dl-link:hover,
[data-bs-theme="dark"] .dl-table-wrap table a:hover,
/* general info and compliance */
[data-bs-theme="dark"] .gi-card-title,
[data-bs-theme="dark"] .gi-service-title,
[data-bs-theme="dark"] .gi-section-label h2,
[data-bs-theme="dark"] .gi-link:hover,
[data-bs-theme="dark"] .gi-contact-link:hover,
[data-bs-theme="dark"] .gi-contact-link strong,
[data-bs-theme="dark"] .compliance-section-title,
[data-bs-theme="dark"] .compliance-notice-title,
[data-bs-theme="dark"] .compliance-report-card-title,
[data-bs-theme="dark"] .compliance-prose p strong,
[data-bs-theme="dark"] .compliance-notice-body p strong,
[data-bs-theme="dark"] .compliance-notice-body ul li strong {
    color: var(--surface-ink);
}