/* modernize.css — 2026-07-12 at-web surface refresh (updated same day after
   font feedback).
   ------------------------------------------------------------------
   Loaded LAST in fragments/header/style-css.html so it wins the cascade
   without editing the 586 KB template style.css. Additive and isolated:
   delete this <link> to fully revert.

   FONT DECISION: the body font stays VERDANA. An earlier version of this file
   swapped it to a system-UI stack; Pritesh found Verdana more readable for the
   dense, small (0.825em) trading tables — Verdana was engineered for on-screen
   legibility (large x-height, wide spacing, tuned Windows hinting) and its
   digits are already fixed-width. So we keep Verdana and carry only the
   readability-neutral wins here: a crisp light-mode card surface, (harmless,
   since Verdana is already tabular) tabular figures, and a shift from all-bold
   table bodies to REGULAR weight — emphasis kept on headers + identity/status
   columns (see the BODY WEIGHT block below).

   Dark mode restyles .card via theme-cards.css ([data-theme="dark"] .card), so
   the card softening below is gated to light only. Nothing here touches cell
   DATA, so the portfolio-v2 parity harness stays green.

   It also carries the 2026-07-12 BUTTON REFRESH (Option A shape/motion +
   Option B brand-aligned colours) — see the section at the bottom. */

:root {
  /* Crisp layered card surface (the 2025 dashboard look) replacing the diffuse
     20px "floating glow". Kept as vars for one-place tuning / review. */
  --sd-card-shadow-modern: 0 1px 2px rgba(16, 24, 40, 0.06),
    0 1px 3px rgba(16, 24, 40, 0.10);
  --sd-card-border-modern: 1px solid rgba(16, 24, 40, 0.08);
}

/* The mobile logo hard-codes `font-family: open sans`, but we dropped the Open
   Sans Google Fonts fetch — so pin the logo to Verdana too (matches the body,
   no external dependency). !important beats the high-specificity original. */
.logo-text {
  font-family: "Verdana", sans-serif !important;
}

/* Tabular figures for the data grids. Verdana already renders fixed-width
   digits, so this is a no-op today but keeps column alignment correct if the
   font ever changes. */
.dataTable tbody td,
.dataTable tfoot th,
table.dataTable tbody td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* BODY WEIGHT: the base rule (table.css `tbody{font-weight:600}`) rendered every
   data-table body cell semibold — a wall of bold across the dense trading grids.
   Relax the body to regular (400) here. This loads last with the same bare-tbody
   scope, so it cleanly reverses that one rule. Emphasis survives automatically:
   <th> headers stay bold via the browser default, and any cell carrying the
   .font-weight-bold class (identity / status / highlighted figures) keeps its
   700 !important. Delete this block to restore the all-bold look. */
tbody {
  font-weight: 400;
}

/* Light-only card softening: replace the diffuse floating-glow shadow with a
   crisp layered shadow + hairline border. Gated to non-dark so dark mode's own
   card tokens win untouched. Specificity (0,0,2,1) beats base .card (0,0,1,0). */
html:not([data-theme="dark"]) .card {
  box-shadow: var(--sd-card-shadow-modern);
  border: var(--sd-card-border-modern);
}

/* ============================================================
   BUTTON REFRESH — 2026-07-12
   Option A (shape + motion) + Option B (brand-aligned colours).

   Palette (approved): primary = the stocksdeveloper.in brand blue
   (brand-600 #1f56e6 in light, the lighter #58a6ff in dark). success /
   danger / warning shift to the modern Tailwind-600 (light) and existing
   dark-token (dark) shades. Hue MEANING is preserved: green = BUY / save,
   red = SELL / delete. warning flips to amber + dark text (fixes the
   unreadable white-on-peach). info is retired -> primary (2 uses); inverse
   (0 uses) and secondary/light are left on their own colours (geometry only).

   Applied to BOTH themes on purpose: dark mode never gave the *generic*
   buttons their own palette — only the BUY/SELL trade-intent buttons were
   tokenised (#placeOrderButton / #buyHoldingsSubmit / #sellHoldingsSubmit /
   .mw2-actions ... in theme-forms.css). Those id/attr rules out-specify the
   generic rules below, so the trade buttons keep their exact treatment and
   are NOT changed here.

   Pure CSS, loaded last, fully revertible (delete this section). Scope is
   .btn-* only; SweetAlert / wizard confirm buttons are a separate surface and
   are intentionally left as-is. :not(:disabled):not(.disabled) guards keep
   disabled buttons from picking up hover/active colours. */

/* ---- A. Geometry & motion (all buttons, both themes) ---- */
.btn {
  border-radius: 6px;                 /* was 2px */
  text-transform: none;               /* was capitalize */
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .06s ease; /* was: all ease-in .3s */
}
.btn:hover:not(:disabled):not(.disabled) {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
  transform: translateY(-1px);
}
.btn:active:not(:disabled):not(.disabled) { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid #1f56e6; outline-offset: 2px; }
[data-theme="dark"] .btn:focus-visible { outline-color: #58a6ff; }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

/* ==================== B. COLOURS — LIGHT MODE ==================== */
/* primary + info(retired) -> brand-600 */
html:not([data-theme="dark"]) .btn-primary,
html:not([data-theme="dark"]) .btn-info {
  background-color: #1f56e6; border-color: #1f56e6; color: #fff;
}
html:not([data-theme="dark"]) .btn-primary:hover:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-primary:focus:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-info:hover:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-info:focus:not(:disabled):not(.disabled) {
  background-color: #1a45b8; border-color: #1a45b8; color: #fff;
}
html:not([data-theme="dark"]) .btn-primary:active:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-info:active:not(:disabled):not(.disabled) {
  background-color: #17399c !important; border-color: #17399c; color: #fff;
}
/* outline primary */
html:not([data-theme="dark"]) .btn-outline-primary {
  color: #1f56e6; border-color: #1f56e6; background-color: transparent;
}
html:not([data-theme="dark"]) .btn-outline-primary:hover:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-outline-primary:focus:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-outline-primary:active:not(:disabled):not(.disabled) {
  background-color: #1f56e6 !important; border-color: #1f56e6; color: #fff !important;
}
/* success — Save / BUY */
html:not([data-theme="dark"]) .btn-success {
  background-color: #16a34a; border-color: #16a34a; color: #fff;
}
html:not([data-theme="dark"]) .btn-success:hover:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-success:focus:not(:disabled):not(.disabled) {
  background-color: #15803d; border-color: #15803d; color: #fff;
}
html:not([data-theme="dark"]) .btn-success:active:not(:disabled):not(.disabled) {
  background-color: #166534 !important; border-color: #166534; color: #fff;
}
/* danger — Delete / SELL */
html:not([data-theme="dark"]) .btn-danger {
  background-color: #dc2626; border-color: #dc2626; color: #fff;
}
html:not([data-theme="dark"]) .btn-danger:hover:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-danger:focus:not(:disabled):not(.disabled) {
  background-color: #b91c1c; border-color: #b91c1c; color: #fff;
}
html:not([data-theme="dark"]) .btn-danger:active:not(:disabled):not(.disabled) {
  background-color: #991b1b !important; border-color: #991b1b; color: #fff;
}
/* warning — amber with dark text (fixes white-on-peach) */
html:not([data-theme="dark"]) .btn-warning {
  background-color: #f59e0b; border-color: #f59e0b; color: #1f2937;
}
html:not([data-theme="dark"]) .btn-warning:hover:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-warning:focus:not(:disabled):not(.disabled) {
  background-color: #d97706; border-color: #d97706; color: #1f2937;
}
html:not([data-theme="dark"]) .btn-warning:active:not(:disabled):not(.disabled) {
  background-color: #b45309 !important; border-color: #b45309; color: #1f2937;
}
/* outline danger (my-proxies / trading-account-edit) */
html:not([data-theme="dark"]) .btn-outline-danger { color: #dc2626; border-color: #dc2626; }
html:not([data-theme="dark"]) .btn-outline-danger:hover:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-outline-danger:focus:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .btn-outline-danger:active:not(:disabled):not(.disabled) {
  background-color: #dc2626 !important; border-color: #dc2626; color: #fff !important;
}

/* ==================== B. COLOURS — DARK MODE ==================== */
/* generic buttons in dark still carried the old Bootstrap teal/green/etc.;
   bring them to the brand set. Trade-intent #ids keep their theme-forms.css
   rules (higher specificity) and are untouched. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-info {
  background-color: #58a6ff; border-color: #58a6ff; color: #0b1220;
}
[data-theme="dark"] .btn-primary:hover:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-primary:focus:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-info:hover:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-info:focus:not(:disabled):not(.disabled) {
  background-color: #388bfd; border-color: #388bfd; color: #0b1220;
}
[data-theme="dark"] .btn-primary:active:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-info:active:not(:disabled):not(.disabled) {
  background-color: #2b7de0 !important; border-color: #2b7de0; color: #0b1220;
}
[data-theme="dark"] .btn-outline-primary {
  color: #58a6ff; border-color: #58a6ff; background-color: transparent;
}
[data-theme="dark"] .btn-outline-primary:hover:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-outline-primary:focus:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-outline-primary:active:not(:disabled):not(.disabled) {
  background-color: #58a6ff !important; border-color: #58a6ff; color: #0b1220 !important;
}
[data-theme="dark"] .btn-success {
  background-color: #3fb950; border-color: #3fb950; color: #0b1220;
}
[data-theme="dark"] .btn-success:hover:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-success:focus:not(:disabled):not(.disabled) {
  background-color: #4ac866; border-color: #4ac866; color: #0b1220;
}
[data-theme="dark"] .btn-success:active:not(:disabled):not(.disabled) {
  background-color: #35a344 !important; border-color: #35a344; color: #0b1220;
}
[data-theme="dark"] .btn-danger {
  background-color: #f85149; border-color: #f85149; color: #fff;
}
[data-theme="dark"] .btn-danger:hover:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-danger:focus:not(:disabled):not(.disabled) {
  background-color: #ff6660; border-color: #ff6660; color: #fff;
}
[data-theme="dark"] .btn-danger:active:not(:disabled):not(.disabled) {
  background-color: #e5484d !important; border-color: #e5484d; color: #fff;
}
[data-theme="dark"] .btn-warning {
  background-color: #d29922; border-color: #d29922; color: #0b1220;
}
[data-theme="dark"] .btn-warning:hover:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-warning:focus:not(:disabled):not(.disabled) {
  background-color: #e0a92e; border-color: #e0a92e; color: #0b1220;
}
[data-theme="dark"] .btn-warning:active:not(:disabled):not(.disabled) {
  background-color: #b8831a !important; border-color: #b8831a; color: #0b1220;
}
[data-theme="dark"] .btn-outline-danger { color: #f85149; border-color: #f85149; }
[data-theme="dark"] .btn-outline-danger:hover:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-outline-danger:focus:not(:disabled):not(.disabled),
[data-theme="dark"] .btn-outline-danger:active:not(:disabled):not(.disabled) {
  background-color: #f85149 !important; border-color: #f85149; color: #fff !important;
}

/* ============================================================
   BRAND SWEEP — dark-mode readability + SweetAlert2 (2026-07-12).
   The teal->brand-blue retirement itself was done at SOURCE (style.css,
   app.css, table.css, portfolio-utilities.css: #01a9ac->#1f56e6,
   #01dbdf->#2f6bff, #016d6f->#1a45b8). Below are the dark-only fixes a
   source edit can't cleanly express, plus the SweetAlert2 confirm button.
   ============================================================ */

/* Card-header DESCRIPTION text. style.css forces
   `.card .card-header span/pre { color:#804600 }` (dark amber) — fine on a
   light card, nearly invisible on the dark card surface. Retint to muted
   text in DARK only; light keeps the amber. */
[data-theme="dark"] .card .card-header span,
[data-theme="dark"] .card .card-header pre {
  color: var(--text-secondary);
}
/* Same brown as a utility class (used on the Trade form) — lift to a
   readable amber in dark. */
[data-theme="dark"] .color-read-brown {
  color: #d29922;
}

/* SweetAlert2 confirm button — match the brand blue (swal2 ships its own
   default colour; app.css themes the popup but never the confirm button). */
.swal2-styled.swal2-confirm {
  background-color: #1f56e6 !important;
  border-radius: 6px;
}
.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-confirm:focus {
  background-color: #1a45b8 !important;
}
.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(31, 86, 230, .40) !important;
}
[data-theme="dark"] .swal2-styled.swal2-confirm {
  background-color: #58a6ff !important;
  color: #0b1220 !important;
}
[data-theme="dark"] .swal2-styled.swal2-confirm:hover,
[data-theme="dark"] .swal2-styled.swal2-confirm:focus {
  background-color: #388bfd !important;
}
[data-theme="dark"] .swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(88, 166, 255, .40) !important;
}

/* ============================================================
   SCREEN HELP — the shared fragments/common/help.html panel
   (rendered on 9 screens). Modernized 2026-07-13: retired the
   full-width green "Screen Help!!!" button + green card + teal
   (bondi-blue) headings for a quiet, on-brand inline panel.
   Behavior is unchanged (still Bootstrap data-toggle=collapse) —
   pure restyle + a small markup tidy in the fragment. Every teal
   override here is SCOPED to .screen-help, so the global
   .color-bondi-blue / .contrast-green classes (used elsewhere)
   are untouched.
   ============================================================ */
.screen-help {
  margin-bottom: 1rem;
}
.screen-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.screen-help-title h5 { font-size: 15px; }
.screen-help-title small { color: var(--text-secondary, #5b6472); }

/* Trigger pill. It is a .btn, so it must out-specify the generic
   button overlay earlier in this file — hence the .screen-help scope
   and the :not() guards on the hover rule. */
.screen-help .screen-help-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  background-color: transparent;
}
.screen-help .screen-help-toggle .feather { font-size: 15px; line-height: 1; }
.screen-help .screen-help-toggle .sh-chev {
  font-size: 14px;
  transition: transform .18s ease;
  opacity: .75;
}
/* chevron flips when the panel is open (Bootstrap drops .collapsed) */
.screen-help .screen-help-toggle:not(.collapsed) .sh-chev {
  transform: rotate(180deg);
}

/* panel shell + section headings + list markers (theme-agnostic) */
.screen-help-panel {
  margin-top: 12px;
  border-radius: 8px;
}
.screen-help .sub-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.screen-help-panel ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.screen-help-panel ul li { margin-bottom: 9px; }

/* --- light --- */
html:not([data-theme="dark"]) .screen-help .screen-help-toggle {
  color: #1f56e6;
  border: 1px solid rgba(20, 30, 50, .14);
}
html:not([data-theme="dark"]) .screen-help .screen-help-toggle:hover:not(:disabled):not(.disabled),
html:not([data-theme="dark"]) .screen-help .screen-help-toggle:not(.collapsed) {
  background-color: rgba(31, 86, 230, .08);
  border-color: #1f56e6;
  box-shadow: none;
  transform: none;
}
html:not([data-theme="dark"]) .screen-help-panel {
  background-color: #ffffff;
  border: 1px solid rgba(20, 30, 50, .12);
  border-left: 3px solid #1f56e6;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .05);
}
html:not([data-theme="dark"]) .screen-help .color-bondi-blue { color: #1f56e6; }

/* --- dark --- */
[data-theme="dark"] .screen-help .screen-help-toggle {
  color: #58a6ff;
  border: 1px solid var(--border-subtle);
}
[data-theme="dark"] .screen-help .screen-help-toggle:hover:not(:disabled):not(.disabled),
[data-theme="dark"] .screen-help .screen-help-toggle:not(.collapsed) {
  background-color: rgba(88, 166, 255, .12);
  border-color: #58a6ff;
  box-shadow: none;
  transform: none;
}
[data-theme="dark"] .screen-help-panel {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid #58a6ff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .screen-help .color-bondi-blue { color: #58a6ff; }

/* ============================================================
   BILLING / LEDGER — merged "Billing" tab (Balance + Plan +
   Payment). Modernized 2026-07-13: retires the admin-template
   bg-c-* gradient stat tiles and the grey-gradient Plan banner
   for clean, theme-aware, brand-blue surfaces. Scoped to
   .billing-balance / .billing-plan / .billing-sec-label so
   nothing else on the site is affected. Light hex is gated with
   html:not([data-theme="dark"]); dark uses the theme tokens.
   ============================================================ */

/* --- section eyebrow --- */
.billing-sec-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; margin: 26px 0 12px;
}
.billing-sec-label:first-child { margin-top: 8px; }
html:not([data-theme="dark"]) .billing-sec-label { color: #818b99; }
[data-theme="dark"] .billing-sec-label { color: var(--text-secondary); }

/* --- Balance stat cards --- */
.billing-balance { margin-bottom: 0; }
.billing-balance > [class*="col-"] { margin-bottom: 20px; }
.bstat {
  height: 100%;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 10px;
}
.bstat__chip {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; line-height: 1;
}
.bstat__chip .icon-rupee { font-size: 18px; }
.bstat__text { display: flex; flex-direction: column; min-width: 0; }
.bstat__label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bstat__value {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
/* light */
html:not([data-theme="dark"]) .bstat {
  background-color: #ffffff; border: 1px solid rgba(20, 30, 50, .12);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .05);
}
html:not([data-theme="dark"]) .bstat__label { color: #5b6472; }
html:not([data-theme="dark"]) .bstat__value { color: #1f2733; }
html:not([data-theme="dark"]) .bstat--pos .bstat__chip { color: #16a34a; background: rgba(22, 163, 74, .10); }
html:not([data-theme="dark"]) .bstat--pending .bstat__chip { color: #b9820b; background: rgba(214, 151, 15, .12); }
html:not([data-theme="dark"]) .bstat--brand .bstat__chip { color: #1f56e6; background: rgba(31, 86, 230, .08); }
/* dark */
[data-theme="dark"] .bstat {
  background-color: var(--bg-card); border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .bstat__label { color: var(--text-secondary); }
[data-theme="dark"] .bstat__value { color: var(--text-primary); }
[data-theme="dark"] .bstat--pos .bstat__chip { color: #3fb950; background: rgba(63, 185, 80, .14); }
[data-theme="dark"] .bstat--pending .bstat__chip { color: #e3b341; background: rgba(227, 179, 65, .14); }
[data-theme="dark"] .bstat--brand .bstat__chip { color: #58a6ff; background: rgba(88, 166, 255, .14); }

/* --- Plan summary card --- */
.billing-plan { margin-bottom: 4px; }
.bp-plan {
  display: grid; grid-template-columns: 1fr 1.3fr; border-radius: 10px; overflow: hidden;
}
.bp-left { padding: 16px 18px; }
.bp-right { padding: 16px 18px; }
.bp-kicker { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.bp-name { font-size: 22px; font-weight: 700; margin: 2px 0 11px; letter-spacing: -.01em; }
.bp-mini { display: flex; gap: 22px; }
.bp-mini .m { font-size: 12px; }
.bp-mini .m b { display: block; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bp-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.bp-to { font-size: 12.5px; }
.bp-nx { font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px; text-transform: uppercase; }
.bp-track { height: 9px; border-radius: 999px; overflow: hidden; }
.bp-track > span { display: block; height: 100%; border-radius: 999px; }
.bp-row2 { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 7px; }
.bp-nxt { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12px; margin-top: 13px; padding-top: 12px; }
.bp-nxt b { font-weight: 700; font-variant-numeric: tabular-nums; }
.bp-topnote { display: flex; align-items: center; gap: 13px; }
.bp-topnote i { font-size: 24px; }
.bp-topnote strong { display: block; font-size: 14px; }
.bp-topnote span { font-size: 12.5px; }
/* light */
html:not([data-theme="dark"]) .bp-plan {
  background-color: #ffffff; border: 1px solid rgba(20, 30, 50, .12);
  border-left: 3px solid #1f56e6;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .05);
}
html:not([data-theme="dark"]) .bp-left { border-right: 1px solid rgba(20, 30, 50, .07); }
html:not([data-theme="dark"]) .bp-kicker { color: #818b99; }
html:not([data-theme="dark"]) .bp-name { color: #1f56e6; }
html:not([data-theme="dark"]) .bp-mini .m,
html:not([data-theme="dark"]) .bp-to,
html:not([data-theme="dark"]) .bp-row2,
html:not([data-theme="dark"]) .bp-nxt { color: #5b6472; }
html:not([data-theme="dark"]) .bp-mini .m b,
html:not([data-theme="dark"]) .bp-to b,
html:not([data-theme="dark"]) .bp-row2 b,
html:not([data-theme="dark"]) .bp-nxt b,
html:not([data-theme="dark"]) .bp-topnote strong { color: #1f2733; }
html:not([data-theme="dark"]) .bp-nx { color: #b9820b; background: rgba(214, 151, 15, .12); }
html:not([data-theme="dark"]) .bp-track { background: rgba(20, 30, 50, .10); }
html:not([data-theme="dark"]) .bp-track > span { background: linear-gradient(90deg, #1f56e6, #4f82ff); }
html:not([data-theme="dark"]) .bp-nxt { border-top: 1px solid rgba(20, 30, 50, .07); }
html:not([data-theme="dark"]) .bp-topnote i { color: #16a34a; }
html:not([data-theme="dark"]) .bp-topnote span { color: #5b6472; }
/* dark */
[data-theme="dark"] .bp-plan {
  background-color: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid #58a6ff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .bp-left { border-right: 1px solid var(--border-subtle); }
[data-theme="dark"] .bp-kicker { color: var(--text-secondary); }
[data-theme="dark"] .bp-name { color: #58a6ff; }
[data-theme="dark"] .bp-mini .m,
[data-theme="dark"] .bp-to,
[data-theme="dark"] .bp-row2,
[data-theme="dark"] .bp-nxt { color: var(--text-secondary); }
[data-theme="dark"] .bp-mini .m b,
[data-theme="dark"] .bp-to b,
[data-theme="dark"] .bp-row2 b,
[data-theme="dark"] .bp-nxt b,
[data-theme="dark"] .bp-topnote strong { color: var(--text-primary); }
[data-theme="dark"] .bp-nx { color: #e3b341; background: rgba(227, 179, 65, .14); }
[data-theme="dark"] .bp-track { background: rgba(255, 255, 255, .10); }
[data-theme="dark"] .bp-track > span { background: linear-gradient(90deg, #58a6ff, #8ab4ff); }
[data-theme="dark"] .bp-nxt { border-top: 1px solid var(--border-subtle); }
[data-theme="dark"] .bp-topnote i { color: #3fb950; }
[data-theme="dark"] .bp-topnote span { color: var(--text-secondary); }

/* stack the plan card on small screens */
@media (max-width: 767px) {
  .bp-plan { grid-template-columns: 1fr; }
  html:not([data-theme="dark"]) .bp-left { border-right: 0; border-bottom: 1px solid rgba(20, 30, 50, .07); }
  [data-theme="dark"] .bp-left { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
}

/* ============================================================================
   AutoTrader top navigation + page footer — from-scratch redesign 2026-07-13
   ----------------------------------------------------------------------------
   Replaces the dated CodedThemes "pcoded" horizontal nav + the teal-gradient
   footer with a self-contained brand-ink chrome band: deep navy in light,
   near-black in dark. Nav + footer stay a calm "terminal" band in BOTH themes;
   only the page canvas flips. Markup lives in fragments/layout.html, behaviour
   in assets/js/topnav.js. (Design reference: claude.ai/design handoff.)

   Everything is namespaced --atn-* / .atn-* so it cannot collide with theme.css,
   Bootstrap or the pcoded template. modernize.css is the LAST sheet loaded; where
   an old generic `footer` rule (theme-chrome.css / gradients.css) would otherwise
   out-specify us in dark mode, the footer rules below are scoped under
   `.atn-footer` / `footer.atn-footer` so they win cleanly in both themes.

   Brand blue is chrome/interactive only; green/amber/red stay DATA-only.
   ============================================================================ */

/* ---- tokens: light (default) --------------------------------------------- */
:root {
  --atn-surface: #ffffff;
  --atn-surface-2: #f6f8fc;
  --atn-surface-3: #eef2f8;
  --atn-hairline: rgba(18, 28, 48, .10);
  --atn-text: #1b2333;
  --atn-text-strong: #0c1424;
  --atn-text-muted: #5a6478;
  --atn-text-faint: #8a93a6;

  --atn-brand: #1f56e6;
  --atn-brand-tint: #2f6bff;
  --atn-brand-deep: #1a45b8;
  --atn-brand-wash: #eaf1ff;
  --atn-warn: #b9820b;
  --atn-warn-wash: rgba(185, 130, 11, .12);
  --atn-warn-line: rgba(185, 130, 11, .34);
  --atn-down: #dc2626;

  --atn-chrome: #0b1a37;
  --atn-chrome-line: rgba(150, 178, 255, .14);
  --atn-chrome-text: #c4d0ea;
  --atn-chrome-text-str: #ffffff;
  --atn-chrome-muted: #8494b6;
  --atn-chrome-hover: rgba(255, 255, 255, .07);
  --atn-chrome-accent: #7aa2ff;
  --atn-chrome-active-bg: rgba(122, 162, 255, .16);
  --atn-chrome-active-bar: #7aa2ff;

  --atn-sh-drop: 0 16px 40px rgba(9, 18, 38, .16), 0 2px 8px rgba(9, 18, 38, .10);
  --atn-r-1: 4px;
  --atn-r-2: 7px;
  --atn-r-3: 11px;
}

/* ---- tokens: dark -------------------------------------------------------- */
[data-theme="dark"] {
  --atn-surface: #0f141d;
  --atn-surface-2: #141b26;
  --atn-surface-3: #1a2230;
  --atn-hairline: rgba(255, 255, 255, .09);
  --atn-text: #e6ebf3;
  --atn-text-strong: #f7f9fc;
  --atn-text-muted: #93a0b4;
  --atn-text-faint: #667085;

  --atn-brand: #58a6ff;
  --atn-brand-tint: #8ab4ff;
  --atn-brand-deep: #1f56e6;
  --atn-brand-wash: rgba(88, 166, 255, .14);
  --atn-warn: #e3b341;
  --atn-warn-wash: rgba(227, 179, 65, .15);
  --atn-warn-line: rgba(227, 179, 65, .38);
  --atn-down: #f85149;

  --atn-chrome: #0a0e15;
  --atn-chrome-line: rgba(255, 255, 255, .08);
  --atn-chrome-text: #c2ccdc;
  --atn-chrome-text-str: #ffffff;
  --atn-chrome-muted: #7c889c;
  --atn-chrome-hover: rgba(255, 255, 255, .06);
  --atn-chrome-accent: #58a6ff;
  --atn-chrome-active-bg: rgba(88, 166, 255, .15);
  --atn-chrome-active-bar: #58a6ff;

  --atn-sh-drop: 0 16px 44px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .45);
}

/* Neutralise the vestigial 56px top-margin the pcoded template reserved for its
   (now-removed) mobile header — the sticky .atn-nav supplies its own top band. */
#pcoded .pcoded-main-container { margin-top: 0 !important; }

/* ---- logo ---------------------------------------------------------------- */
.atn-logo { display: inline-flex; align-items: center; gap: 10px; user-select: none; text-decoration: none; }
.atn-logo:hover { text-decoration: none; }
.atn-logo__tile {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--atn-brand-tint), var(--atn-brand));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .25);
}
.atn-logo__tile svg { display: block; }
.atn-logo__word { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.atn-logo__word span { font-weight: 400; opacity: .62; }
.atn-nav .atn-logo__word { color: var(--atn-chrome-text-str); }
.atn-logo__tag {
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  padding: 2px 5px; border-radius: var(--atn-r-1); margin-left: 1px;
  border: 1px solid currentColor; line-height: 1; align-self: center;
  color: var(--atn-chrome-accent);
}

/* ---- top nav ------------------------------------------------------------- */
.atn-nav {
  position: sticky; top: 0; z-index: 1030;
  height: 54px; background: var(--atn-chrome);
  border-bottom: 1px solid var(--atn-chrome-line);
  display: flex; align-items: center; padding: 0 16px; gap: 4px;
}
.atn-nav__brand { display: flex; align-items: center; padding-right: 12px; margin-right: 6px; }
.atn-nav__menu { display: flex; align-items: center; gap: 2px; height: 100%; }

/* public (logged-out) direct link — same look as a top item, no dropdown/caret */
.atn-navlink {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 11px; border-radius: var(--atn-r-2);
  color: var(--atn-chrome-text); font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: background .13s ease, color .13s ease;
}
.atn-navlink svg { width: 16px; height: 16px; opacity: .82; }
.atn-navlink:hover { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); text-decoration: none; }
.atn-navlink:hover svg { opacity: 1; }

.atn-item { position: relative; height: 100%; display: flex; align-items: center; }
.atn-item__btn {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; color: var(--atn-chrome-text);
  height: 38px; padding: 0 11px; border-radius: var(--atn-r-2);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  position: relative; white-space: nowrap;
  transition: background .13s ease, color .13s ease;
}
.atn-item__btn svg { width: 16px; height: 16px; opacity: .82; }
.atn-item__btn .atn-caret { width: 11px; height: 11px; opacity: .55; margin-left: -2px; transition: transform .16s ease; }
.atn-item__btn:hover { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); }
.atn-item__btn:hover svg { opacity: 1; }
.atn-item__btn:focus-visible { outline: 2px solid var(--atn-chrome-accent); outline-offset: 1px; }

.atn-item.is-open > .atn-item__btn { background: var(--atn-chrome-active-bg); color: var(--atn-chrome-text-str); }
.atn-item.is-open > .atn-item__btn .atn-caret { transform: rotate(180deg); }
.atn-item.is-active > .atn-item__btn { color: var(--atn-chrome-text-str); }
.atn-item.is-active > .atn-item__btn::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -8px;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--atn-chrome-active-bar);
}

/* Admin — subtle, distinct, not loud */
.atn-item--admin { margin-left: 6px; padding-left: 8px; }
.atn-item--admin::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 20px; width: 1px; background: var(--atn-chrome-line);
}
.atn-item--admin .atn-item__btn { color: var(--atn-chrome-muted); }
.atn-item--admin .atn-item__btn > svg:first-child { color: var(--atn-chrome-accent); opacity: .9; }
.atn-item--admin .atn-item__btn:hover { color: var(--atn-chrome-text-str); }

/* ---- dropdown panel (follows the content theme) -------------------------- */
.atn-drop {
  position: absolute; top: calc(100% + 7px); left: 0; min-width: 224px;
  background: var(--atn-surface); border: 1px solid var(--atn-hairline);
  border-radius: var(--atn-r-3); box-shadow: var(--atn-sh-drop); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.atn-item.is-open > .atn-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.atn-drop--right { left: auto; right: 0; }
.atn-drop--wide { min-width: 250px; }
.atn-drop__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--atn-text-faint); padding: 8px 10px 5px;
}
.atn-dropitem {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--atn-r-2);
  color: var(--atn-text); font-size: 13.5px; font-weight: 500; text-decoration: none;
  cursor: pointer; white-space: nowrap; position: relative;
  transition: background .1s ease, color .1s ease;
}
.atn-dropitem:hover { background: var(--atn-brand-wash); color: var(--atn-brand); text-decoration: none; }
.atn-dropitem svg { width: 15px; height: 15px; color: var(--atn-text-faint); flex: none; }
.atn-dropitem:hover svg { color: var(--atn-brand); }
.atn-dropitem.is-current { color: var(--atn-brand); font-weight: 600; }
.atn-dropitem.is-current svg { color: var(--atn-brand); }
.atn-dropitem__txt { flex: 1; }
.atn-drop__sep { height: 1px; background: var(--atn-hairline); margin: 5px 8px; }
.atn-dropitem--danger:hover { background: rgba(220, 38, 38, .08); color: var(--atn-down); }
.atn-dropitem--danger:hover svg { color: var(--atn-down); }

/* ---- badges (one style; three restrained tones) -------------------------- */
.atn-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1.5px 5px; border-radius: var(--atn-r-1); line-height: 1.4; margin-left: auto;
}
.atn-badge--new { color: var(--atn-brand); background: var(--atn-brand-wash); box-shadow: inset 0 0 0 1px rgba(31, 86, 230, .18); }
.atn-badge--classic { color: var(--atn-text-muted); background: var(--atn-surface-3); box-shadow: inset 0 0 0 1px var(--atn-hairline); }
.atn-badge--imp { color: var(--atn-warn); background: var(--atn-warn-wash); box-shadow: inset 0 0 0 1px var(--atn-warn-line); }
[data-theme="dark"] .atn-badge--new { box-shadow: inset 0 0 0 1px rgba(88, 166, 255, .3); }

/* ---- right utility cluster ----------------------------------------------- */
.atn-nav__util { margin-left: auto; display: flex; align-items: center; gap: 4px; padding-left: 8px; }
.atn-util {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 36px; height: 36px; border-radius: var(--atn-r-2);
  display: grid; place-items: center; position: relative;
  color: var(--atn-chrome-text); transition: background .13s, color .13s;
}
.atn-util svg { width: 18px; height: 18px; }
.atn-util:hover { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); }
.atn-util:focus-visible { outline: 2px solid var(--atn-chrome-accent); outline-offset: 1px; }
.atn-util-sep { width: 1px; height: 22px; background: var(--atn-chrome-line); margin: 0 4px; }

/* theme toggle: show the sun in light, the moon in dark */
.atn-util .atn-i-moon { display: none; }
[data-theme="dark"] .atn-util .atn-i-sun { display: none; }
[data-theme="dark"] .atn-util .atn-i-moon { display: block; }

/* user chip */
.atn-userchip {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  height: 38px; padding: 0 8px 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--atn-chrome-text); transition: background .13s;
}
.atn-userchip:hover, .atn-item.is-open .atn-userchip { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); }
.atn-userchip:focus-visible { outline: 2px solid var(--atn-chrome-accent); outline-offset: 1px; }
.atn-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; text-transform: uppercase;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--atn-brand-tint), var(--atn-brand-deep));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.atn-userchip__name { font-size: 13px; font-weight: 600; line-height: 1; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atn-userchip .atn-caret { width: 11px; height: 11px; opacity: .55; }
.atn-userhead {
  padding: 10px 12px 8px; display: flex; gap: 11px; align-items: center;
  border-bottom: 1px solid var(--atn-hairline); margin: -6px -6px 6px; border-radius: var(--atn-r-3) var(--atn-r-3) 0 0;
  background: var(--atn-surface-2);
}
.atn-userhead .atn-avatar { width: 34px; height: 34px; font-size: 13px; }
.atn-userhead__name { font-size: 13.5px; font-weight: 700; color: var(--atn-text-strong); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atn-userhead__sub { font-size: 11.5px; color: var(--atn-text-muted); }

/* ---- mobile hamburger + accordion (<=1200px) ----------------------------- */
.atn-ham { display: none; }
.atn-mobile { display: none; }
@media (max-width: 1200px) {
  .atn-nav__menu { display: none; }
  .atn-userchip__name { display: none; }
  .atn-ham { display: grid; }
  .atn-nav__util { gap: 2px; }
  .atn-mobile {
    display: block; position: fixed; inset: 54px 0 auto 0; z-index: 1025;
    background: var(--atn-surface); border-bottom: 1px solid var(--atn-hairline);
    box-shadow: var(--atn-sh-drop); max-height: calc(100vh - 54px); overflow-y: auto;
    padding: 8px; transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .16s, transform .16s, visibility .16s;
  }
  .atn-mobile.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .atn-msec { border-bottom: 1px solid var(--atn-hairline); }
  .atn-msec:last-child { border-bottom: 0; }
  .atn-msec__btn {
    width: 100%; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 10px; color: var(--atn-text); font-size: 14.5px; font-weight: 600;
  }
  .atn-msec__lab { display: inline-flex; align-items: center; gap: 11px; }
  .atn-msec__lab svg { width: 17px; height: 17px; color: var(--atn-text-muted); }
  .atn-msec__btn .atn-chev { width: 15px; height: 15px; color: var(--atn-text-faint); transition: transform .16s ease; }
  .atn-msec.is-open .atn-msec__btn { color: var(--atn-brand); }
  .atn-msec.is-open .atn-msec__btn .atn-chev { transform: rotate(180deg); color: var(--atn-brand); }
  .atn-msec.is-open .atn-msec__lab svg { color: var(--atn-brand); }
  .atn-msec__body { display: none; padding: 0 6px 8px; }
  .atn-msec.is-open .atn-msec__body { display: block; }
  .atn-msec__body .atn-dropitem { font-size: 14px; padding: 10px; }
}
@media (max-width: 640px) {
  .atn-logo__tag { display: none; }
}

/* ---- footer (main "Stocks Developer" skin; resellers keep their own) ------
   Scoped under .atn-footer / footer.atn-footer so it beats the generic
   `[data-theme="dark"] footer` / `footer a` rules (theme-chrome, gradients)
   by specificity + load order in BOTH themes — fixes the old dark-mode
   invisible-link bug and the light-mode neon-green links. */
footer.atn-footer {
  background: var(--atn-chrome);
  border-top: 1px solid var(--atn-chrome-line);
  color: var(--atn-chrome-text);
}
.atn-footer__wrap {
  max-width: 1120px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.atn-footer .atn-logo__word { color: var(--atn-chrome-text-str); }
.atn-footer__logo { display: flex; flex-direction: column; gap: 4px; }
.atn-footer__tag { font-size: 11.5px; color: var(--atn-chrome-muted); }
.atn-footer__contacts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.atn-footer .atn-fc {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: var(--atn-r-2);
  color: var(--atn-chrome-text); font-size: 13px; font-weight: 500; text-decoration: none; opacity: 1;
  transition: background .12s, color .12s;
}
.atn-footer .atn-fc svg { width: 15px; height: 15px; color: var(--atn-chrome-accent); flex: none; }
.atn-footer .atn-fc small { color: var(--atn-chrome-muted); font-weight: 600; margin-right: -3px; }
.atn-footer .atn-fc:hover { background: var(--atn-chrome-hover); color: var(--atn-chrome-text-str); opacity: 1; text-decoration: none; }
.atn-footer .atn-fc:hover svg { color: var(--atn-chrome-text-str); }
.atn-footer-sep { width: 1px; height: 18px; background: var(--atn-chrome-line); }
@media (max-width: 640px) {
  .atn-footer__wrap { flex-direction: column; align-items: flex-start; }
  .atn-footer__contacts { gap: 2px; }
  .atn-footer-sep { display: none; }
}

/* ---- scrim (click-away that closes open menus / the mobile panel) -------- */
.atn-scrim { position: fixed; inset: 0; z-index: 1020; display: none; }
.atn-scrim.is-on { display: block; }