/* StoreTally shared theme.
   Tokens are lifted verbatim from the browse page (Views/Browse/Index.cshtml),
   which remains the reference design system; this file maps them onto the
   Bootstrap 5.1 components the layout pages actually use.

   ONE theme, dark, and no switch. The site had a paper-and-ink light theme, a
   dark one, an OS-preference default and a persisted override - four code paths
   through every colour decision, and every new surface had to be checked in all
   of them. A census of two million rows is read as a dense table of figures, and
   that is what dark type on light paper is worst at and light-on-dark is best
   at; committing to it is what lets the accent, the ruled ground and the table
   rules be tuned once and stay tuned. */

:root {
  /* `color-scheme` is not decoration: it is what tells the browser to paint its
     OWN widgets dark - scrollbars, date pickers, select menus, form controls,
     spinners. Without it those stay light and sit on the page like holes, which
     is the giveaway of a site that painted itself dark rather than being dark. */
  color-scheme: dark;

  --ground:#12110F; --surface:#1A1815; --sunk:#232019; --line:#35302A;
  --ink:#F1ECE1; --ink-2:#BEB6A7; --muted:#877F71;
  --accent:#E8763F; --accent-soft:rgba(232,118,63,.14); --crit:#D97A6A;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  /* Square, deliberately. A census is a printed table of numbers, and rounded
     corners are the single detail that makes any layout read as app chrome
     rather than as a page of figures. Everything that used var(--r) now sits
     flush, and the rules do the separating instead. */
  --r:0px;
  /* The ruled ground - see body. */
  --rule:rgba(241,236,225,.045);
  /* Statuses + soft tints. */
  --warn:#D6B45E; --ok:#93B584;
  --crit-soft:rgba(217,122,106,.15); --warn-soft:rgba(214,180,94,.13);
  /* Zebra striping for Bootstrap tables. Light-on-dark - while the two themes
     coexisted this was only ever defined as ink-on-paper, so striped tables in
     dark mode were striped in a colour darker than their own background, i.e.
     not striped at all. */
  --stripe:rgba(241,236,225,.032);
}

/* ---------- base ---------- */
html { font-size: 15px; position: relative; min-height: 100%; }

/* Ruled paper. One hairline every 30px, pinned to the top of the viewport and
   scrolling with the document, so the page has the texture of a ledger sheet
   rather than the flat fill every dashboard has. It only ever shows through the
   gaps - surfaces are opaque - so it reads as grain, not as a grid to align to.
   Cheap: one repeating gradient, no image request, no element. */
body {
  background-color: var(--ground);
  background-image: repeating-linear-gradient(
    to bottom, var(--rule) 0 1px, transparent 1px 30px);
  color: var(--ink);
  font-family: var(--sans); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The masthead rule: a solid accent bar across the very top, the way a
   broadsheet or an annual report opens. Fixed rather than in flow so it is
   still there when you have scrolled into the middle of two million rows. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 3px;
  background: var(--accent); z-index: 2000;
}

/* Instrument Serif has one weight, so headings get their presence from SIZE and
   tight tracking instead of from bolding - which is how editorial display type
   actually works, and why faking a bold here would look wrong. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--display); font-weight: 400; letter-spacing: -.01em;
  line-height: 1.12;
}
h1, .h1 { letter-spacing: -.022em; }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent); text-decoration-thickness: 2px; }

/* ---------- chrome (navbar + footer) ---------- */
.navbar, .bg-white { background-color: var(--surface) !important; }
/* Two rules under the masthead, a heavy one over a hairline - the oldest
   typographic signal for "this is the top of the publication". */
.navbar {
  border-color: var(--line) !important; box-shadow: none;
  border-bottom: 2px solid var(--ink) !important;
  padding-top: .55rem; padding-bottom: .45rem;
}
.navbar-brand {
  font-family: var(--display); font-weight: 400; font-size: 26px;
  letter-spacing: -.02em; text-transform: none; color: var(--ink) !important;
}
/* Nav as a running head: small, letterspaced caps, underlined on approach
   rather than recoloured, so the row stays one texture. */
.navbar .nav-link, .navbar .text-dark {
  color: var(--ink-2) !important;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; padding-left: .7rem; padding-right: .7rem;
}
.navbar .nav-link:hover {
  color: var(--ink) !important;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.navbar-toggler { border-color: var(--line); }
.border-bottom, .border-top { border-color: var(--line) !important; }
.footer { color: var(--muted); }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border-color: var(--line); border-radius: var(--r); color: var(--ink); }
.shadow-sm { box-shadow: none !important; }
.border { border-color: var(--line) !important; }
.rounded { border-radius: var(--r) !important; }
.card.border-danger { border-color: var(--crit) !important; }
.card.border-warning { border-color: var(--warn) !important; }
.card.border-success { border-color: var(--ok) !important; }
.card.border-secondary { border-color: var(--line) !important; }

/* ---------- tables ---------- */
.table {
  color: var(--ink); border-color: var(--line);
  --bs-table-striped-bg: var(--stripe); --bs-table-striped-color: var(--ink);
  --bs-table-hover-bg: var(--accent-soft); --bs-table-hover-color: var(--ink);
}
.table > :not(caption) > * > * { border-bottom-color: var(--line); }
.table-light {
  --bs-table-bg: transparent; --bs-table-striped-bg: transparent;
  color: var(--ink-2); border-color: var(--ink);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
}
/* The rule under a column-header row is heavier than the ones between rows -
   the convention every printed table follows and no CSS framework ships. */
.table > thead > tr > * { border-bottom: 2px solid var(--ink) !important; }
.table tbody td, .table tbody th { font-variant-numeric: tabular-nums; }
.table-danger {
  --bs-table-bg: var(--crit-soft); --bs-table-striped-bg: var(--crit-soft);
  color: var(--ink); border-color: var(--line);
}
.table-warning {
  --bs-table-bg: var(--warn-soft); --bs-table-striped-bg: var(--warn-soft);
  color: var(--ink); border-color: var(--line);
}

/* ---------- buttons ---------- */
.btn { border-radius: 0; }
.btn-primary { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--accent); border-color: var(--accent); filter: brightness(.9);
}
.btn-outline-secondary { color: var(--ink-2); border-color: var(--line); }
.btn-outline-secondary:hover { background-color: var(--sunk); color: var(--ink); border-color: var(--line); }
.btn-link, .navbar .btn-link { color: var(--ink-2); text-decoration: none; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 2px var(--accent-soft); border-color: var(--accent);
}

/* ---------- forms (login / register / compare) ---------- */
.form-control, .form-select {
  background-color: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 0;
}
.form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--ink); }
.form-control::placeholder { color: var(--muted); }
.form-label, .form-floating > label { color: var(--muted); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--muted); }
.form-select {
  /* Bootstrap 5.1 embeds a near-black chevron; mid-gray works on both themes. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888595' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------- badges / alerts / status text ---------- */
.badge.bg-secondary { background-color: var(--muted) !important; }
.badge.bg-danger { background-color: var(--crit) !important; }
.badge.bg-warning { background-color: var(--warn) !important; color: #fff !important; }
.badge.bg-success { background-color: var(--ok) !important; }
.badge.bg-info { background-color: var(--accent) !important; color: #fff !important; }
.badge.bg-light { background-color: var(--surface) !important; color: var(--ink-2) !important; border-color: var(--line) !important; }
.alert-warning { background-color: var(--warn-soft); border-color: var(--line); color: var(--ink); }
.alert-danger { background-color: var(--crit-soft); border-color: var(--line); color: var(--ink); }

.text-muted { color: var(--muted) !important; }
.text-danger { color: var(--crit) !important; }
.text-warning { color: var(--warn) !important; }
.text-success { color: var(--ok) !important; }
.navbar .text-dark, .footer .text-dark { color: var(--ink) !important; }

/* ---------- access level (detail page) ----------
   Deliberately undramatic: one neutral rule and no warning colour. The level is
   a statement about capability, not a verdict, and colour would turn it into one
   - an ad blocker would sit in red beside a coupon extension for needing the
   same access to do opposite things. The words carry it. */
.accesslevel { border-left: 3px solid var(--line); padding: 6px 0 6px 12px; margin: 4px 0 14px; }
.accesslevel ul { margin: 4px 0 6px; padding-left: 18px; }