/* ============================================================
   ZAK DESIGN SYSTEM
   zak-theme.css

   One stylesheet for every ZAK tool: the registration panel, the Operations
   Console, the CRM. Drop it in, and components pick up the house look without
   being rewritten.

   Since 27-Oct-2026 the values are the Zak ONE UI kit's (docs/ZAK-ONE-UI.md,
   after The ZAK Identity System, Brand Guidelines v1.0): one accent, one ink,
   one paper. Burnt Orange #D9531F, Ink Black #141414 and Paper White #FFFFFF,
   with warm neutrals serving those three. Until then the panel wore the 2027
   World of Facades guidelines (cream, charcoal and Signal Red).

   Five rules the whole thing rests on.

   1. ORANGE IS AN ACCENT, NOT A FIELD. About a quarter of a layout at most.
      Burnt Orange (--brand) is for rules, focus rings, active markers and
      progress, never for text and never under text: white on it is 4.03:1.
   2. A FILL THAT CARRIES WORDS IS DEEP ORANGE. --accent is #C1471A with white
      Bold words on it (5.02:1), in both themes: buttons, the active menu row,
      a picked segment. Orange WORDS are --accent-text: #C1471A on light
      grounds (4.50:1 on the page), #F0834F on dark.
   3. RED IS DANGER ONLY. Error and destructive, nothing else.
   4. ABC NORMAL ONLY: 400 body, 500 labels, 700 names, buttons and emphasis,
      800 headings and big figures. Emphasis is Bold, never italic.
   5. FLAT. No gradients on buttons, tabs, bars or headers; a soft neutral
      shadow lifts a card.

   Dark mode is first class, in zak-colours.css under
   html[data-bs-theme="dark"]. The brand elements (kicker, rule, stat lockup,
   masthead) are in zak-ui.css.

   Everything is a custom property, so a theme is a list of values rather than
   a fork of this file.

   USING IT ALONGSIDE SOMETHING ELSE
   Every class here is prefixed z- apart from the tokens, so it cannot collide
   with Bootstrap, Tailwind or whatever the CRM already uses.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* The grounds. The page is Warm Chalk, cards Paper White with a 1px line and
     a soft shadow. paper2 is the kit's surface-2: fills, zebra rows, chips and
     hovers on a card. */
  --paper:  #f6f2ec;   /* Warm Chalk, the page */
  --paper2: #f6f2ec;   /* surface-2 */
  --card:   #ffffff;   /* Paper White */
  --card-edge: #e6e1db; /* a card's own edge: the kit's line */

  /* Ink for headings, names and figures; Graphite for body copy; muted for
     labels and meta (5.18:1 on a card, 4.65 on the page). */
  --ink:    #141414;   /* Ink Black */
  --body:   #3a3630;   /* Graphite, 12.0:1 on a card */
  --muted:  #736c62;

  /* The brand. --brand is Burnt Orange, for rules, rings and markers only;
     --brand-ink is the orange for words; --brand-2 the small orange on Ink. */
  --brand:     #d9531f;
  --brand-ink: #c1471a;
  --brand-2:   #f0834f;

  /* The accent: what you can act on and where you are. Fills use --accent with
     --on-accent on it, hovers --accent-strong, words --accent-text, a selected
     row or an open submenu --accent-soft. The -rgb pairs exist because Bootstrap
     composes rgba(var(--bs-primary-rgb), ...).
     The kit's soft orange #f9e5dd measures 4.13:1 under #c1471a, so the tint is
     brand at 8% on white, #fcf1ed (4.53:1). */
  --accent:          #c1471a;
  --accent-strong:   #a63c15;   /* white 6.41:1 */
  --accent-text:     #c1471a;
  --accent-soft:     #fcf1ed;
  --on-accent:       #ffffff;
  --accent-rgb:      193, 71, 26;
  --accent-text-rgb: 193, 71, 26;

  /* The meanings: danger, good, warn, and info (the status tones' blue). Each
     has a fill (rules, borders, large figures) and a text value measured as
     small text on the page and on a card. The kit's good #2f8f5b and warn
     #b56a00 are 3.62 and 3.75:1 as words on the page, so words take the
     status tones' green and amber. */
  --red:    #c0392b;   /* danger */
  --green:  #2f8f5b;   /* good */
  --amber:  #b56a00;   /* warn */
  --gold:   #b56a00;   /* the old fourth meaning, now warn's */
  --blue:   #1f5fb8;   /* info */

  --red-text:   #b42318;   /* 5.90:1 on the page */
  --green-text: #1b7a3d;   /* 4.83:1 */
  --amber-text: #8a5300;   /* 5.68:1 */
  --gold-text:  #8a5300;
  --blue-text:  #1f5fb8;   /* 5.56:1 */

  /* The status tones' soft fills (the phone app's pills). */
  --red-soft:   #fde8e6;
  --green-soft: #e3f3e8;
  --amber-soft: #fbefd9;
  --blue-soft:  #e4edfa;
  --gray-soft:  #efeae3;
  --gray-text:  #5e574e;

  --red-deep:  #9b1c13;   /* pressed and hover on a red control */
  --coral:     var(--brand-2);   /* the kicker on Ink and on photographs */
  --kicker:    var(--muted);     /* eyebrows are muted, as the kit says */

  /* rules. line separates sections and rows; line2 is the kit's quiet fill,
     for tracks, hovers and off switches. */
  --line:   #e6e1db;
  --line2:  #efeae3;

  /* the Ink surfaces: the sidebar, the top bar, mastheads */
  --bar:    #141414;
  --on-bar: #ffffff;
  --bar-body:  #f6f2ec;
  --bar-muted: #a7a094;   /* Ash, 7.1:1 on Ink */
  /* the meanings on an Ink surface, the same in both themes because Ink is: the
     status tones' lifted values (a danger word 8.07:1, its rule 4.94:1) */
  --ink-good:   #4bbe86;
  --ink-warn:   #d59433;
  --ink-danger: #e0574a;
  --ink-danger-text: #ff8a80;
  /* the words on a danger fill: white on #c0392b (5.44:1); Ink in dark */
  --on-red: #ffffff;

  /* type: ABC Normal and nothing else (the kit names no other face) */
  --font: 'ABC Normal', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --size-xs: 11px;    /* meta, eyebrows */
  --size-sm: 12.5px;  /* table cells, secondary text */
  --size-md: 13.5px;  /* body */
  --size-lg: 15px;    /* card and section headings (kit: 14-16) */
  --size-xl: 22px;    /* page titles */
  --size-2xl: 30px;   /* masthead headline */
  --size-num: 22px;   /* stat figures, at 800 */
  --size-th: 10px;    /* table headers, capitals */
  --lh: 1.5;
  --track: .08em;     /* letterspacing for capitals */
  --track-kicker: .08em;
  --track-th: .05em;  /* table headers */
  --track-name: .13em; /* the product name in the bars */

  /* weights, named for their jobs */
  --w-body: 400;
  --w-label: 500;
  --w-strong: 700;
  --w-head: 800;
  --w-num: 800;

  /* shape (the kit, web): cards 16, stat tiles 14, buttons 10, inputs 9, pills
     round. --r is a button's corner and the default, --r-sm a small action's
     or a tab's, --r-lg a card's, a dialog's or a sheet's. Delegate pages keep
     their own scale (DesignProfile::RADIUS), which no longer follows these. */
  --r:      10px;
  --r-sm:   8px;
  --r-lg:   16px;
  --r-pill: 99px;
  --r-card:  16px;
  --r-tile:  14px;
  --r-btn:   10px;
  --r-input: 9px;

  /* spacing, on a 4px step */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 30px;

  /* one shadow: the kit's card elevation */
  --shadow: 0 6px 22px rgba(20, 20, 20, .08);

  /* the focus ring: 2.5px Burnt Orange, 2px off the edge */
  --focus-ring: 2.5px solid var(--brand);

  /* motion. Short, because a tool people use all day should not animate. */
  --fast: .15s;
  --slow: .35s;
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
.z-root, body.z-root {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: var(--size-md)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased;
}
.z-root *, .z-root *::before, .z-root *::after { box-sizing: border-box; }

.z-h1 { font-size: var(--size-xl); font-weight: var(--w-head); letter-spacing: -.01em; line-height: 1.3; margin: 0 0 var(--s2); color: var(--ink); }
.z-h2 { font-size: var(--size-lg); font-weight: var(--w-strong); line-height: 1.3; margin: 0 0 var(--s2); color: var(--ink); }
.z-label {
  font-size: var(--size-xs); font-weight: var(--w-label); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--muted);
}
.z-muted { color: var(--muted); }
.z-small { font-size: var(--size-sm); }
.z-mono  { font-family: var(--font-mono); }

.z-link { color: var(--accent-text); text-underline-offset: 3px; text-decoration: none; }
.z-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   3. THE BAND
   The dark strip across the top. The only dark surface in the system.
   ------------------------------------------------------------ */
.z-bar {
  background: var(--bar); color: var(--on-bar);
  padding: var(--s3) var(--s5);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}
.z-bar b { font-size: var(--size-lg); font-weight: var(--w-head); }
.z-bar .z-label { color: var(--bar-muted); }

/* ------------------------------------------------------------
   4. SURFACES
   ------------------------------------------------------------ */
.z-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s4);
  margin-bottom: var(--s4);
  box-shadow: var(--shadow);
}
.z-card--flat { background: var(--paper2); box-shadow: none; }
.z-card--quiet { border-style: dashed; background: transparent; box-shadow: none; }
.z-card__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3);
}

/* ------------------------------------------------------------
   5. THE BIG NUMBERS
   A number on its own is a quiz. Every one carries a label, and the house
   style is that it also carries a sentence saying what it means.
   ------------------------------------------------------------ */
.z-band { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.z-stat { flex: 1 1 130px; min-width: 120px; }
.z-stat b {
  display: block; font-size: var(--size-num); font-weight: var(--w-num); color: var(--ink);
  line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.z-stat span { display: block; font-size: var(--size-th); font-weight: var(--w-strong); letter-spacing: var(--track-th);
  text-transform: uppercase; color: var(--muted); margin-top: var(--s1); }
.z-stat b.is-zero { color: var(--muted); }
/* a number this size counts as large text, so the brand colours are fine here */
.z-stat b.is-warn { color: var(--amber); }
.z-stat b.is-bad  { color: var(--red); }
.z-stat b.is-good { color: var(--green); }

/* ------------------------------------------------------------
   6. PILLS, TAGS, CHIPS
   ------------------------------------------------------------ */
.z-pill {
  display: inline-block; font-size: 10px; font-weight: var(--w-head); letter-spacing: 0;
  border: 0; border-radius: var(--r-pill); padding: 3px 10px; background: var(--gray-soft);
  color: var(--gray-text); white-space: nowrap;
}
.z-pill--ink   { background: var(--ink);   color: var(--on-bar); }
.z-pill--red   { background: var(--red-soft);   color: var(--red-text); }
.z-pill--green { background: var(--green-soft); color: var(--green-text); }
.z-pill--amber { background: var(--amber-soft); color: var(--amber-text); }
.z-tag {
  display: inline-block; font-size: 10px; border: 1px solid var(--line2);
  border-radius: var(--r-sm); padding: 1px 5px; color: var(--muted);
}

/* ------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------ */
.z-btn {
  font: var(--w-strong) 13px/1 var(--font);
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 10px 15px; cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.z-btn:hover { border-color: var(--muted); color: var(--ink); }
.z-btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.z-btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.z-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* Destructive is outlined, never filled. A red block invites the click it is
   warning about. */
.z-btn--danger { color: var(--red-text); border-color: var(--red); background: transparent; }
.z-btn--danger:hover { background: var(--red-soft); }
.z-btn--tiny { font-size: 11px; padding: 6px 11px; border-radius: var(--r-sm); }
.z-btn[disabled], .z-btn:disabled { opacity: .5; cursor: not-allowed; }
.z-btn[disabled]:hover { border-color: var(--line); }

/* ------------------------------------------------------------
   8. FORMS
   ------------------------------------------------------------ */
.z-field { display: block; margin-bottom: var(--s3); }
.z-field > .z-label { margin-bottom: var(--s1); display: block; }
.z-input, .z-select, .z-textarea {
  font: var(--size-md)/1.5 var(--font); color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: 9px 11px; width: 100%;
}
.z-textarea { min-height: 90px; resize: vertical; }
.z-input:focus, .z-select:focus, .z-textarea:focus {
  outline: var(--focus-ring); outline-offset: 2px; border-color: var(--brand);
}
.z-input--bad { border-color: var(--red); }
.z-hint { font-size: var(--size-sm); color: var(--muted); margin-top: var(--s1); }
.z-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; }

/* ------------------------------------------------------------
   9. TABLES
   ------------------------------------------------------------ */
.z-table { width: 100%; border-collapse: collapse; font-size: var(--size-sm); }
.z-table th {
  text-align: left; font-size: var(--size-th); letter-spacing: var(--track-th);
  text-transform: uppercase; color: var(--muted); font-weight: var(--w-strong);
  padding: 9px 10px; border-bottom: 1px solid var(--line);
}
.z-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.z-table tbody tr:hover { background: var(--paper2); }
.z-table tr:last-child td { border-bottom: 0; }
.z-table td.z-num { text-align: right; font-variant-numeric: tabular-nums; }
.z-table tr.is-pending { background: var(--amber-soft); }
.z-table tr.is-dim td { opacity: .62; }
.z-scroll { overflow-x: auto; }

/* ------------------------------------------------------------
   10. STRIPS
   The sentence above a thing, saying what state it is in.
   ------------------------------------------------------------ */
.z-strip { padding: 10px var(--s3); font-size: var(--size-md); margin: var(--s3) 0; border-left: 3px solid var(--line); background: var(--paper2); }
.z-strip--ok   { border-left-color: var(--green); background: var(--green-soft); }
.z-strip--warn { border-left-color: var(--amber); background: var(--amber-soft); }
.z-strip--bad  { border-left-color: var(--red);   background: var(--red-soft); }
.z-strip--note { border-left-color: var(--brand); background: var(--card); }

/* ------------------------------------------------------------
   11. THE PAGE LOADER
   Three of them, for three different waits.

   a) z-loader-page   the whole screen, first load only
   b) z-skeleton      the shape of what is coming, for a list or a table
   c) z-spinner       inline, for one button or one cell

   Rule: under 400ms show nothing, because a flash of loader reads as a fault.
   400ms to 2s, a skeleton. Over 2s, say what is happening and roughly how
   long, because a spinner with no words is where people start clicking twice.
   ------------------------------------------------------------ */
.z-loader-page {
  position: fixed; inset: 0; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4); z-index: 9999;
}
.z-loader-page__mark {
  width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  animation: z-spin 1s linear infinite;
}
.z-loader-page__what { font-size: var(--size-md); color: var(--ink); }
.z-loader-page__sub  { font-size: var(--size-sm); color: var(--muted); max-width: 38ch; text-align: center; }

.z-spinner {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: z-spin .8s linear infinite;
}
.z-spinner--on-ink { border-color: rgba(255,255,255,.3); border-top-color: var(--on-bar); }

@keyframes z-spin { to { transform: rotate(360deg); } }

/* The skeleton is the shape of the thing, not a grey box: a table skeleton
   has the row heights of a table, so nothing jumps when the data lands. */
.z-skeleton { display: block; background: var(--line2); border-radius: var(--r-sm);
  position: relative; overflow: hidden; }
.z-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: z-sweep 1.3s ease-in-out infinite;
}
.z-skeleton--line  { height: 12px; margin: 7px 0; }
.z-skeleton--title { height: 18px; width: 40%; margin: 0 0 var(--s3); }
.z-skeleton--row   { height: 38px; margin: 0 0 1px; }
.z-skeleton--stat  { height: 34px; width: 72px; margin-bottom: var(--s1); }
.z-skeleton--w40 { width: 40%; } .z-skeleton--w60 { width: 60%; } .z-skeleton--w80 { width: 80%; }

@keyframes z-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* A slow save, said out loud rather than shown as a frozen screen. */
.z-working {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--size-sm); color: var(--muted);
}

/* Anybody who has asked not to see motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .z-loader-page__mark, .z-spinner { animation-duration: 2.5s; }
  .z-skeleton::after { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------
   12. TABS
   ------------------------------------------------------------ */
.z-tabs { display: flex; gap: var(--s1); flex-wrap: wrap; padding: var(--s2) 0; }
.z-tab {
  font: var(--w-strong) 12px/1 var(--font); background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 8px 13px; cursor: pointer;
}
.z-tab:hover { color: var(--ink); border-color: var(--line); }
.z-tab.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.z-tab__count {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: var(--w-head);
  background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 1px 6px;
}

/* ------------------------------------------------------------
   13. PRINT
   Half of what this company produces ends up on paper.
   ------------------------------------------------------------ */
@media print {
  .z-root { background: #fff; }
  .z-bar { background: none; color: var(--ink); border-bottom: 2px solid var(--ink); }
  .z-btn, .z-tabs, .z-loader-page, .z-spinner { display: none !important; }
  .z-card { border-color: #999; break-inside: avoid; }
  .z-table th { border-bottom-color: #999; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}