/* ============================================================================
   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: #1a1d21;                     /* content column */
    --cb-surround: #10151d;                 /* page behind the content column */
    --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 */
}
[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). */

/* ---- 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 pages ------------------------------------------------------- */
/* These grouped blocks are painted by white-backed JPEGs (art in the right
   third, plain white filler behind the bullet text on the left). A JPEG can't
   carry transparency, so on a dark page they read as big white slabs. Dark mode
   drops the image for a flat surface; light mode keeps the art untouched.
   Restoring the art here needs dark-friendly versions of the two JPEGs. */
[data-bs-theme="dark"] #WorldAtFingertips,
[data-bs-theme="dark"] #HandleWithEase {
    background-image: none;
    background-color: var(--cb-surface);
    color: var(--cb-ink);
    border-radius: 8px;
    padding: 1em;
}

/* 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);
}