/* OurHQ — interface styles (Fab5.1 design system)
   ==========================================================================
   Palette from the logo: ink #101828, violet #7C6BFF.

   Three ideas run through this file:

     1. Tokens, then components. Every colour, radius and shadow is a custom
        property on :root, and the light theme only swaps the tokens -- no
        component knows which theme it is drawn in.
     2. The shell is a sidebar + top bar on a desktop, a bottom tab bar on a
        phone (assets/mobile.css). Pages sit inside `.shell` and know nothing
        about either.
     3. No inline style="" anywhere: the site CSP is `style-src 'self'`, so
        anything data-driven (a bar width, a sparkline) is an SVG attribute or
        a class, never a style attribute.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- dark (default) */
  --ink-900: #070a10;
  --ink-800: #0b0f17;
  --ink-700: #101828;

  --bg:        #0b0f17;    /* the page ground                          */
  --surface:   #131926;    /* cards, tables, panels                    */
  --surface-2: #0f141e;    /* fields, sidebar, the step below a card   */
  --surface-3: #1a2131;    /* hovers, the step above a card            */

  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);

  --text:       #e8ecf3;
  --text-muted: #97a2b6;
  --text-dim:   #6b7789;

  --violet:     #7c6bff;
  --violet-hi:  #9d90ff;
  --violet-dim: rgba(124, 107, 255, 0.16);
  --violet-ink: #cfc7ff;   /* violet text on a violet-dim ground       */

  --green:      #34d399;
  --green-dim:  rgba(52, 211, 153, 0.13);
  --green-ink:  #8ee9c4;
  --amber:      #f5a524;
  --amber-dim:  rgba(245, 165, 36, 0.13);
  --amber-ink:  #f3c77a;
  --red:        #ff6b5a;
  --red-dim:    rgba(255, 107, 90, 0.12);
  --red-ink:    #ffb3a8;
  --cyan:       #38bdf8;
  --cyan-dim:   rgba(56, 189, 248, 0.13);
  --cyan-ink:   #9edcfb;

  --radius:    16px;
  --radius-sm: 11px;
  --radius-xs: 8px;

  --shadow:    0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28);
  --ring:      0 0 0 3px var(--violet-dim);

  --sidenav-w: 248px;
  --sidenav-c: 72px;
  --topbar-h:  60px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: dark;
}

/* ------------------------------------------------------------------ light */
/* Chosen explicitly (Settings, the theme control) or by "Auto" following
   the operating system. Dark stays the default when nothing was chosen. */
[data-theme="light"] {
  --bg:        #f3f4f9;
  --surface:   #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eef0f7;

  --line:        rgba(16, 24, 40, 0.08);
  --line-strong: rgba(16, 24, 40, 0.16);

  --text:       #101828;
  --text-muted: #526078;
  --text-dim:   #7b8798;

  --violet:     #6a58f5;
  --violet-hi:  #5646e0;
  --violet-dim: rgba(106, 88, 245, 0.12);
  --violet-ink: #4b3bd6;

  --green:      #0f9f6e;
  --green-dim:  rgba(15, 159, 110, 0.12);
  --green-ink:  #0b7a55;
  --amber:      #c77a06;
  --amber-dim:  rgba(199, 122, 6, 0.13);
  --amber-ink:  #8a5405;
  --red:        #d9412f;
  --red-dim:    rgba(217, 65, 47, 0.10);
  --red-ink:    #b3261e;
  --cyan:       #0284c7;
  --cyan-dim:   rgba(2, 132, 199, 0.12);
  --cyan-ink:   #075985;

  --shadow:    0 20px 50px rgba(16, 24, 40, 0.14);
  --shadow-sm: 0 4px 14px rgba(16, 24, 40, 0.08);

  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg: #f3f4f9; --surface: #ffffff; --surface-2: #f7f8fc; --surface-3: #eef0f7;
    --line: rgba(16, 24, 40, 0.08); --line-strong: rgba(16, 24, 40, 0.16);
    --text: #101828; --text-muted: #526078; --text-dim: #7b8798;
    --violet: #6a58f5; --violet-hi: #5646e0; --violet-dim: rgba(106, 88, 245, 0.12); --violet-ink: #4b3bd6;
    --green: #0f9f6e; --green-dim: rgba(15, 159, 110, 0.12); --green-ink: #0b7a55;
    --amber: #c77a06; --amber-dim: rgba(199, 122, 6, 0.13); --amber-ink: #8a5405;
    --red: #d9412f; --red-dim: rgba(217, 65, 47, 0.10); --red-ink: #b3261e;
    --cyan: #0284c7; --cyan-dim: rgba(2, 132, 199, 0.12); --cyan-ink: #075985;
    --shadow: 0 20px 50px rgba(16, 24, 40, 0.14); --shadow-sm: 0 4px 14px rgba(16, 24, 40, 0.08);
    color-scheme: light;
  }
}

/* ------------------------------------------------------------------- base */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--violet-hi); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -0.015em; line-height: 1.25; }

svg { flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--violet-dim); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------- layouts */

/* Sign-in, second factor, offline: one card in the middle of the screen. */
.page-auth {
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(124, 107, 255, 0.18), transparent 70%),
    radial-gradient(600px 400px at 90% 100%, rgba(124, 107, 255, 0.07), transparent 70%),
    var(--bg);
}
.auth-shell { width: 100%; max-width: 420px; }

/* Signed-in pages: sidebar on the left, top bar above the content. */
.app-shell { display: flex; min-height: 100vh; }

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.75rem 1.75rem 4rem;
}
.shell-narrow { max-width: 760px; }
.shell-wide   { max-width: 1400px; }

/* ---------------------------------------------------------------- sidebar */

.sidenav {
  position: sticky;
  top: 0;
  height: 100vh;
  width: var(--sidenav-w);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  transition: width 0.18s ease;
  z-index: 40;
}
.sidenav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1rem 0.75rem 1.1rem;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.01em;
  min-height: var(--topbar-h);
}
.sidenav-brand:hover { text-decoration: none; }
.sidenav-brand img { width: 34px; height: 34px; border-radius: 9px; }
.sidenav-brand small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; }

.sidenav-nav { display: flex; flex-direction: column; gap: 2px; padding: 0.5rem 0.65rem; overflow-y: auto; scrollbar-width: thin; }
.sidenav-group {
  margin: 0.9rem 0.5rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sidenav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 40px;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 540;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.sidenav-item svg { width: 19px; height: 19px; opacity: 0.85; }
.sidenav-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.sidenav-item.is-current { background: var(--violet-dim); color: var(--text); }
.sidenav-item.is-current svg { color: var(--violet-hi); opacity: 1; }
.sidenav-item.is-current::before {
  content: "";
  position: absolute;
  left: -0.65rem; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--violet);
}
.sidenav-item .count {
  margin-left: auto;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--amber);
  color: #101828;
  font-size: 0.72rem;
  font-weight: 700;
}
.sidenav-item .kbd { margin-left: auto; }

.sidenav-foot {
  margin-top: auto;
  padding: 0.75rem 0.65rem 0.9rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sidenav-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 0.35rem;
  min-width: 0;
}
.sidenav-user-name { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-user-mail { font-size: 0.74rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-user > div { min-width: 0; }
.sidenav-tools { display: flex; align-items: center; gap: 0.5rem; }
.sidenav-tools .inline-form { flex: 1; display: flex; }
.sidenav-tools .btn { flex: 1; }

.avatar {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}

/* The sidebar folded to its icons. Remembered in localStorage; applied before
   paint by assets/theme.js so it never flashes wide. */
.sidenav-toggle {
  position: absolute;
  right: -13px;
  top: 22px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.sidenav-toggle:hover { color: var(--text); border-color: var(--violet); }
.sidenav-toggle svg { width: 14px; height: 14px; transition: transform 0.18s; }

[data-nav="collapsed"] .sidenav { width: var(--sidenav-c); }
[data-nav="collapsed"] .sidenav-brand { justify-content: center; padding-left: 0; padding-right: 0; }
[data-nav="collapsed"] .sidenav-brand span,
[data-nav="collapsed"] .sidenav-group,
[data-nav="collapsed"] .sidenav-item span,
[data-nav="collapsed"] .sidenav-item .kbd,
[data-nav="collapsed"] .sidenav-user > div,
[data-nav="collapsed"] .sidenav-tools .theme-seg,
[data-nav="collapsed"] .sidenav-tools .btn span { display: none; }
[data-nav="collapsed"] .sidenav-item { justify-content: center; padding-left: 0; padding-right: 0; }
[data-nav="collapsed"] .sidenav-item .count { position: absolute; top: 4px; right: 6px; margin: 0; padding: 0 0.35rem; font-size: 0.62rem; }
[data-nav="collapsed"] .sidenav-user { justify-content: center; }
[data-nav="collapsed"] .sidenav-tools { flex-direction: column; }
[data-nav="collapsed"] .sidenav-toggle svg { transform: rotate(180deg); }
[data-nav="collapsed"] .sidenav-item[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-xs);
  background: var(--ink-700);
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  z-index: 50;
}

/* Theme control: Dark · Light · Auto. */
.theme-seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  gap: 2px;
}
.theme-seg button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  width: 30px; height: 26px;
  border-radius: 999px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.theme-seg button svg { width: 15px; height: 15px; }
.theme-seg button:hover { color: var(--text); }
.theme-seg button.is-on { background: var(--violet-dim); color: var(--violet-hi); }

/* ---------------------------------------------------------------- top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.75rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: var(--bg); }
}
.topbar-brand { display: none; align-items: center; gap: 0.5rem; color: var(--text); font-weight: 650; }
.topbar-brand img { width: 30px; height: 30px; border-radius: 8px; }
.topbar-brand:hover { text-decoration: none; }

.topbar-crumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text-dim);
}
.topbar-crumb a { color: var(--text-dim); }
.topbar-crumb a:hover { color: var(--text); text-decoration: none; }
.topbar-crumb strong { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-crumb svg { width: 14px; height: 14px; opacity: 0.6; }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

/* The search box that opens the palette. A button drawn as a field. */
.topbar-search {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 240px;
  height: 38px;
  padding: 0 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.topbar-search:hover { border-color: var(--text-dim); color: var(--text-muted); }
.topbar-search svg { width: 16px; height: 16px; }
.topbar-search span { flex: 1; }
.topbar-search .kbd { margin-left: auto; }

.kbd {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  font: 600 0.7rem/1.4 var(--mono);
  color: var(--text-dim);
  background: var(--surface);
  white-space: nowrap;
}

.icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.icon-btn:hover { color: var(--text); background: var(--surface-3); text-decoration: none; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--surface-2);
}

/* "+ New" menu. */
.menu { position: relative; }
.menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.menu-list[hidden] { display: none; }
.menu-list a, .menu-list button {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-xs);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  width: 100%;
}
.menu-list a:hover, .menu-list button:hover { background: var(--surface-3); text-decoration: none; }
.menu-list svg { width: 17px; height: 17px; color: var(--violet-hi); }
.menu-list .menu-sep { height: 1px; margin: 0.3rem 0; background: var(--line); }
.menu-list .menu-label { padding: 0.3rem 0.7rem 0.1rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); font-weight: 650; }

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
}
.card-auth { padding: 2.25rem 2rem; box-shadow: var(--shadow); }
.card-wide { padding: 1.5rem 1.6rem; margin-bottom: 1.25rem; }
.card-highlight { border-color: rgba(124, 107, 255, 0.45); background: color-mix(in srgb, var(--surface) 88%, var(--violet)); }
.card-title { font-size: 1.15rem; margin-bottom: 1rem; }
.card > h2:first-child, .card-wide > h2:first-child { font-size: 1.1rem; margin-bottom: 0.35rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; }
.card-head h2 { margin: 0; }
.card-head .card-title { margin-bottom: 0; }

/* ------------------------------------------------------------------ brand */

.brand { text-align: center; margin-bottom: 1.75rem; }
.brand-mark { display: block; margin: 0 auto 0.9rem; border-radius: 14px; }
.brand-name { font-size: 1.5rem; letter-spacing: -0.02em; }
.brand-sub { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.9rem; }

/* ----------------------------------------------------------------- fields */

.field { margin-bottom: 1.05rem; }

.field label,
.group-label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 560;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
textarea {
  width: 100%;
  padding: 0.68rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-dim); }

input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover,
input[type="search"]:hover, input[type="number"]:hover, input[type="date"]:hover, textarea:hover { border-color: var(--text-dim); }

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="number"]:focus, input[type="date"]:focus,
input[type="tel"]:focus, input[type="url"]:focus, textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: var(--ring);
}

.input-code {
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-left: 0.4em;
}

.input-group { position: relative; display: flex; }
.input-group input { padding-right: 4.2rem; }

.reveal {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 560;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}
.reveal:hover { color: var(--text); background: var(--surface-3); }

/* --------------------------------------------------------------- checkbox */

/* `.field label.checkbox` outranks `.field label { display: block }`, which
   would otherwise collapse a checkbox nested in a field. */
.checkbox, .field label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.35rem 0 1.4rem;
  cursor: pointer;
  user-select: none;
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }

.checkbox-box, .radio-box {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-2);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.radio-box { border-radius: 50%; }
.checkbox input:checked + .checkbox-box { background: var(--violet); border-color: var(--violet); }
.checkbox input:checked + .checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.checkbox input:checked + .radio-box { border-color: var(--violet); }
.checkbox input:checked + .radio-box::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--violet);
}
.checkbox input:focus-visible + .checkbox-box,
.checkbox input:focus-visible + .radio-box { box-shadow: var(--ring); }
.checkbox-text { font-size: 0.9rem; line-height: 1.4; }
.checkbox-text small { display: block; color: var(--text-dim); font-size: 0.78rem; margin-top: 1px; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text);
  font: inherit;
  font-weight: 580;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s, color 0.15s;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { text-decoration: none; background: color-mix(in srgb, var(--surface-3) 80%, var(--text) 8%); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn[disabled], .btn.is-disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary { background: var(--violet); border-color: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--violet-hi); border-color: var(--violet-hi); }

.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-3); }

.btn-soft { background: var(--violet-dim); border-color: transparent; color: var(--violet-ink); }
.btn-soft:hover { background: color-mix(in srgb, var(--violet-dim) 70%, var(--violet)); color: #fff; }

.btn-danger { background: transparent; border-color: rgba(255, 107, 90, 0.5); color: var(--red); }
.btn-danger:hover { background: var(--red-dim); }

.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 2rem; padding: 0.3rem 0.75rem; font-size: 0.83rem; }

.linkish {
  background: none; border: 0; padding: 0;
  color: var(--violet-hi); font: inherit; cursor: pointer;
}
.linkish:hover { text-decoration: underline; }
.linkish.danger { color: var(--red); }

.inline-form { display: inline; }

/* ---------------------------------------------------------------- alerts */

.alert {
  position: relative;
  margin: 0 0 1.15rem;
  padding: 0.8rem 2.4rem 0.8rem 2.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  border: 1px solid;
  line-height: 1.45;
}
.alert::before {
  content: "";
  position: absolute;
  left: 0.95rem; top: 0.95rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='12.5'/><line x1='12' y1='16' x2='12' y2='16.01'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='12.5'/><line x1='12' y1='16' x2='12' y2='16.01'/></svg>") center / contain no-repeat;
  opacity: 0.9;
}
.alert-success::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12.5l2.6 2.5L16 9.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12.5l2.6 2.5L16 9.5'/></svg>");
}
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert a { font-weight: 600; }
.alert-error   { background: var(--red-dim);    border-color: rgba(255, 107, 90, 0.35);  color: var(--red-ink); }
.alert-info    { background: var(--violet-dim); border-color: rgba(124, 107, 255, 0.35); color: var(--violet-ink); }
.alert-success { background: var(--green-dim);  border-color: rgba(52, 211, 153, 0.32);  color: var(--green-ink); }
.alert-warn    { background: var(--amber-dim);  border-color: rgba(245, 165, 36, 0.32);  color: var(--amber-ink); }
.alert-dismiss {
  position: absolute;
  right: 0.5rem; top: 0.5rem;
  width: 28px; height: 28px;
  border: 0; background: transparent; color: inherit; opacity: 0.7;
  border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1;
}
.alert-dismiss:hover { opacity: 1; background: rgba(127, 127, 127, 0.15); }

.foot-note { text-align: center; color: var(--text-dim); font-size: 0.78rem; margin: 1.5rem 0 0; }

.card-links {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.85rem; text-align: center;
}

/* ------------------------------------------------------------- page bits */

.page-head { margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.page-head .muted { margin-top: 0.3rem; }
.page-head .muted strong { font-weight: 640; }
.muted { color: var(--text-muted); font-size: 0.88rem; margin: 0.35rem 0 0; }
.small { font-size: 0.8rem; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.mono { font-family: var(--mono); }
.crumb { margin: 0 0 0.75rem; font-size: 0.85rem; }

.row-between { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.row-gap { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.row-gap-flush { margin-top: 0; }

.amount-pending { color: var(--amber); }
.amount-ok { color: var(--green); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 1.75rem 0 0.75rem;
}
.section-head h2 { font-size: 1.05rem; }
.section-head .muted { margin: 0; }
.section-head a.small { color: var(--text-muted); }
.section-head a.small:hover { color: var(--text); }

.tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs a, .tabs button {
  padding: 0.6rem 0.9rem;
  color: var(--text-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 560;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active, .tabs button.is-active { color: var(--text); border-bottom-color: var(--violet); }

/* Chip rows: a filter you can see the state of. */
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 34px;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit; font-size: 0.85rem; font-weight: 540;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--text-dim); text-decoration: none; }
.chip.is-current { background: var(--violet-dim); border-color: rgba(124, 107, 255, 0.5); color: var(--violet-ink); }
.chip .n {
  padding: 0 0.4rem; border-radius: 999px;
  background: var(--surface-3); color: var(--text-dim);
  font-size: 0.72rem; font-weight: 650; min-width: 1.4rem; text-align: center;
}
.chip.is-current .n { background: rgba(124, 107, 255, 0.25); color: var(--violet-ink); }
.chip-warn { border-color: rgba(245, 165, 36, 0.45); color: var(--amber-ink); }

/* Home tool cards. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.tool-card {
  display: block;
  padding: 1.25rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.tool-card:hover { border-color: var(--violet); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tool-card h2 { font-size: 1.02rem; }
.tool-card p { margin: 0.35rem 0 0; color: var(--text-muted); font-size: 0.86rem; }
.tool-card.is-disabled { opacity: 0.55; }
.tool-card.is-disabled:hover { border-color: var(--line); transform: none; box-shadow: none; }
.tool-icon {
  width: 42px; height: 42px;
  margin-bottom: 0.9rem;
  border-radius: 12px;
  background: var(--violet-dim);
  color: var(--violet-hi);
  display: flex; align-items: center; justify-content: center;
}
.tool-icon svg { width: 22px; height: 22px; }
.tool-icon.is-green { background: var(--green-dim); color: var(--green); }
.tool-icon.is-amber { background: var(--amber-dim); color: var(--amber); }
.tool-icon.is-cyan  { background: var(--cyan-dim);  color: var(--cyan); }
.tool-stat {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem; color: var(--text-dim);
}
.tool-stat strong { display: block; color: var(--text); font-size: 0.98rem; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ----------------------------------------------------------------- KPIs */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}
.kpi {
  position: relative;
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1rem 1.15rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  min-width: 0;
  overflow: hidden;
}
a.kpi:hover { border-color: var(--violet); text-decoration: none; }
.kpi-label {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-muted);
}
.kpi-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex: 0 0 auto; }
.kpi-green  .kpi-label::before { background: var(--green); }
.kpi-amber  .kpi-label::before { background: var(--amber); }
.kpi-red    .kpi-label::before { background: var(--red); }
.kpi-cyan   .kpi-label::before { background: var(--cyan); }
.kpi-neutral .kpi-label::before { background: var(--text-dim); }
.kpi-value {
  font-size: 1.55rem; font-weight: 720; letter-spacing: -0.025em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi-green .kpi-value { color: var(--green); }
.kpi-amber .kpi-value { color: var(--amber); }
.kpi-red   .kpi-value { color: var(--red); }
.kpi-note { font-size: 0.78rem; color: var(--text-dim); }
.kpi-delta {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 650;
  background: var(--surface-3); color: var(--text-muted);
}
.kpi-delta.up   { background: var(--green-dim); color: var(--green-ink); }
.kpi-delta.down { background: var(--red-dim);   color: var(--red-ink); }
.kpi-delta svg { width: 11px; height: 11px; }
.kpi-spark { margin: 0.35rem -0.2rem -0.3rem; }
.kpi-spark svg { display: block; width: 100%; height: 34px; }

/* ------------------------------------------------------------ attention */

.attn-list { list-style: none; margin: 0; padding: 0; }
.attn-list li {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.attn-list li:last-child { border-bottom: 0; }
.attn-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--violet); }
.attn-dot.is-red   { background: var(--red);   box-shadow: 0 0 8px rgba(255, 107, 90, 0.55); }
.attn-dot.is-amber { background: var(--amber); box-shadow: 0 0 8px rgba(245, 165, 36, 0.45); }
.attn-dot.is-cyan  { background: var(--cyan); }
.attn-body { flex: 1; min-width: 0; }
.attn-body strong { font-weight: 640; }
.attn-body .small { color: var(--text-dim); display: block; margin-top: 1px; }
.attn-list .btn { flex: 0 0 auto; }

.all-clear {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--green-dim);
  color: var(--green-ink);
  font-size: 0.9rem;
}
.all-clear svg { width: 20px; height: 20px; }

/* Home: two columns of cards on a wide screen. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.grid-2 > .card { margin-bottom: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }

.greeting { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.greeting h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.greeting .muted { margin-top: 0.25rem; }
.quick-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ----------------------------------------------------------- two-factor */

.status-on  { color: var(--green); font-weight: 560; margin: 0.5rem 0 0; }
.status-off { color: var(--text-dim); font-weight: 560; margin: 0.5rem 0 0; }

.steps { margin: 1.25rem 0 0; padding-left: 1.35rem; }
.steps > li { margin-bottom: 1.75rem; }
.steps h3 { font-size: 0.98rem; margin-bottom: 0.3rem; }

.qr { width: 188px; height: 188px; margin: 1rem 0; padding: 10px; background: #fff; border-radius: 10px; }
.qr img, .qr canvas { display: block; width: 100%; height: 100%; }

.secret-key code {
  display: inline-block;
  padding: 0.55rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  word-break: break-all;
}

.cmd {
  display: block;
  margin: 0.6rem 0;
  padding: 0.7rem 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
  user-select: all;
}

.code-list {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
}
.code-list li {
  padding: 0.5rem 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.92rem;
  text-align: center;
}

.stack { display: grid; gap: 1.25rem; margin-top: 1.5rem; }

/* Settings groups: one tool or one provider per box, inside a card. */
.subform {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem 0.5rem;
  margin: 0 0 1rem;
  background: var(--surface-2);
}
.subform h3 { margin: 0; font-size: 0.95rem; }
.subform.is-danger { border-color: rgba(255, 107, 90, 0.28); }
.subform .checkbox { margin-bottom: 0.9rem; }
.subform table.data td { padding: 0.5rem 0; border: 0; }
.subform table.data tr + tr td { border-top: 1px solid var(--line); }
.subform details { margin: 0 0 0.9rem; }
.subform summary { cursor: pointer; color: var(--text-muted); }
.subform .btn { margin-bottom: 0.6rem; }
.steps li { margin-bottom: 0.35rem; }

.install-log { margin: 0 0 1.25rem; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.7; }
.install-log .is-ok   { color: var(--text-muted); }
.install-log .is-warn { color: var(--amber); }
.install-log .is-bad  { color: var(--red); }

/* Settings: a jump list generated from the cards on the page. */
.page-toc {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
  margin: -0.5rem 0 1.25rem;
}
.page-toc a {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.page-toc a:hover { color: var(--text); border-color: var(--violet); text-decoration: none; }
.page-toc[hidden] { display: none; }

/* ============================================================ invoices ==== */

/* two-column browse */
.split { display: grid; grid-template-columns: 232px 1fr; gap: 1.5rem; align-items: start; }

.side-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0.6rem; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list a {
  display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline;
  padding: 0.45rem 0.6rem; border-radius: 8px; color: var(--text-muted); font-size: 0.87rem;
}
.side-list a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.side-list a.is-current { background: var(--violet-dim); color: var(--text); }
.side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-count { flex: 0 0 auto; font-size: 0.74rem; color: var(--text-dim); }

.filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.filters input[type="search"] {
  flex: 1; min-width: 200px;
  height: 2.65rem; padding: 0 0.85rem 0 2.3rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8798' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>");
  background-repeat: no-repeat;
  background-position: 0.8rem center;
}
.filters .btn { height: 2.65rem; }
.filters .linkish { margin-left: 0.25rem; }

/* tables */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: var(--surface); }
table.data th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim); font-weight: 650; padding: 0.7rem 0.85rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 0.72rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-3); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tfoot td { background: var(--surface-2); font-weight: 640; }
.muted-cell { color: var(--text-dim); font-size: 0.82rem; }
.cell-sub { display: block; font-size: 0.76rem; color: var(--text-dim); margin-top: 1px; }
table.data td > a:not(.btn):not(.status) { font-weight: 560; }

table.lines { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.lines-full { width: 100%; }
table.lines-full td { padding: 0.5rem 0.85rem; }
table.lines tfoot td { padding: 0.5rem 0.85rem; color: var(--text-muted); border-bottom: 0; }
table.lines tfoot tr.grand td { font-weight: 700; color: var(--text); font-size: 1rem;
                                border-top: 1px solid var(--line); padding-top: 0.7rem; }

/* pills */
.status, .sync, .tag, .badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.18rem 0.55rem; border-radius: 999px;
  font-size: 0.73rem; font-weight: 600; white-space: nowrap; border: 1px solid;
  line-height: 1.4;
}
.status-lg, .sync-lg { font-size: 0.85rem; padding: 0.3rem 0.7rem; }
.status-pending   { background: var(--amber-dim);  border-color: rgba(245, 165, 36, 0.4);   color: var(--amber-ink); }
.status-completed { background: var(--green-dim);  border-color: rgba(52, 211, 153, 0.35);  color: var(--green-ink); }
.status-cancelled { background: var(--red-dim);    border-color: rgba(255, 107, 90, 0.3);   color: var(--red-ink); }
.status-created    { background: transparent; border-color: var(--line-strong); color: var(--text-muted); }
.status-progress   { background: var(--violet-dim); border-color: rgba(124, 107, 255, 0.45); color: var(--violet-ink); }
.status-courierpay { background: var(--amber-dim);  border-color: rgba(245, 165, 36, 0.4);   color: var(--amber-ink); }
.status-on { }

.sync-ok    { background: var(--green-dim); border-color: rgba(52, 211, 153, 0.3);  color: var(--green-ink); }
.sync-warn  { background: var(--amber-dim); border-color: rgba(245, 165, 36, 0.35); color: var(--amber-ink); }
.sync-bad   { background: var(--red-dim);   border-color: rgba(255, 107, 90, 0.35); color: var(--red-ink); }
.sync-muted { background: transparent; border-color: var(--line-strong); color: var(--text-dim); }

.tag { background: transparent; border-color: var(--line-strong); color: var(--text-dim); margin-left: 0.35rem; font-weight: 500; }
.tag-warn { border-color: rgba(245, 165, 36, 0.4); color: var(--amber-ink); }
.tag-courier { border-color: rgba(124, 107, 255, 0.45); color: var(--violet-ink); background: var(--violet-dim); }
.tag-self, .tag-pickup { border-color: var(--line-strong); color: var(--text-dim); }
.badge { border-color: transparent; background: var(--surface-3); color: var(--text-muted); }
.badge-active  { background: var(--violet-dim); color: var(--violet-ink); }
.badge-pending { background: var(--amber-dim); color: var(--amber-ink); }
/* Shown only at phone widths, where the Delivered-by column is hidden. */
.phone-only { display: none; }

/* ------------------------------------------------------------------ report */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.stat-strong { border-color: rgba(124, 107, 255, 0.45); }
.stat-label { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }
.stat-value { font-size: 1.6rem; font-weight: 720; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-note  { font-size: 0.78rem; color: var(--text-dim); }

.period-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.period-tabs a {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 540;
}
.period-tabs a:hover { color: var(--text); border-color: var(--violet); }
.period-tabs a.is-current { background: var(--violet-dim); border-color: rgba(124, 107, 255, 0.5); color: var(--violet-ink); }

/* ------------------------------------------------------- shared controls */
.control,
.filters select {
  height: 2.65rem;
  padding: 0 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select.control,
.filters select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.3rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%239aa3b2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}
.control:hover, .filters select:hover { border-color: var(--text-dim); }
.control:focus, .control:focus-within, .filters select:focus { outline: none; border-color: var(--violet); box-shadow: var(--ring); }
select.control option, .filters select option { background: var(--surface); color: var(--text); }

.control-money { display: flex; align-items: center; gap: 0.2rem; width: 8rem; }
.control-money .control-prefix { color: var(--text-muted); user-select: none; }
.control-money input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; }
.control-money input:focus { outline: none; box-shadow: none; }
.control-money input::-webkit-outer-spin-button,
.control-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.control-money input[type="number"] { -moz-appearance: textfield; }
.control-qty { width: 5.5rem; }

/* ----------------------------------------------------- delivery section */
.totals { margin: 0; }
.totals > div {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 1.5rem;
  padding: 0.45rem 0.85rem; color: var(--text-muted);
}
.totals dt { margin: 0; }
.totals dd { margin: 0; min-width: 6.5rem; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.totals > div.grand { margin-top: 0.25rem; padding-top: 0.7rem; border-top: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 1rem; }

.note-warn {
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--amber);
  background: var(--amber-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.note-warn strong { color: var(--amber-ink); }

.deliv-form { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--line); }
.deliv-field { display: flex; flex-direction: column; gap: 0.35rem; }
.deliv-field label { font-size: 0.78rem; font-weight: 560; color: var(--text-muted); letter-spacing: 0.01em; }
.deliv-field .control { min-width: 13rem; }
.deliv-form .btn { height: 2.65rem; }

.empty {
  text-align: center; padding: 3rem 1rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--text-muted);
}
.empty p { margin-bottom: 1rem; }
.empty svg { width: 40px; height: 40px; color: var(--text-dim); margin-bottom: 0.5rem; }

.addr-block { white-space: pre-line; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.err-box {
  margin: 0.75rem 0 0; padding: 0.7rem 0.85rem; background: var(--surface-2);
  border: 1px solid rgba(255, 107, 90, 0.28); border-radius: 8px;
  font-family: var(--mono); font-size: 0.78rem; color: var(--red-ink); white-space: pre-wrap; word-break: break-word;
}

.log-list { list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 0.78rem; line-height: 1.8; }
.log-list .ok  { color: var(--green); }
.log-list .bad { color: var(--red); }

details summary { cursor: pointer; color: var(--text-muted); font-size: 0.85rem; }
details summary:hover { color: var(--text); }

/* ------------------------------------------- collect-from-the-list ------- */

button.status.is-clickable { cursor: pointer; font: inherit; font-size: 0.73rem; font-weight: 600; transition: background 0.15s, border-color 0.15s, transform 0.05s; }
button.status.is-clickable:hover { background: rgba(245, 165, 36, 0.25); border-color: rgba(245, 165, 36, 0.7); }
button.status.is-clickable:active { transform: translateY(1px); }
button.status.is-clickable:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.3); }
button.status-created.is-clickable:hover  { background: var(--surface-3); border-color: var(--text-dim); color: var(--text); }
button.status-progress.is-clickable:hover { background: rgba(124, 107, 255, 0.25); border-color: rgba(124, 107, 255, 0.7); }

.ohq-confirm {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(6, 9, 15, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(3px);
}
.ohq-confirm-box {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid rgba(124, 107, 255, 0.4);
  border-radius: var(--radius);
  padding: 1.9rem 1.75rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.ohq-confirm-box h2 { font-size: 1.12rem; }
.ohq-confirm-amount { margin: 0.9rem 0 0.35rem; font-size: 2.3rem; font-weight: 720; letter-spacing: -0.03em; color: var(--green); font-variant-numeric: tabular-nums; }
.ohq-confirm-who { margin: 0 0 1.5rem; color: var(--text-muted); font-size: 0.86rem; line-height: 1.6; }
.ohq-confirm-actions { display: flex; gap: 0.6rem; }
.ohq-confirm-actions .btn { flex: 1; }
.ohq-confirm-detail { margin: 0 0 0.9rem; color: var(--text-muted); font-size: 0.84rem; }

.stage-track { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; }
.stage-track li {
  display: flex; flex-direction: column; gap: 0.1rem; min-width: 7rem;
  padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.8rem; color: var(--text-dim);
}
.stage-track .when { font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.stage-track li.is-done    { border-color: rgba(52, 211, 153, 0.35); color: var(--green-ink); }
.stage-track li.is-current { border-color: rgba(124, 107, 255, 0.55); color: var(--text); background: var(--violet-dim); }

.stock-foot { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.confirm-card { text-align: center; max-width: 460px; margin: 2rem auto 0; }
.confirm-q { font-size: 1.2rem; }
.confirm-amount { margin: 1rem 0 0.35rem; font-size: 2.6rem; font-weight: 720; letter-spacing: -0.03em; color: var(--green); font-variant-numeric: tabular-nums; }
.confirm-who { margin-bottom: 1.5rem; }
.confirm-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.5rem; }

/* Saved custom invoices. */
#saved table.data th:nth-child(2), #saved table.data td:nth-child(2) { width: 8rem; }
#saved table.data th:nth-child(3), #saved table.data td:nth-child(3) { width: 7rem; padding-right: 1.5rem; }
#saved table.data th:nth-child(4), #saved table.data td:nth-child(4) { width: 9rem; }
#saved table.data td:last-child { white-space: nowrap; }
#saved table.data td:last-child form { display: inline-flex; margin-left: 0.35rem; }
#saved details { margin-bottom: 0.9rem; }
#saved summary { padding: 0.2rem 0; }

/* ------------------------------------------------------------ the sheet --
   The phone's "More" menu: markup is in every signed-in page (mobilenav.php),
   so it needs a resting state everywhere. Shown only by mobile.css. */
.sheet, .sheet-backdrop { display: none; }

/* ----------------------------------------------------- command palette --
   Ctrl/⌘ K, or the search box in the top bar. Searches invoices, saved custom
   invoices, Finance projects and clients, and the pages themselves. */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(6, 9, 15, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 1rem 1rem;
}
.palette-backdrop[hidden] { display: none; }
.palette {
  width: 100%; max-width: 620px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: min(70vh, 560px);
}
.palette-input {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.palette-input svg { width: 18px; height: 18px; color: var(--text-dim); }
.palette-input input {
  flex: 1; border: 0; background: transparent; padding: 0.75rem 0;
  font-size: 1rem; color: var(--text);
}
.palette-input input:focus { outline: none; box-shadow: none; }
.palette-list { overflow-y: auto; padding: 0.4rem; }
.palette-group { padding: 0.55rem 0.7rem 0.2rem; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); }
.palette-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 0.9rem;
}
.palette-item:hover, .palette-item.is-active { background: var(--violet-dim); text-decoration: none; }
.palette-item svg { width: 17px; height: 17px; color: var(--text-dim); }
.palette-item .p-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .p-sub { color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; }
.palette-empty { padding: 1.5rem; text-align: center; color: var(--text-dim); font-size: 0.88rem; }
.palette-foot { display: flex; gap: 1rem; padding: 0.5rem 0.9rem; border-top: 1px solid var(--line); font-size: 0.72rem; color: var(--text-dim); }

/* --------------------------------------------------------------- misc --- */

.progress-track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress-track svg { display: block; width: 100%; height: 100%; }

.divider { height: 1px; background: var(--line); margin: 1.25rem 0; }

.mobilenav { display: none; }          /* the phone's bottom bar -- mobile.css */
.pwa-install { display: none; }        /* the add-to-home-screen offer      */

/* ------------------------------------------------------------- print ---- */
@media print {
  body { background: #fff !important; color: #111; }
  .sidenav, .topbar, .mobilenav, .lira-fab, .lira-panel, .sheet, .sheet-backdrop,
  .palette-backdrop, .quick-actions, .filters, .btn, .pwa-install { display: none !important; }
  .card, .kpi, .stat, .table-scroll, table.data { background: #fff !important; border-color: #ddd !important; box-shadow: none !important; }
  table.data th { background: #f3f3f3 !important; color: #333 !important; }
  .shell { padding: 0; max-width: none; }
  a { color: #111 !important; }
}

/* --------------------------------------------------- narrow desktops ---- */
@media (max-width: 1100px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .topbar-search { min-width: 0; }
  .topbar-search span { display: none; }
  .topbar-search .kbd { display: none; }
}
@media (max-width: 960px) and (min-width: 821px) {
  /* A tablet held upright: the sidebar folds to its icons on its own. */
  .sidenav { width: var(--sidenav-c); }
  .sidenav-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidenav-brand span, .sidenav-group, .sidenav-item span, .sidenav-item .kbd,
  .sidenav-user > div, .sidenav-tools .theme-seg, .sidenav-tools .btn span { display: none; }
  .sidenav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidenav-user { justify-content: center; }
  .sidenav-tools { flex-direction: column; }
  .sidenav-toggle { display: none; }
}