/*!
 * iSpyConnect site — Spectre-theme overrides.
 * The site stacks darkly + the app's spectre dialog theme (_Layout.cshtml),
 * but its markup predates the app's dark-only redesign and uses Bootstrap's
 * light/dark utilities for panels, dropdowns and offcanvas menus. NOTE:
 * darkly is an INVERTED theme — its $dark compiles to a LIGHT grey and vice
 * versa — so the utilities cannot be fixed by remapping the shared
 * --bs-light/--bs-dark rgb vars (bg-* and text-* read the same vars; that
 * turned the bg-dark hero pale blue). Override each utility for what the
 * site MEANS by it: every panel is a raised Command card.
 * Loaded after spectre.min.css and mainsite4.css.
 * Color values mirror themes.canvasThemes.Spectre / spectre.overrides.css.
 */

/* VARIABLE-level remap: darkly's inverted --bs-light/--bs-dark/--bs-secondary
   values leak into var()-driven page css (buy.css uses var(--bs-light) for
   the page body, var(--bs-secondary) for muted text, etc.). Safe to remap
   here ONLY because the utility classes below are pinned with !important —
   without those pins this remap turns bg-dark panels pale (learned the hard
   way). light = raised surface, dark = text, secondary = secondary text. */
:root,
[data-bs-theme=dark] {
    /* Dark native UA chrome: scrollbars, form controls, popups. Without this
       the browser renders light scrollbars on the dark site. */
    color-scheme: dark;
    --bs-light: #101823;
    --bs-light-rgb: 16, 24, 35;
    --bs-dark: #DCEEF2;
    --bs-dark-rgb: 220, 238, 242;
    --bs-secondary: #93B4BE;
    --bs-secondary-rgb: 147, 180, 190;
}

/* Panels: hero (bg-dark) and feature/dropdown/offcanvas surfaces (bg-light)
   both become the raised Command surface with the standard card edge.
   These !important pins are what make the variable remap above safe. */
.bg-light,
.bg-dark {
    background-color: #101823 !important;
    border: 1px solid rgba(120, 220, 255, 0.14);
}

.text-dark {
    color: #DCEEF2 !important;
}

/* darkly's text-light is a mid grey — fine on the dark surfaces, but lift
   it slightly for readability on the raised cards. */
.text-light {
    color: #DCEEF2 !important;
}

/* Dropdown/offcanvas menus that carried bg-light: item colors + Command
   hover states (their darkly hover styling assumed a light surface). */
.dropdown-menu.bg-light .dropdown-item,
.offcanvas.bg-light {
    color: #DCEEF2;
}

.dropdown-menu.bg-light .dropdown-item:hover,
.dropdown-menu.bg-light .dropdown-item:focus {
    color: #FFFFFF;
    background-color: #16283A;
}

/* Page-title bands (section#header-btm.bg-primary on most pages): under
   darkly these were steel blue; Command's primary is a LIGHT cyan, so the
   solid band with white text was blinding and unreadable. Use the app's
   accent-wash banner language instead — links inside pick up Command's
   cyan link color, which reads fine on the wash. */
section.bg-primary {
    background-color: rgba(0, 212, 232, 0.10) !important;
    border-bottom: 1px solid rgba(0, 212, 232, 0.35);
}

/* Download tile (#linkMain, platform-colored): a solid accent tile is fine
   as the highlight, but cyan takes dark ink — white-on-cyan fails contrast
   (same rule as the app's btn-primary). Other platform tiles (bg-success /
   bg-dark / bg-info) keep their own readable pairings. */
#linkMain.bg-primary,
#linkMain.bg-primary .text-light {
    color: #041018 !important;
}

/* Buy page plan header (buy.css: full-width solid var(--bs-primary) cap
   with a white h2 — unreadable on cyan, and it competes with the price for
   attention). Restyle in the app's card-cap language: dark cap, accent
   title, accent rule — the cyan price below stays the focal point.
   !important because buy.css loads AFTER this sheet (page HeadScript);
   the h2 needs direct color (headings take --bs-heading-color, they don't
   inherit — which is why an inherited ink fix didn't take). */
.pricing-card .card-header {
    background: #0D141D !important;
    border-bottom: 1px solid rgba(0, 212, 232, 0.35) !important;
}

.pricing-card .card-header h2 {
    color: #5CF2FF;
}

/* Neutral notice panels (translation tokens use .alert-light, e.g. the
   contact page's "check the latest version" note): darkly compiles this as
   a light-grey slab, which the site's light text can't sit on. What the
   site MEANS is a quiet raised note — style it as a standard raised card
   with accent links. Direct props, not just the --bs-alert-* vars: darkly
   stomps alert fills with literal background-colors. */
.alert-light {
    --bs-alert-color: #DCEEF2;
    --bs-alert-bg: #101823;
    --bs-alert-border-color: rgba(120, 220, 255, 0.14);
    --bs-alert-link-color: #5CF2FF;
    color: #DCEEF2;
    background-color: #101823;
    border-color: rgba(120, 220, 255, 0.14);
}

.alert-light a {
    color: #5CF2FF;
}

/* Links on colored bands (translation tokens use .link-light, e.g. the
   download page's "pricing" link): with --bs-light remapped to the dark
   surface above, Bootstrap's .link-light utility resolves dark-on-dark and
   the link disappears. Pin it to actual light ink; !important matches the
   utility's own. */
.link-light {
    color: #DCEEF2 !important;
}

.link-light:hover,
.link-light:focus {
    color: #FFFFFF !important;
}

/* Badges (camera pages' protocol chips and anywhere else): cyan takes dark
   ink — white-on-cyan fails contrast (same rule as btn-primary). And with
   --bs-secondary remapped to a light blue-grey above, bg-secondary badges
   would render light-on-light; pin them as neutral console chips instead.
   !important needed to beat the bg-* utilities' own !important. */
.badge.bg-primary {
    color: #041018;
}

.badge.bg-secondary {
    background-color: #16283A !important;
    color: #93B4BE;
    border: 1px solid rgba(120, 220, 255, 0.25);
}

/* btn-dark (download page's macOS button, navbar's disabled EN chip): darkly
   compiles this as warm charcoal #303030 — off-palette and near-invisible on
   the #101823 card. What the site MEANS is a quiet neutral console button;
   mirror the app's btn-secondary steel (hover lightens, dark-theme
   convention) so it stays subdued but visible. */
.btn-dark {
    --bs-btn-color: #DCEEF2;
    --bs-btn-bg: #16283A;
    --bs-btn-border-color: #24384E;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #1D3348;
    --bs-btn-hover-border-color: #2C4560;
    --bs-btn-focus-shadow-rgb: 36, 56, 78;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #24384E;
    --bs-btn-active-border-color: #2C4560;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #93B4BE;
    --bs-btn-disabled-bg: #16283A;
    --bs-btn-disabled-border-color: #24384E;
}

/* Compare-plans table (Buy): tier-group rows carry the table-light variant,
   which darkly renders as light-grey slabs with light text. Keep the
   grouping, restyle it as a subtle accent wash. */
.table-light {
    --bs-table-color: #DCEEF2;
    --bs-table-bg: rgba(0, 212, 232, 0.06);
    --bs-table-border-color: rgba(120, 220, 255, 0.14);
    --bs-table-hover-color: #FFFFFF;
    --bs-table-hover-bg: rgba(0, 212, 232, 0.10);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}