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

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

   Two rules the whole thing rests on, both deliberate:

   1. NO PURE WHITE. Paper is #ece8dd. White on a screen all day is tiring,
      and every ZAK document is printed on stock that is not white either.
   2. INK IS NOT BLACK. #16181c. True black against a warm paper vibrates.

   Everything is a custom property, so a theme is a list of values rather than
   a fork of this file. theme-builder.html writes that list for you.

   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. See THEME-GUIDE.md
   for the override maps.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* paper, in three depths. Cards sit on paper2, paper2 sits on paper. */
  --paper:  #ece8dd;
  --paper2: #f3eee4;
  --card:   #f7f3ea;

  /* ink, and the quiet version of it */
  --ink:    #16181c;
  --muted:  #8a7f6b;

  /* The four meanings. Red is ZAK red and is used for the brand AND for stop,
     which is why nothing else may be red. */
  --red:    #e1251b;
  --green:  #1f8a5b;
  --amber:  #a9791f;
  --gold:   #d9a441;

  /* The same four, darkened until they are readable as small text on paper.
     Measured rather than guessed: the brand red is 3.83 against paper and small
     text needs 4.5, so it is fine as a fill, a border or a large number and not
     fine as a sentence. Fills and borders keep the brand colour; text uses
     these. The difference is not visible at a glance, which is the point. */
  --red-text:   #c72118;
  --green-text: #1a754d;
  --amber-text: #845f18;
  --gold-text:  #a37b31;

  /* rules. line separates sections, line2 separates rows. */
  --line:   #c9bea6;
  --line2:  #e2d9c7;

  /* the dark band at the top, and anything that needs to sit against it */
  --bar:    #1c1f24;
  --on-bar: #f3eee4;

  /* type */
  --font: "ABC Normal", "ABCNormal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --size-xs: 10px;    /* eyebrow labels, all caps, letterspaced */
  --size-sm: 12px;    /* table cells, secondary text */
  --size-md: 14px;    /* body */
  --size-lg: 16px;    /* section headings */
  --size-xl: 22px;    /* page headings */
  --size-num: 34px;   /* the big coloured numbers */
  --lh: 1.6;
  --track: .09em;     /* letterspacing for the all caps labels */

  /* shape. Deliberately shallow: this is paper, not glass. */
  --r:    3px;
  --r-sm: 2px;
  --r-lg: 6px;

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

  /* one shadow, used sparingly. Depth is carried by rules, not by blur. */
  --shadow: 0 1px 2px rgba(22, 24, 28, .07);

  /* 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(--ink);
  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: 600; letter-spacing: -.015em; margin: 0 0 var(--s2); }
.z-h2 { font-size: var(--size-lg); font-weight: 600; margin: 0 0 var(--s2); }
.z-label {
  font-size: var(--size-xs); 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(--ink); text-underline-offset: 3px; }
.z-link:hover { color: var(--red); }

/* ------------------------------------------------------------
   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: 600; }
.z-bar .z-label { color: var(--line); }

/* ------------------------------------------------------------
   4. SURFACES
   ------------------------------------------------------------ */
.z-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s4);
}
.z-card--flat { background: var(--paper2); }
.z-card--quiet { border-style: dashed; background: transparent; }
.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: 600;
  line-height: 1.05; letter-spacing: -.02em;
}
.z-stat span { display: block; font-size: var(--size-xs); letter-spacing: var(--track);
  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: var(--size-xs); letter-spacing: var(--track);
  text-transform: uppercase; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 2px 8px; background: var(--paper2);
  color: var(--muted); white-space: nowrap;
}
.z-pill--ink   { background: var(--ink);   color: var(--on-bar); border-color: var(--ink); }
.z-pill--red   { background: rgba(225,37,27,.12);  color: var(--red-text);   border-color: var(--red); }
.z-pill--green { background: rgba(31,138,91,.12);  color: var(--green-text); border-color: var(--green); }
.z-pill--amber { background: rgba(217,164,65,.18); color: var(--amber-text); border-color: var(--gold); }
.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: 600 13px/1 var(--font);
  background: var(--paper2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 16px; cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.z-btn:hover { border-color: var(--ink); }
.z-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.z-btn--primary { background: var(--ink); color: var(--on-bar); border-color: var(--ink); }
.z-btn--primary:hover { background: var(--bar); }
/* 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: rgba(225,37,27,.08); }
.z-btn--tiny { font-size: 11.5px; padding: 5px 10px; }
.z-btn[disabled], .z-btn:disabled { opacity: .45; 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(--paper2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px 10px; width: 100%;
}
.z-textarea { min-height: 90px; resize: vertical; }
.z-input:focus, .z-select:focus, .z-textarea:focus {
  outline: 2px solid var(--ink); outline-offset: -2px;
}
.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: 13.5px; }
.z-table th {
  text-align: left; font-size: var(--size-xs); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line);
}
.z-table td { padding: 9px var(--s3); border-bottom: 1px solid var(--line2); vertical-align: top; }
.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: rgba(217,164,65,.10); }
.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: 13.5px; margin: var(--s3) 0; border-left: 3px solid var(--line); background: var(--paper2); }
.z-strip--ok   { border-left-color: var(--green); background: rgba(31,138,91,.10); }
.z-strip--warn { border-left-color: var(--gold);  background: rgba(217,164,65,.14); }
.z-strip--bad  { border-left-color: var(--red);   background: rgba(225,37,27,.09); }
.z-strip--note { border-left-color: var(--ink); 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(--red);
  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(--ink);
  border-radius: 50%; animation: z-spin .8s linear infinite;
}
.z-spinner--on-ink { border-color: rgba(243,238,228,.35); 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(247,243,234,.75), 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: 600 12.5px/1 var(--font); background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 999px; padding: 7px 13px; cursor: pointer;
}
.z-tab:hover { color: var(--ink); border-color: var(--line2); }
.z-tab.is-on { background: var(--ink); color: var(--on-bar); border-color: var(--ink); }
.z-tab__count {
  display: inline-block; margin-left: 6px; font-size: 10px;
  background: var(--red); color: var(--on-bar); border-radius: 999px; padding: 1px 5px;
}

/* ------------------------------------------------------------
   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; }
}