:root {
  /* ---- Brand: the navy header, greeting banner, login panel and bottom
     tabs in the Light theme. White-labelling a client's copy starts here:
     brandCss() in includes/settings.php rewrites --navy, --navy-deep and
     the --on-navy-* colours from the client's brand colour. Dim and Black
     use a dark band instead, with the brand colour as a thin strip. ---- */
  --navy: #0B2A52;
  --navy-deep: #071C38;
  --on-navy-text: #FFFFFF;     /* nav links, user name, banner switch */
  --on-navy-soft: #E7EAEE;     /* second-row nav, tab labels, login footer */
  --on-navy-icon: #F3F4F6;     /* bell, theme button */
  --on-navy-accent: #CED4DC;   /* brand word, highlights */
  --on-navy-bright: #EBEEF1;   /* banner buttons */
  --on-navy-sub: #E2E5EA;      /* banner date / weather line */
  --on-navy-danger: #F5A9A9;   /* logout link */
  --on-navy-success: #8FE3B0;  /* ok marker on navy */
  --blue: #2E7DE1;
  --blue-solid: #2E7DE1;       /* fills with white text on them: buttons, today, current page */
  --blue-light: #EAF2FC;
  --blue-light-hover: #DCE9FA;
  --white: #FFFFFF;
  --ink: #141B26;
  --ink-soft: #3A4250;
  --ink-faint: #8A97A8;
  --border: #DCE6F2;
  --green: #1B9C63;
  --amber: #B87A0A;
  --red: #C63B3B;
  --red-solid: #C63B3B;        /* fills with white text: delete buttons, alert count */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --body-weight: 450;          /* Light only; Dim and Black use 400 */
  --pill-amber: #9A6508;       /* status pill text: a shade stronger than --amber in Light */
  --pill-red: #A82F2F;

  /* Semantic tokens — surfaces, chip backgrounds, soft alert boxes.
     Everything below repoints existing raw-hex usages at these, so a
     theme only needs to redefine this block. */
  --page-bg: #F4F7FB;
  --surface: #FFFFFF;         /* card / panel background */
  --surface-2: #F7FAFD;       /* subtle hover / secondary surface */
  --input-bg: #FFFFFF;

  --amber-bg: #FEF3D9;
  --green-bg: #E4F6ED;
  --green-border: #B9E3CB;
  --red-bg: #F5E5E5;          /* badge/pill soft red */
  --red-bg-soft: #FDEDED;     /* alert/error box background */
  --red-border-soft: #F1C6C6;
  --red-text-strong: #8A2626;
  --neutral-bg: #F0F0F0;
  --purple: #8B5FBF;
  --purple-bg: #F1EAFA;
  --pink: #D4537E;
  --pink-bg: #FBEAF0;
  --teal: #0F8A7E;
  --teal-bg: #E3F4F1;
  --seg-todo: #A9C7EE;        /* pale blue: "to do" segment in dashboard status bars */
  --heading: #071C38; /* text-color use of navy — kept separate from navy-deep's
                          background use, so dark themes can brighten heading text
                          without also darkening (and breaking) the header/buttons */
}

/* ---------- Black and Dim (build 13) ----------
   Toggled with data-theme on <html> by the theme button (Light -> Dim ->
   Black). Black keeps the stored value "dark" so saved choices still work.
   Both are screen-only: anything printed from a page uses the Light
   colours above, whatever theme is on. Their header is a dark band with
   the client's brand colour as a 3px strip (--brand-strip, set by
   brandCss(); see the "Themes" section at the end of this file). */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --band-bg: #000000;
    --brand-strip: #2E7DE1;
    --navy: #60A5FA;           /* text uses of --navy (links on soft blue); backgrounds are overridden */
    --heading: #FFFFFF;
    --on-navy-text: #FFFFFF;   /* menu, your name: bright white (13.1) */
    --on-navy-soft: #E5E5E5;   /* second menu row, phone tab labels */
    --on-navy-icon: #F0F0F0;
    --on-navy-accent: #D4D4D4;
    --on-navy-bright: #E5E5E5;
    --on-navy-sub: #A3A3A3;
    --on-navy-danger: #F87171;
    --on-navy-success: #4ADE80;
    --blue: #60A5FA;
    --blue-solid: #2E7DE1;
    --blue-light: #1E2936;
    --blue-light-hover: #243549;
    --ink: #FFFFFF;
    --ink-soft: #A3A3A3;
    --ink-faint: #8A8A8A;
    --border: #262626;
    --green: #4ADE80;
    --amber: #FBBF24;
    --red: #F87171;
    --red-solid: #DC2626;
    --body-weight: 400;
    --pill-amber: #FBBF24;
    --pill-red: #F87171;
    --seg-todo: #314C6E;

    --page-bg: #000000;
    --surface: #111111;
    --surface-2: #1A1A1A;
    --input-bg: #0A0A0A;

    --amber-bg: #342B14;
    --green-bg: #192E21;
    --green-border: #275F3B;
    --red-bg: #362020;
    --red-bg-soft: #2A1C1C;
    --red-border-soft: #693535;
    --red-text-strong: #FCA5A5;
    --neutral-bg: #1F1F1F;
    --purple: #C084FC;
    --purple-bg: #2D2337;
    --pink: #F472B6;
    --pink-bg: #35212B;
    --teal: #2DD4BF;
    --teal-bg: #152E2B;
  }

  /* Dim: soft charcoal, between Light and Black. */
  html[data-theme="dim"] {
    color-scheme: dark;
    --band-bg: #1E1F22;
    --brand-strip: #2E7DE1;
    --navy: #6AA6EE;
    --heading: #F0F0F1;
    --on-navy-text: #FFFFFF;
    --on-navy-soft: #E3E3E3;
    --on-navy-icon: #F0F0F0;
    --on-navy-accent: #D0D1D5;
    --on-navy-bright: #E3E3E3;
    --on-navy-sub: #A8AAB0;
    --on-navy-danger: #EF8686;
    --on-navy-success: #6CC793;
    --blue: #6AA6EE;
    --blue-solid: #2E7DE1;
    --blue-light: #323A46;
    --blue-light-hover: #364253;
    --ink: #E3E3E3;
    --ink-soft: #A8AAB0;
    --ink-faint: #7D8087;
    --border: #3A3B40;
    --green: #6CC793;
    --amber: #E8B65A;
    --red: #EF8686;
    --red-solid: #C24545;
    --body-weight: 400;
    --pill-amber: #E8B65A;
    --pill-red: #EF8686;
    --seg-todo: #425A78;

    --page-bg: #1E1F22;
    --surface: #2A2B2F;
    --surface-2: #323337;
    --input-bg: #232428;

    --amber-bg: #433D35;
    --green-bg: #323E3B;
    --green-border: #406051;
    --red-bg: #42363A;
    --red-bg-soft: #3B3237;
    --red-border-soft: #6D484B;
    --red-text-strong: #F2A7A7;
    --neutral-bg: #36373C;
    --purple: #B79BE8;
    --purple-bg: #3B3845;
    --pink: #E68AAE;
    --pink-bg: #41363E;
    --teal: #4CC4B5;
    --teal-bg: #2E3D3F;
  }
}
* { box-sizing: border-box; }
/* Build 16: clip instead of hidden. Hidden turned html/body into a scroll
   box that cut off pop-ups hanging below the page; clip only stops sideways
   scrolling. Browsers without clip (iOS before 16) keep using hidden. */
html, body { overflow-x: hidden; overflow-x: clip; width: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  color: var(--ink);
  background: var(--page-bg);
}
h1, h2, h3 { font-family: var(--font-display); color: var(--heading); margin: 0 0 .4em; }
/* Type scale: 12 / 13 / 14 / 16 / 20px. Page titles 20px, section and card
   headings 16px; everything smaller uses .75 / .8125 / .875rem. */
h1 { font-size: 1.25rem; }
h2, h3 { font-size: 1rem; }
a { color: var(--blue); text-decoration: none; }
table { width: 100%; border-collapse: collapse; }

/* ===== App Header ===== */
.app-header { background: var(--navy-deep); padding: 14px 0; }
.app-header-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.app-header-top { display: flex; align-items: center; gap: 20px; }
.app-brand { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.app-brand-logo { width: 26px; height: 26px; border-radius: 6px; }
.app-brand span { color: var(--on-navy-accent); }
.app-nav-primary { display: flex; gap: 20px; flex-wrap: wrap; }
.app-nav-primary a { color: var(--on-navy-text); font-weight: 500; font-size: .875rem; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.app-nav-primary a.active, .app-nav-primary a:hover { color: var(--white); border-bottom-color: var(--blue); }
/* ---------- Secondary nav row ----------
   Kept flat and fully visible rather than collapsed into a dropdown:
   everything stays one click away, which matters more than the header
   space a dropdown would save. */
.app-nav-secondary {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,.15);
}
.app-nav-secondary a {
  color: var(--on-navy-soft); font-size: .8125rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 7px; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.app-nav-secondary a i { opacity: .75; font-size: .8125rem; }
.app-nav-secondary a:hover { color: var(--white); background: rgba(255,255,255,.08); }
.app-nav-secondary a.active { color: var(--white); background: rgba(255,255,255,.14); }
.app-nav-secondary a.active i { opacity: 1; }

/* Separates the admin-only tools from the rest of the row. */
.nav-divider {
  width: 1px; height: 18px; margin: 0 8px;
  background: rgba(255,255,255,.20); flex-shrink: 0;
}

/* ---------- Dashboard: attention strip + grouped stat tiles ---------- */
.attention-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--amber-bg); border: 1px solid var(--amber);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 18px;
  font-size: .875rem; color: var(--ink);
}
.attention-strip > i { color: var(--amber); }
.stat-group-label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 600; margin: 0 0 8px;
}
.stat-tile-link { text-decoration: none; display: block; transition: transform .12s ease, box-shadow .12s ease; }
.stat-tile-link:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.10); }

/* ---------- "Filter active" notice bar ---------- */
.filter-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; background: var(--blue-light); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px; font-size: .875rem; color: var(--ink);
}
.filter-notice a { color: var(--blue); font-weight: 600; }

.app-header-notif { color: var(--on-navy-icon); font-size: 1.05rem; position: relative; text-decoration: none; }
.app-user { display: flex; align-items: center; gap: 14px; font-size: .875rem; color: var(--on-navy-text); }
.app-user em { font-style: normal; color: var(--on-navy-accent); }
.logout-link { color: var(--on-navy-danger) !important; font-size: .875rem; }

/* Mobile account button + dropdown — hidden on desktop */
.account-wrap { display: none; position: relative; margin-left: auto; }
.account-btn {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blue-solid); color: var(--white);
  border: none; font-family: var(--font-display); font-weight: 700; font-size: .875rem; cursor: pointer;
}
.account-menu {
  display: none; position: absolute; top: 44px; right: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.15);
  min-width: 190px; padding: 12px 14px; z-index: 60;
}
.account-menu.open { display: block; }
.account-menu-name { font-size: .8125rem; color: var(--ink-soft); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.account-menu-name em { font-style: normal; color: var(--navy); }
.account-menu a { display: block; padding: 7px 0; font-size: .875rem; color: var(--ink); }
.account-menu a.logout-link { color: var(--red) !important; }
/* Log out is a small POST form since build 12 (a link on another site can't
   sign you out). The button keeps the old link's look. */
button.logout-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: .875rem; line-height: inherit; cursor: pointer; }
button.logout-link:hover, button.logout-link:focus-visible { text-decoration: underline; }
.logout-form { margin: 0; }
.account-menu button.logout-link { display: block; width: 100%; text-align: left; padding: 7px 0; color: var(--red) !important; }
.account-menu button.logout-link i { margin-right: 6px; width: 14px; text-align: center; opacity: .85; }

/* Bottom tab bar — hidden on desktop, shown via media query below */
.bottom-tabs { display: none; }

/* ===== Notification badge ===== */
.notif-link { position: relative; }
.notif-badge {
  background: var(--red-solid); color: var(--white); font-size: .68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle;
}
.notif-badge-desktop {
  position: absolute; top: -6px; right: -8px; margin-left: 0;
  min-width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; font-size: .62rem;
}

.notif-badge-tab {
  position: absolute; top: 2px; right: 14px; margin-left: 0;
  min-width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; font-size: .62rem;
}

/* ===== Comment thread ===== */
.comment-thread { display: flex; flex-direction: column; gap: 14px; }
.comment { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.comment-meta { font-size: .8125rem; color: var(--ink-soft); margin-bottom: 4px; }
.comment-meta strong { color: var(--heading); }
.comment-body { font-size: .875rem; color: var(--ink); }
.comment-attachment { margin-top: 6px; }
.comment-attachment a {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-light); color: var(--navy); padding: 5px 12px;
  border-radius: 6px; font-size: .8125rem; font-weight: 600;
}
.comment-attachment a:hover { background: var(--blue-light-hover); }
.comment-attachment .file-size { font-weight: 400; color: var(--ink-soft); }

.app-main { max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; }

/* ===== Cards / Layout ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 20px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ===== Calendar ===== */
/* Mini month grid — day numbers + small dots only, same design on desktop
   and mobile since it's compact enough to never need cramming. */
.cal-mini-card { padding: 14px; }
.cal-mini-grid { display: flex; flex-wrap: wrap; }
.cal-mini-head { margin-bottom: 6px; }
.cal-mini-head > div, .cal-mini-grid > .cal-mini-cell {
  width: 14.28%; box-sizing: border-box;
}
.cal-mini-head {
  font-size: .75rem; font-weight: 700; color: var(--ink-soft);
  text-align: center; text-transform: uppercase;
}
.cal-mini-head > div { text-align: center; }
.cal-mini-cell {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--ink-faint); gap: 2px;
}
.cal-mini-clickable { background: var(--surface-2); cursor: pointer; color: var(--ink); }
.cal-mini-clickable:hover { background: var(--blue-light); }
.cal-mini-empty { visibility: hidden; }
.cal-mini-today { outline: 2px solid var(--blue); }
.cal-mini-num { font-size: .8125rem; font-weight: 600; }
.cal-mini-dots { display: flex; gap: 2px; height: 6px; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.cal-dot-task { background: var(--blue); }
.cal-dot-note { background: var(--purple); }
.cal-dot-holiday { background: var(--amber); }
.cal-dot-leave { background: var(--pink); }
.cal-dot-overdue { background: var(--red); }

/* Overdue/Today/Upcoming — always visible below the grid by default */
.cal-summary-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cal-summary-label { font-size: .875rem; font-weight: 700; }
.cal-summary-count { font-size: .8125rem; color: var(--ink-faint); margin-left: auto; }
.cal-summary-detail { font-size: .8125rem; color: var(--ink-soft); padding: 2px 0 12px 13px; }
.cal-summary-detail a { color: inherit; }
.cal-upcoming-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); margin: 4px 0 6px; }
.cal-upcoming-row { display: flex; justify-content: space-between; font-size: .875rem; padding: 5px 0; border-bottom: 1px solid var(--border); }
.cal-upcoming-row:last-child { border-bottom: none; }
.cal-upcoming-zero { color: var(--ink-faint); }

/* Tap-a-day panel */
.cal-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-panel-date { font-size: .875rem; font-weight: 700; }
.cal-panel-body { display: flex; flex-direction: column; gap: 4px; }
.cal-panel-row { font-size: .875rem; padding: 6px 8px; border-radius: 6px; background: var(--blue-light); }
.cal-panel-overdue { background: var(--red-bg-soft); color: var(--red-text-strong); }
.cal-panel-holiday { background: var(--amber-bg); color: var(--amber); font-weight: 700; }
.cal-panel-leave { background: var(--pink-bg); color: var(--pink); }
.cal-panel-empty { background: none; color: var(--ink-faint); padding-left: 0; }
.cal-leave {
  font-size: .8125rem; background: var(--pink-bg); color: var(--pink);
  padding: 5px 10px; border-radius: 6px; margin-bottom: 6px;
}

.cal-qa-tabs { display: flex; gap: 4px; }
.cal-qa-tab {
  font-size: .8125rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.cal-qa-tab.active { background: var(--blue-solid); color: var(--white); border-color: var(--blue-solid); }

/* Agenda list — one card per day that actually has something on it */
.cal-agenda-day { padding: 14px 18px; margin-bottom: 10px; }
.cal-agenda-date { font-size: .875rem; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.cal-agenda-today { color: var(--blue); }
.cal-agenda-meta { font-weight: 400; color: var(--ink-faint); }
.cal-holiday {
  display: block; font-size: .8125rem; font-weight: 700; padding: 5px 10px; border-radius: 6px; margin-bottom: 6px;
}
.cal-holiday-my { background: var(--amber-bg); color: var(--amber); }
.cal-holiday-bn { background: var(--red-bg-soft); color: var(--red-text-strong); }
.cal-item {
  display: block; font-size: .875rem; padding: 7px 10px; border-radius: 6px; margin-bottom: 4px;
  background: var(--blue-light); color: var(--navy); text-decoration: none;
}
.cal-item:hover { background: var(--blue-solid); color: var(--white); }
.cal-item-urgent { border-left: 3px solid var(--red); }
.cal-item-high { border-left: 3px solid var(--amber); }
.cal-item-done { opacity: .5; text-decoration: line-through; }
.cal-item-note { background: var(--purple-bg); color: var(--purple); }
.cal-item-note:hover { background: var(--purple); color: var(--white); }

@media (max-width: 700px) {
  .cal-mini-num { font-size: .875rem; }
  .cal-agenda-day { padding: 12px 14px; }
  .cal-item { font-size: .875rem; padding: 8px 10px; }
}

/* ===== Stat tiles ===== */
.dash-greeting-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  border-radius: 12px; padding: 16px 20px; margin-bottom: 4px;
}
.dash-greeting-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 1.1rem;
}
/* Temperature reads as a small data readout rather than plain prose —
   the one deliberate "more tech" touch, kept to a single number. */
.dash-weather-temp {
  font-family: var(--font-mono); font-weight: 600; font-size: .8125rem;
  background: rgba(255,255,255,.10); color: var(--on-navy-success);
  border-radius: 5px; padding: 2px 7px; letter-spacing: .01em;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.stat-tile .num { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--heading); }
.stat-tile .label { font-size: .8125rem; color: var(--ink-soft); margin-top: 2px; }

/* ===== Forms ===== */
label { display: block; font-size: .875rem; font-weight: 600; color: var(--heading); margin-bottom: 5px; margin-top: 14px; }
label:first-child { margin-top: 0; }
input[type=text], input[type=password], input[type=date], input[type=tel],
input[type=number], input[type=time], input[type=email], input[type=search],
input[type=url], input[type=datetime-local], input[type=month], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px;
  font-family: var(--font-body); font-size: .875rem; background: var(--input-bg); color: var(--ink);
}
textarea { min-height: 80px; resize: vertical; }
.btn {
  display: inline-block; padding: 9px 20px; border-radius: 999px; border: none;
  background: var(--blue-solid); color: var(--white); font-weight: 600; font-size: .875rem; cursor: pointer;
  font-family: var(--font-body);
}
.btn:hover { opacity: .92; }
.btn-secondary { background: var(--surface); color: var(--heading); box-shadow: inset 0 0 0 1px var(--border); }
.btn-secondary:hover { background: var(--surface-2); opacity: 1; }
.btn-small { padding: 5px 14px; font-size: .8125rem; }

/* ===== Login page ===== */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--blue-light), var(--page-bg));
  padding: 24px;
}
.login-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 0; width: 100%; max-width: 360px;
  box-shadow: 0 16px 40px rgba(11,42,82,.12);
  overflow: hidden;
}
/* Thin brand-gradient edge — the one deliberate "more premium" touch,
   the rest of the card is unchanged from before. */
.login-box-top { height: 4px; background: linear-gradient(90deg, var(--blue), var(--navy)); }
.login-box-body { padding: 38px 32px 32px; }
.login-logo {
  display: block; margin: 0 auto 18px; width: 68px; height: 68px;
  filter: drop-shadow(0 6px 14px rgba(11,42,82,.25));
}
.login-box h1 { font-size: 1.3rem; margin-bottom: 5px; text-align: center; letter-spacing: -.01em; }
.login-tagline {
  text-align: center; font-size: .75rem; font-weight: 600; letter-spacing: .05em;
  color: var(--blue); text-transform: uppercase; margin: 0 0 10px;
}
.login-box p.sub { color: var(--ink-soft); font-size: .875rem; margin-bottom: 24px; text-align: center; }
.login-error {
  background: var(--red-bg-soft); border: 1px solid var(--red-border-soft); color: var(--red);
  padding: 10px 14px; border-radius: 7px; font-size: .875rem; margin-bottom: 16px;
}

/* ---------- Split-panel login (desktop only) ----------
   A branded navy panel alongside the form, shown above the app's usual
   800px breakpoint. Below it, the single-card layout above is used
   instead — the split panel was never meant for a phone screen, so
   rather than squeeze it down responsively, it's simplest to render
   both and let CSS pick the right one for the viewport. Only one is
   ever visible at a time. */
.login-split-wrap { display: none; }
/* This was previously an inline style="" on the element in login.php.
   That was the bug: an inline style always wins over an external
   stylesheet rule, media query or not — so the @media override below
   for narrower screens could never actually take effect, and both
   layouts ended up visible together. Defining it here, as a real rule
   the media query can outrank, is what makes only one show at a time. */
.login-card-wrap { width: 100%; display: flex; justify-content: center; }
.login-split {
  display: flex; width: 100%; max-width: 900px; min-height: 480px;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 20px 48px rgba(11,42,82,.16);
}
.login-split-brand {
  width: 320px; flex-shrink: 0; padding: 44px 36px;
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login-split-brand::before {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.04);
}
.login-split-brand::after {
  content: ""; position: absolute; right: 20px; bottom: -80px;
  width: 180px; height: 180px; border-radius: 50%; background: rgba(46,125,225,.14);
}
.login-split-brand > * { position: relative; z-index: 1; }
.login-split-logo {
  width: 52px; height: 52px; border-radius: 13px; margin-bottom: 22px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.login-split-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: var(--white); line-height: 1.25;
}
.login-split-tagline {
  font-size: .8125rem; font-weight: 600; letter-spacing: .05em;
  color: var(--on-navy-accent); text-transform: uppercase; margin-top: 12px; line-height: 1.5;
}
.login-split-footer { font-size: .75rem; color: var(--on-navy-soft); line-height: 1.6; }
.login-split-form {
  flex: 1; background: var(--surface); padding: 56px 60px;
  display: flex; flex-direction: column; justify-content: center;
}
.login-split-form-inner { max-width: 280px; width: 100%; }
.login-split-form h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin: 0 0 5px; }
.login-split-form p.sub { color: var(--ink-soft); font-size: .875rem; margin: 0 0 22px; text-align: left; }

@media (min-width: 801px) {
  .login-card-wrap { display: none; }
  .login-split-wrap { display: flex; justify-content: center; width: 100%; }
}

/* ===== Tables ===== */
.data-table th {
  text-align: left; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: .875rem; vertical-align: top; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover { background: var(--surface-2); }
.picker-wrap { position: relative; }
.picker-list {
  position: absolute; z-index: 50; left: 0; right: 0; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  max-height: 220px; overflow-y: auto; box-shadow: 0 8px 20px rgba(0,0,0,.12);
  display: none;
}
.picker-list.open { display: block; }
.picker-item { padding: 8px 12px; cursor: pointer; font-size: .875rem; }
.picker-item:hover { background: var(--blue-light); }
.picker-empty { padding: 8px 12px; color: var(--ink-faint); font-size: .875rem; }
.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-row { display: flex; gap: 10px; align-items: flex-start; }
.history-icon {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface);
  background: var(--blue-light); color: var(--blue); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .8125rem;
}
.history-detail { font-size: .875rem; color: var(--ink); }
.history-meta { font-size: .75rem; color: var(--ink-faint); margin-top: 1px; }
.seen-tick { color: var(--blue); font-size: .875rem; margin-right: 4px; }
.seen-tick[title] { cursor: default; }
.data-table .group-head td { padding: 10px 12px 6px; font-size: .75rem; font-weight: 700; color: var(--ink-faint); letter-spacing: .03em; text-transform: uppercase; border-bottom: none; }
.data-table .group-head:not(:first-child) td { padding-top: 20px; }
.drag-handle { cursor: grab; color: var(--ink-soft); text-align: center; width: 28px; }
.drag-handle:active { cursor: grabbing; }
tr[draggable="true"] { transition: opacity .15s ease; }

/* ===== Badges ===== */
.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .75rem; font-weight: 500; }
.badge-todo, .badge-open { background: var(--blue-light); color: var(--blue); }
.badge-in_progress, .badge-pending { background: var(--amber-bg); color: var(--amber); }
.badge-waiting, .badge-waiting_parts, .badge-waiting_supplier, .badge-waiting_response { background: var(--amber-bg); color: var(--amber); }
.badge-done, .badge-resolved, .badge-closed { background: var(--green-bg); color: var(--green); }
.badge-arrived, .badge-completed, .badge-replacement_received, .badge-returned_to_customer { background: var(--green-bg); color: var(--green); }
.badge-confirmed, .badge-shipped, .badge-sent { background: var(--blue-light); color: var(--blue); }
.badge-cancelled, .badge-rejected { background: var(--red-bg); color: var(--red); }
.badge-priority-urgent { background: var(--red-bg); color: var(--red); }
.badge-priority-high { background: var(--amber-bg); color: var(--amber); }
.badge-priority-normal { background: var(--blue-light); color: var(--blue); }
.badge-priority-low { background: var(--neutral-bg); color: var(--ink-soft); }
.badge-admin { background: var(--navy-deep); color: var(--white); }
.badge-staff { background: var(--blue-light); color: var(--navy); }

/* ===== Refined row/list pattern (Dashboard) =====
   A calmer alternative to .data-table for list cards: priority shows as a
   left accent bar instead of a second badge, status is a single pill
   aligned right, and secondary info gets its own quieter line. */
.row-list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 13px 4px 13px 11px; border-bottom: 1px solid var(--border);
  border-left: 6px solid transparent; margin-left: -7px;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.row:hover {
  background: var(--surface-2); box-shadow: 0 3px 10px rgba(11,42,82,.07);
  transform: translateY(-1px); border-radius: 6px;
}

/* Landed-on-via-link highlight — briefly marks the row/card a dashboard
   link (My Orders, My Quotations, etc.) jumped to, so it doesn't look
   like the click did nothing on a long list. */
.row:target, .list-table tr:target, .warranty-claim-card:target {
  animation: target-flash 2s ease-out;
}
@keyframes target-flash {
  0% { background: var(--blue-light); }
  100% { background: transparent; }
}
.row-list .row:last-child { border-bottom: none; }
.row.pri-urgent { border-left-color: var(--red); }
.row.pri-high { border-left-color: var(--amber); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 500; font-size: .875rem; color: var(--ink); }
.row-title a { color: inherit; text-decoration: none; }
.row-title a:hover { color: var(--blue); }
.row-meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.row-meta span { font-size: .8125rem; color: var(--ink-faint); }
.row-meta span + span { border-left: 1px solid var(--border); padding-left: 12px; }
.row-waiting {
  margin-top: 5px; font-size: .8125rem; color: var(--amber); background: var(--amber-bg);
  display: inline-block; padding: 2px 8px; border-radius: 5px;
}

/* Age signal — small solid dot + day-count, separate from priority (edge bar)
   and status (pill). Same 3 tiers everywhere: not picked up, picked up but
   stuck, or stuck in Waiting. */
.age-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: .8125rem; color: var(--ink-faint); white-space: nowrap; }
.age-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.age-dot-green { background: var(--green); }
.age-dot-amber { background: var(--amber); }
.age-dot-red { background: var(--red); }

.pill { font-size: .75rem; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; flex-shrink: 0; }
.pill-todo, .pill-open { background: var(--blue-light); color: var(--blue); }
.pill-in_progress { background: var(--amber-bg); color: var(--amber); }
.pill-waiting, .pill-waiting_parts { background: var(--amber-bg); color: var(--amber); }
.pill-done, .pill-resolved, .pill-closed { background: var(--green-bg); color: var(--green); }
.pill-pending { background: var(--blue-light); color: var(--blue); }
.pill-quoted { background: var(--amber-bg); color: var(--amber); }
.pill-won { background: var(--green-bg); color: var(--green); }
.pill-lost { background: var(--red-bg-soft); color: var(--red); }
.pill-sent { background: var(--blue-light); color: var(--blue); }
.pill-waiting_response { background: var(--amber-bg); color: var(--amber); }
.pill-replacement_received, .pill-returned_to_customer { background: var(--green-bg); color: var(--green); }
.pill-rejected { background: var(--red-bg); color: var(--red); }

.card-head-plain { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.view-all { color: var(--blue); font-size: .8125rem; font-weight: 600; }
.empty { color: var(--ink-faint); font-size: .875rem; padding: 6px 4px; }

/* Not Picked Up alert, restyled to match the row pattern */
/* ---------- Small utility classes ----------
   Extracted from the most-repeated inline styles so new markup has a
   named class to reach for instead of retyping the same declarations.
   Existing inline styles were deliberately NOT mass-converted: they
   already use CSS variables (so rebranding works through :root), and a
   sweeping find/replace across ~500 sites can't be execution-tested
   here. New code should use these; old code can migrate as it's touched. */
.text-muted-sm { color: var(--ink-soft); font-size: .8125rem; }
.input-compact { font-size: .8125rem; padding: 5px; margin-top: 6px; }
.btn-danger { background: var(--red-solid); }
.stack-sm { margin-top: 8px; }
.stack-md { margin-top: 14px; }

/* ---------- Flash messages ----------
   Confirms an action after it happened, on the page you land on. Fades
   out on its own so it never needs dismissing. */
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px; margin-bottom: 18px;
  font-size: .875rem; font-weight: 500;
  animation: flash-in .22s ease-out, flash-out .4s ease-in 6s forwards;
}
.flash-success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.flash-error   { background: var(--red-bg-soft); color: var(--red); border: 1px solid var(--red-border-soft); }
.flash-info    { background: var(--blue-light); color: var(--blue); border: 1px solid var(--border); }
@keyframes flash-in  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes flash-out { to { opacity: 0; visibility: hidden; margin-bottom: 0; padding-top: 0; padding-bottom: 0; height: 0; } }
@media print { .flash { display: none; } }
/* Keystone cross-app search results fading in once they arrive — the
   same subtle motion as the flash message, not a new style of its own. */
.fade-in-section { animation: flash-in .25s ease-out; }


.alert-card { background: var(--red-bg-soft); border: 1px solid var(--red-border-soft); border-radius: 10px; padding: 20px 24px; margin-bottom: 20px; }
.alert-head { display: flex; align-items: center; gap: 8px; color: var(--red); font-weight: 700; font-family: var(--font-display); font-size: 1rem; margin-bottom: 4px; }
.alert-sub { color: var(--ink-soft); font-size: .8125rem; margin-bottom: 8px; }
.alert-card .row { border-bottom-color: var(--red-border-soft); }

/* Team Workload — avatar-led person rows */
.person-row { border-bottom: 1px solid var(--border); padding: 12px 2px; }
.person-row:last-child { border-bottom: none; }
.person-summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.person-summary::-webkit-details-marker { display: none; }
.person-left { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--navy);
  color: var(--white); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .8125rem; flex-shrink: 0;
}
.person-name { font-weight: 600; font-size: .875rem; }
.person-role { color: var(--ink-faint); font-size: .75rem; }
.person-counts { font-size: .8125rem; color: var(--ink-soft); text-align: right; }
.person-counts .waiting-flag { color: var(--amber); }
.person-detail { margin-top: 12px; padding-left: 2px; }

/* ===== Refined list-table pattern (Tasks / Tickets lists) =====
   Same idea as the row pattern, but built on a real <table> so the
   existing drag-to-reorder JS (which selects tr[draggable]) keeps working
   unchanged. Collapses what used to be 5-6 separate columns into one
   flowing meta line per row — also fixes narrow-phone horizontal scrolling. */
.list-table { width: 100%; border-collapse: collapse; }
.list-table tr { border-bottom: 1px solid var(--border); }
.list-table tr:last-child { border-bottom: none; }
.list-table tr:hover { background: var(--surface-2); }
.list-table td { padding: 0; vertical-align: top; }
.list-table .drag-td { width: 28px; padding: 13px 0 13px 4px; color: var(--ink-soft); cursor: grab; }
.list-table .drag-td:active { cursor: grabbing; }
.list-table .group-head td { padding: 10px 10px 6px; font-size: .75rem; font-weight: 700; color: var(--ink-faint); letter-spacing: .03em; text-transform: uppercase; border-bottom: none; }
.list-table .group-head:not(:first-child) td { padding-top: 20px; }

.list-table .main-td { padding: 13px 10px 13px 13px; border-left: 6px solid transparent; }
.list-table tr.pri-urgent .main-td { border-left-color: var(--red); }
.list-table tr.pri-high .main-td { border-left-color: var(--amber); }
.list-table .status-td { padding: 13px 4px; text-align: right; white-space: nowrap; width: 1%; }
.list-table .status-td select {
  border: none; background: none; padding: 3px 8px; font-size: .75rem; font-weight: 500;
  border-radius: 999px; letter-spacing: .02em; min-width: 128px;
}
.priority-key { display: flex; gap: 16px; margin-bottom: 12px; font-size: .8125rem; color: var(--ink-faint); }
.priority-key span { display: inline-flex; align-items: center; gap: 5px; margin-right: 16px; }
.priority-key .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* ===== Filter bar ===== */
.filter-bar { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; align-items: end; }
.filter-bar > div { min-width: 160px; }

.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }

.empty-state {
  text-align: center; padding: 40px 20px; color: var(--ink-soft);
}
.empty-state::before {
  content: '\f187'; font-family: "Font Awesome 6 Free"; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: 0 auto 10px;
  border-radius: 50%; background: var(--blue-light); color: var(--blue); font-size: .875rem;
}

/* ===== Responsive ===== */
@media (max-width: 800px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }

  .app-header-inner { flex-wrap: nowrap; }
  .app-header-top { flex-wrap: nowrap; }
  .app-brand { flex: 1; }

  /* Desktop nav + user info hide on mobile — replaced by account button + bottom tabs */
  .app-nav-primary, .app-nav-secondary { display: none; }
  .app-user-desktop { display: none; }
  .account-wrap { display: block; }

  /* Bottom tab bar — the daily-use shortcuts, always reachable */
  .bottom-tabs {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--navy-deep);
    border-top: 1px solid rgba(255,255,255,.1);
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-tabs a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 2px 8px;
    color: var(--on-navy-soft);
    font-size: .66rem;
    font-weight: 600;
  }
  .bottom-tabs a i { font-size: 1.15rem; }
  .bottom-tabs a.active { color: var(--white); }
  .bottom-tabs a.active i { color: var(--blue); }

  /* Leave room so page content doesn't hide behind the fixed bottom bar */
  .app-main { padding-bottom: 88px; }

  .data-table { display: block; overflow-x: auto; }
}

/* ---------- Warranty claim cards (multi-item rebuild) ---------- */
.warranty-claim-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.warranty-claim-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.warranty-claim-sub { color: var(--ink-soft); font-size: .8125rem; margin-top: 2px; }
.warranty-print-link { font-size: .75rem; margin-left: 8px; }
.warranty-item-table th { text-align: left; font-size: .75rem; text-transform: uppercase; color: var(--ink-faint); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.warranty-item-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.warranty-inline-input { width: 100%; font-size: .8125rem; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.warranty-inline-input:hover, .warranty-inline-input:focus { border-color: var(--border); background: var(--input-bg); color: var(--ink); }
.warranty-remark-input { min-height: 32px; resize: vertical; font-family: inherit; }
.warranty-serial-history { font-size: .75rem; color: var(--amber); margin-top: 4px; }
.warranty-serial-history div { padding: 1px 0; }
.warranty-add-item { margin-top: 10px; }
.warranty-add-item summary { cursor: pointer; color: var(--blue); font-size: .8125rem; }
.warranty-item-row { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 6px; margin-bottom: 6px; align-items: start; }
.warranty-item-row input, .warranty-item-row textarea { font-size: .875rem; padding: 6px 8px; }
.warranty-item-row-remark { min-height: 34px; resize: vertical; font-family: inherit; }
@media (max-width: 640px) {
  .warranty-item-row { grid-template-columns: 1fr; }
  .warranty-item-table, .warranty-item-table thead { display: block; }
  .warranty-item-table tr { display: block; border-bottom: 2px solid var(--border); padding: 6px 0; }
  .warranty-item-table th { display: none; }
  .warranty-item-table td { display: block; border-bottom: none; padding: 3px 0; }
}

/* ---------- Waiting-on tag (task rows) ---------- */
.waiting-on-tag { display:inline-block; font-size:.75rem; font-weight:600; padding:2px 8px; border-radius:20px; margin-right:4px; }
.waiting-on-customer { background:var(--amber-bg); color:var(--amber); }
.waiting-on-supplier { background:var(--blue-light); color:var(--blue); }
.waiting-on-internal { background:var(--purple-bg); color:var(--purple); }
.waiting-on-other { background:var(--neutral-bg); color:var(--ink-soft); }

/* ---------- Dashboard: collapsible Team Snapshot + queue links ---------- */
.team-snapshot-toggle summary.team-snapshot-summary {
  cursor: pointer; list-style: none; font-size: .875rem; color: var(--blue);
  padding: 6px 0 12px; font-weight: 600;
}
.team-snapshot-toggle summary.team-snapshot-summary::-webkit-details-marker { display: none; }
.team-snapshot-toggle summary.team-snapshot-summary::before { content: "▸ "; }
.team-snapshot-toggle[open] summary.team-snapshot-summary::before { content: "▾ "; }
.view-queue-link { color: var(--blue); text-decoration: underline; font-size: .8125rem; }

/* ---------- Theme toggle ---------- */
.theme-toggle-btn {
  background: none; border: none; color: var(--on-navy-icon); font-size: 1.05rem; cursor: pointer;
  padding: 4px 6px; display: inline-flex; align-items: center;
}
.theme-toggle-btn:hover { color: var(--white); }
/* Icon shown = the theme tapping the button switches TO next:
   Light shows the Dim icon, Dim shows the moon (Black), Black shows the
   sun (Light). Black's stored value is still "dark", hence the class names. */
.theme-icon-light { display: none; }
.theme-icon-dim { display: none; }
html[data-theme="dark"] .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: inline; }
html:not([data-theme="dark"]):not([data-theme="dim"]) .theme-icon-dim { display: inline; }
html:not([data-theme="dark"]):not([data-theme="dim"]) .theme-icon-dark { display: none; }

.theme-toggle-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; padding: 7px 0; font-size: .875rem; color: var(--ink);
  cursor: pointer; font-family: inherit;
}
.theme-toggle-row .theme-icon-dark, .theme-toggle-row .theme-icon-light, .theme-toggle-row .theme-icon-dim { width: 16px; text-align: center; color: var(--ink-soft); }
.theme-toggle-row .theme-toggle-label { width: auto; text-align: left; color: var(--ink); }

/* ---------- Dashboard: grouped-by-person sections (Urgent / Not Picked Up) ---------- */
.dash-person-group { margin-bottom: 16px; }
.dash-person-group:last-child { margin-bottom: 0; }
.dash-person-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dash-person-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--blue-light); color: var(--blue);
  font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-person-name { font-size: .875rem; font-weight: 700; color: var(--heading); }
.dash-person-count { font-size: .75rem; color: var(--ink-faint); }
.dash-person-items { padding-left: 30px; display: flex; flex-direction: column; gap: 6px; }
.dash-person-items .row { padding: 8px 4px 8px 12px; margin-left: 0; }

/* My Tasks grouped-by-waiting-status labels */
.dash-group-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); margin: 10px 0 6px; }
.dash-group-label:first-child { margin-top: 0; }
.dash-group-label-waiting { color: var(--amber); }

/* ---------- "+ Add more details" collapsible toggle (task/ticket create forms) ---------- */
.more-details-toggle {
  margin: 14px 0 4px; font-size: .875rem; color: var(--blue); cursor: pointer;
  display: flex; align-items: center; gap: 6px; user-select: none;
}
.more-details-toggle i { font-size: .75rem; transition: transform .15s; }
.more-details-hint { color: var(--ink-faint); font-weight: 400; }
#task-more-fields, #ticket-more-fields { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 6px; }

/* ---------- Not Picked Up: collapsed-by-default summary ---------- */
.npu-toggle summary.npu-summary {
  cursor: pointer; list-style: none; font-size: .875rem; color: var(--red-text-strong);
  font-weight: 600; padding: 2px 0;
}
.npu-toggle summary.npu-summary::-webkit-details-marker { display: none; }
.npu-toggle summary.npu-summary::before { content: "▸ "; }
.npu-toggle[open] summary.npu-summary::before { content: "▾ "; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.page-link {
  font-size: .875rem; padding: 6px 11px; border-radius: 6px; background: var(--surface-2);
  color: var(--ink); text-decoration: none; border: 1px solid var(--border);
}
.page-link:hover { background: var(--blue-light); }
.page-link-current { background: var(--blue-solid); color: var(--white); border-color: var(--blue-solid); font-weight: 700; }
.page-link-disabled { color: var(--ink-faint); cursor: default; }
.page-ellipsis { padding: 0 4px; color: var(--ink-faint); font-size: .875rem; }

/* ---------- Nav icons (desktop nav + mobile account menu) ---------- */
.app-nav-primary a i, .app-nav-secondary a i, .account-menu a i {
  margin-right: 6px; width: 14px; text-align: center; opacity: .85;
}

/* ---------- Attachment retention: lock button + deletion warning ---------- */
.attachment-lock-btn {
  background: none; border: none; cursor: pointer; color: var(--ink-faint);
  font-size: .8125rem; padding: 2px 6px; margin-left: 4px;
}
.attachment-lock-btn:hover { color: var(--blue); }
.attachment-warning {
  display: inline-block; font-size: .75rem; color: var(--red-text-strong);
  background: var(--red-bg-soft); padding: 2px 7px; border-radius: 10px; margin-left: 8px;
}

/* ---------- Report page: collapsible sections ---------- */
.report-section { border: none; margin-bottom: 8px; }
.report-section summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 4px 0;
}
.report-section summary::-webkit-details-marker { display: none; }
.report-section summary h1 { margin: 0; }
.report-section-caret { color: var(--ink-faint); font-size: .875rem; transition: transform .15s ease; flex-shrink: 0; margin-left: 12px; }
.report-section[open] .report-section-caret { transform: rotate(180deg); }
.report-section-controls { display: flex; align-items: center; gap: 10px; }
.report-section-body { margin-top: 8px; }

/* Wide tables (trend reports, staff productivity) scroll inside their
   own box on narrow screens, so the page body never scrolls sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 520px; }
@media print {
  .table-scroll { overflow-x: visible; }
  .table-scroll > table { min-width: 0; }
}

/* ---------- Print: force every collapsed report section open, and
   hide anything that isn't the report content itself (nav, sidebar,
   buttons, filter controls, edit-only chrome). ---------- */
@media print {
  .app-header, .bottom-tabs, .no-print, #add-recurring-toggle-btn, #add-resource-toggle-btn { display: none !important; }
  .report-section-body { display: block !important; }
  .report-section summary { pointer-events: none; }
  .report-section-caret { display: none; }
  body { background: var(--white); color: #000; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  a { color: #000; text-decoration: none; }

  /* Single-section printing — triggered by each section's own Print
     button (see printSection() above). Hides every other section. */
  body.printing-single .report-section { display: none !important; }
  body.printing-single .report-section.printing-target { display: block !important; }
}

/* ---------- Admin dashboard: Team today, load bars, collapsed detail sections ---------- */
.team-today { padding: 16px 20px; }
.tt-head { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; color: var(--heading); margin-bottom: 10px; }
.tt-head i { color: var(--blue); }
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tt-totals { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; font-size: .875rem; }
.tt-totals a { color: var(--ink-soft); text-decoration: none; }
.tt-totals a:hover { text-decoration: underline; }
.tt-totals strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--heading); margin-right: 4px; }
.seg-bar { display: flex; gap: 2px; height: 14px; }
.seg-bar-sm { height: 12px; }
.seg { min-width: 4px; border-radius: 3px; }
.seg-bar-empty { width: 100%; background: var(--surface-2); border-radius: 3px; }
.seg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: .8125rem; color: var(--ink-soft); }
.seg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.team-load { padding: 6px 20px; }
.tl-title { font-size: .8125rem; color: var(--ink-soft); padding: 10px 0 6px; }
.tl-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.tl-row:hover .tl-name { text-decoration: underline; }
.tl-avatar {
  width: 28px; height: 28px; border-radius: 50%; color: var(--white); flex-shrink: 0;
  font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.tl-who { flex: 0 0 116px; min-width: 0; }
.tl-name { display: block; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bar-wrap { flex: 1; min-width: 0; display: block; }
.tl-note { flex-shrink: 0; text-align: right; font-size: .8125rem; color: var(--ink-soft); }
.tl-overdue { color: var(--red); font-weight: 600; }
@media (max-width: 640px) {
  .tl-row { flex-wrap: wrap; row-gap: 6px; }
  .tl-bar-wrap { order: 3; flex-basis: 100%; }
  .tl-note { margin-left: auto; }
}

.dash-collapse-group { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 24px; }
.dash-collapse { border-top: 1px solid var(--border); }
.dash-collapse:first-child { border-top: none; }
.dash-collapse > summary { display: flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer; list-style: none; font-size: .875rem; color: var(--ink); }
.dash-collapse > summary::-webkit-details-marker { display: none; }
.dash-collapse > summary::before { content: "\25B8"; color: var(--ink-faint); }
.dash-collapse[open] > summary::before { content: "\25BE"; }
.dc-title { flex: 1; }
.dash-collapse-body { padding: 4px 18px 16px; }

/* ---------- Dashboard: My Tasks / My Service Tickets rows with quick actions ---------- */
.dash-bucket-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }
.card-head-plain + .dash-bucket-head { margin-top: 6px; }
.dash-bucket-head::after { content: ""; flex: 1; height: 1px; background: var(--border); order: 3; }
.dash-bucket-name { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.dash-bucket-overdue .dash-bucket-name { color: var(--red); }
.dash-bucket-today .dash-bucket-name { color: var(--amber); }
.dash-bucket-count { font-size: .75rem; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border); }
.dash-more { margin: 10px 0 0; text-align: right; font-size: .8125rem; }

.dash-row { flex-wrap: wrap; align-items: center; }
.dash-row .row-main { flex: 1 1 200px; }
.dash-meta { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .8125rem; color: var(--ink-soft); }
.dash-due { padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: .75rem; }
.dash-due-red { background: var(--red-bg); color: var(--red); }
.dash-due-amber { background: var(--amber-bg); color: var(--amber); }
.dash-due-neutral { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border); }
.dash-issue { margin-top: 3px; font-size: .8125rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-actions { flex-shrink: 0; display: flex; align-items: center; }
.dash-actions [hidden] { display: none !important; }
.dash-act-main { display: flex; gap: 6px; align-items: center; }
.dash-act-form { margin: 0; }
.dash-act-btn { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.dash-act-tick { min-width: 40px; background: var(--green-bg); color: var(--green); border: 1px solid var(--green); }
.dash-act-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.dash-confirm-q { font-size: .8125rem; font-weight: 600; color: var(--heading); }
.dash-note { flex: 1 1 180px; min-width: 0; font-size: .8125rem; padding: 6px 10px; }
.dash-row.is-confirming .dash-actions { flex-basis: 100%; }
.dash-row.is-confirming .dash-act-confirm { width: 100%; }
.flash-toast {
  position: fixed; left: 0; right: 0; bottom: 84px; z-index: 1000;
  margin: 0 auto; width: max-content; max-width: min(92vw, 420px);
  animation: none; box-shadow: 0 6px 22px rgba(0,0,0,.18); transition: opacity .6s ease;
}
.flash-toast-out { opacity: 0; }

/* ---------- Dashboard: Quotations / Orders / Notes cards ---------- */
.dash-count { font-weight: 400; color: var(--ink-faint); font-size: .875rem; }
.dash-row-slim { flex-wrap: nowrap; align-items: center; }
.dash-row-slim .row-main { flex: 1 1 auto; }
.dash-row-slim .dash-issue { margin-top: 2px; }
.dash-row-note .row-main { flex-basis: 120px; }
.dash-time { flex: 0 0 4.6rem; font-size: .8125rem; font-weight: 600; color: var(--heading); }
.dash-row-note.is-passed .row-main, .dash-row-note.is-passed .dash-time { opacity: .55; }
.dash-row-note.is-passed .row-title a { text-decoration: line-through; }
.pill-waiting_supplier { background: var(--amber-bg); color: var(--amber); }
.pill-confirmed { background: var(--blue-light); color: var(--blue); }
.pill-shipped, .pill-arrived, .pill-completed { background: var(--green-bg); color: var(--green); }

/* ---------- Modern pager + list search ---------- */
.pagination-wrap { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pagination-info { font-size: .8125rem; color: var(--ink-faint); }
.pagination-wrap .pagination { margin-top: 0; }
.page-link { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 10px; }
.page-of { display: none; font-size: .875rem; color: var(--ink-soft); padding: 0 6px; }
@media (max-width: 560px) {
  .pagination .page-num { display: none; }
  .pagination .page-of { display: inline; }
  .page-link { min-width: 44px; min-height: 44px; }
}

.list-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.list-search-box { position: relative; flex: 1 1 240px; max-width: 460px; }
.list-search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: .875rem; pointer-events: none; }
.list-search-box input { width: 100%; margin: 0; padding-left: 34px; }
.list-search-clear { font-size: .8125rem; color: var(--blue); text-decoration: none; }
.list-search-count { font-size: .8125rem; color: var(--ink-soft); }
.list-search-note { font-size: .8125rem; color: var(--ink-soft); margin: -8px 0 14px; }

/* ---------- Orders / Stock / Customers refresh: grouped cards ---------- */
.dash-bucket-ok .dash-bucket-name { color: var(--green); }
.dash-bucket-info .dash-bucket-name { color: var(--blue); }
.oc-list { margin-bottom: 8px; }
.oc-list .dash-bucket-head { margin-top: 18px; }
.oc-list .dash-bucket-head:first-child { margin-top: 6px; }
.oc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.oc-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.oc-ref { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); }
.oc-cust { flex: 1; font-size: .875rem; font-weight: 600; color: var(--heading); min-width: 0; }
.oc-cust a { color: inherit; text-decoration: none; }
.oc-cust a:hover { text-decoration: underline; }
.oc-count { font-size: .75rem; color: var(--ink-soft); }
.oc-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 11px 14px; border-top: 1px solid var(--border); }
.oc-card > .oc-item:first-child, .oc-card-head + .oc-item { border-top: none; }
.oc-main { flex: 1 1 220px; min-width: 0; }
.oc-itemname { font-size: .875rem; font-weight: 500; color: var(--ink); }
.oc-qty { color: var(--ink-faint); font-weight: 400; }
.oc-sub { margin-top: 3px; font-size: .8125rem; color: var(--ink-soft); }
.oc-sub-late { color: var(--red); font-weight: 600; }
.oc-assign { font-size: .8125rem; color: var(--ink-soft); flex-shrink: 0; }
.oc-status { flex-shrink: 0; }
.oc-status form { margin: 0; }
.oc-edit { flex-basis: 100%; }
.oc-editbox > summary, .st-editbox > summary { cursor: pointer; color: var(--blue); font-size: .8125rem; list-style: none; }
.oc-editbox > summary::-webkit-details-marker, .st-editbox > summary::-webkit-details-marker { display: none; }

.st-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 11px 14px; border-top: 1px solid var(--border); }
.oc-card > .st-row:first-child { border-top: none; }
.st-main { flex: 1 1 200px; min-width: 0; }
.st-name { font-size: .875rem; font-weight: 600; color: var(--heading); }
.st-meta { margin-top: 2px; font-size: .8125rem; color: var(--ink-soft); }
.st-bar { flex: 0 0 140px; }
.st-bar-top { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-soft); margin-bottom: 4px; }
.st-bal { font-weight: 700; }
.st-bal-need { color: var(--red); }
.st-bal-ok { color: var(--green); }
.st-track { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.st-fill { height: 100%; background: var(--green); }
.st-fill-need { background: var(--red); }
.st-act { flex: 0 0 auto; min-width: 104px; }
.st-act form { margin: 0; }
.st-btn-ordered { background: var(--green-bg); color: var(--green); border: 1px solid var(--green); }
.st-edit { flex: 0 0 auto; }
.st-editbox { position: relative; }
.st-editbox > summary { font-size: 1.1rem; padding: 4px 8px; color: var(--ink-faint); }
.st-editbox[open] { flex-basis: 100%; }
.st-row .st-edit:has(.st-editbox[open]) { flex-basis: 100%; }

.cu-list { margin-top: 4px; }
.cu-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 14px; border-top: 1px solid var(--border); }
.cu-row:first-child { border-top: none; }
.cu-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; flex-shrink: 0; }
.cu-main { flex: 1 1 180px; min-width: 0; }
.cu-name a { font-size: .875rem; font-weight: 500; color: var(--heading); text-decoration: none; }
.cu-name a:hover { text-decoration: underline; }
.cu-meta { margin-top: 2px; font-size: .8125rem; color: var(--ink-soft); }
.cu-call { width: 38px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); color: var(--blue); text-decoration: none; flex-shrink: 0; }
.cu-call:hover { background: var(--surface-2); }
@media (max-width: 640px) {
  .st-bar { flex: 1 1 100%; }
  .oc-assign { order: 3; }
}

/* ---------- Calendar refresh: compact grid, chips, overdue card, day panel, + button ---------- */
.cal-nav { display: flex; gap: 8px; align-items: center; }
.cal-nav-label { min-width: 120px; text-align: center; display: inline-block; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cal-person { width: auto; font-size: .8125rem; padding: 5px 10px; margin: 0; }
.cal-leaveline { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: .8125rem; color: var(--ink-soft); margin-bottom: 12px; }
.cal-leaveline i { color: var(--pink); }

.cal-overdue-card { background: var(--red-bg); border: 1px solid var(--red-border-soft); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.cal-overdue-head { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; font-weight: 700; color: var(--red); }
.cal-overdue-head a { font-size: .8125rem; font-weight: 600; color: var(--red); }
.cal-overdue-list { margin-top: 3px; font-size: .8125rem; color: var(--red); opacity: .9; }
.cal-overdue-list a { color: inherit; }

.cal-layout { display: block; }
@media (min-width: 1000px) {
  .cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
}
.cal-mini-cell { aspect-ratio: auto; height: 50px; }
.cal-mini-tap { cursor: pointer; color: var(--ink); }
.cal-mini-tap:hover { background: var(--blue-light); }
.cal-mini-selected { background: var(--blue-light); }
.cal-mini-selected .cal-mini-num { color: var(--blue); }
.cal-mini-today { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (max-width: 700px) { .cal-mini-cell { height: 46px; } }

#day-panel { margin-bottom: 12px; }
.cal-panel-hint { font-size: .875rem; color: var(--ink-soft); margin: 4px 0; }
.cal-panel-count { font-size: .8125rem; color: var(--ink-faint); }
.cal-today-tag { font-size: .75rem; font-weight: 400; color: var(--blue); }
.cal-prow { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border); }
.cal-panel-body .cal-prow:first-child { border-top: none; }
.cal-prow-passed { opacity: .5; }
.cal-prow-passed .cal-ptitle a { text-decoration: line-through; }
.cal-pdot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.cal-pdot-overdue { background: var(--red); }
.cal-pdot-task { background: var(--blue); }
.cal-pdot-note { background: var(--purple); }
.cal-pdot-holiday { background: var(--amber); }
.cal-pdot-leave { background: var(--pink); }
.cal-pmain { flex: 1; min-width: 0; }
.cal-ptitle { font-size: .875rem; color: var(--ink); }
.cal-ptitle a { color: inherit; text-decoration: none; }
.cal-ptitle a:hover { text-decoration: underline; }
.cal-psub { margin-top: 2px; font-size: .8125rem; color: var(--ink-soft); }
.cal-late { color: var(--red); font-weight: 600; }
.cal-link { background: none; border: none; padding: 0; color: var(--blue); font-size: .8125rem; cursor: pointer; }
.cal-resched { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.cal-resched input[type="date"] { width: auto; font-size: .8125rem; padding: 4px 8px; margin: 0; }
.cal-panel-add { width: 100%; margin-top: 10px; }

.cal-upcoming-card { margin-bottom: 16px; }
.cal-upcoming-row { display: flex; gap: 12px; font-size: .875rem; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cal-upcoming-day { flex: 0 0 52px; font-weight: 600; color: var(--heading); }
.cal-upcoming-items { flex: 1; min-width: 0; color: var(--ink-soft); }
.cal-upcoming-items a { color: inherit; }

.cal-card-head { display: flex; align-items: center; justify-content: space-between; }

.cal-sync { margin-bottom: 16px; }
.cal-sync > summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--heading); list-style: none; }
.cal-sync > summary::-webkit-details-marker { display: none; }
.cal-sync > summary i { color: var(--blue); margin-right: 6px; }
.cal-sync-body { margin-top: 12px; font-size: .875rem; color: var(--ink-soft); }
.cal-sync-body p { margin: 0 0 10px; }
.cal-sync-url { display: flex; gap: 8px; margin-bottom: 10px; }
.cal-sync-url input { flex: 1; min-width: 0; font-size: .8125rem; margin: 0; }
.cal-sync-steps { font-size: .8125rem; line-height: 1.6; }
.cal-sync-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-sync-actions form { margin: 0; }

.cal-fab-space { height: 96px; }
.cal-fab { position: fixed; right: 18px; bottom: 84px; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--blue-solid); color: var(--white); font-size: 1.15rem; cursor: pointer; z-index: 900; box-shadow: 0 6px 18px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; transition: transform .15s ease; }
.cal-fab-open { transform: rotate(45deg); }
.cal-fab-menu { position: fixed; right: 18px; bottom: 146px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; z-index: 900; box-shadow: 0 6px 22px rgba(0,0,0,.25); display: flex; flex-direction: column; min-width: 190px; }
.cal-fab-menu[hidden] { display: none; }
.cal-fab-menu button { background: none; border: none; text-align: left; font-size: .875rem; padding: 10px 12px; border-radius: 8px; color: var(--ink); cursor: pointer; display: flex; gap: 10px; align-items: center; }
.cal-fab-menu button:hover { background: var(--surface-2); }
.cal-fab-menu button i { color: var(--blue); width: 16px; text-align: center; }
@media (min-width: 900px) { .cal-fab { bottom: 28px; } .cal-fab-menu { bottom: 90px; } }


/* ---------- Fix: side-by-side cards must share the row equally ----------
   A long one-line description (nowrap + ellipsis) was forcing its column wider and
   squeezing the neighbouring card. min-width:0 lets each column truncate instead. */
.grid-2 > * { min-width: 0; }
/* Keep Start / tick on the right of the row; only drop below while confirming. */
.dash-row { flex-wrap: nowrap; }
.dash-row .row-main { flex: 1 1 0; min-width: 0; }
.dash-row.is-confirming { flex-wrap: wrap; }

/* ---------- Admin dashboard: Team / My work switch ---------- */
.dash-switch { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); margin: 0 0 16px; }
.dash-switch button { border: none; background: transparent; color: var(--ink-soft); font-size: .875rem; padding: 7px 18px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dash-switch button.active { background: var(--surface); color: var(--heading); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.dash-switch-badge { font-size: .75rem; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--red-bg); color: var(--red); }
.dash-view[hidden] { display: none !important; }

/* ---------- One colour per status (pills and badges agree) ----------
   Colours kept as they were; this only removes the places where the same
   status showed two different colours on different pages. */
.pill-pending, .badge-pending { background: var(--blue-light); color: var(--blue); }
.pill-in_progress, .badge-in_progress { background: var(--amber-bg); color: var(--amber); }
.pill-confirmed, .badge-confirmed, .pill-shipped, .badge-shipped, .pill-sent, .badge-sent { background: var(--blue-light); color: var(--blue); }
.pill-arrived, .badge-arrived, .pill-completed, .badge-completed { background: var(--green-bg); color: var(--green); }
.pill-quoted, .badge-quoted { background: var(--amber-bg); color: var(--amber); }
.pill-won, .badge-won { background: var(--green-bg); color: var(--green); }
.pill-lost, .badge-lost, .pill-cancelled, .badge-cancelled, .pill-rejected, .badge-rejected { background: var(--red-bg); color: var(--red); }

/* ---------- Quotations refresh ---------- */
.page-hint { color: var(--ink-soft); margin: -6px 0 16px; font-size: .875rem; }
/* ===== Chips — every small rounded label, in one place =====
   Label chips: counts and flags.     Filter chips: tap to switch a view.
   Tones are defined once below. New markup can use .chip / .chip-sm plus
   .chip-red / -amber / -green / -blue / -neutral; the older names
   (attention-chip, st-chip, dc-badge, cu-chip, q-chip, cal-chip) are kept
   as aliases so no page had to change. */

/* Label chips — normal and small */
.chip, .attention-chip, .st-chip {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; text-decoration: none;
}
.chip-sm, .dc-badge, .cu-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; text-decoration: none;
}
.attention-chip:hover { filter: brightness(.95); }
.tt-chips .attention-chip { padding: 5px 12px; }
.cu-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Filter chips */
.q-chip, .cal-chip span {
  display: inline-block; font-size: .8125rem; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft); text-decoration: none;
}
.q-chip.is-on, .cal-chip input:checked + span { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }
.cal-chip { margin: 0; cursor: pointer; }
.cal-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Tones */
.chip-red, .attention-chip-red, .st-chip-red, .dc-badge-red { background: var(--red-bg); color: var(--red); }
.chip-amber, .st-chip-amber, .dc-badge-amber, .cu-chip-amber { background: var(--amber-bg); color: var(--amber); }
.chip-green, .attention-chip-green, .st-chip-green { background: var(--green-bg); color: var(--green); }
.chip-blue, .cu-chip-blue, .q-chip-blue { background: var(--blue-light); color: var(--blue); }
.chip-neutral, .attention-chip-neutral { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border); }
/* Outlined amber: "due today" style on the dashboards */
.attention-chip-amber { background: var(--surface); color: var(--amber); border: 1px solid var(--amber); }
.q-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 11px 14px; border-top: 1px solid var(--border); }
.oc-card > .q-row:first-child { border-top: none; }
.q-main { flex: 1 1 240px; min-width: 0; }
.q-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: .875rem; font-weight: 500; color: var(--heading); }
.q-title a { color: inherit; text-decoration: none; }
.q-title a:hover { text-decoration: underline; }
.q-follow { font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--red-bg); color: var(--red); }
.q-desc { margin-top: 2px; font-size: .8125rem; color: var(--ink); }
.q-meta { margin-top: 2px; font-size: .75rem; color: var(--ink-faint); }
.q-status { margin: 0; }
.q-status select { width: auto; margin: 0; }
.q-edit { flex: 0 0 auto; }
.q-row .q-edit:has(.st-editbox[open]) { flex-basis: 100%; }

/* ---------- Warranty refresh ---------- */
.wc-card { padding: 0; }
.wc-arrow { color: var(--ink-faint); font-weight: 400; margin: 0 2px; }
.wc-status { margin: 0; }
.wc-status select { width: auto; margin: 0; }
.wc-icon { color: var(--ink-soft); font-size: .875rem; padding: 2px 4px; }
.wc-icon:hover { color: var(--blue); }
.wc-items-view { padding: 8px 14px; }
.wc-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 0; border-top: 1px dashed var(--border); }
.wc-item:first-child { border-top: none; }
.wc-item-name { font-size: .875rem; font-weight: 500; color: var(--ink); }
.wc-item-serial { font-size: .8125rem; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wc-item-problem { flex: 1 1 180px; font-size: .8125rem; color: var(--ink-soft); }
.wc-item-swapped { font-size: .75rem; color: var(--amber); }
.wc-empty { margin: 4px 0; font-size: .8125rem; color: var(--ink-faint); }
.wc-items-edit { padding: 8px 14px; }
.wc-items-edit[hidden], .wc-edit-btn[hidden] { display: none !important; }
.wc-done-edit { margin-top: 8px; }
.wc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border); }
.wc-foot-meta { flex: 1 1 200px; font-size: .8125rem; color: var(--ink-faint); }
.wc-return-form { margin: 0; display: inline-block; }
.wc-more { position: static; }
.wc-foot:has(.wc-more[open]) .wc-more { flex-basis: 100%; }
.wc-more-title { margin: 8px 0 0; font-size: .8125rem; font-weight: 600; color: var(--heading); }


/* ---------- Greeting banner holds the add buttons and the Team / My work switch ---------- */
.dash-greeting-banner { align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
.dash-greeting-icon { margin-top: 2px; }
.dash-greeting-main { flex: 1 1 220px; min-width: 0; }
.dash-greeting-sub { color: var(--on-navy-sub); margin: 4px 0 0; font-size: .875rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-banner-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
.dash-banner-add { display: flex; gap: 6px; flex-wrap: wrap; }
.banner-btn {
  display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
  font-size: .8125rem; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.10); color: var(--on-navy-bright); text-decoration: none; font-family: inherit;
}
.banner-btn:hover { background: rgba(255,255,255,.18); color: var(--white); }
.banner-btn-primary { background: rgba(255,255,255,.20); color: var(--white); }
.dash-switch-banner { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.10); margin: 0; }
.dash-switch-banner button { color: var(--on-navy-text); font-size: .8125rem; padding: 5px 14px; }
.dash-switch-banner button.active { background: rgba(255,255,255,.16); color: var(--white); box-shadow: none; }
.dash-switch-banner .dash-switch-badge { background: rgba(255,255,255,.18); color: var(--white); }
@media (max-width: 620px) {
  .dash-banner-actions { align-items: flex-start; margin-left: 0; width: 100%; }
}

/* ---------- Quotations: Quoted folds away, follow-ups stay visible ---------- */
.q-quoted { margin-top: 18px; }
.q-quoted > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 4px 0 6px; }
.q-quoted > summary::-webkit-details-marker { display: none; }
.q-quoted > summary::before { content: "\25B8"; color: var(--ink-faint); }
.q-quoted[open] > summary::before { content: "\25BE"; }
.q-quoted > summary .dash-bucket-name { color: var(--amber); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.q-quoted-hint { font-size: .75rem; color: var(--ink-faint); margin-left: auto; }
/* Closed: only the rows that need chasing are shown. */
.q-quoted:not([open]) { display: block; }
.q-quoted:not([open]) + .oc-card .q-row:not(.q-row-follow) { display: none; }
.q-quoted:not([open]) ~ .oc-card:empty { display: none; }

/* ---------- Quotations: Quoted folds away; anything needing a chase stays on show ---------- */
.q-fold-head { cursor: pointer; user-select: none; }
.q-fold-arrow { color: var(--ink-faint); font-size: .8125rem; transition: transform .15s ease; display: inline-block; }
.q-fold-head.is-open .q-fold-arrow { transform: rotate(90deg); }
.q-fold-hint { margin-left: auto; font-size: .75rem; color: var(--ink-faint); }
.q-quoted-card:not(.is-open) .q-row:not(.q-row-follow) { display: none; }
.q-quoted-card:not(.is-open) .q-row-follow + .q-row-follow { border-top: 1px solid var(--border); }
.q-quoted-card:not(.is-open)::after {
  content: "Tap the Quoted heading to see the rest"; display: block;
  padding: 9px 14px; border-top: 1px solid var(--border); font-size: .75rem; color: var(--ink-faint);
}

/* ---------- Stock Count: a per-round list, not an inventory ---------- */
.sc-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sc-head-actions form { margin: 0; }
.sc-round { font-size: .8125rem; color: var(--ink-faint); margin: 0 0 10px; }
.sc-unread { color: var(--amber); font-weight: 600; }
.sc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 11px 14px; border-top: 1px solid var(--border); }
.oc-card > .sc-row:first-child { border-top: none; }
.sc-row.is-read { opacity: .55; }
.sc-main { flex: 1 1 220px; min-width: 0; }
.sc-name { font-size: .875rem; font-weight: 500; color: var(--heading); }
.sc-meta { margin-top: 2px; font-size: .8125rem; color: var(--ink-soft); }
.sc-qty { font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; }
.sc-qty strong { font-family: var(--font-display); font-size: 1rem; color: var(--heading); margin-right: 3px; }
.sc-read-form { margin: 0; }
.sc-btn-read { background: var(--green-bg); color: var(--green); border: 1px solid var(--green); }
.sc-edit { flex: 0 0 auto; }
.sc-row .sc-edit:has(.st-editbox[open]) { flex-basis: 100%; }

/* ---------- Job Tasks board: three columns on a wide screen ---------- */
.task-board { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
@media (min-width: 900px) { .task-board { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.tb-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; }
.tb-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.tb-col-name { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.tb-col-todo .tb-col-name { color: var(--ink-soft); }
.tb-col-in_progress .tb-col-name { color: var(--blue); }
.tb-col-waiting .tb-col-name { color: var(--amber); }
.tb-col-count { font-size: .75rem; padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); }
.tb-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .tb-col-body { max-height: 66vh; overflow-y: auto; } }
.tb-empty { margin: 6px 4px; font-size: .8125rem; color: var(--ink-faint); }

/* Waiting column only: collapsible groups by who it's waiting on. Plain
   <details>/<summary> — no JS needed for the open/close itself. */
.tb-group { border: none; margin-bottom: 2px; }
.tb-group-head {
  display: flex; align-items: center; gap: 6px;
  list-style: none; cursor: pointer; user-select: none;
  font-size: .8125rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-2); border-radius: 6px;
  padding: 6px 9px; margin: 2px 0;
}
.tb-group-head::-webkit-details-marker { display: none; }
.tb-group-head::before {
  content: "▸"; font-size: .75rem; color: var(--ink-faint);
  transition: transform .12s ease;
}
.tb-group[open] > .tb-group-head::before { transform: rotate(90deg); }
.tb-group-head.tb-group-stuck { background: var(--red-bg-soft); color: var(--red-text-strong); }
.tb-group-head.tb-group-stuck::before { color: var(--red); }
.tb-group-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 2px; }

.tb-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid transparent; border-radius: 8px; padding: 9px 11px; cursor: grab; }
.tb-card.pri-urgent { border-left-color: var(--red); }
.tb-card.pri-high { border-left-color: var(--amber); }
.tb-card-title { font-size: .875rem; font-weight: 500; }
.tb-card-title a { color: var(--heading); text-decoration: none; }
.tb-card-title a:hover { text-decoration: underline; }
.tb-card-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 3px; font-size: .75rem; color: var(--ink-soft); }
.tb-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.tb-card-note { margin-top: 5px; font-size: .75rem; color: var(--ink-faint); }
.tb-status { margin: 0; margin-left: auto; }
.tb-status select { width: auto; margin: 0; font-size: .75rem; padding: 2px 6px; }
.tv-head-right { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Quotation board (same shape as the Job Tasks board) ---------- */
.qb-col-pending .tb-col-name { color: var(--blue); }
.qb-col-quoted .tb-col-name { color: var(--amber); }
.qb-col-won .tb-col-name { color: var(--green); }
.qb-card { cursor: default; }
.qb-card-follow { border-left-color: var(--red); }
.qb-desc { margin-top: 3px; font-size: .8125rem; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qb-note { margin-top: 3px; font-size: .75rem; color: var(--ink-faint); }
.qb-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.qb-actions form { margin: 0; }
.qb-actions select { width: auto; margin: 0; font-size: .75rem; padding: 2px 6px; }
.qb-card .q-edit { flex: 0 0 auto; }
.qb-card .st-editbox[open] { display: block; }

/* ---------- Ticket board (same shape as the Job Tasks / Quotation board) ---------- */
.tkb-col-open .tb-col-name { color: var(--ink-soft); }
.tkb-col-in_progress .tb-col-name { color: var(--blue); }
.tkb-col-waiting_parts .tb-col-name { color: var(--amber); }
.tkb-col-resolved .tb-col-name { color: var(--green); }
.tkb-col-resolved { opacity: .88; }
.tkb-card { cursor: default; }
.tkb-item { margin-top: 3px; font-size: .8125rem; color: var(--ink); }
.tkb-tag-link { margin-left: auto; font-size: .75rem; color: var(--ink-soft); text-decoration: none; }
.tkb-tag-link:hover { color: var(--blue); }
.tkb-status { flex-wrap: wrap; }
.tkb-status select { width: auto; }
.tkb-note { width: 100%; margin: 6px 0 0; font-size: .75rem; padding: 3px 7px; }
.tkb-resolved-card { cursor: default; }
.tkb-resolved-meta { margin-top: 3px; font-size: .75rem; color: var(--ink-faint); }
.tkb-tag-closed { font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border); margin-left: 6px; }
.tkb-see-all { display: block; text-align: center; font-size: .75rem; color: var(--ink-soft); text-decoration: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.tkb-see-all:hover { color: var(--blue); }

/* ===== Notifications page ===== */
.notif-more { margin: 10px 4px 2px; font-size: .75rem; color: var(--ink-faint); }



/* ===== Page intro line (Notes, Recurring) ===== */
.page-intro { color: var(--ink-soft); font-size: .875rem; margin: -6px 0 16px; }

/* ===== Notes page ===== */
.note-row { gap: 12px; align-items: center; }
.note-tick-form { margin: 0; flex-shrink: 0; }
.note-tick {
  width: 32px; height: 32px; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border); color: var(--ink-faint);
  font-size: .8125rem;
}
.note-tick:hover { border-color: var(--green); color: var(--green); background: var(--green-bg); }
.note-row.is-passed .row-main { opacity: .55; }
.note-row.is-done .row-title a { color: var(--ink-faint); text-decoration: line-through; }
.note-row.is-done .note-tick:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

/* ===== Recurring page ===== */
.rec-row { align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-row .row-main { flex: 1 1 240px; }
.rec-row.is-inactive .row-main { opacity: .6; }
/* No hover lift on these rows: the lift puts the row in its own layer,
   which let the buttons of the rows below draw over an open panel. The row
   whose panel is open is raised above everything else instead. */
.rec-row:hover { transform: none; }
.rec-row.is-open { position: relative; z-index: 30; }
.rec-due-red { color: var(--red) !important; font-weight: 600; }
.rec-due-amber { color: var(--amber) !important; font-weight: 600; }
.rec-unassigned { color: var(--red) !important; font-weight: 600; }
.rec-actions { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; }
.rec-pop { position: relative; }
.rec-pop > summary { list-style: none; }
.rec-pop > summary::-webkit-details-marker { display: none; }
.rec-pop-body {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 270px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 12px;
}
.rec-pop-body label { font-size: .8125rem; margin-top: 6px; }
.rec-pop-body input, .rec-pop-body select { margin-bottom: 2px; }
.rec-pop-body .btn { margin-top: 8px; }
.rec-pop-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.rec-pop-row form { margin: 0; }
.rec-pop-row .btn { margin-top: 0; }
.rec-history { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .75rem; color: var(--ink-soft); max-height: 160px; overflow-y: auto; }
.rec-history > div { padding: 2px 0; }
.rec-history-title { font-weight: 600; color: var(--ink-faint); margin-bottom: 4px; }

/* ===== Phones: bigger tap targets, no iOS zoom on inputs ===== */
@media (max-width: 640px) {
  .btn-small, .dash-act-btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .btn-small { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
  .note-tick { width: 40px; height: 40px; }
  .rec-actions { width: 100%; justify-content: flex-end; }
  .rec-pop-body { width: min(300px, calc(100vw - 32px)); }
  /* iPhone zooms the page in when an input's text is under 16px. */
  input[type=text], input[type=password], input[type=date], input[type=tel],
  input[type=number], input[type=time], input[type=email], input[type=search],
  input[type=url], input[type=datetime-local], input[type=month], select, textarea { font-size: 16px; }
  /* ...except the small inline status pickers on cards, which are tap-to-open lists. */
  .tb-status select, .qb-actions select, select.pill, select.badge { font-size: .75rem; }
}

/* ===== Last seen (Manage Users, dashboard workload card) — admin only ===== */
.last-seen { display: block; margin-top: 1px; font-size: .75rem; color: var(--ink-faint); font-weight: 400; white-space: nowrap; }
.last-seen-online { color: var(--green); }
.last-seen-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: 1px; }
.last-seen-amber { color: var(--amber); font-weight: 600; }
.last-seen-red { color: var(--red); font-weight: 600; }
.last-seen-never { font-style: italic; }

/* ===== Waiting: quick reasons (task page) + "N stuck" (board header) ===== */
.wait-presets { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wait-preset-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wait-preset-group[hidden] { display: none; }
.wait-preset-label { font-size: .75rem; font-weight: 600; color: var(--ink-faint); min-width: 62px; }
.wait-preset {
  font-family: var(--font-body); font-size: .8125rem; cursor: pointer;
  background: var(--surface); color: var(--heading);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
}
.wait-preset:hover { background: var(--surface-2); border-color: var(--blue); }
.tb-stuck {
  margin-left: auto; font-size: .75rem; font-weight: 700;
  color: var(--red-text-strong); background: var(--red-bg-soft);
  border-radius: 999px; padding: 2px 9px;
}
@media (max-width: 640px) { .wait-preset { padding: 8px 12px; } }

/* ===== Utilities — small single-purpose classes that replaced the pages'
   inline style="..." attributes. They carry !important so they win the
   same way inline styles did. Show/hide (display) is still inline on
   purpose: page scripts switch it. ===== */
.bc-green-border { border-color: var(--green-border) !important; }
.bd-none { border: none !important; }
.bg-amber { background: var(--amber) !important; }
.bg-amber-soft { background: var(--amber-bg) !important; }
.bg-blue { background: var(--blue) !important; }
.bg-green-soft { background: var(--green-bg) !important; }
.bg-neutral { background: var(--neutral-bg) !important; }
.bg-red { background: var(--red) !important; }
.btn.bg-red { background: var(--red-solid) !important; }  /* delete buttons: white text needs the deeper red on Dim and Black */
.bg-red-soft { background: var(--red-bg) !important; }
.bg-red-soft2 { background: var(--red-bg-soft) !important; }
.c-amber { color: var(--amber) !important; }
.c-blue { color: var(--blue) !important; }
.c-faint { color: var(--ink-faint) !important; }
.c-green { color: var(--green) !important; }
.c-ink { color: var(--ink) !important; }
.c-navy { color: var(--navy) !important; }
.c-red { color: var(--red) !important; }
.c-red-strong { color: var(--red-text-strong) !important; }
.c-soft { color: var(--ink-soft) !important; }
.c-white { color: var(--white) !important; }
.cur-ptr { cursor: pointer !important; }
.flex-1 { flex: 1 !important; }
.fw-4 { font-weight: 400 !important; }
.fw-5 { font-weight: 500 !important; }
.fw-6 { font-weight: 600 !important; }
.fw-7 { font-weight: 700 !important; }
.gap-10 { gap: 10px !important; }
.gap-14 { gap: 14px !important; }
.gap-6 { gap: 6px !important; }
.gap-8 { gap: 8px !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.ls-wide { letter-spacing: .03em !important; }
.m--10-0-20 { margin: -10px 0 20px !important; }
.m-0 { margin: 0 !important; }
.m-0-0-10 { margin: 0 0 10px !important; }
.m-10-0 { margin: 10px 0 !important; }
.m-10-0-16 { margin: 10px 0 16px !important; }
.m-12-0 { margin: 12px 0 !important; }
.m-14-0-6 { margin: 14px 0 6px !important; }
.m-18-0-6 { margin: 18px 0 6px !important; }
.m-4-0-0 { margin: 4px 0 0 !important; }
.m-8-0 { margin: 8px 0 !important; }
.maxw-220 { max-width: 220px !important; }
.maxw-260 { max-width: 260px !important; }
.maxw-340 { max-width: 340px !important; }
.maxw-420 { max-width: 420px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-28 { margin-bottom: 28px !important; }
.mb-4 { margin-bottom: 4px !important; }
.mb-6 { margin-bottom: 6px !important; }
.mb-8 { margin-bottom: 8px !important; }
.minw-110 { min-width: 110px !important; }
.minw-120 { min-width: 120px !important; }
.minw-150 { min-width: 150px !important; }
.minw-220 { min-width: 220px !important; }
.ml-4 { margin-left: 4px !important; }
.ml-8 { margin-left: 8px !important; }
.ml-auto { margin-left: auto !important; }
.mr-6 { margin-right: 6px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-14 { margin-top: 14px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-18 { margin-top: 18px !important; }
.mt-2 { margin-top: 2px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-28 { margin-top: 28px !important; }
.mt-4 { margin-top: 4px !important; }
.mt-6 { margin-top: 6px !important; }
.mt-8 { margin-top: 8px !important; }
.no-underline { text-decoration: none !important; }
.nowrap { white-space: nowrap !important; }
.p-0 { padding: 0 !important; }
.p-10-14 { padding: 10px 14px !important; }
.p-12 { padding: 12px !important; }
.p-14-20 { padding: 14px 20px !important; }
.p-3-0 { padding: 3px 0 !important; }
.p-4-8 { padding: 4px 8px !important; }
.p-5 { padding: 5px !important; }
.p-5-8 { padding: 5px 8px !important; }
.p-6-10 { padding: 6px 10px !important; }
.p-8-12 { padding: 8px 12px !important; }
.r-6 { border-radius: 6px !important; }
.r-8 { border-radius: 8px !important; }
.self-end { align-self: end !important; }
.span-all { grid-column: 1 / -1 !important; }
.t-12 { font-size: .75rem !important; }
.t-13 { font-size: .8125rem !important; }
.t-14 { font-size: .875rem !important; }
.t-16 { font-size: 1rem !important; }
.t-21 { font-size: 1.3rem !important; }
.t-32 { font-size: 2rem !important; }
.ta-center { text-align: center !important; }
.ta-left { text-align: left !important; }
.ta-right { text-align: right !important; }
.upper { text-transform: uppercase !important; }
.w-22 { width: 22px !important; }
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
.wrap { flex-wrap: wrap !important; }
.mb-0 { margin-bottom: 0 !important; }


/* ============================================================
   CrewDesk additions (Stage 2, Slice 1)
   ============================================================ */

/* Active tab underline follows the client's brand colour. */
.app-nav-primary a.active, .app-nav-primary a:hover { border-bottom-color: var(--on-navy-accent); }

/* The client's logo sits on a light chip so any logo colours stay readable
   on the coloured header. */
.app-brand-logo-chip {
  display: inline-flex; align-items: center; background: #fff; border-radius: 7px;
  padding: 3px 6px; margin-right: 2px;
}
.app-brand-logo-img { display: block; max-height: 26px; max-width: 120px; width: auto; height: auto; }

.login-logo-chip {
  display: inline-flex; align-items: center; background: #fff; border-radius: 12px;
  padding: 8px 12px; margin-bottom: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.login-logo-img { display: block; max-height: 48px; max-width: 220px; width: auto; height: auto; }
.login-box-body .login-logo-chip { display: flex; width: fit-content; margin: 0 auto 18px; }
.login-card-foot { text-align: center; font-size: .75rem; color: var(--ink-faint); margin: 22px 0 0; }

/* Menu items for pages that are not built yet. */
.nav-soon {
  color: var(--on-navy-soft); opacity: .45; cursor: default; white-space: nowrap;
  font-size: .875rem; font-weight: 500; padding: 6px 0;
}
.app-nav-secondary .nav-soon { font-size: .8125rem; padding: 5px 9px; }
.bottom-tabs .nav-soon { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; font-size: .6875rem; padding: 8px 0; }
.account-menu .nav-soon { display: block; padding: 8px 14px; color: var(--ink-faint); }

/* Renewal / expiry notice for the client's admins. */
.plan-banner {
  max-width: 1100px; margin: 14px auto 0; padding: 10px 16px; border-radius: 10px;
  font-size: .875rem; display: flex; gap: 10px; align-items: center;
}
.plan-banner-due { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--border); }
.plan-banner-expired { background: var(--red-bg-soft); color: var(--red); border: 1px solid var(--red-border-soft); }

/* Product footer: always shown. */
.app-footer {
  text-align: center; font-size: .75rem; color: var(--ink-faint);
  padding: 8px 20px 28px;
}
.app-footer-ver { opacity: .8; }
@media print { .app-footer, .plan-banner { display: none; } }

/* ============================================================
   CrewDesk additions (Build 1: users, teams, tasks)
   ============================================================ */
.private-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: .6875rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: var(--purple-bg); color: var(--purple);
  vertical-align: middle; white-space: nowrap;
}
.private-box {
  background: var(--purple-bg); color: var(--ink); border: 1px solid var(--border);
  border-left: 3px solid var(--purple); border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: .875rem;
}
.private-box i { color: var(--purple); margin-right: 4px; }
.info-box {
  background: var(--blue-light); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: .875rem;
}
.team-tag { display: inline-flex; align-items: center; gap: 4px; }
.category-tag {
  display: inline-block; font-size: .6875rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--blue-light); color: var(--blue);
}
.pill-static { display: inline-block; cursor: default; }
.mention { background: var(--blue-light); color: var(--blue); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.mention-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mention-chip {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
  border-radius: 999px; padding: 3px 11px; font-size: .8125rem; cursor: pointer;
}
.mention-chip:hover { background: var(--blue-light); color: var(--blue); }
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: .875rem; cursor: pointer; margin: 0; }
.check-row input[type="checkbox"] { width: auto; margin: 0; }
.users-count { font-size: .875rem; color: var(--ink-soft); }
.users-count-full { color: var(--amber); font-weight: 600; }
.row-inactive td { opacity: .6; }
.user-manage { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.user-manage-form { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.user-manage-form:last-child { border-bottom: 0; }
.member-list { margin: 12px 0 4px; }
.member-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.member-actions { display: flex; gap: 6px; }
.inline-form { display: inline; margin: 0; }
.add-member-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.add-member-form select { width: auto; min-width: 200px; }
.card-inactive { opacity: .7; }

/* Notifications: unread rows stand out, like an inbox. */
.notif-row { align-items: center; }
.notif-main { flex: 1; min-width: 0; }
.notif-unread { background: var(--blue-light); border-radius: 8px; }
.notif-unread .history-detail a { font-weight: 600; }
.notif-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-right: 6px; vertical-align: middle; }
.notif-mark { margin: 0 0 0 auto; flex-shrink: 0; }

/* Build 2A: TO / CC, upcoming, following */
.warn-box { background: var(--amber-bg); color: var(--amber); border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: .8125rem; }
.cc-picker { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--surface-2); }
.cc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin-top: 10px; max-height: 180px; overflow-y: auto; }
.section-summary { cursor: pointer; font-weight: 600; font-size: .9375rem; }
.section-summary .t-13 { font-weight: 400; margin-left: 8px; }
.follow-list { margin-top: 10px; }
.follow-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); }
.follow-row > a { flex: 1 1 260px; min-width: 0; font-weight: 500; }
.people-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.person-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); }
.person-box .k { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.person-box .v { font-size: .9375rem; margin-top: 2px; }
.cc-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-light); color: var(--blue); border-radius: 999px; padding: 3px 4px 3px 10px; margin: 0 6px 6px 0; font-size: .8125rem; }
.cc-chip .via { opacity: .7; font-size: .6875rem; }
.cc-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 6px; font-size: .875rem; line-height: 1; }
.time-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 12px 0; }
.time-strip > div { padding: 9px 12px; border-right: 1px solid var(--border); }
.time-strip > div:last-child { border-right: 0; }
.time-strip .k { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.time-strip .d { font-size: .75rem; color: var(--ink-soft); }
.sys-note { background: var(--blue-light); color: var(--ink-soft); border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: .8125rem; }


/* ---------- Manage Users: tabbed panel (Access / Features / Account) ---------- */
.um-row > td { background: var(--surface-2); padding: 14px 18px; }
.um-row[hidden] { display: none; }
.um-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.um-tab {
  background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: 8px 16px; font: inherit; font-size: .875rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.um-tab:hover { color: var(--ink); }
.um-tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.um-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.um-checks-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.um-checks-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; }
.um-preset { margin-bottom: 12px; max-width: 420px; }
.um-account { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px 20px; align-items: start; }
.um-account .user-manage-form { border-bottom: 0; padding-bottom: 0; }
.um-save[hidden] { display: none; }
/* Without JavaScript every panel simply shows, one under the other. */
.um-js .um-panel { display: none; }
.um-js .um-panel.is-active { display: block; }
@media (max-width: 760px) {
  .um-grid, .um-checks-2, .um-checks-3, .um-account { grid-template-columns: 1fr; }
}

/* ---------- Dashboard (Build 2B) ---------- */
.mt-0 { margin-top: 0; }
.dash-toolbar { margin-top: 14px; }
.dash-grid { margin-bottom: 20px; align-items: start; }
.dash-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.dash-switch-btn { padding: 6px 16px; font-size: .8125rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.dash-switch-btn:hover { color: var(--ink); background: var(--surface-2); }
.dash-switch-btn.is-active { background: var(--blue-solid); color: #fff; }
.dash-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--ink); text-decoration: none; font-size: .8125rem;
}
.dash-chip:hover { background: var(--surface-2); }
.dash-chip-name { font-weight: 600; }
.dash-chip-count { font-family: var(--font-display); font-weight: 700; color: var(--heading); }
.dash-chip-flag { font-size: .6875rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); }
.dash-chip-late { font-weight: 700; color: var(--red); }
.dash-chip-leave { opacity: .75; }
.load-track { display: block; height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.load-fill { display: block; height: 100%; border-radius: 999px; min-width: 3px; }
.load-fill.load-low { background: var(--green); }
.load-fill.load-mid { background: var(--amber); }
.load-fill.load-high { background: var(--red); }
.load-fill.load-leave { background: var(--border); }
.load-label { font-weight: 700; }
.load-label.load-low { color: var(--green); }
.load-label.load-mid { color: var(--amber); }
.load-label.load-high { color: var(--red); }
.load-label.load-leave { color: var(--ink-faint); }
.tl-row:first-of-type { border-top: 0; }
.dash-plan-line { margin: 4px 0 24px; text-align: center; }
/* Manage Users: room between the last tick and the Save button */
.um-save { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.um-checks-2, .um-checks-3 { margin-bottom: 4px; }

/* Dashboard: My teams and rooms */
.dash-room { display: flex; align-items: center; gap: 14px; padding: 11px 6px; border-top: 1px solid var(--border); color: var(--ink); text-decoration: none; }
.dash-room:first-child { border-top: 0; }
.dash-room:hover { background: var(--surface-2); border-radius: 8px; }
.dash-room-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-room-name { font-weight: 600; font-size: .9375rem; color: var(--heading); }
.dash-room-members { font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-room-count { font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; }
.dash-room-count strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--heading); }
.dash-room-go { color: var(--ink-faint); font-size: .75rem; }

/* Header: your name opens My account */
.app-user-name { color: inherit; text-decoration: none; }
.app-user-name:hover { text-decoration: underline; }

/* Phone alerts box on My account */
.push-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.push-status { margin: 0; flex: 1 1 260px; font-weight: 600; }
.push-box [hidden] { display: none; }

/* Role badges on Dim and Black: see the Themes section at the end. */

/* ---------- Calendar month (Build 3C): short lines on a PC, dots on a phone ---------- */
.cal-month-card { padding: 12px; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-month-head { margin-bottom: 6px; }
.cal-month-head > div { text-align: center; font-size: .75rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; }
.cal-cell { min-height: 96px; min-width: 0; padding: 5px 6px; border-radius: 8px; background: var(--surface-2); cursor: pointer; display: flex; flex-direction: column; gap: 3px; outline: none; }
.cal-cell:hover { background: var(--blue-light); }
.cal-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-cell-empty { background: transparent; cursor: default; }
.cal-cell-empty:hover { background: transparent; }
.cal-cell-weekend .cal-cell-num { color: var(--ink-faint); }
.cal-cell-holiday { background: var(--amber-bg); }
.cal-cell.is-selected { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-cell-num { font-size: .8125rem; font-weight: 600; color: var(--ink); align-self: flex-start; }
.cal-cell-today .cal-cell-num { background: var(--blue-solid); color: var(--white); border-radius: 999px; padding: 0 7px; }
.cal-cell-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-line { display: block; font-size: .75rem; line-height: 1.35; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-line-task { background: var(--blue-light); color: var(--blue); }
.cal-line-overdue { background: var(--red-bg); color: var(--red); }
.cal-line-meeting { background: var(--purple-bg); color: var(--purple); }
.cal-line-leave { background: var(--pink-bg); color: var(--pink); }
.cal-line-holiday { color: var(--amber); font-weight: 600; padding-left: 0; }
.cal-line.is-passed { opacity: .5; text-decoration: line-through; }
.cal-line-more { font-size: .75rem; color: var(--ink-faint); padding-left: 2px; }
.cal-cell-dots { display: none; gap: 3px; height: 6px; justify-content: center; }
.cal-dot-meeting, .cal-pdot-meeting { background: var(--purple); }
.cal-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cal-fab-menu a { text-align: left; font-size: .875rem; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; display: flex; gap: 10px; align-items: center; }
.cal-fab-menu a:hover { background: var(--surface-2); }
.cal-fab-menu a i { color: var(--blue); width: 16px; text-align: center; }
@media (max-width: 700px) {
  .cal-month { gap: 2px; }
  .cal-cell { min-height: 46px; padding: 4px 2px; align-items: center; justify-content: center; }
  .cal-cell-num { align-self: center; }
  .cal-cell-lines { display: none; }
  .cal-cell-dots { display: flex; }
  .cal-month-head > div { font-size: .6875rem; }
}

/* Meeting page and Leave page (Build 3C) */
.mt-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mt-person { font-size: .8125rem; background: var(--purple-bg); color: var(--purple); border-radius: 999px; padding: 3px 10px; }
.mt-done { font-size: .75rem; font-weight: 600; background: var(--surface-2); color: var(--ink-faint); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.lv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.lv-row:first-child { border-top: none; }
.lv-main { flex: 1; min-width: 0; }
.lv-now { font-size: .75rem; font-weight: 600; background: var(--pink-bg); color: var(--pink); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }

/* Dashboard "New for you" (Build 3C.1) */
.dash-new { margin-bottom: 20px; }   /* its blue edge comes from .dcard.tone-blue (build 14) */

/* Anything with the hidden attribute stays hidden, even when its class sets a display
   (e.g. .btn, .cal-resched). Fixes the calendar's "Change date" boxes showing open. */
[hidden] { display: none !important; }

/* ---------- My Notes and Search (Build 3D) ---------- */
/* --teal / --teal-bg are in the theme blocks at the top of the file. */
.cal-dot-note, .cal-pdot-note { background: var(--teal); }
.cal-line-note { background: var(--teal-bg); color: var(--teal); }
.nt-gap { width: 8px; }
.nt-list { display: flex; flex-direction: column; }
.nt-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--border); }
.nt-row:first-child { border-top: none; }
.nt-when { flex: 0 0 72px; font-size: .8125rem; color: var(--ink-soft); line-height: 1.35; }
.nt-main { flex: 1; min-width: 0; }
.nt-title { font-size: .9375rem; font-weight: 500; color: var(--ink); }
.nt-title a { color: inherit; text-decoration: none; }
.nt-title a:hover { text-decoration: underline; }
.nt-tag { font-size: .75rem; background: var(--teal-bg); color: var(--teal); border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.nt-sub { margin-top: 2px; font-size: .8125rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.nt-done .nt-title { color: var(--ink-faint); text-decoration: line-through; }
.nt-tick { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; flex-shrink: 0; }
.nt-tick:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.nt-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nt-file { display: flex; align-items: center; gap: 10px; font-size: .875rem; }
.nt-file form { margin: 0; }
.nt-body { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }

.sr-group-head { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 6px; font-size: .875rem; font-weight: 700; color: var(--heading); }
.sr-group-head a { font-size: .8125rem; font-weight: 600; }
.sr-row { display: block; padding: 9px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.sr-row:first-child { border-top: none; }
.sr-row:hover .sr-title { text-decoration: underline; }
.sr-title { font-size: .9375rem; font-weight: 500; }
.sr-sub { font-size: .8125rem; color: var(--ink-soft); margin-top: 2px; }
.sr-more { font-size: .8125rem; color: var(--ink-faint); padding-top: 8px; }

.app-header-search { margin: 0 6px 0 0; }
.app-header-search input { width: 190px; margin: 0; padding: 6px 12px; font-size: .8125rem; border-radius: 999px; }
@media (max-width: 1100px) { .app-header-search { display: none; } }

/* ---------- Reports and Activity Log (Build 4) ---------- */
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.rp-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.rp-tl { font-size: .8125rem; color: var(--ink-soft); }
.rp-tv { font-size: 1.75rem; font-weight: 700; color: var(--heading); line-height: 1.25; margin: 2px 0; }
.rp-ts { font-size: .8125rem; color: var(--ink-soft); }
.rp-scroll { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.rp-table th { text-align: right; font-weight: 600; font-size: .8125rem; color: var(--ink-soft); padding: 6px 8px; white-space: nowrap; }
.rp-table td { text-align: right; padding: 8px; border-top: 1px solid var(--border); }
.rp-table th:first-child, .rp-table td:first-child { text-align: left; padding-left: 0; }
.rp-legend { display: flex; gap: 14px; font-size: .8125rem; color: var(--ink-soft); margin: 6px 0 4px; }
.rp-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.rp-key-task, .rp-seg-task { background: var(--blue); }
.rp-key-ticket, .rp-seg-ticket { background: var(--teal); }
.rp-bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-bottom: 20px; position: relative; }
.rp-bar { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; position: relative; min-width: 0; }
.rp-seg { display: block; width: 100%; }
.rp-bar .rp-seg:last-of-type { border-radius: 3px 3px 0 0; }
.rp-bar-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: .6875rem; color: var(--ink-faint); }
.lg-row { padding: 10px 0; border-top: 1px solid var(--border); }
.lg-row:first-child { border-top: none; }
.lg-meta { font-size: .8125rem; color: var(--ink-soft); }
.lg-kind { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.lg-detail { font-size: .875rem; margin-top: 2px; overflow-wrap: anywhere; }

/* ============================================================
   Themes (build 13): Light / Dim / Black
   Light keeps the full brand-colour band. Dim and Black have a dark band
   with the client's brand colour as a 3px strip on top, and show it again
   only on the active-tab underline. Buttons stay the portal blue in all
   three themes (as in Light). Status pills are outlined on Dim and Black.
   The colours themselves are the token blocks at the top of this file.
   ============================================================ */

/* Status pill text: in Light, amber and red are a shade stronger than the
   dots and bars that share those colours. --pill-* follow the theme. */
.pill, .badge, .chip-amber, .chip-red, .attention-chip-red, .attention-chip-amber,
.st-chip-red, .st-chip-amber, .dc-badge-red, .dc-badge-amber, .cu-chip-amber,
.dash-due-red, .dash-due-amber, .q-follow, .dash-chip-flag, .waiting-on-customer, .row-waiting {
  --amber: var(--pill-amber);
  --red: var(--pill-red);
}

@media screen {
  /* Top band: dark, brand colour as a thin strip. Same height as the
     Light band (14px padding minus the 3px strip). */
  html:is([data-theme="dark"], [data-theme="dim"]) .app-header {
    background: var(--band-bg);
    border-top: 3px solid var(--brand-strip);
    border-bottom: 1px solid var(--border);
    padding-top: 11px;
  }
  html:is([data-theme="dark"], [data-theme="dim"]) .app-nav-primary a.active,
  html:is([data-theme="dark"], [data-theme="dim"]) .app-nav-primary a:hover { border-bottom-color: var(--brand-strip); }
  html:is([data-theme="dark"], [data-theme="dim"]) .bottom-tabs { background: var(--band-bg); border-top-color: var(--border); }
  html:is([data-theme="dark"], [data-theme="dim"]) .bottom-tabs a.active i { color: var(--brand-strip); }

  /* Dashboard greeting: a plain card instead of a brand-colour panel. */
  html:is([data-theme="dark"], [data-theme="dim"]) .dash-greeting-banner {
    background: var(--surface); border: 1px solid var(--border);
  }

  /* Login page */
  html:is([data-theme="dark"], [data-theme="dim"]) .login-wrap { background: var(--page-bg); }
  html:is([data-theme="dark"], [data-theme="dim"]) .login-box-top { height: 3px; background: var(--brand-strip); }
  html:is([data-theme="dark"], [data-theme="dim"]) .login-split-brand {
    background: var(--band-bg); border-right: 1px solid var(--border);
    box-shadow: inset 0 3px 0 var(--brand-strip);
  }
  html:is([data-theme="dark"], [data-theme="dim"]) .login-split-brand::after { background: rgba(255,255,255,.03); }

  /* The one other place that used navy as a background. */
  html:is([data-theme="dark"], [data-theme="dim"]) .avatar {
    background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border);
  }

  /* Status pills, badges and coloured chips: outlined (line and text in
     the status colour), no fill. An inset line, so sizes don't change. */
  html:is([data-theme="dark"], [data-theme="dim"]) :is(.pill, .badge,
    .chip-red, .chip-amber, .chip-green, .chip-blue,
    .attention-chip-red, .attention-chip-green,
    .st-chip-red, .st-chip-amber, .st-chip-green,
    .dc-badge-red, .dc-badge-amber, .cu-chip-amber, .cu-chip-blue,
    .dash-due-red, .dash-due-amber, .q-follow, .dash-chip-flag,
    .waiting-on-tag, .category-tag, .private-tag, .lv-now, .nt-tag, .mt-person) {
    background: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
  }
  html:is([data-theme="dark"], [data-theme="dim"]) .badge-admin { color: var(--ink); }

  /* Status pickers styled as pills: the open list stays readable. */
  html:is([data-theme="dark"], [data-theme="dim"]) select option { background-color: var(--surface); color: var(--ink); }

  /* Pale fills on hover carry dark text (white would be unreadable). */
  html:is([data-theme="dark"], [data-theme="dim"]) .cal-item-note:hover,
  html:is([data-theme="dark"], [data-theme="dim"]) .nt-tick:hover { color: #111111; }
}

/* Record titles in lists: 500 in all three themes (view-page titles are
   headings and keep the heading style). Set on each list's own class
   above: .row-title, .tb-card-title, .q-title, .oc-itemname, .wc-item-name,
   .sc-name, .cu-name, .nt-title, .sr-title. */

/* ---------- Menu: the current page's item is bold (build 13.1, all themes) ----------
   The hidden bold copy of the label keeps each item as wide as its bold
   form, so the menu doesn't shift when you move between pages. */
.nav-label { display: inline-flex; flex-direction: column; }
.nav-label::after {
  content: attr(data-label); height: 0; overflow: hidden; visibility: hidden;
  font-weight: 700; pointer-events: none; user-select: none;
}
.app-nav-primary a.active, .app-nav-secondary a.active { font-weight: 700; }

/* ---------- Dashboard: "New for you" with nothing new is one line (build 13.3, all themes) ---------- */
.dash-new-empty { padding-top: 12px; padding-bottom: 12px; }
.dash-new-empty .card-head-plain { margin-bottom: 0; justify-content: flex-start; flex-wrap: wrap; gap: 6px 14px; }
.dash-new-none { font-size: .875rem; color: var(--ink-soft); }

/* ---------- Dim and Black: a little life (build 13.3) ----------
   The brand colour comes back as a soft glow (header, greeting card) and
   card titles get their icon in a small tinted square. Colours follow the
   client's brand colour (--brand-strip) and each icon's own colour. A
   browser without color-mix() (older than 2023) keeps the plain look. */
@media screen {
  html:is([data-theme="dark"], [data-theme="dim"]) .app-header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-strip) 18%, var(--band-bg)) 0%, var(--band-bg) 100%);
  }
  html:is([data-theme="dark"], [data-theme="dim"]) .dash-greeting-banner {
    background: radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--brand-strip) 34%, transparent) 0%, transparent 60%), var(--surface);
    border-color: color-mix(in srgb, var(--brand-strip) 40%, var(--border));
  }
  html:is([data-theme="dark"], [data-theme="dim"]) .dash-greeting-icon {
    background: color-mix(in srgb, var(--brand-strip) 35%, transparent);
  }
  html:is([data-theme="dark"], [data-theme="dim"]) :is(.card-head-plain h3, .tt-head) > i:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; margin-right: 4px; font-size: .85rem; vertical-align: middle;
    background: color-mix(in srgb, currentColor 18%, transparent);
  }
  /* A fine light line on the top edge: cards look slightly raised. */
  html:is([data-theme="dark"], [data-theme="dim"]) :is(.card, .stat-tile, .oc-card, .tb-col, .rp-tile, .dash-collapse-group) {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
}

/* ---------- Dashboard: a colour per card, and Arrange (build 14) ----------
   Each card has its own colour on its left edge and title icon. The edge is
   only coloured while the card has something in it (.has-items); an empty
   card keeps a plain edge, so a coloured edge always means "look here".
   Team today, Teams and rooms and Who is free have no colour of their own. */
:root { --orange: #C2611F; --cyan: #0B85A3; --indigo: #5257C7; }
@media screen {
  html[data-theme="dark"] { --orange: #FB923C; --cyan: #22D3EE; --indigo: #A5B4FC; }
  html[data-theme="dim"]  { --orange: #EE9A62; --cyan: #5CC3DA; --indigo: #A3A9EE; }
}
.tone-blue   { --tone: var(--blue); }
.tone-red    { --tone: var(--red); }
.tone-amber  { --tone: var(--amber); }
.tone-green  { --tone: var(--green); }
.tone-purple { --tone: var(--purple); }
.tone-teal   { --tone: var(--teal); }
.tone-pink   { --tone: var(--pink); }
.tone-orange { --tone: var(--orange); }
.tone-cyan   { --tone: var(--cyan); }
.tone-indigo { --tone: var(--indigo); }
.dcard { border-left: 4px solid var(--border); }
.dcard.has-items[class*="tone-"] { border-left-color: var(--tone); }
.dcard[class*="tone-"] .card-head-plain h3 > i:first-child { color: var(--tone); }

/* The cards in the person's own order: two columns, a card is half or full width. */
.dash-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.dash-slot { min-width: 0; }
.dash-slot-full { grid-column: 1 / -1; }
.dash-board > .dash-slot > .card { margin-bottom: 0; }
.dash-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Arrange screen */
.dash-arrange-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; }
.dash-arrange-bar p { margin: 0; flex: 1; min-width: 220px; font-size: .875rem; color: var(--ink-soft); }
.dash-arrange { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.dash-arr-item {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--tone, var(--border));
  border-radius: 10px; padding: 10px 12px; cursor: grab; user-select: none;
}
.dash-arr-item.is-full { grid-column: 1 / -1; }
.dash-arr-item.is-dragging { opacity: .45; }
.dash-arr-item.is-hidden { opacity: .6; border-left-color: var(--border); }
.dash-arr-item.is-hidden .dash-arr-name { text-decoration: line-through; }
.dash-arr-grip { color: var(--ink-faint); flex-shrink: 0; }
.dash-arr-title { flex: 1; min-width: 0; font-weight: 500; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-arr-icon { color: var(--tone, var(--blue)); margin-right: 4px; }
.dash-arr-note { font-weight: 400; font-size: .8rem; color: var(--ink-faint); margin-left: 6px; }
.dash-arr-ctl { display: flex; gap: 4px; flex-shrink: 0; }
.dash-arr-btn {
  border: 1px solid var(--border); background: transparent; color: var(--ink-soft); font: inherit; font-size: .8rem;
  border-radius: 6px; padding: 4px 8px; min-width: 30px; cursor: pointer;
}
.dash-arr-btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.dash-arr-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.dash-arr-width { min-width: 44px; }

@media (max-width: 800px) {
  .dash-board, .dash-arrange { grid-template-columns: minmax(0, 1fr); }
  .dash-slot-full, .dash-arr-item.is-full { grid-column: auto; }
}

/* ---------- Build 15: stock list ----------
   Count page: one row per list item with a count box and a notes box, the
   categories as cards, one sticky Save counts bar. Manage list page: rows
   with up / down arrows and the Recurring-style ⋯ pop-up. */
.sc-round { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sc-allread { margin: 0 0 0 6px; }
.sc-cat .oc-card-head .oc-cust { flex: 1; }
.sc-prow .sc-main { flex: 1 1 200px; }
.sc-prow input.sc-qty-in { flex: 0 0 96px; width: 96px; padding: 7px 10px; text-align: right; font-family: var(--font-display); font-size: 1rem; }
.sc-prow input.sc-note-in { flex: 0 1 240px; width: 240px; min-width: 120px; padding: 7px 10px; }
.sc-prow .sc-state { flex: 0 0 96px; display: flex; justify-content: flex-end; }
.sc-prow .sc-edit { flex: 0 0 34px; }
.sc-qty-in::placeholder { color: var(--ink-faint); }
.sc-savebar {
  position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 14px;
  padding: 12px 14px; margin: 0 0 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 -4px 14px rgba(0,0,0,.06);
}
.sc-unsaved { color: var(--amber); font-weight: 600; font-size: .8125rem; }
.sc-subhead { margin: 6px 0 10px; font-size: 1rem; }

.sl-add-cat { padding: 14px 16px; }
.sl-inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sl-inline-form input[type=text] { flex: 1 1 260px; width: auto; }
.sl-cat { overflow: visible; }                       /* the ⋯ pop-ups must not be cut off */
.sl-cat > .oc-card-head { border-radius: 12px 12px 0 0; }
.sl-cat .oc-card-head .oc-cust { flex: 1; }
.sl-row { display: flex; align-items: center; gap: 8px 12px; padding: 8px 14px; border-top: 1px solid var(--border); }
.sl-cat > .oc-card-head + .sl-row { border-top: none; }
.sl-name { flex: 1; min-width: 0; font-size: .875rem; color: var(--ink); overflow-wrap: anywhere; }
.sl-row.is-hidden .sl-name, .sl-cat.is-hidden > .oc-card-head .oc-cust { color: var(--ink-faint); }
.sl-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--neutral-bg); color: var(--ink-soft); font-size: .6875rem; font-weight: 500; vertical-align: 1px; }
.sl-ctl { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sl-arrow-form { margin: 0; }
.sl-arrow {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: transparent; color: var(--ink-soft); border-radius: 6px; cursor: pointer; font-size: .75rem;
}
.sl-arrow:hover { border-color: var(--ink-faint); color: var(--ink); }
.sl-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.sl-arrow-off { visibility: hidden; }
.sl-ctl .rec-pop > summary { padding: 4px 10px; }
.sl-note { font-size: .75rem; color: var(--ink-soft); }
.sl-additems { padding: 10px 14px 12px; border-top: 1px solid var(--border); }
.sl-additems > summary { cursor: pointer; color: var(--blue); font-size: .8125rem; font-weight: 600; list-style: none; }
.sl-additems > summary::-webkit-details-marker { display: none; }
.sl-additems form { margin-top: 8px; max-width: 520px; }
.sl-additems label { font-size: .8125rem; font-weight: 500; }

@media (max-width: 640px) {
  .sc-prow .sc-main { flex-basis: 100%; }
  .sc-prow input.sc-qty-in { flex: 0 0 88px; width: 88px; }
  .sc-prow input.sc-note-in { flex: 1 1 120px; width: auto; }
  .sc-prow .sc-state { flex: 0 0 auto; }
  .sl-arrow { width: 40px; height: 40px; }
}

/* ============================================================
   Build 16: offline copy, customer account no. and PIC
   ============================================================ */
/* The bar under the header when there is no signal (header.php). It stays
   in view while scrolling. */
.offline-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 16px; font-size: .875rem; font-weight: 500;
  background: var(--amber-bg); color: var(--ink);
  border-bottom: 1px solid var(--border); border-left: 4px solid var(--amber);
}
.offline-bar[hidden] { display: none; }
.offline-bar i { color: var(--amber); }
.offline-bar span { flex: 0 1 auto; }
.offline-bar-warn { background: var(--red-bg-soft); border-left-color: var(--red); }
.offline-bar-warn i { color: var(--red); }
.offline-bar-back { background: var(--green-bg); border-left-color: var(--green); }
.offline-bar-back i { color: var(--green); }
.offline-bar-btn {
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  padding: 4px 12px; border-radius: 6px;
  border: 1px solid var(--green); background: transparent; color: var(--green);
}
/* While offline, buttons that send something look switched off. */
.cd-offline .app-main button[type="submit"],
.cd-offline .app-main input[type="submit"] { opacity: .55; }
@media print { .offline-bar { display: none; } }

/* Room under an open ⋯ pop-up near the end of a page, so its last buttons
   can scroll clear of the phone's bottom tab bar (replaces build 15's
   padding trick on the stock list; works for every .rec-pop). */
.rec-pop-body::after {
  content: ''; position: absolute; left: 0; top: 100%;
  width: 1px; height: 96px; pointer-events: none;
}

/* My account: Offline copy */
.offline-save-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* Customers: account no. */
.acc-no-in:not(:placeholder-shown) { text-transform: uppercase; }
.acc-no-chip {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 5px;
  font-family: var(--font-mono, monospace); font-size: .75rem; font-weight: 600;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border);
  white-space: nowrap; vertical-align: 1px;
}
.acc-same a { font-weight: 600; }

/* ============================================================
   Build 17: CD quotes (quote.php; board additions on quotations.php)
   Phone first: one column, at most 760px wide on a PC.
   ============================================================ */
.qe { max-width: 760px; margin: 0 auto; }
.qe-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .875rem; }
.qe-no { margin: 0; font-family: var(--font-mono); font-size: 1.15rem; }
.qe-nonum { font-family: var(--font-body); font-size: .8125rem; font-weight: 500; color: var(--ink-faint); }
.qe-cust { font-weight: 600; margin-top: 2px; }
.qe-meta { font-size: .8125rem; color: var(--ink-soft); margin-top: 2px; }
.qe-np { font-weight: 400; color: var(--ink-faint); font-size: .75rem; }
.qe-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.qe-chip {
  font: inherit; font-size: .8125rem; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
}
.qe-chip.is-on { background: var(--blue-light); color: var(--blue); border-color: var(--blue); font-weight: 600; }
.qe-restore {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px;
  border-radius: 8px; background: var(--amber-bg); border: 1px solid var(--border); font-size: .875rem;
}
.qe-restore[hidden] { display: none; }
.qe-restore span { flex: 1 1 220px; }
.qe-details { margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.qe-details > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--heading); list-style: none; }
.qe-details > summary::-webkit-details-marker { display: none; }
.qe-details > summary::after { content: '›'; float: right; color: var(--ink-faint); transition: transform .15s; }
.qe-details[open] > summary::after { transform: rotate(90deg); }
.qe-sum { font-weight: 400; color: var(--ink-faint); font-size: .8125rem; margin-left: 6px; }
.qe-fields { padding: 0 14px 14px; }
.qe-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.qe-newcust { margin-top: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; }
.qe-newcust[hidden] { display: none; }
.qe-tax { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.qe-tax-rate { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--ink-soft); }
.qe-tax-rate input { width: 70px; }
.qe-ro { margin: 0; padding: 0 14px 12px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: .875rem; }
.qe-ro dt { color: var(--ink-soft); }
.qe-ro dd { margin: 0; white-space: pre-line; }
.qe-lock { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: .875rem; }
.qe-lines { margin-top: 4px; }
.qe-empty { color: var(--ink-faint); font-size: .875rem; text-align: center; padding: 18px 8px; border: 1px dashed var(--border); border-radius: 10px; }
.qe-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.qe-editable .qe-card:not(.is-open) { cursor: pointer; }
.qe-editable .qe-card:not(.is-open):hover { border-color: var(--ink-faint); }
.qe-card.qe-package { border-color: var(--blue); }
.qe-card.is-open { border: 2px solid var(--blue); padding: 9px 11px; }
.qe-card.is-open label { margin-top: 8px; font-size: .8125rem; }
.qe-card.qe-text { background: transparent; border-style: dashed; }
.qe-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.qe-desc { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.qe-amt { font-weight: 600; font-family: var(--font-mono); white-space: nowrap; }
.qe-mut { color: var(--ink-soft); font-size: .8125rem; }
.qe-tag { font-size: .6875rem; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: var(--blue-light); color: var(--blue); }
.qe-text { font-weight: 700; text-decoration: underline; }
.qe-remark { font-size: .8125rem; margin-top: 4px; white-space: pre-line; color: var(--ink); }
.qe-partlist { margin-top: 6px; }
.qe-prow { display: flex; justify-content: space-between; gap: 8px; font-size: .8125rem; color: var(--ink-soft); padding: 3px 0; border-top: 1px solid var(--border); }
.qe-prow span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-noprice, .qe-nocost { color: var(--amber); font-weight: 600; font-size: .75rem; }
.qe-profit { color: var(--green); }
.qe-warn { color: var(--amber); font-weight: 600; }
.qe-inrow { display: flex; gap: 6px; align-items: center; }
.qe-inrow input { min-width: 0; }
.qe-sst {
  font: inherit; font-size: .6875rem; font-weight: 600; padding: 6px 7px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft);
}
.qe-parts { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.qe-parts-head { font-size: .8125rem; font-weight: 600; color: var(--heading); margin-bottom: 4px; }
.qe-part { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.qe-part input { padding: 7px 8px; }
.qe-part input:first-child { flex: 1 1 auto; min-width: 0; }
.qe-part .qe-pq { flex: 0 0 56px; width: 56px; }
.qe-part .qe-pu { flex: 0 0 64px; width: 64px; }
.qe-part .qe-pc { flex: 0 0 76px; width: 76px; }
.qe-x { flex: 0 0 auto; font: inherit; font-size: 1.1rem; line-height: 1; padding: 6px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.qe-link { font: inherit; font-size: .8125rem; font-weight: 600; color: var(--blue); background: none; border: none; padding: 6px 0; cursor: pointer; }
.qe-edit-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.qe-edit-foot > span { display: flex; gap: 6px; }
.qe-sq, .qe-del {
  font: inherit; font-size: .875rem; padding: 6px 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.qe-del { color: var(--red); }
.qe-add { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 14px; }
.qe-add .btn { border-radius: 9px; padding: 10px 6px; }
.qe-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 4px 0 14px; }
.qe-actions form { margin: 0; }
.qe-won { color: var(--green); }
.qe-lost > summary { list-style: none; cursor: pointer; }
.qe-lost > summary::-webkit-details-marker { display: none; }
.qe-lost[open] { flex-basis: 100%; }
.qe-lost form { max-width: 420px; }
.qe-notes h3 { margin-bottom: 8px; }
.qe-private .qe-notes { display: none; }
.qe-note { padding: 8px 0; border-top: 1px solid var(--border); }
.qe-note:first-of-type { margin-top: 10px; }
.qe-note-meta { font-size: .75rem; color: var(--ink-faint); }
.qe-note-text { font-size: .875rem; white-space: pre-line; overflow-wrap: anywhere; }
.qe-rev { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border); font-size: .875rem; }
.qe-rev:first-of-type { border-top: 0; }
.qe-delete { margin: 6px 0 18px; }
.qe-delete > summary { cursor: pointer; }
/* The total bar stays at the bottom of the screen (above the phone's tab bar). */
.qe-bar {
  position: sticky; bottom: 0; z-index: 40; margin: 10px -4px 0; padding: 10px 14px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}
.qe-bar-main { display: flex; align-items: center; gap: 10px; }
.qe-bar-main > div { flex: 1 1 auto; min-width: 0; }
.qe-total { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; color: var(--heading); }
.qe-bar-sub { font-size: .75rem; color: var(--ink-soft); }
@media (max-width: 800px) {
  .qe-bar { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
  /* Narrow phones: the description gets its own row, qty / UOM / cost / × share the next. */
  .qe-part { flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
  .qe-part input:first-child { flex: 1 1 100%; }
  .qe-part .qe-pq, .qe-part .qe-pu, .qe-part .qe-pc { flex: 1 1 0; width: 0; min-width: 0; }
}
#qe-toggle { white-space: nowrap; }
@media print { .qe-bar, .qe-add, .qe-actions { display: none; } }

/* Board: the quote on a card / row */
.qb-head-btns { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.qb-quote { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: .8125rem; margin-bottom: 4px; }
.qb-quote a { font-family: var(--font-mono); font-weight: 600; }
.qb-quote a.qb-make { font-family: var(--font-body); font-weight: 600; }
.qb-total { font-family: var(--font-mono); font-weight: 600; color: var(--heading); white-space: nowrap; }

/* ---------- Dashboard styles (build 18) ----------
   Simple, Manager and Focus (index.php): a count strip, one Today list, a
   team panel, Other work, rooms on one line and the Later card. Colour only
   where it means something: red late or urgent, amber waiting, blue new.
   Classic keeps the build 14 cards above. */
.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; }

/* Count strip: each tile filters the Today list */
.dash-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dc-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink); text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease;
}
.dc-tile:hover { border-color: var(--ink-faint); }
.dc-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dc-tile.is-active { box-shadow: 0 0 0 2px var(--blue); border-color: transparent; }
.dc-label { font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1.15; color: var(--heading); }
.dc-red   { background: var(--red-bg);     border-color: transparent; }
.dc-amber { background: var(--amber-bg);   border-color: transparent; }
.dc-blue  { background: var(--blue-light); border-color: transparent; }
.dc-red :is(.dc-label, .dc-num)   { color: var(--pill-red); }
.dc-amber :is(.dc-label, .dc-num) { color: var(--pill-amber); }
.dc-blue :is(.dc-label, .dc-num)  { color: var(--blue); }

/* Today list: a reason tag in front of each row */
.dt-row { align-items: center; }
.dt-tag {
  flex: 0 0 auto; min-width: 6.9rem; text-align: center; white-space: nowrap;
  font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.dt-red   { background: var(--red-bg);     color: var(--pill-red); }
.dt-amber { background: var(--amber-bg);   color: var(--pill-amber); }
.dt-blue  { background: var(--blue-light); color: var(--blue); }
.dt-grey  { background: var(--surface-2);  color: var(--ink-soft); border: 1px solid var(--border); }
.dash-today:not(.show-all):not(.is-filtered) .dt-extra { display: none; }
.dt-row[hidden], .dt-filter-note[hidden], .dt-none[hidden], .dt-more[hidden] { display: none !important; }
.dt-filter-note { font-size: .8125rem; color: var(--ink-soft); }
.dt-link { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; }
.dt-link:hover { text-decoration: underline; }
.dash-today .dt-none { padding: 18px 10px; }
.dash-today .dt-none::before { display: none; }

/* Team panel: one row per person. Simple = compact, Manager = with load bars */
.dash-team .tl-who { flex: 1 1 auto; }
.dash-team-big .tl-who { flex: 0 0 140px; }
.tp-note { text-align: right; }
.dash-team-big .tp-note { flex: 0 0 300px; }   /* same width on every row, so the load bars line up */
.tp-label { flex: 0 0 4.4rem; text-align: right; font-size: .8125rem; }
.dash-team .tl-row:hover { background: var(--surface-2); border-radius: 8px; }

/* Teams and rooms on one line */
.dash-rooms-line .card-head-plain { margin-bottom: 10px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--ink); text-decoration: none; font-size: .875rem;
}
.dr-chip:hover { background: var(--surface-2); }
.dr-chip .fa-lock { color: var(--ink-faint); font-size: .75rem; }
.dr-name { font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-n { font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); }
.dr-late { font-size: .75rem; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--red-bg); color: var(--pill-red); }

/* Other work: one line per module */
.ow-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 6px;
  border-top: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: .875rem;
}
.ow-row:first-of-type { border-top: 0; }
.ow-row:hover { background: var(--surface-2); border-radius: 8px; }
.ow-icon { flex: 0 0 18px; text-align: center; color: var(--ink-faint); }
.ow-name { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.ow-parts { text-align: right; font-size: .8125rem; color: var(--ink-soft); }
.ow-red   { color: var(--red); font-weight: 600; }
.ow-amber { color: var(--pill-amber); font-weight: 600; }

/* Later: Following, Upcoming, Done, each opened with a click */
.dash-board .dash-collapse-group { margin-bottom: 0; }
.dash-later .dash-collapse > summary > i { flex: 0 0 18px; text-align: center; }
.dash-later .dash-collapse-body .empty-state { padding: 12px 10px; }
.dash-later .dash-collapse-body .empty-state::before { display: none; }

/* Arrange: the style picker */
.dash-style-card h3 { margin: 0 0 12px; }
.dash-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dash-style-opt {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; margin: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer;
  font-weight: 400; color: var(--ink);
}
.dash-style-opt:hover { border-color: var(--ink-faint); }
.dash-style-opt.is-picked { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.dash-style-opt:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.dash-style-opt input { position: absolute; top: 18px; right: 18px; width: auto; margin: 0; accent-color: var(--blue-solid); }
.dash-thumb {
  display: flex; flex-direction: column; gap: 4px; height: 96px; padding: 8px; margin-bottom: 6px; overflow: hidden;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
}
.th-row { display: flex; gap: 4px; }
.th-b { flex: 1; border-radius: 3px; background: var(--border); }
.th-r { background: var(--red-bg); }
.th-a { background: var(--blue-light); }
.th-s { flex: 0 0 55%; }
.th-h1 { height: 6px; }
.th-h2 { height: 12px; }
.th-h3 { height: 18px; }
.th-h4 { height: 26px; }
.th-h6 { height: 46px; }
.dash-style-name { font-weight: 600; font-size: .9375rem; color: var(--heading); padding-right: 22px; }
.dash-style-default { font-size: .6875rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--blue-light); color: var(--blue); vertical-align: middle; white-space: nowrap; }
.dash-style-desc { font-size: .8125rem; color: var(--ink-soft); }
.dash-arrange[hidden] { display: none; }

@media (max-width: 640px) {
  .dash-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dc-tile { padding: 10px 12px; }
  .dc-num { font-size: 1.35rem; }
  .dt-tag { min-width: 0; }
  .dt-row { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; }
  .dt-row .row-main { flex: 1 1 100%; }            /* the tag on its own line above the title */
  .dash-team-big .tp-note { flex: 1 1 auto; }
  .dash-team-big .tl-who { flex: 1 1 auto; }
  .ow-row { flex-wrap: wrap; }
  .ow-parts { flex-basis: 100%; text-align: left; padding-left: 30px; }
}

/* ============================================================
   Tidy pass (build 19): one page head and one toolbar for every list
   page (includes/ui.php), and quieter cards on the boards.
   Colours only through the theme variables, so Light / Dim / Black follow.
   ============================================================ */
.ph { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px; }
.ph h1 { margin: 0; }
.ph-count { font-size: .8125rem; color: var(--ink-faint); }
.ph-actions { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ph-actions form { margin: 0; }
.ph-hint { position: relative; }
.ph-hint > summary {
  list-style: none; cursor: pointer; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 600; color: var(--ink-faint); border: 1px solid var(--border); background: var(--surface);
}
.ph-hint > summary::-webkit-details-marker { display: none; }
.ph-hint[open] > summary { color: var(--blue); border-color: var(--blue); }
.ph-hint-box {
  position: absolute; z-index: 20; top: 26px; left: 0; width: min(360px, 80vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: .8125rem; color: var(--ink-soft); box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.tbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tbar form { margin: 0; }
.tbar-form { display: contents; }
.tbar-sp { flex: 1 1 auto; }
.tbar-right { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card > .tbar:first-child { margin-top: -2px; }

.tsearch { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: 0 1 360px; min-width: 220px; }
.tsearch > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: .8125rem; pointer-events: none; }
.tsearch input[type=search] { margin: 0; width: 100%; padding: 6px 12px 6px 30px; border-radius: 999px; font-size: .8125rem; }
.tsearch-clear { font-size: .8125rem; color: var(--blue); text-decoration: none; white-space: nowrap; }
.tsearch-count { font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; }

.tchip {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: .8125rem; font-weight: 400;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-soft); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tchip:hover { border-color: var(--blue); color: var(--blue); }
.tchip.is-on { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }
.tchip-check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.tchip-check:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }

.tsel {
  display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; font-size: .8125rem;
  padding: 0 4px 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
}
.tsel-k { color: var(--ink-faint); white-space: nowrap; }
.tsel select {
  width: auto; margin: 0; border: none; background: transparent; box-shadow: none;
  font-size: .8125rem; color: var(--heading); padding: 5px 6px 5px 2px; cursor: pointer;
}
.tsel:focus-within { border-color: var(--blue); }

.tpill { display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
a.tpill:hover { filter: brightness(.95); }
.tpill-red { background: var(--red-bg); color: var(--red); }
.tpill-amber { background: var(--amber-bg); color: var(--amber); }
.tpill-green { background: var(--green-bg); color: var(--green); }
.tpill-blue { background: var(--blue-light); color: var(--blue); }
.tpill-grey { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border); }

.tav {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%; font-size: .6875rem; font-weight: 600;
  background: var(--blue-light); color: var(--blue);
}
.tav-none { background: var(--surface-2); color: var(--ink-faint); border: 1px dashed var(--border); }

/* Board cards: title, one grey line, then a footer row (dates, status, person). */
.tb-card .tc-sub { margin-top: 2px; font-size: .75rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-card .tc-note { margin-top: 4px; font-size: .75rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-card .tb-card-foot { gap: 6px; }
.tc-sp { flex: 1 1 auto; }
.tc-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tc-icon { color: var(--ink-faint); font-size: .75rem; text-decoration: none; padding: 2px 4px; border-radius: 4px; }
.tc-icon:hover { color: var(--blue); background: var(--surface-2); }
/* The status on a card: a quiet pill, same form and field as before. */
.tb-card .tb-status select, .tc-status select {
  width: auto; margin: 0; font-size: .6875rem; padding: 1px 4px 1px 8px; border-radius: 999px; min-height: 0; height: auto;
}
.tc-status { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tc-noterow { flex-basis: 100%; display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.tc-noterow[hidden] { display: none; }
.tc-noterow input { margin: 0; flex: 1 1 auto; font-size: .75rem; padding: 4px 8px; }
.tc-noterow .btn { padding: 3px 10px; font-size: .75rem; }

/* Orders: one card per order. */
.oo-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.oo-party { font-size: .875rem; font-weight: 600; color: var(--heading); min-width: 0; }
.oo-party a { color: inherit; text-decoration: none; }
.oo-party a:hover { text-decoration: underline; }
.oo-counts { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.oo-bulk { margin: 0; }
.oo-bulk select { width: auto; margin: 0; font-size: .75rem; padding: 3px 6px; border-radius: 999px; }
.oo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 14px; border-top: 1px solid var(--border); }
.oo-head + .oo-item { border-top: none; }
.oo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ink-faint); }
.oo-dot-pending, .oo-dot-confirmed { background: var(--blue); }
.oo-dot-waiting_supplier, .oo-dot-shipped { background: var(--amber); }
.oo-dot-arrived, .oo-dot-completed { background: var(--green); }
.oo-dot-cancelled { background: var(--red); }
.oo-main { flex: 1 1 240px; min-width: 0; }
.oo-name { font-size: .875rem; color: var(--ink); }
.oo-qty { color: var(--ink-faint); }
.oo-st { font-size: .75rem; color: var(--ink-soft); white-space: nowrap; }
.oo-who { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--ink-soft); }
.oo-who form { margin: 0; display: inline; }
.oo-item .oc-edit { flex-basis: auto; }
.oo-item .oc-editbox[open] { flex-basis: 100%; }
.oo-item:has(.oc-editbox[open]) .oc-edit { flex-basis: 100%; }

/* Quotations: a won quote's "Make job task" box. */
.qt-make > summary { list-style: none; cursor: pointer; display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--green-bg); color: var(--green); }
.qt-make > summary::-webkit-details-marker { display: none; }
.qt-make[open] { flex-basis: 100%; }
.qt-make form { margin-top: 8px; }
.qt-make label { margin-top: 8px; font-size: .75rem; }
.qt-make label:first-child { margin-top: 0; }
.qt-make input, .qt-make select { font-size: .8125rem; padding: 5px 8px; margin: 2px 0 0; }
.qt-make .qt-hint { font-size: .75rem; color: var(--ink-faint); margin: 6px 0 0; }
.qt-link { font-size: .75rem; }
.qt-skip { margin: 0; }
.qt-skip button { background: none; border: none; padding: 0; font-size: .75rem; color: var(--ink-faint); cursor: pointer; text-decoration: underline; }

/* From-quote line on the task page. */
.from-quote { margin-top: 4px; font-size: .8125rem; color: var(--ink-soft); }
.tc-status:has(.tc-noterow:not([hidden])) { flex-basis: 100%; }
.qt-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; }
.qt-row .qt-make[open] { order: 2; }
.qb-actions select { max-width: 130px; }
.tc-status select, .tb-status select { max-width: 130px; }
.oo-single { border-bottom: none; background: var(--surface); }
.oo-single .oo-name { font-size: .875rem; color: var(--ink-soft); min-width: 0; }
.oo-subs { flex-basis: 100%; margin-top: -2px; }
.oo-head .oc-edit { flex-basis: auto; }
.oo-head:has(.oc-editbox[open]) .oc-edit { flex-basis: 100%; order: 10; }
.oo-head .oc-status-form, .oo-item .oc-status-form { margin: 0; }