/* ============================================================================
   comicbase.com dark theme
   ----------------------------------------------------------------------------
   Applies only under html[data-bs-theme="dark"], which the master's theme-boot
   script sets from the browser's prefers-color-scheme (or a stored override in
   localStorage 'cb-theme' -- the hook for a future manual toggle).

   Bootstrap 5.3 themes its own components from that attribute; this file covers
   the site's custom chrome, which Bootstrap knows nothing about. It lives
   inside the /mycb app so it rides the normal deploy -- the site-root /styles
   folder that serves cc_styles_responsive.css deploys separately, so nothing
   here may depend on editing that file.

   Tokens mirror atomicavenue.com's dark theme so the two sites read as one
   family. See AtomicAvenue/dev/Content/aa-dark.css.
   ========================================================================== */

[data-bs-theme="dark"] {
    --cb-base: #191919;                     /* content column -- matches Windows dark */
    --cb-surround: #101010;                 /* page behind it, a step darker */
    --cb-surface: #343b43;                  /* raised surfaces, control faces */
    --cb-surface-hover: #3e464f;
    --cb-recessed: #232a33;                 /* fields you type into */
    --cb-border: #4d5661;
    --cb-ink: #dee2e6;
    --cb-ink-dim: #9aa5b0;
    --cb-link: #7cb3f5;
}

/* ---- Page shell ---------------------------------------------------------- */
[data-bs-theme="dark"] body {
    /* The light theme paints a blue gradient image behind everything; it fights
       the dark theme, so dark mode drops it for a flat surround. */
    background-image: none;
    background-color: var(--cb-surround);   /* was #7aa1c7 */
}
[data-bs-theme="dark"] .contentWrapper {
    background-color: var(--cb-base);       /* was white */
    color: var(--cb-ink);
}
[data-bs-theme="dark"] a {
    color: var(--cb-link);                  /* was #000099 */
}
/* Content links pick up the Go button's blue (see the .mainContent rule in the
   master). Dark mode uses Bootstrap's blue-400 rather than the button's exact
   #0d6efd: measured, #0d6efd sits at 3.8:1 on the dark page and only 2.5:1 on
   the surface gray, while #3d8bfd reads 5.1:1 in the same hue family. Bootstrap
   lightens its own link colors in dark mode for the same reason. Higher
   specificity than the plain dark `a` rule so it wins regardless of order. */
[data-bs-theme="dark"] .mainContent a {
    color: #3d8bfd;
}
[data-bs-theme="dark"] a:visited {
    color: #a99af0;
}
/* These hardcode #0000AA at ID specificity, which beats the plain `a` rule
   above -- on a dark page the text is effectively invisible. */
[data-bs-theme="dark"] #bragBoxes a,
[data-bs-theme="dark"] #LoginPage a {
    color: var(--cb-link);
}

/* ---- Header ------------------------------------------------------------- */
/* .topHeader is already #204675 navy with white text, so it needs nothing --
   deliberately kept identical in both themes (same call as atomicavenue.com:
   the header is the site's identity). */

/* ---- Account/funnel pages (Profile, ContactInfo, the login funnel) -------- */
/* The master styles .funnel-card labels in Gutter ink-2 (#4a5866), which is
   2.3:1 on the dark page. The on-vacation dim needs lifting too, while staying
   clearly dimmer than normal body text. */
[data-bs-theme="dark"] .funnel-card .form-label {
    color: #aab6c2;
}
[data-bs-theme="dark"] .funnel-card .form-label .label-note {
    color: #8f9aa5;
}
[data-bs-theme="dark"] .on-vacation {
    color: #8f9aa5;
}

/* ---- Body copy that hardcodes near-black --------------------------------- */
/* article wraps most product-page copy; its silver rule line is too bright on
   dark. h2.subhead and #LoginPage set the same #333. */
[data-bs-theme="dark"] article {
    color: var(--cb-ink);
    border-top-color: var(--cb-border);
}
[data-bs-theme="dark"] h2.subhead,
[data-bs-theme="dark"] #LoginPage {
    color: var(--cb-ink);
}

/* ---- Raised surfaces ----------------------------------------------------- */
[data-bs-theme="dark"] .white_content,
[data-bs-theme="dark"] .autocomplete_completionListElement,
[data-bs-theme="dark"] .techHeader,
[data-bs-theme="dark"] .ProductTab,
[data-bs-theme="dark"] #mobileHeader,
[data-bs-theme="dark"] #newsletterBottom {
    background-color: var(--cb-surface);    /* was white / whitesmoke */
    color: var(--cb-ink);
}
[data-bs-theme="dark"] .autocomplete_completionListElement {
    border-color: var(--cb-border);
}

/* Light gradients tuned for a white page: flatten to solid surfaces. */
[data-bs-theme="dark"] .ProGradient,
[data-bs-theme="dark"] .ExpressGradient,
[data-bs-theme="dark"] .topQuestionShade {
    background: var(--cb-surface);
    color: var(--cb-ink);
}

/* ---- Product page tab content ------------------------------------------- */
/* The Features tab renders through #TopLineFeaturesPro / #TopLineFeaturesBlu,
   which set #404040 body copy -- 1.6:1 on the dark page, effectively
   invisible. (#TopLineFeatures, the third variant, already uses ghostwhite
   for its dark laptop backdrop and needs nothing.) The endorsement quotes
   sit at 3.1:1 in lightslategrey and steelblue; both lift to clear the 4.5:1
   body-text threshold. */
[data-bs-theme="dark"] #TopLineFeaturesPro,
[data-bs-theme="dark"] #TopLineFeaturesBlu,
[data-bs-theme="dark"] .ProductIntroBlu {
    color: var(--cb-ink);
}
[data-bs-theme="dark"] .EndorsementQuoteDark,
[data-bs-theme="dark"] .EndorsementName {
    color: #aab6c2;                         /* was lightslategrey, 3.1:1 */
}
[data-bs-theme="dark"] .EndorsementQuoteDarkBlu {
    color: #7cb3f5;                         /* was steelblue, 4.1:1 */
}

/* ---- Product pages ------------------------------------------------------- */
/* #WorldAtFingertips / #HandleWithEase previously needed their art suppressed
   here: the original JPEGs baked in a white background and read as white slabs
   on a dark page. The master now points them at transparent PNGs, so the art
   shows in both themes and no dark-mode override is needed. */

/* These blocks set black text for the light gradients they sit on; the prices
   and headings inside them inherit it, so recoloring the containers is enough.
   (#ProductTopBlock, the white-text variant, already reads fine on dark.) */
[data-bs-theme="dark"] #ProductTopBlockDark,
[data-bs-theme="dark"] .ProOverviewBlock {
    color: var(--cb-ink);
}
/* The light rule for this is malformed in cc_styles_responsive.css -- a stray
   "}" inside the value ("background:cornflowerblue};") voids the declaration,
   so the selected tab has no background in EITHER theme. Give dark mode a
   working one; the light-theme bug needs fixing in that stylesheet. */
[data-bs-theme="dark"] .ProductTab-Selected {
    background: #3f6fb5;
    color: #ffffff;
}

/* ---- Legacy menu system (pre-navbar markup still present on some pages) --- */
[data-bs-theme="dark"] #menu-bar ul,
[data-bs-theme="dark"] #account-menu ul,
[data-bs-theme="dark"] .nav > li,
[data-bs-theme="dark"] .nav > li > ul a,
[data-bs-theme="dark"] .nav > li > ul > li,
[data-bs-theme="dark"] .nav li li a,
[data-bs-theme="dark"] .nav li li li a {
    background: var(--cb-surface);
    color: var(--cb-ink);
}
[data-bs-theme="dark"] .nav a:hover,
[data-bs-theme="dark"] .nav > li > ul > li a:hover,
[data-bs-theme="dark"] #menu-bar .active a,
[data-bs-theme="dark"] #menu-bar li:hover > a,
[data-bs-theme="dark"] #account-menu .active a,
[data-bs-theme="dark"] #account-menu li:hover > a,
[data-bs-theme="dark"] #bottom-links a:hover {
    background: var(--cb-surface-hover);
    color: #ffffff;
}

/* ---- Search field -------------------------------------------------------- */
/* The light theme puts a dark-on-light magnifier png behind the input. */
[data-bs-theme="dark"] #search input[type="text"],
[data-bs-theme="dark"] #search input[type="text"]:focus {
    background: var(--cb-recessed);
    color: var(--cb-ink);
    border-color: var(--cb-border);
}

/* ---- MyOrders phone cards ------------------------------------------------ */
/* Only exist below 600px (see the media query in MyOrders.aspx); the border
   color there is tuned for light mode. */
@media (max-width: 600px) {
    [data-bs-theme="dark"] .orders-grid tr:not(.gridheader):not(.orders-pager) {
        background: var(--cb-surface);
        border-color: var(--cb-border);
    }
}

/* ---- Tables -------------------------------------------------------------- */
[data-bs-theme="dark"] .grid,
[data-bs-theme="dark"] .grid table {
    color: var(--cb-ink);
}