/* Jimco design system: tokens + shared components. No inline styles anywhere (CSP
   style-src 'self'); x-cloak lives here.

   Brand source: the public website www.jimcosales.com (colours measured from its CSS, logo and
   favicon downloaded with the owner's approval, jimco/static/brand/). Its commercial Interstate
   font is NOT used; Overpass (SIL OFL, same Highway Gothic lineage) is self-hosted by
   css/fonts.css, which defines --font-sans.

   Rules of this file:
   - Every colour is a token in the first :root block below. Component rules (here,
     estimating.css, account.css) only use var(--token): tests/unit/test_design_tokens.py
     fails on a colour literal outside :root and checks the WCAG AA contrast of every
     text/background pair the components use (4.5:1 normal text, 3:1 large text and UI parts).
   - The website's body grey #778580 is only 3.85:1 on white: it is --jimco-grey /
     --text-decorative and is never a text colour. Body and small text use the darker variants
     of the same grey-green hue (--text, --text-muted); typed values and data (inputs, grids,
     tables, totals) use the near-black --text-data of the same hue.
   - One fill blue, as on the website: every solid bar, the current tab, primary buttons and
     the brand rules are #175281 (--jimco-blue, the website's footer bar). The navy #233F7A is
     heading text only, as on the website.
   - docs/brand/BRAND.md lists these tokens; tests/unit/test_design_tokens.py checks that its
     table and this :root block agree.
   - Header and tab bar markup and their layout belong to css/nav.css (loaded after this file
     on every page); this file only defines their tokens. The footer bar's colours are below,
     its item layout is in nav.css. */

[x-cloak] { display: none !important; }

:root {
  /* ---- brand (www.jimcosales.com) ---- */
  --jimco-navy: #233f7a;        /* headings */
  --jimco-blue: #175281;        /* footer bar */
  --jimco-deep: #004175;        /* deep blue */
  --jimco-grey: #778580;        /* body text on the website: 3.85:1, large/decorative only */
  --jimco-black: #000000;       /* navigation text */
  --jimco-white: #ffffff;

  /* ---- text (grey-green hue of #778580, darkened to pass AA) ---- */
  --text: #4f5955;              /* 7.26:1 on white (AAA); body copy, labels */
  --text-muted: #5e6965;        /* 5.70:1 on white; help, meta, row numbers */
  --text-data: #26302c;         /* 13.6:1 on white; typed values, grid cells, tables, totals */
  --text-heading: var(--jimco-navy);
  --text-on-brand: var(--jimco-white);
  --text-link: var(--jimco-blue);
  --text-link-hover: var(--jimco-deep);
  --text-decorative: var(--jimco-grey);

  /* ---- surfaces (white page, navy-tinted neutrals) ---- */
  --surface: var(--jimco-white);
  --surface-alt: #f3f6fa;       /* zebra rows, panels */
  --surface-sunken: #eef2f7;    /* read-only cells, code */
  --surface-selected: #e4ebf5;  /* picked row, hover */
  --surface-editing: #fffbe6;   /* the cell being edited */
  --surface-flash: #fff3c4;     /* a row the server just changed */

  /* ---- lines ---- */
  --border: #c9d1dc;            /* decorative dividers (not a component boundary) */
  --border-subtle: #dde3eb;     /* grid cell rules */
  --border-field: #6b7788;      /* input boundaries: 4.5:1 on white (WCAG 1.4.11 needs 3:1) */
  --border-strong: var(--text-data);

  /* ---- brand bars and rules: footer, table and grid header rows, the tab bar rule, the top
     edge of cards, panels and dialogs (all the website's one fill blue) ---- */
  --bar-bg: var(--jimco-blue);
  --bar-fg: var(--text-on-brand);
  --bar-border: var(--jimco-deep);
  --rule-brand: var(--jimco-blue);

  /* ---- header and main navigation (nav.css uses these) ---- */
  --header-bg: var(--surface);
  --header-border: var(--border);
  --nav-fg: var(--jimco-black);
  --tabbar-bg: var(--surface);
  --tabbar-border: var(--rule-brand);
  --tab-fg: var(--jimco-black);
  --tab-hover-bg: var(--surface-selected);
  --tab-active-bg: var(--jimco-blue);
  --tab-active-fg: var(--text-on-brand);

  /* ---- buttons ---- */
  --btn-primary-bg: var(--jimco-blue);
  --btn-primary-bg-hover: var(--jimco-deep);
  --btn-primary-fg: var(--text-on-brand);
  --btn-secondary-bg: var(--surface);
  --btn-secondary-bg-hover: var(--surface-selected);
  --btn-secondary-fg: var(--jimco-blue);
  --btn-secondary-border: var(--jimco-blue);
  --btn-danger-bg: var(--danger);
  --btn-danger-bg-hover: #86101a;
  --btn-danger-fg: var(--text-on-brand);
  --btn-disabled-bg: #eceff3;
  --btn-disabled-fg: #5a6661;
  --btn-disabled-border: var(--border);

  /* ---- status (harmonised with the navy: deep, slightly cool) ---- */
  --success: #1b6e3a;
  --success-bg: #e8f4ec;
  --warning: #7a4d00;
  --warning-bg: #fff4db;
  --danger: #a4161a;
  --danger-bg: #fdecec;
  --info: var(--jimco-blue);
  --info-bg: var(--surface-selected);

  /* ---- focus: yellow ring outside, brand-blue ring inside ----
     Yellow alone is about 1.6:1 against white (WCAG 1.4.11 needs 3:1): the dark inner ring
     between the element and the yellow keeps the indicator visible on any background, and
     the yellow is what shows on the blue bars. */
  --focus: #ffbf47;
  --focus-inner: var(--jimco-blue);
  --focus-width: 3px;
  --focus-cell: var(--jimco-blue);   /* grid cell outline (inside the cell) */

  /* ---- elevation ---- */
  --shadow-popup: 0 0.25rem 1rem rgb(0 20 50 / 0.25);
  --shadow-menu: 0 0.2rem 0.6rem rgb(0 20 50 / 0.2);
  --backdrop: rgb(0 20 50 / 0.45);

  /* ---- typography ---- */
  --font-body: var(--font-sans, "Overpass", "Liberation Sans", Arial, Helvetica, sans-serif);
  --font-mono: ui-monospace, "Liberation Mono", Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --radius: 3px;

  /* ---- legacy names (audit.css and older rules) ---- */
  --fg: var(--text);
  --bg: var(--surface);
  --muted: var(--text-muted);
  --accent: var(--jimco-blue);

  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--surface);
}

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4 { color: var(--text-heading); line-height: var(--lh-tight); }
h1 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0.25rem 0 0.75rem; }
h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 1.25rem 0 0.5rem; }
h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 1rem 0 0.4rem; }
h4 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
strong, b { font-weight: var(--fw-bold); }
small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--text-decorative); margin: 1rem 0; }
/* Numbers line up in every table, totals panel and numeric input (Overpass has tnum). */
.num, td.num, th.num, input.num, dd { font-variant-numeric: tabular-nums; }
code, kbd, samp, pre { font-family: var(--font-mono); }

a { color: var(--text-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }

kbd {
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 0.1rem 0.25rem;
  border: 1px solid var(--border-field);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--text);
}

/* ---------------------------------------------------------------- focus */
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: var(--focus);
  color: var(--jimco-black);
  font-weight: var(--fw-semibold);
  z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* The header (logo, user menu) and the main navigation tab bar are styled only by css/nav.css,
   which base.html loads right after this file; their tokens are the --header-*, --nav-fg and
   --tab* ones above. */

/* ---------------------------------------------------------------- page */
main { flex: 1 0 auto; padding: 1rem; }
main:focus { outline: none; }

/* The website's footer: a flat #175281 bar with white text, no rule above it. */
.site-footer {
  padding: 0.8rem 1rem;
  background: var(--bar-bg);
  color: var(--bar-fg);
}
.site-footer a { color: var(--bar-fg); }
.site-footer a:hover { color: var(--bar-fg); }

/* ---------------------------------------------------------------- flash messages and notices */
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.message {
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
  border-radius: var(--radius);
  background: var(--info-bg);
  color: var(--text);
}
.message-success { border-left-color: var(--success); background: var(--success-bg); }
.message-warning { border-left-color: var(--warning); background: var(--warning-bg); }
.message-error { border-left-color: var(--danger); background: var(--danger-bg); }

.notice {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--rule-brand);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
}
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice-important { border-left-color: var(--danger); background: var(--danger-bg); }

/* ---------------------------------------------------------------- buttons
   Default (no class) = secondary: white, brand-blue text and border. .primary = brand blue,
   .danger = red. Zero-specificity base so component variants (.row-btn ...) override it. */
:where(button, .button) {
  font: inherit;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  text-decoration: none;
  cursor: pointer;
}
:where(button, .button):hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-fg); text-decoration: none; }
.secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); }
.primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }
.danger { background: var(--btn-danger-bg); color: var(--btn-danger-fg); border-color: var(--btn-danger-bg); }
.danger:hover:not(:disabled) { background: var(--btn-danger-bg-hover); border-color: var(--btn-danger-bg-hover); color: var(--btn-danger-fg); }
:where(button, .button):disabled,
:where(button, .button)[aria-disabled="true"] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-fg);
  border-color: var(--btn-disabled-border);
  cursor: not-allowed;
}
/* kbd hints inside buttons take the button's colours. */
:where(button, .button) kbd { background: transparent; color: inherit; border-color: currentColor; }

/* ---------------------------------------------------------------- form fields */
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"],
  [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"]), select, textarea) {
  font: inherit;
  color: var(--text-data);
  background: var(--surface);
  border: 1px solid var(--border-field);
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
  box-sizing: border-box;
  max-width: 100%;
}
:where(input, select, textarea):disabled,
:where(input, textarea)[readonly] { background: var(--surface-sunken); color: var(--text-muted); }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--jimco-blue); width: 1.05rem; height: 1.05rem; margin: 0; }
/* Browser default placeholder greys are close to 4.5:1; the token is AA on white. */
::placeholder { color: var(--text-muted); opacity: 1; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); }
legend { color: var(--text-heading); font-weight: var(--fw-semibold); }

/* Validation: the red boundary plus the message text (colour is never the only cue). */
[aria-invalid="true"] { border-color: var(--danger) !important; background: var(--danger-bg); }
.form-errors {
  color: var(--danger);
  background: var(--danger-bg);
  border-left: 4px solid var(--danger);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
}
.form-errors p { margin: 0.2rem 0; }
.field-errors, .errorlist { color: var(--danger); font-size: var(--fs-sm); }
.errorlist { list-style: none; margin: 0.2rem 0; padding: 0; }

.form-stack { display: grid; gap: 0.85rem; max-width: 28rem; }
.form-stack .field { display: grid; gap: 0.25rem; }
.form-stack label { font-weight: var(--fw-semibold); color: var(--text); }
.form-stack .help { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.form-stack ul.help { padding-left: 1.1rem; }
.form-stack button[type="submit"] { justify-self: start; }

/* ---------------------------------------------------------------- data tables
   Brand header row (white on #175281), zebra body. The editor grids have their own rules
   (estimating.css) because their cells are inputs. */
:where(.data-table, .plist-table, .audit-table) { border-collapse: collapse; width: 100%; }
:where(.data-table, .plist-table, .audit-table) thead th {
  background: var(--bar-bg);
  color: var(--bar-fg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--bar-border);
}
:where(.data-table, .plist-table, .audit-table) :is(th, td) { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); }
:where(.data-table, .plist-table, .audit-table) tbody :is(th, td) { color: var(--text-data); }
:where(.data-table, .plist-table, .audit-table) tbody tr:nth-child(even) { background: var(--surface-alt); }
:where(.data-table, .plist-table, .audit-table) tbody th { text-align: left; }
:where(.data-table, .plist-table, .audit-table) .num { text-align: right; }
:where(.data-table, .plist-table, .audit-table) caption:not(.vh) { text-align: left; font-weight: var(--fw-semibold); color: var(--text-heading); padding-bottom: 0.4rem; }
/* A wide table scrolls inside its own box (WCAG 1.4.10): the page never scrolls sideways. */
.table-scroll { max-width: 100%; overflow-x: auto; }

/* ---------------------------------------------------------------- idle-timeout dialog */
.idle-warning {
  position: fixed;
  inset: auto 1rem 1rem auto;
  max-width: 24rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--rule-brand);
  border-top-width: 6px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-popup);
  z-index: 200;
}
.idle-warning h2 { margin-top: 0; font-size: var(--fs-md); }
.idle-warning-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

/* Visually hidden, still read by screen readers. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- print
   Paper: black on white, no bars, no controls. */
@media print {
  :root, body { background: var(--surface); color: var(--jimco-black); }
  body { display: block; font-size: 10.5pt; }
  .skip-link, .site-nav, nav[aria-label="Main"], .site-signout, .idle-warning, .messages,
  button, .button, dialog { display: none !important; }
  main { padding: 0.5rem 0; }
  h1, h2, h3, h4 { color: var(--jimco-black); break-after: avoid; }
  a { color: inherit; text-decoration: none; }
  tr, .notice { break-inside: avoid; }
  .site-footer { background: none; color: var(--jimco-black); border-top: 1px solid var(--jimco-black); padding: 0.3rem 0; }
  .site-footer a { color: inherit; }
  :where(.data-table, .plist-table, .audit-table) thead th {
    background: none; color: var(--jimco-black); border-bottom: 2px solid var(--jimco-black);
  }
  :where(.data-table, .plist-table, .audit-table) tbody tr:nth-child(even) { background: none; }
}