/* ============================================================================
   AtomicAvenue 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 'aa-theme' -- the hook for a future manual toggle).

   Bootstrap 5.3 handles its own components (forms, cards, modals, dropdowns,
   .table) via data-bs-theme; this file covers the site's custom chrome, which
   BS5 knows nothing about. Lives in /atomic/Content so it deploys with the app
   (the live site-root /Styles folder deploys separately -- do not move it there).
   ========================================================================== */

/* ---- Shared surface tokens ----------------------------------------------- */
/* One raised gray for every "surface" in dark mode: the search band, grouped
   item boxes, button faces, and select/combo controls. Fields you TYPE into
   (search box, text inputs) stay recessed darker than their surface -- that
   contrast is what makes them read as inputs. */
[data-bs-theme="dark"] {
    --aa-base: #1a1d21;                     /* content background */
    --aa-surface: #343b43;
    --aa-surface-hover: #3e464f;
    --aa-recessed: #232a33;
}

/* ---- Page shell ---------------------------------------------------------- */
[data-bs-theme="dark"] body {
    background-color: #10151d;              /* was #91a8d1 signature light blue */
}
[data-bs-theme="dark"] .contentWrapperNew {
    background-color: var(--aa-base);       /* was white */
    color: #dee2e6;
}
[data-bs-theme="dark"] a {
    color: #7cb3f5;                         /* was darkblue */
}
/* 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 that backs listing/wish-list/account cards, while #3d8bfd
   reads 5.1:1 and stays 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 above so it wins regardless of stylesheet order. */
[data-bs-theme="dark"] .mainContent a {
    color: #3d8bfd;
}
[data-bs-theme="dark"] a:hover {
    color: #a3cbf9;
}

/* ---- Header chrome: gradient + menu bar stay LIGHT in both themes --------- */
/* The topHeader gradient and menu bar keep their standard light look
   regardless of theme (deliberate: the header graphic is the site's
   identity). Top-level menu text stays black on the gradient via the base
   rules; only the fly-out panels below invert. The SEARCH BAND, however,
   goes dark with the theme. */
[data-bs-theme="dark"] #mainSearchArea {
    /* Shared surface gray -- lighter than the page (#10151d) and the content
       column (#1b2129) so the band stays a distinct layer. */
    background-color: var(--aa-surface);    /* was #cce5f4 */
    color: #cfd6dd;
}
[data-bs-theme="dark"] #mainSearchArea a {
    color: #7cb3f5;
}
[data-bs-theme="dark"] #searchArea input[type="text"] {
    background: var(--aa-recessed);         /* drops the dark-on-light icon png */
    color: #e6ebf0;
    padding-left: 0.75em;
}

/* ---- Menu fly-outs invert (panels are dark; the menu BAR stays light) ----- */
[data-bs-theme="dark"] .nav li ul {
    border-color: #3a4450;
    box-shadow: 2px 2px 3px #000000;
}
[data-bs-theme="dark"] .nav li li a {
    background: #232a33;                    /* was #f5f5f7 */
    border-top-color: var(--aa-base);       /* was white */
    color: #cfd6dd !important;              /* base rule is !important too */
}
[data-bs-theme="dark"] .nav > li > ul > li a:hover,
[data-bs-theme="dark"] .nav li li a:hover {
    background: #2e3742;                    /* was lightgray / #f5f5f7 */
}
[data-bs-theme="dark"] .nav li li li a {
    background: #232a33;                    /* was whitesmoke */
}

/* ---- Search autocomplete (floats over the dark content) ------------------- */
[data-bs-theme="dark"] .autocomplete_completionListElement {
    background-color: #1f252d;              /* was white */
    border-color: #3a4450;
}
[data-bs-theme="dark"] .autocomplete_completionListElement li {
    color: #cfd6dd;                         /* was #202020 */
}

/* ---- Grids (custom, not BS .table) --------------------------------------- */
/* .gridheader keeps its #413b79 purple: it already reads well on dark. */
[data-bs-theme="dark"] .gridheaderBlack {
    background-color: var(--aa-base);       /* was white */
    color: #dee2e6;
}
[data-bs-theme="dark"] .griditem {
    border-top-color: #323a43;              /* was #EAEAEA */
}

/* ---- Buttons ------------------------------------------------------------- */
/* Base shim re-skins .btn-secondary to BS3's white btn-default; in dark it
   becomes a neutral dark button instead. */
[data-bs-theme="dark"] .btn-secondary {
    /* Borders run brighter than the fill so enabled buttons don't read as
       disabled on dark surfaces. */
    --bs-btn-color: #dee2e6;
    --bs-btn-bg: var(--aa-surface);
    --bs-btn-border-color: #7a838c;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--aa-surface-hover);
    --bs-btn-hover-border-color: #98a1aa;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--aa-surface-hover);
    --bs-btn-active-border-color: #98a1aa;
    --bs-btn-disabled-color: #8b939b;
    --bs-btn-disabled-bg: var(--aa-surface);
    --bs-btn-disabled-border-color: #495057;
}

/* Select / combo controls share the surface gray. background-COLOR only --
   the shorthand would wipe BS5's dropdown-arrow background-image. */
[data-bs-theme="dark"] .form-select {
    background-color: var(--aa-surface);
}

/* ---- Sidebar stat boxes -------------------------------------------------- */
/* Headers (midnightblue/darkred/darkorange, white text) already work on dark;
   the borders vanish against the dark shell, so lift them a step. */
[data-bs-theme="dark"] .modern-box.darkblue,
[data-bs-theme="dark"] .modern-box-content.darkblue {
    border-color: #3d4c8f;
}
[data-bs-theme="dark"] .modern-box.darkred,
[data-bs-theme="dark"] .modern-box-content.darkred {
    border-color: #a04545;
}
[data-bs-theme="dark"] .modern-box.darkorange,
[data-bs-theme="dark"] .modern-box-content.darkorange {
    border-color: #b57a2e;
}

/* ---- Issue cards (SearchIssues.css, served from the live /Styles folder) -- */
[data-bs-theme="dark"] .issue-card {
    background: var(--aa-surface);          /* was #fff */
    border-color: #4d5661;                  /* was #d0d8e4 */
}
[data-bs-theme="dark"] .issue-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    border-color: #5a7ba0;
}
[data-bs-theme="dark"] .issue-card-info {
    border-color: #3a4450;                  /* was dashed #ccc */
}
[data-bs-theme="dark"] .search-error {
    background: #2c1a1a;                    /* was #fff3f3 */
    border-color: #6e3a3a;
    color: #f1a9a9;
}

/* ---- IssueDetail (the id-* system: listing cards, controls, wishlist) ----- */
/* The page's inline styles hardcode a light surface system; this inverts the
   neutral surfaces. The colored accents (condition pills, best-value/great-
   price ribbons, seller badges, rank dots) stay -- they read fine on dark. */
[data-bs-theme="dark"] .id-flash-info {
    background-color: #16283c;
    border-color: #2c4a6e;
    color: #a8cdf0;
}
[data-bs-theme="dark"] .sets-banner {
    background: #16283c;
    border-left-color: #4a7ab0;
    color: #a8cdf0;
}
[data-bs-theme="dark"] .sets-banner a {
    color: #7cb3f5;
}
[data-bs-theme="dark"] .id-cover img {
    border-color: #3a4450;
}
[data-bs-theme="dark"] .id-jump label,
[data-bs-theme="dark"] .id-sort-label,
[data-bs-theme="dark"] .id-scope-label,
[data-bs-theme="dark"] .id-scope-count,
[data-bs-theme="dark"] .id-storylines,
[data-bs-theme="dark"] .id-price-from,
[data-bs-theme="dark"] .id-copies-avail,
[data-bs-theme="dark"] .id-other-sellers,
[data-bs-theme="dark"] .id-country,
[data-bs-theme="dark"] .id-min-order,
[data-bs-theme="dark"] .id-notes-text {
    color: #8f9aa5;
}
[data-bs-theme="dark"] .id-copies-avail a,
[data-bs-theme="dark"] .id-other-sellers a {
    color: #8f9aa5;
}
[data-bs-theme="dark"] .id-copies-avail a:hover,
[data-bs-theme="dark"] .id-other-sellers a:hover {
    color: #b6c0c9;
}
[data-bs-theme="dark"] .id-jump select,
[data-bs-theme="dark"] .id-sort-select {
    background: var(--aa-surface);
    color: #dee2e6;
    border-color: #6b7784;
}
[data-bs-theme="dark"] .id-scope-toggle {
    border-color: #3a4450;
}
[data-bs-theme="dark"] .id-scope-btn {
    background: var(--aa-surface);
    color: #8f9aa5;
}
[data-bs-theme="dark"] .id-scope-btn + .id-scope-btn {
    border-left-color: #3a4450;
}
[data-bs-theme="dark"] .id-scope-btn.active {
    background: #dee2e6;
    color: #1a1a1a;
}
[data-bs-theme="dark"] .id-card {
    background: var(--aa-surface);          /* was #fff */
    border-color: #4d5661;                  /* was #ddd */
}
[data-bs-theme="dark"] .id-card:hover {
    border-color: #5a7ba0;
}
[data-bs-theme="dark"] .id-card.best-val  { border-color: #378add; }
[data-bs-theme="dark"] .id-card.great-val { border-color: #1d9e75; }
[data-bs-theme="dark"] .id-card.in-cart {
    background: #14251e;                    /* was #f0fbf6 */
    border-color: #1d9e75;
}
[data-bs-theme="dark"] .id-free-ship {
    color: #1d9e75;                         /* was #0f6e56; matches the great-price green */
}
[data-bs-theme="dark"] .id-star-off,
[data-bs-theme="dark"] .rv-star-empty {
    color: #4a545e;
}
[data-bs-theme="dark"] .id-atc-btn {
    background: var(--aa-surface);
    border-color: #6b7784;                  /* brighter than the fill: reads enabled */
    color: #dee2e6;
}
[data-bs-theme="dark"] .id-atc-btn:hover {
    background: var(--aa-surface-hover);
    border-color: #98a1aa;
}
[data-bs-theme="dark"] .id-atc-btn:disabled {
    background: #14251e;
    border-color: #1d9e75;
    color: #6fd0ae;
}
[data-bs-theme="dark"] .id-atc-btn-remove {
    color: #e08a6a;
    border-color: #6e463a;
}
[data-bs-theme="dark"] .id-atc-btn-remove:hover {
    background: #2c1f1a;
    border-color: #a05a3a;
}
[data-bs-theme="dark"] .id-stepper {
    background: #14251e;
    border-color: #1d9e75;
}
[data-bs-theme="dark"] .id-stepper-btn {
    color: #6fd0ae;
}
[data-bs-theme="dark"] .id-stepper-btn:hover {
    background: #1b3a2d;
}
[data-bs-theme="dark"] .id-stepper-qty {
    color: #6fd0ae;
    border-left-color: #1d9e75;
    border-right-color: #1d9e75;
}
[data-bs-theme="dark"] .id-divider-line {
    background: #3a4450;
}
[data-bs-theme="dark"] .id-divider-label,
[data-bs-theme="dark"] .id-empty {
    color: #7a8590;
}
[data-bs-theme="dark"] .id-wishlist {
    background: var(--aa-surface);          /* was #f8f8f8 */
    border-color: #4d5661;
}
[data-bs-theme="dark"] .id-wishlist-title {
    color: #8f9aa5;
}
[data-bs-theme="dark"] .id-wishlist-row label {
    color: #9aa5b0;
}
[data-bs-theme="dark"] .id-wishlist-row select {
    background: var(--aa-surface);
    color: #dee2e6;
    border-color: #6b7784;
}
[data-bs-theme="dark"] .id-wishlist-row input[type="text"] {
    background: var(--aa-recessed);         /* typed-into: stays recessed */
    color: #dee2e6;
    border-color: #4d5661;
}
[data-bs-theme="dark"] .id-wishlist-row .id-wl-btn {
    background: var(--aa-surface);
    color: #dee2e6;
    border-color: #6b7784;
}
[data-bs-theme="dark"] .id-wishlist-row .id-wl-btn:hover {
    background: var(--aa-surface-hover);
}
[data-bs-theme="dark"] .rv-badge-count {
    color: #8f9aa5;
}
[data-bs-theme="dark"] .rv-section {
    border-top-color: #3a4450;
}

/* ---- Section divider bands (MyAccount, condition headers) ---------------- */
/* Base CSS paints these with a left-to-right light-blue gradient (plus a stack
   of vendor-prefixed fallbacks). A gradient tuned for a white page fights the
   dark theme, so dark mode replaces it with a flat solid. The `background`
   shorthand also clears the gradient image; the IE `filter` fallback is inert
   in modern browsers. */
[data-bs-theme="dark"] .ActivitySubhead,
[data-bs-theme="dark"] .conditionHeader {
    background: #2a3f57;
    color: #dee2e6;                         /* .conditionHeader hardcodes black */
}
[data-bs-theme="dark"] .ActivitySubhead a,
[data-bs-theme="dark"] .conditionHeader a {
    color: #a8cdf0;
}

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

/* ---- MyAccount activity cards -------------------------------------------- */
/* The acct-* system is styled inline in MyAccount.aspx and hardcodes a white
   card surface. .acct-date-header keeps its #413b79 purple (same call as
   .gridheader -- it reads fine on dark), as do the solid status badges. */
[data-bs-theme="dark"] .acct-card {
    background: var(--aa-surface);          /* was #fff */
    border-color: #4d5661;                  /* was #e0e0e0 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .acct-card-body {
    color: #c8d0d8;                         /* was #333 */
}
[data-bs-theme="dark"] .acct-card-date,
[data-bs-theme="dark"] .acct-card-more,
[data-bs-theme="dark"] .acct-empty {
    color: #9aa5b0;                         /* was #666 / #777 */
}
[data-bs-theme="dark"] .acct-pagination {
    background: var(--aa-surface);          /* was #fafafa */
    border-color: #6b7784;                  /* was #ddd */
    color: #cfd6dd;                         /* was the #413b79 purple */
}
[data-bs-theme="dark"] .acct-pagination a {
    color: #7cb3f5;                         /* was darkblue */
}
/* The other status badges are saturated enough to hold up on a dark card;
   badge-new's near-black (#222) sinks into it, so lift it to a slate. */
[data-bs-theme="dark"] .badge-new {
    background: #5a6673;
}

/* ---- Community ratings & reviews ----------------------------------------- */
/* Review entries are transparent with dark text in base CSS -- unreadable on
   a dark page. Give them the shared surface so they read as real boxes. */
[data-bs-theme="dark"] .rv-review {
    background: var(--aa-surface);
    border: 1px solid #4d5661;              /* was a light border-bottom rule */
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
[data-bs-theme="dark"] .rv-review-body {
    color: #dee2e6;                         /* was #222 */
}
[data-bs-theme="dark"] .rv-review-date {
    color: #9aa5b0;
}
[data-bs-theme="dark"] .rv-summary {
    color: #b6c0c9;                         /* was #444 */
}
[data-bs-theme="dark"] .rv-spoiler summary {
    color: #e0a458;                         /* was #a06000 */
}

/* ---- Funnel-card account pages ------------------------------------------- */
/* Ink colors defined inline in the master (Gutter ink-2 / ink-3). */
[data-bs-theme="dark"] .funnel-card .form-label {
    color: #aab6c2;
}
[data-bs-theme="dark"] .funnel-card .form-label .label-note {
    color: #8f9aa5;
}