/* ============================================================
   ServiceOps — styles.css
   Design system + login screen.
   Tokens in :root are the single source of truth for the whole
   app. Every module we build will reuse these variables.
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* neutral slate-blue scale (n900 = body text) */
  --n0:#ffffff;  --n50:#f5f8fe;  --n100:#ebf2fc; --n200:#e0e8f5;
  --n300:#cdd8ec; --n400:#94a3bd; --n500:#5f6f8a; --n600:#45546e;
  --n700:#324156; --n800:#1d2a40; --n900:#0e1c33;

  /* accent (blue) */
  --accent:#2563eb; --accent-600:#1d4ed8; --accent-50:#eef4ff; --accent-100:#dbe7fe;

  /* status colors (+ soft backgrounds) */
  --ok:#0e8f6e;   --ok-bg:#e7f6ef;
  --warn:#a85a09; --warn-bg:#fbf0df;
  --bad:#dc2626;  --bad-bg:#fdecec;
  --info:#2563eb; --info-bg:#e9f0fd;
  --violet:#6d49d6; --violet-bg:#efe9fb;

  /* surfaces */
  --card:#ffffff; --border:#e0e8f5; --page:#eaeef5;

  /* gradients */
  --grad-brand:linear-gradient(135deg,#2f8bff 0%,#1f5fe0 100%);
  --grad-rail:linear-gradient(180deg,#1d3f78 0%,#0e244a 100%);

  /* shadows + focus ring */
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 10px 34px rgba(15,23,42,.11);
  --ring:0 0 0 3px var(--accent-50);
}

/* ---------- BASE ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--page);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--n900);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden]{ display:none !important; }

/* Monospace helper for reg numbers / codes / figures */
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-page{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow:hidden;

  /* Deep brand-navy stage so the colored glows actually read.
     (Same navy family as the sidebar rail token.) */
  background:radial-gradient(135% 135% at 50% 18%, #15346d 0%, #0c2049 55%, #081634 100%);
}

/* ---------- animated background ---------- */
.login-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  /* a gentle COOL shimmer only — shifts toward sky-blue, never purple */
  animation:hueCycle 16s ease-in-out infinite;
}

/* Each "orb" is a big, soft, blurred ball of color. screen blend mode
   makes overlapping glows brighten like an aurora on the dark stage.
   All orbs are kept in the BLUE family (no violet/indigo). */
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(64px);
  mix-blend-mode:screen;
  will-change:transform;
  pointer-events:none;
}

/* ============================================================
   PERF (2026-07-13): the login screen was eating keystrokes.
   ------------------------------------------------------------
   MEASURED, repeatedly, on localhost AND production: 200-336 ms of latency on
   every keydown while typing an email or password. A user's very first
   interaction with ServiceOps lagged a fifth of a second behind their fingers.

   THE CAUSE. Each orb is a ~900x900px circle with filter:blur(64px) and
   mix-blend-mode:screen, animating continuously. `will-change:transform` above
   was the right instinct — but mix-blend-mode DEFEATS it. Blending forces the
   browser to re-composite the element against everything beneath it on every
   single frame, so it can never cache the blurred layer. Five huge blurs get
   re-rasterised sixty times a second, and in Safari that work lands on the main
   thread — the same thread your keystrokes are queued on.

   THE FIX — two lines, and the screen looks identical when nobody is typing:

   1. isolation:isolate gives the blending its own stacking context. The orbs
      still blend with EACH OTHER (which is the effect), but no longer against
      the whole page — so the browser can composite them once and reuse it.

   2. :focus-within pauses the drift the moment a field is focused. The orbs
      still move while the page sits idle; they hold still while you type, and
      resume the instant you click away. Nobody watches a background animation
      while entering a password.
   ============================================================ */
.login-bg{ isolation:isolate; }
.login-page:focus-within .orb{ animation-play-state:paused; }

/* And respect the OS setting. Someone who has asked their computer to stop
   animating things has asked for a reason — often motion sickness or a
   vestibular disorder. Costs nothing; it is simply correct. */
@media (prefers-reduced-motion: reduce){
  .orb{ animation:none; }
}
.orb1{
  width:48vw; height:48vw; top:-12vh; left:-8vw;
  background:radial-gradient(circle, rgba(47,139,255,.95), transparent 66%);   /* azure */
  animation:drift1 17s ease-in-out infinite;
}
.orb2{
  width:46vw; height:46vw; bottom:-14vh; right:-6vw;
  background:radial-gradient(circle, rgba(31,95,224,.92), transparent 66%);    /* royal blue */
  animation:drift2 21s ease-in-out infinite;
}
.orb3{
  width:40vw; height:40vw; top:6vh; right:4vw;
  background:radial-gradient(circle, rgba(56,189,248,.85), transparent 66%);   /* sky blue */
  animation:drift3 19s ease-in-out infinite;
}
.orb4{
  width:42vw; height:42vw; bottom:-6vh; left:2vw;
  background:radial-gradient(circle, rgba(29,78,216,.90), transparent 66%);    /* deep blue */
  animation:drift4 23s ease-in-out infinite;
}
/* central glow that pulses outward — the "radiating" feel */
.orb-pulse{
  width:36vw; height:36vw; top:50%; left:50%;
  background:radial-gradient(circle, rgba(59,130,246,.80), transparent 60%);   /* blue */
  animation:pulse 7s ease-in-out infinite;
}

.login-card{
  position:relative;     /* sits above the background layer */
  z-index:1;
  width:100%;
  max-width:380px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:32px;
  box-shadow:var(--shadow-lg);
  animation:cardIn .5s ease-out both;
}

/* brand row */
.login-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
}
.brand-mark{
  width:34px; height:34px;
  border-radius:8px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:none;
  overflow:hidden;                 /* clip the logo to the rounded square */
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-name{
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
}

/* headings */
.login-title{
  font-size:21px;
  font-weight:600;
  letter-spacing:-.025em;
  margin:0 0 6px;
}
.login-sub{
  font-size:13px;
  color:var(--n500);
  margin:0 0 24px;
}

/* fields */
.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--n600);
  margin-bottom:6px;
}
.field input{
  width:100%;
  font-family:inherit;
  font-size:14px;
  color:var(--n900);
  background:var(--n0);
  border:1px solid var(--border);
  border-radius:9px;
  padding:11px 13px;
  outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.field input::placeholder{ color:var(--n400); }
.field input:focus{
  border-color:var(--accent);
  box-shadow:var(--ring);
}

/* error slot */
.login-error{
  font-size:13px;
  color:var(--bad);
  background:var(--bad-bg);
  border-radius:8px;
  padding:9px 12px;
  margin-bottom:16px;
}

/* Sign-in progress (cold-start masking) — informational, never alarming. */
.login-status{
  font-size:13px;
  color:var(--n500);
  text-align:center;
  line-height:1.45;
  margin-top:14px;
}

/* primary button */
.btn-primary{
  width:100%;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:var(--accent);
  border:none;
  border-radius:9px;
  padding:12px 16px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .12s, transform .06s;
}
.btn-primary:hover{ background:var(--accent-600); }
.btn-primary:active{ transform:translateY(.5px); }
.btn-primary:disabled{ opacity:.6; cursor:default; }

/* ---------- animations ---------- */
@keyframes cardIn{
  from{ opacity:0; transform:translateY(10px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes drift1{
  0%{   transform:translate(0,0)        scale(1); }
  50%{  transform:translate(16vw,12vh)  scale(1.28); }
  100%{ transform:translate(0,0)        scale(1); }
}
@keyframes drift2{
  0%{   transform:translate(0,0)         scale(1.1); }
  50%{  transform:translate(-15vw,-10vh) scale(.85); }
  100%{ transform:translate(0,0)         scale(1.1); }
}
@keyframes drift3{
  0%{   transform:translate(0,0)         scale(1); }
  50%{  transform:translate(-12vw,14vh)  scale(1.3); }
  100%{ transform:translate(0,0)         scale(1); }
}
@keyframes drift4{
  0%{   transform:translate(0,0)        scale(1.05); }
  50%{  transform:translate(14vw,-12vh) scale(1.22); }
  100%{ transform:translate(0,0)        scale(1.05); }
}
@keyframes pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(.85); opacity:.45; }
  50%{     transform:translate(-50%,-50%) scale(1.4);  opacity:.85; }
}
/* small, cool-only shift: blue <-> sky-blue. Never crosses into purple. */
@keyframes hueCycle{
  0%{   filter:hue-rotate(0deg); }
  50%{  filter:hue-rotate(-12deg); }
  100%{ filter:hue-rotate(0deg); }
}

/* Respect users who ask for reduced motion (accessibility):
   keep the color, drop the movement. */
@media (prefers-reduced-motion: reduce){
  .login-bg{ animation:none; }
  .orb{ animation:none !important; }
  .orb-pulse{ transform:translate(-50%,-50%); }
  .login-card{ animation:none; }
}

/* ============================================================
   APP SHELL — sidebar rail + top bar + content
   ============================================================ */
.app{ min-height:100vh; }

.shell{
  display:grid;
  grid-template-columns:200px 1fr;
  min-height:100vh;
}

/* ---------- sidebar rail (dark gradient) ---------- */
.rail{
  position:sticky; top:0; align-self:start;
  height:100vh;
  background:var(--grad-rail);
  display:flex; flex-direction:column;
  padding:16px 12px;
  z-index:30;
}
.rail-brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 16px;
}

.nav{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px;
  padding-right:2px;
}
.nav::-webkit-scrollbar{ width:8px; }
.nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }
.nav::-webkit-scrollbar-track{ background:transparent; }

.nav-group{ display:flex; flex-direction:column; }
.nav-group-label{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left;
  font-family:inherit;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#7d93bf;
  background:transparent; border:none; border-radius:6px;
  padding:5px 10px; margin-bottom:2px;
  cursor:pointer; transition:color .12s;
}
.nav-group-label:hover{ color:#aab9da; }
.nav-chev{ width:13px; height:13px; flex:none; opacity:.85; transition:transform .18s ease; }
.nav-group.collapsed .nav-chev{ transform:rotate(-90deg); }

/* Collapse animation: the body is a grid that animates from 1fr (open)
   to 0fr (closed). This smoothly slides to the EXACT content height with
   no hard-coded max-height needed. The inner wrapper hides overflow. */
.nav-group-body{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .2s ease;
}
.nav-group.collapsed .nav-group-body{ grid-template-rows:0fr; }
.nav-group-items{
  overflow:hidden; min-height:0;
  display:flex; flex-direction:column; gap:2px;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left;
  font-family:inherit; font-size:13.5px; font-weight:500;
  color:#c4d2ee;
  background:transparent; border:none; border-radius:8px;
  padding:9px 10px; cursor:pointer;
  transition:background .12s, color .12s;
}
.nav-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active{
  background:rgba(47,139,255,.20); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(120,170,255,.25);
}
.nav-ico{ width:18px; height:18px; flex:none; }

/* user chip at the bottom of the rail */
.rail-user{
  display:flex; align-items:center; gap:10px;
  padding:12px 6px 4px; margin-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
}
.avatar{
  width:32px; height:32px; border-radius:8px; flex:none;
  background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
}
.rail-user-meta{ flex:1; min-width:0; }
.rail-user-name{
  font-size:13px; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rail-user-role{ font-size:11.5px; color:#90a4cc; }

.icon-btn{
  width:32px; height:32px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:8px;
  color:inherit; cursor:pointer; transition:background .12s;
}
.icon-btn:hover{ background:rgba(255,255,255,.10); }
.icon-btn svg{ width:18px; height:18px; }

/* ---------- main column ---------- */
.main{ display:flex; flex-direction:column; min-width:0; background:var(--page); }

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  height:60px; padding:0 22px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar-title{
  font-size:16px; font-weight:600; letter-spacing:-.02em;
  margin:0; flex:1; color:var(--n900);
}
.topbar-right{ display:flex; align-items:center; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; color:var(--n600);
  background:var(--n100); border:1px solid var(--border);
  border-radius:999px; padding:5px 11px;
}
.chip-dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); }
.menu-btn{ color:var(--n600); display:none; }   /* shown only on mobile */

/* ---------- content + placeholder panel ---------- */
.content{ flex:1; padding:26px 22px; }
.panel{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:40px; max-width:560px; box-shadow:var(--shadow-sm);
}
.panel-ico{
  width:46px; height:46px; border-radius:11px;
  background:var(--accent-50); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.panel-ico svg{ width:24px; height:24px; }
.panel h2{ font-size:19px; font-weight:600; letter-spacing:-.02em; margin:0 0 8px; }
.panel p{ font-size:14px; color:var(--n500); line-height:1.55; margin:0 0 18px; }
.panel-meta{
  font-size:12.5px; color:var(--n600);
  background:var(--n50); border:1px solid var(--border);
  border-radius:8px; padding:9px 12px; display:inline-block;
}
.soon-pill{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-50);
  border:1px solid var(--accent-100); border-radius:999px; padding:4px 11px;
}
.soon-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; }

/* ---------- mobile: rail becomes a slide-in drawer ---------- */
.nav-scrim{ display:none; }
@media (max-width:900px){
  .shell{ grid-template-columns:1fr; }
  .rail{
    position:fixed; left:0; top:0; width:224px;
    transform:translateX(-100%); transition:transform .22s ease;
  }
  .shell.nav-open .rail{ transform:translateX(0); }
  .nav-scrim{
    display:block; position:fixed; inset:0; z-index:25;
    background:rgba(8,16,34,.5);
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .shell.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
  .menu-btn{ display:flex; }
}

/* ============================================================
   DAY VIEW (appointments module)
   ============================================================ */
.dv-loading{ padding:40px 4px; color:var(--n500); font-size:14px; }

/* date navigation bar */
.dv-bar{ display:flex; align-items:center; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.dv-nav{
  width:34px; height:34px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  color:var(--n600); cursor:pointer; transition:background .12s, border-color .12s;
}
.dv-nav:hover{ background:var(--n50); border-color:var(--n300); }
.dv-nav svg{ width:18px; height:18px; transform:rotate(90deg); }      /* chevron -> left arrow */
.dv-nav-next svg{ transform:rotate(-90deg); }                          /* -> right arrow */
.dv-date{
  font-size:13.5px; color:var(--n900);
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:8px 11px; cursor:pointer;
}
.dv-date:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.dv-count{ font-size:13px; color:var(--n500); margin-left:4px; }

/* summary tiles */
.dv-tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:22px; }
.tile{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; box-shadow:var(--shadow-sm);
  border-left:4px solid var(--n300);
  cursor:pointer;
  transition:box-shadow .14s, transform .08s;
}
.tile:hover{ box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.tile-value{ font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--n900); }
.tile-label{ font-size:12px; color:var(--n500); margin-top:2px; font-weight:500; }

/* vivid per-metric accents — colors carried over from the original ServiceOps
   tiles (#3b82f6 / #10b981 / #f59e0b / #f97316 / #8b5cf6). White tile body;
   only the left-edge accent and the number carry the color. */
.tile.t-blue  { border-left-color:#3b82f6; }
.tile.t-blue   .tile-value{ color:#2563eb; }
.tile.t-green { border-left-color:#10b981; }
.tile.t-green  .tile-value{ color:#0e9f6e; }
.tile.t-amber { border-left-color:#f59e0b; }
.tile.t-amber  .tile-value{ color:#b45309; }
.tile.t-orange{ border-left-color:#f97316; }
.tile.t-orange .tile-value{ color:#c2410c; }
.tile.t-violet{ border-left-color:#8b5cf6; }
.tile.t-violet .tile-value{ color:#6d49d6; }
@media (max-width:760px){ .dv-tiles{ grid-template-columns:repeat(2,1fr); } }

/* appointment cards */
.dv-cards{ display:flex; flex-direction:column; gap:10px; }
.ac{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06);
}
.ac-dead{ opacity:.7; }
.ac-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ac-name{ font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--n900); }
.ac-reg{ font-size:12.5px; color:var(--n600); margin-top:1px; }
.ac-top-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.ac-badges{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.ac-loc{ font-size:11.5px; color:var(--n400); }

/* status badge */
.badge{
  display:inline-block; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.b-ok{ color:var(--ok); background:var(--ok-bg); }
.b-warn{ color:var(--warn); background:var(--warn-bg); }
.b-bad{ color:var(--bad); background:var(--bad-bg); }
.b-info{ color:var(--info); background:var(--info-bg); }
.b-violet{ color:var(--violet); background:var(--violet-bg); }

/* middle row: service chip + metadata + flags */
.ac-mid{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px; margin-top:8px; }
.ac-chip{
  font-size:12px; font-weight:600; color:var(--accent);
  background:var(--accent-50); border:1px solid var(--accent-100);
  padding:3px 9px; border-radius:6px;
  display:inline-block; white-space:nowrap;
}
.ac-meta{ font-size:12.5px; color:var(--n600); }
.ac-flag{ font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:2px 7px; border-radius:5px; }
.f-ok{ color:var(--ok); background:var(--ok-bg); }
.f-info{ color:var(--info); background:var(--info-bg); }
.f-bad{ color:var(--bad); background:var(--bad-bg); }

.ac-voice{ font-size:13px; color:var(--n600); font-style:italic; margin-top:10px; }
.ac-note{ font-size:12.5px; margin-top:8px; }
/* "Type changed" audit chip on the card (original adjustedType badge) */
.ac-adj{
  display:inline-block; margin-top:8px; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:5px;
  background:#fef3c7; border:1px solid #fde68a; color:#92400e;
}
/* "Cancel Pending" badge on the card (original .b-cancp) */
.b-cancp{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:6px;
  background:#fef3c7; color:#92400e; white-space:nowrap;
}
.n-bad{ color:var(--bad); }

/* empty state */
.dv-empty{ text-align:center; padding:48px 0; color:var(--n400); }
.dv-empty-ico{
  width:46px; height:46px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--n100); border-radius:12px; color:var(--n400);
}
.dv-empty-ico svg{ width:24px; height:24px; }
.dv-empty p{ font-size:14px; margin:0; }

/* ============================================================
   MODAL (reusable — used by Day View tiles, more later)
   ============================================================ */
.modal-scrim{
  position:fixed; inset:0; z-index:70;   /* above the floor detail panel (61), below toast (80) */
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(8,16,34,.45);
  animation:modalIn .14s ease-out;
}
.modal{
  width:100%; max-width:560px; max-height:84vh;
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 20px; border-bottom:1px solid var(--border);
}
.modal-title{ font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0; color:var(--n900); }
.modal-x{ color:var(--n500); }
.modal-x:hover{ background:var(--n100); }
.modal-body{ padding:18px 20px; overflow-y:auto; background:var(--card); }
.modal-empty{ color:var(--n500); font-size:14px; text-align:center; padding:20px 0; margin:0; }
@keyframes modalIn{ from{ opacity:0; } to{ opacity:1; } }

/* the Edit Appointment form is wide so the time-slot row sits on one line */
.modal:has(.lc-edit){ max-width:920px; }
/* Dashboard data-table modals need room so columns don't wrap/clip */
.modal:has(.ad-mscroll), .modal:has(.ad-statgrid), .modal:has(.ad-rec),
.modal:has(.fd-mscroll), .modal:has(.fd-statgrid){ max-width:min(1040px, 94vw); }
.modal .ad-table td:first-child, .modal .fd-table td:first-child{ white-space:nowrap; }

/* "Appointment Type" box inside the Edit modal */
.ct-box{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--n50); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px;
}
.ct-box-h{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--n500); }
.ct-box-v{ font-size:14px; font-weight:600; color:var(--n900); margin-top:3px; }
.ct-box-v.is-pu{ color:var(--accent); }
.ct-box .btn-soft{ flex:none; }

/* Change Type dialog */
.ct-cur{ font-size:14px; color:var(--n700); }
.ct-cur b.is-pu, .ct-arrow b.is-pu{ color:var(--accent); }
.ct-arrow{ font-size:15px; font-weight:600; color:var(--n900); margin:6px 0 12px; }
.ct-note{ font-size:13px; color:var(--n500); margin-bottom:10px; }
.ct-warn{
  font-size:13px; color:var(--warn); background:var(--warn-bg);
  border:1px solid #ecd09a; border-radius:8px; padding:10px 12px; margin:4px 0 12px;
}

/* ============================================================
   CREATE APPOINTMENT (form) + buttons + toast
   ============================================================ */
.muted{ color:var(--n500); }
.ca-form{ max-width:none; }          /* the booking form fills the page, not the narrow panel width */
.ca-form > p{ margin-top:-2px; }

/* date / location / cap row */
.ca-row{ display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-bottom:6px; }
.ca-row .fgi{ flex:1; min-width:190px; }
.ca-capwrap{ display:flex; flex-direction:column; gap:4px; padding-bottom:4px; }
.ca-cap-label{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--n500); }
.ca-cap{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; padding:5px 11px; border-radius:8px; white-space:nowrap; }
.ca-cap.b-ok{ color:var(--ok); background:var(--ok-bg); }
.ca-cap.b-warn{ color:var(--warn); background:var(--warn-bg); }
.ca-cap.b-bad{ color:var(--bad); background:var(--bad-bg); }

/* field grid */
.fg{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px 16px; margin:14px 0 4px; }
@media (max-width:860px){ .fg{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .fg{ grid-template-columns:1fr; } }
.fgi{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.fgi.fw{ grid-column:1 / -1; margin-top:14px; }
.fgi.hid{ display:none; }
.fgi label{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--n600); }
.req{ color:var(--bad); }
.fhint{ font-size:11px; color:var(--n400); }

.fgi input, .fgi select, .fgi textarea{
  width:100%; box-sizing:border-box;
  font-family:inherit; font-size:14px; color:var(--n900);
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:9px 11px;
}
.fgi textarea{ min-height:70px; resize:vertical; }
.fgi input.up{ text-transform:uppercase; }
.fgi input:focus, .fgi select:focus, .fgi textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:var(--ring);
}

/* slot picker */
.slot-row{ display:flex; gap:8px; flex-wrap:wrap; }
.slot-btn{
  flex:1; min-width:96px; text-align:center; cursor:pointer;
  background:var(--card); border:1.5px solid var(--border); border-radius:10px;
  padding:9px 8px; transition:border-color .12s, background .12s;
}
.slot-btn:hover{ border-color:var(--n300); }
.slot-btn.selected{ border-color:var(--accent); background:var(--accent-50); }
.slot-btn.disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
.slot-time{ font-size:13.5px; font-weight:700; color:var(--n900); }
.slot-tag{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--n400); margin-top:1px; }
.slot-ct{ font-size:10.5px; color:var(--n500); margin-top:3px; min-height:13px; }
.slot-full{ color:var(--bad); font-weight:700; }
.slot-over{ color:var(--warn); font-weight:700; }

/* actions + buttons */
.ca-actions{ display:flex; gap:10px; margin-top:22px; }
.btn{
  font-family:inherit; font-size:14px; font-weight:600;
  padding:10px 18px; border-radius:9px; border:1px solid transparent; cursor:pointer;
  transition:background .12s, border-color .12s, opacity .12s;
}
.btn-p{ background:var(--accent); color:#fff; }
.btn-p:hover{ background:var(--accent-600); }
.btn-p:disabled{ opacity:.6; cursor:default; }
.btn-s{ background:var(--card); color:var(--n700); border-color:var(--border); }
.btn-s:hover{ background:var(--n50); }

/* toast */
#toast.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  max-width:90vw; z-index:80;
  background:var(--n800); color:#fff;
  font-size:13.5px; font-weight:500;
  padding:11px 18px; border-radius:10px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
#toast.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#toast.toast.toast-err{ background:var(--bad); }

/* duplicate / returning-customer warning banner */
.ca-warn{ display:flex; flex-direction:column; gap:6px; margin:10px 0 2px; }
.ca-warn:empty{ display:none; }
.ca-warnrow{
  font-size:13px; color:var(--warn); background:var(--warn-bg);
  border:1px solid #f0d49b; border-radius:8px; padding:9px 12px;
}
/* free-mode time input shouldn't stretch the full grid width */
#ca_time{ max-width:200px; }

/* ============================================================
   CREATE APPOINTMENT — full layout (strip, 4-col grid, pickup)
   ============================================================ */

/* 4-column field grid + narrow date box (fixes the over-wide date) */
.fg4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1100px){ .fg4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .fg4{ grid-template-columns:1fr; } }
.fg .fw{ grid-column:1 / -1; }
#ca_d{ max-width:210px; }
.hid{ display:none !important; }

/* day-pill strip */
.ca-strip{ display:flex; align-items:stretch; gap:8px; margin:2px 0 16px; }
.ca-pill-track{ display:flex; gap:8px; overflow-x:auto; flex:1; padding-bottom:2px; }
.ca-pill-nav{
  flex:0 0 auto; width:34px; border:1px solid var(--border); background:var(--n0);
  border-radius:10px; cursor:pointer; font-size:18px; color:var(--n600); line-height:1;
}
.ca-pill-nav:hover{ background:var(--n100); }
.ca-pill{
  flex:0 0 auto; min-width:80px; display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:8px 6px; border:1.5px solid var(--border); border-radius:12px; background:var(--n0);
  cursor:pointer; font-family:inherit;
}
.ca-pill-wd{ font-size:11px; font-weight:600; color:var(--n500); text-transform:uppercase; letter-spacing:.03em; }
.ca-pill-d{ font-size:17px; font-weight:700; color:var(--n800); font-variant-numeric:tabular-nums; }
.ca-pill-c{ font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--n500); }
.ca-pill.lo, .ca-pill.md{ background:var(--ok-bg); }
.ca-pill.lo .ca-pill-c, .ca-pill.md .ca-pill-c{ color:var(--ok); }
.ca-pill.hi{ background:var(--warn-bg); } .ca-pill.hi .ca-pill-c{ color:var(--warn); }
.ca-pill.full{ background:var(--bad-bg); } .ca-pill.full .ca-pill-c{ color:var(--bad); }
.ca-pill.off{ opacity:.45; cursor:not-allowed; } .ca-pill.off .ca-pill-c{ color:var(--n400); }
.ca-pill.sel{ border-color:var(--ok); box-shadow:inset 0 0 0 1.5px var(--ok); }
.ca-pill.sel.full{ border-color:var(--bad); box-shadow:inset 0 0 0 1.5px var(--bad); }

/* booking-load readout (next to date) */
.ca-loadcell .ca-load{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:38px; }
.ca-load-main{ font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.ca-load-main.b-ok{ color:var(--ok); } .ca-load-main.b-warn{ color:var(--warn); } .ca-load-main.b-bad{ color:var(--bad); }
.ca-cap-badge{
  font-size:11.5px; font-weight:600; color:var(--n600); background:var(--n100);
  border:1px solid var(--border); border-radius:999px; padding:3px 9px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* pickup No/Yes toggle */
.tgl{ display:inline-flex; height:38px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--n0); }
.tgl .to{ flex:1; min-width:62px; border:none; background:transparent; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--n500); cursor:pointer; padding:0 18px; }
.tgl .to.active{ background:var(--ok); color:#fff; }

/* pickup detail block */
.ca-pickbar{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.ca-pickttl{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--n600); }
.ca-rangelink{ font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; }
.ca-rangelink:hover{ text-decoration:underline; }
.ca-picksub{ margin:8px 0 0; }
.fg3{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:760px){ .fg3{ grid-template-columns:1fr; } }

/* slot tag in caps */
.slot-tag{ text-transform:uppercase; }

/* ============================================================
   LIFECYCLE — card actions, modals, cancel-request review
   ============================================================ */
.btn-d{ background:var(--bad); color:#fff; }
.btn-d:hover{ filter:brightness(.94); }
.btn-sm{ padding:6px 12px; font-size:12.5px; }

/* Settings staff-row actions — PRODUCTION palette, soft tinted look.
   Services = plain white (.btn-s). Edit = light amber. Remove = light red.
   Backgrounds/text mirror production's own badge pairings (amber .b-wip, red family). */
.btn-ed{ background:#fef3c7; color:#92400e; border-color:#fde9b5; }   /* Edit   — soft amber (a5 family) */
.btn-ed:hover{ background:#fde9b5; }
.btn-rm{ background:#fde8e8; color:#b91c1c; border-color:#f7cdcd; }   /* Remove — soft red   (r5 family) */
.btn-rm:hover{ background:#f9d6d6; }
.btn-ed:disabled, .btn-rm:disabled{ opacity:.6; cursor:default; }

/* Cap ON/OFF slider switch (Settings → Appointment caps). The handler flips it
   optimistically on click and shows .cap-sw-spin while the save is in flight. */
.cap-sw{ display:inline-flex; align-items:center; gap:8px; border:0; background:none; padding:0; cursor:pointer; }
.cap-sw-track{ position:relative; flex:none; width:38px; height:22px; border-radius:999px; background:#cbd5e1; transition:background .18s; }
.cap-sw.on .cap-sw-track{ background:#22a668; }                 /* production green when ON */
.cap-sw-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:left .18s; }
.cap-sw.on .cap-sw-thumb{ left:18px; }
.cap-sw:disabled{ cursor:default; }
.cap-sw-spin{ width:13px; height:13px; border-radius:50%; border:2px solid #cbd5e1; border-top-color:#22a668; animation:capspin .6s linear infinite; }
@keyframes capspin{ to{ transform:rotate(360deg); } }

.ac-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.ac-note.n-ok{ color:var(--ok); }

.dv-reqbtn{ margin-left:auto; }

/* modal building blocks */
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.lc-sum{ background:var(--n50); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:16px; }
.lc-srow{ display:flex; justify-content:space-between; padding:3px 0; font-size:13px; }
.lc-srow span:first-child{ color:var(--n500); }
.lc-srow span:last-child, .lc-srow b{ font-weight:600; color:var(--n800); }
.lc-field{ margin-top:12px; }
.lc-field:first-of-type{ margin-top:0; }
.lc-warn{ background:var(--bad-bg); color:var(--bad); border-radius:8px; padding:10px 12px; margin-top:14px; font-size:12.5px; font-weight:500; }

/* cancel-request review cards */
.lc-reqcard{ border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:var(--n0); }
.lc-reqgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 14px; margin-bottom:10px; }
@media (max-width:560px){ .lc-reqgrid{ grid-template-columns:1fr 1fr; } }
.lc-reqgrid > div{ display:flex; flex-direction:column; gap:1px; }
.lc-reqgrid span{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--n500); }
.lc-reqgrid b{ font-size:13px; font-weight:600; color:var(--n800); }
.lc-reqreason{ border-top:1px solid var(--border); padding-top:10px; font-size:13px; color:var(--n700); }
.lc-reqreason span{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--n500); }
.lc-reqacts{ margin-top:14px; justify-content:flex-start; }

/* ============================================================
   DAY VIEW v2 — match the original card layout + soft buttons
   ============================================================ */

/* status badge gets a leading dot, like "• Confirmed" */
.badge{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.badge-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

/* service-type chip, toned by service */
.ac-chip.t-rr {  background:#fee2e2; color:#991b1b; border-color:transparent; }
.ac-chip.t-ss {  background:#ede9fe; color:#5b21b6; border-color:transparent; }
.ac-chip.t-ps {  background:#dbeafe; color:#1d4ed8; border-color:transparent; }
.ac-chip.t-ffs{  background:#d1fae5; color:#065f46; border-color:transparent; }
.ac-chip.t-is {  background:#fef3c7; color:#92400e; border-color:transparent; }
.ac-chip.t-bs {  background:#f3e8ff; color:#7c3aed; border-color:transparent; }
.ac-chip.t-cs {  background:#fce7f3; color:#9d174d; border-color:transparent; }
.ac-chip.t-neutral{ background:var(--n100); color:var(--n600); border-color:transparent; }

/* meta row items with small line-icons */
.ac-mi{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--n700); }
.ac-ico{ width:15px; height:15px; flex:none; color:var(--n500); }
.ac-muted{ color:var(--n400); }
.ac-elig{ font-size:12px; font-weight:600; white-space:nowrap; }
.ac-elig.e-ok{ color:var(--ok); }
.ac-elig.e-info{ color:var(--info); }
.ac-elig.e-bad{ color:var(--bad); }

/* pickup address line */
.ac-addr{ display:flex; align-items:flex-start; gap:6px; margin-top:9px; font-size:12.5px; color:var(--n500); }
.ac-addr .ac-ico{ margin-top:1px; }

/* card action buttons — exact original ServiceOps .ac-btn style:
   white, hairline grey border, grey text; only the text colour varies. */
.btn-soft{
  display:inline-flex; align-items:center; gap:6px;
  font-family:inherit; font-size:12.5px; font-weight:500; line-height:1;
  padding:6px 12px; border-radius:6px; cursor:pointer;
  border:1px solid #e2e8f0; color:#475569; background:#fff;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-soft:hover{ background:#f8fafc; }
.btn-soft:active{ transform:translateY(.5px); }
.btn-soft:disabled{ opacity:.55; cursor:default; }
/* Reschedule / Check In → blue text (var --b5) */
.btn-soft.t-accent{ color:#3b82f6; }
.btn-soft.t-accent:hover{ background:#f8fafc; }
/* Cancel → grey text, turns red on hover (original .ac-btn.del) */
.btn-soft.t-bad{ color:#475569; }
.btn-soft.t-bad:hover{ background:#fef2f2; border-color:#ef4444; color:#ef4444; }
/* Return → amber text (var --a5) */
.btn-soft.t-ok{ color:#b45309; }
.btn-soft.t-ok:hover{ background:#fffbeb; border-color:#f59e0b; color:#b45309; }

/* "By Service Type" panel */
.byst{ background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.byst-h{ font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--n900); margin-bottom:12px; }
.byst-row{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; }
.byst-item{ display:inline-flex; align-items:center; gap:7px; }
.byst-chip{ font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:6px; }
.byst-chip.t-rr {  background:#fee2e2; color:#991b1b; }
.byst-chip.t-ss {  background:#ede9fe; color:#5b21b6; }
.byst-chip.t-ps {  background:#dbeafe; color:#1d4ed8; }
.byst-chip.t-ffs{  background:#d1fae5; color:#065f46; }
.byst-chip.t-is {  background:#fef3c7; color:#92400e; }
.byst-chip.t-bs {  background:#f3e8ff; color:#7c3aed; }
.byst-chip.t-cs {  background:#fce7f3; color:#9d174d; }
.byst-chip.t-neutral{ background:var(--n100); color:var(--n600); }
.byst-n{ font-size:14px; font-weight:700; color:var(--n800); font-variant-numeric:tabular-nums; }

/* ============================================================
   BADGE + CARD-CHIP polish — give status pills a defined edge and
   a fuller fill (they were saturated text on a near-white tint with
   no border, which read as washed out). Scoped to .badge / .ac-chip
   only — tiles and other .b-* / .t-* users are untouched.
   ============================================================ */
.badge.b-conf{  background:#dbeafe; color:#1d4ed8; }  .badge.b-conf  .badge-dot{ background:#3b82f6; }
.badge.b-ci{    background:#dbeafe; color:#1e40af; }  .badge.b-ci    .badge-dot{ background:#3b82f6; }
.badge.b-canc{  background:#e2e8f0; color:#475569; }  .badge.b-canc  .badge-dot{ background:#94a3b8; }
.badge.b-resch{ background:#e0e7ff; color:#3730a3; }  .badge.b-resch .badge-dot{ background:#6366f1; }
.badge.b-ret{   background:#fef3c7; color:#92400e; }  .badge.b-ret   .badge-dot{ background:#f59e0b; }
.badge.b-ns{    background:#fee2e2; color:#991b1b; }  .badge.b-ns    .badge-dot{ background:#ef4444; }
.badge.b-wait{  background:#ffedd5; color:#c2410c; }  .badge.b-wait  .badge-dot{ background:#f97316; }
/* floor-derived states — original ServiceOps colours */
.badge.b-insvc{ background:#ede9fe; color:#6d28d9; }  .badge.b-insvc .badge-dot{ background:#8b5cf6; }
.badge.b-wip{   background:#fef3c7; color:#92400e; }  .badge.b-wip   .badge-dot{ background:#f59e0b; }
.badge.b-rdy{   background:#dff5e8; color:#0f5132; }  .badge.b-rdy   .badge-dot{ background:#22a668; }
.badge.b-del{   background:#b5e8cb; color:#0a3d1f; }  .badge.b-del   .badge-dot{ background:#157347; }
.badge.b-arr{   background:#fed7aa; color:#9a3412; }  .badge.b-arr   .badge-dot{ background:#f97316; }

/* service-type chips on cards: slightly fuller fill so they read crisp */
.ac-chip{ font-weight:600; }

/* ============================================================
   EDIT modal grid + reschedule note + uppercase reg input
   ============================================================ */
.fg2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:560px){ .fg2{ grid-template-columns:1fr; } }
.lc-edit{ margin:0; }
.ac-note.n-info{ color:var(--info); }
input.up{ text-transform:uppercase; }

/* ============================================================
   FLOOR — Pending Work Log board (Phase 1, read-only)
   Row colours are the exact originals; the surrounding chrome
   (table, legend, filters) follows the design system.
   ============================================================ */
:root{
  --row-ready:#DAF2D0;   /* Ready            */
  --row-wip:#FFFFCC;     /* Work in Progress */
  --row-wfp:#CAEDFB;     /* Waiting Parts    */
  --row-wfa:#FBE2D5;     /* Waiting Approval */
  --row-wfw:#FFE7FF;     /* Waiting Warranty */
}

.fl-loading, .fl-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; min-height:240px; color:var(--n500); font-size:14px;
}

.fl-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; }
.fl-title{ margin:0; color:var(--n900); font-size:20px; font-weight:600; letter-spacing:-.025em; }
.fl-sub{ margin:4px 0 0; color:var(--n500); font-size:13px; }

/* Legend */
.fl-legend{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:14px; font-size:12.5px; color:var(--n700); }
.fl-legend-lbl{ font-weight:600; color:var(--n600); }
.fl-li{ display:inline-flex; align-items:center; gap:6px; }
.fl-sw{ width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.08); }

/* Filter bar — single line: search flexes, selects size to content */
.fl-filters{ display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:14px; align-items:center; }
.fl-filters > *{ min-width:0; }
.fl-input, .fl-select{
  font:inherit; font-size:13px; color:var(--n900);
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:7px 10px;
}
.fl-input{ flex:0 1 220px; min-width:140px; max-width:240px; }   /* compact, not greedy */
.fl-select{ flex:0 0 auto; max-width:210px; }      /* caps the long location name */
.fl-input:focus, .fl-select:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
/* location selector sits on its own row, above the legend */
.fl-locrow{ margin-bottom:12px; }
.fl-locrow .fl-select{ max-width:280px; min-width:220px; }
@media (max-width:760px){
  .fl-filters{ flex-wrap:wrap; }
  .fl-input{ flex:1 1 100%; }
  .fl-select{ flex:1 1 auto; max-width:none; }
}

/* Table */
.fl-tablewrap{ background:var(--card); border:1px solid var(--border); border-radius:12px; overflow-x:auto; }
.fl-table{ width:100%; min-width:1040px; border-collapse:collapse; font-size:13.5px; }
.fl-table thead th{
  text-align:left; padding:11px 14px;
  background:var(--n50); border-bottom:1px solid var(--border);
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--n600);
  white-space:nowrap;
}
.fl-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--n100); color:var(--n800); vertical-align:middle; }
.fl-table tbody tr:last-child td{ border-bottom:none; }
.fl-c-ix{ width:44px; text-align:center; color:var(--n500); }
.fl-c-bay{ width:60px; text-align:center; font-weight:600; }
.fl-nowrap{ white-space:nowrap; }
.fl-reg{ font-weight:600; }
.fl-norows td, .fl-norows td{ padding:28px 14px; text-align:center; color:var(--n500); font-style:italic; }

/* Row background by ready status (exact original colours) */
.fl-table tbody tr.rw-rdy{ background:var(--row-ready); }
.fl-table tbody tr.rw-wip{ background:var(--row-wip); }
.fl-table tbody tr.rw-wfp{ background:var(--row-wfp); }
.fl-table tbody tr.rw-wfa{ background:var(--row-wfa); }
.fl-table tbody tr.rw-wfw{ background:var(--row-wfw); }
.fl-table tbody tr:hover{ filter:brightness(.97); }

/* Ready-status badge inside the row (read-only in Phase 1) */
.fl-st{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
  border:1px solid rgba(0,0,0,.10); color:var(--n800);
}
.fl-st.rw-rdy{ background:var(--row-ready); }
.fl-st.rw-wip{ background:var(--row-wip); }
.fl-st.rw-wfp{ background:var(--row-wfp); }
.fl-st.rw-wfa{ background:var(--row-wfa); }
.fl-st.rw-wfw{ background:var(--row-wfw); }
.fl-st-none{ background:var(--n100); color:var(--n500); border-color:transparent; }

/* Sign-out button in the rail user area. icon-btn uses color:inherit, which
   in the dark rail resolves to the dark body text colour and disappears.
   Give it an explicit light colour so the logout control is visible next to
   the user's name. */
.rail-user .icon-btn{ color:#aebfe0; }
.rail-user .icon-btn:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ============================================================
   FLOOR — Phase 3: New Entry button, editable rows, detail panel
   ============================================================ */
.fl-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.fl-new{ flex:none; white-space:nowrap; }

/* editable row controls */
.fl-table .rs-dd{
  width:100%; max-width:190px; padding:4px 6px; font-size:.78rem;
  border:1px solid var(--border); border-radius:6px; background:#fff;
  font-family:inherit; color:var(--n800); cursor:pointer;
}
.fl-c-dlv{ text-align:center; white-space:nowrap; }
.fl-deliver{
  border:none; border-radius:6px; padding:4px 10px; font-size:.72rem; font-weight:600;
  background:var(--ok); color:#fff; cursor:pointer; white-space:nowrap;
}
.fl-deliver:hover{ filter:brightness(.95); }
.fl-table tbody tr{ cursor:pointer; }
.fl-table tbody tr.fl-sel{ outline:2px solid var(--accent); outline-offset:-2px; }

/* ---- slide-in detail panel ---- */
.fp-scrim{
  position:fixed; inset:0; background:rgba(14,28,51,.38); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.fp-scrim.on{ opacity:1; pointer-events:auto; }
.fp{
  position:fixed; top:0; right:0; height:100vh; width:min(720px,94vw);
  background:var(--page); z-index:61; display:flex; flex-direction:column;
  box-shadow:-18px 0 48px rgba(14,28,51,.18);
  transform:translateX(100%); transition:transform .22s ease;
}
.fp.on{ transform:translateX(0); }
.fp-head{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:14px 18px; background:var(--grad-brand); color:#fff;
}
.fp-title{ font-weight:600; font-size:1rem; letter-spacing:-.01em; flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.fp-jc{ font-size:.74rem; opacity:.85; font-weight:500; }
.fp-vo{ font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background:rgba(255,255,255,.22); padding:2px 8px; border-radius:4px; }
.fp-si{ font-size:.72rem; opacity:.92; white-space:nowrap; }
.fp-si.warn{ color:#ffe08a; font-weight:600; opacity:1; }
.fp-si.ok{ color:#bff3df; font-weight:600; opacity:1; }
.fp-x{ flex:none; border:none; background:rgba(255,255,255,.15); color:#fff; width:30px; height:30px; border-radius:7px; cursor:pointer; font-size:.9rem; }
.fp-x:hover{ background:rgba(255,255,255,.28); }
.fp-body{ flex:1; overflow-y:auto; padding:16px 18px; }
.fp-actions{ flex:none; display:flex; justify-content:space-between; gap:10px; padding:12px 18px; border-top:1px solid var(--border); background:#fff; }
.fp-actions:empty{ display:none; }
.fp-del{ background:var(--bad-bg); color:var(--bad); border:1px solid #f6c9c9; }

/* panel sections + grid */
.fp-sec{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.fp-sec-t{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--n400); margin-bottom:12px; }
.fp-g{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px; }
.fp-g.c3{ grid-template-columns:repeat(3,1fr); }
.fp-f{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.fp-f.fw{ grid-column:1/-1; }
.fp-f label{ font-size:.74rem; font-weight:600; color:var(--n600); }
.fp-f input, .fp-f select, .fp-f textarea{
  padding:7px 9px; border:1px solid var(--border); border-radius:7px; font-size:.84rem;
  font-family:inherit; background:#fff; color:var(--n800); width:100%;
}
.fp-f input.mono, .fp-f .mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
.fp-f input.up{ text-transform:uppercase; }
.fp-f textarea{ min-height:64px; resize:vertical; }
.fp-f input:focus, .fp-f select:focus, .fp-f textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
.fp-f input:disabled, .fp-f select:disabled, .fp-f textarea:disabled{ background:var(--n50); color:var(--n400); }
.fp-ro{ padding:7px 9px; border:1px dashed var(--border); border-radius:7px; font-size:.84rem; color:var(--n700); background:var(--n50); min-height:34px; }
.fp-reg{ display:flex; gap:6px; align-items:center; }
.fp-reg input{ flex:1; }
.fp-hint{ font-size:.7rem; color:var(--warn); margin-top:2px; }
.req{ color:var(--bad); }

/* time picker */
.tp-wrap{ display:flex; align-items:center; gap:4px; }
.tp-wrap select{ flex:1; padding:7px 6px; border:1px solid var(--border); border-radius:7px; font-size:.82rem; background:#fff; }
.tp-sep{ color:var(--n400); font-weight:700; }

/* technicians field */
.tech-field{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:40px; padding:8px 10px; border:1.5px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; transition:border-color .12s, box-shadow .12s; box-shadow:0 1px 2px rgba(14,28,51,.04); }
.tech-field:hover{ border-color:var(--accent-100); box-shadow:0 2px 8px rgba(14,28,51,.07); }
.tech-field.ro{ cursor:default; opacity:.85; box-shadow:none; }
.tech-field.ro:hover{ border-color:var(--border); box-shadow:none; }
.tech-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--accent-50); color:var(--accent-600); border:1px solid var(--accent-100); border-radius:6px; padding:3px 9px; font-size:.76rem; font-weight:600; }
.tc-x{ cursor:pointer; opacity:.6; font-size:.7rem; }
.tc-x:hover{ opacity:1; }
.tf-ph{ color:var(--n400); font-size:.82rem; }
.tf-add{ margin-left:auto; color:var(--accent); font-size:.74rem; font-weight:600; background:var(--accent-50); border:1px solid var(--accent-100); border-radius:999px; padding:2px 10px; }

/* target ready */
.tr-field{ display:flex; flex-direction:column; gap:8px; }
.tr-row{ display:flex; gap:8px; }
.tr-row input{ flex:1; }
.tr-quick{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tr-lbl{ font-size:.7rem; color:var(--n400); }
.tr-qb{ border:1px solid var(--border); background:#fff; border-radius:6px; padding:4px 9px; font-size:.72rem; cursor:pointer; color:var(--n700); }
.tr-qb:hover{ border-color:var(--accent); color:var(--accent); }

/* missing-fields + delete modal bodies */
.fp-miss{ text-align:center; padding:8px 0; }
.fp-miss-ic{ font-size:2rem; margin-bottom:10px; }
.fp-miss-h{ font-size:1rem; font-weight:600; color:var(--n800); margin:0 0 6px; }
.fp-miss-s{ color:var(--n500); font-size:.86rem; margin:0 0 14px; }
.fp-miss-list, .fp-del-sum{ background:var(--n50); border-radius:8px; padding:12px 14px; text-align:left; }
.fp-miss-row{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:.86rem; }
.fp-miss-row .x{ color:var(--bad); font-weight:700; }
.fp-del-sum div{ display:flex; justify-content:space-between; padding:3px 0; font-size:.86rem; }
.fp-del-sum span:first-child{ color:var(--n500); }

/* technicians modal */
.tm-search input{ width:100%; padding:8px 11px; border:1px solid var(--border); border-radius:7px; font-size:.84rem; margin-bottom:8px; }
.tm-list{ max-height:50vh; overflow-y:auto; }
.tm-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; cursor:pointer; }
.tm-item:hover{ background:var(--n50); }
.tm-cb{ width:16px; height:16px; border:1.5px solid var(--border); border-radius:4px; flex:none; }
.tm-item.selected .tm-cb{ background:var(--accent); border-color:var(--accent); position:relative; }
.tm-item.selected .tm-cb::after{ content:"✓"; color:#fff; font-size:.66rem; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.tm-name{ flex:1; font-size:.86rem; }
.tm-cars{ font-size:.72rem; color:var(--n400); }
.tm-empty{ text-align:center; padding:18px; color:var(--n400); font-size:.84rem; }
.tm-foot{ padding-top:10px; margin-top:6px; border-top:1px solid var(--border); font-size:.76rem; color:var(--n500); }

@media (max-width:560px){ .fp-g, .fp-g.c3{ grid-template-columns:1fr; } }

/* appointment-source badges — EXACT ServiceOps source colours */
.badge.b-wi{ background:#fef3c7; color:#92400e; }   /* Walk-in */
.badge.b-ap{ background:#dbeafe; color:#1d4ed8; }   /* Appointment */
.badge.b-fd{ background:var(--violet-bg); color:var(--violet); }   /* Floor Direct */
.badge.b-sd{ background:#fff7ed; color:#9a3412; border:1px solid #fdba74; }   /* Same Day */
.badge.b-od{ background:#f3e8ff; color:#6b21a8; border:1px solid #c4b5fd; }   /* Other Dealer */

/* ---- Workshop Completed screen ---- */
.fc-dlbl{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font-size:.72rem; font-weight:600; color:var(--n500); white-space:nowrap;
}
.fc-dlbl .fl-input{ flex:0 0 auto; min-width:130px; max-width:150px; }

/* Completed: location selector on its own row, month nav stacked below it */
.fc-locrow{ margin-bottom:8px; }
.fc-monthrow{ margin-bottom:14px; }
.fc-monthnav{ display:inline-flex; align-items:center; gap:6px; }
.fc-mbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; font-size:20px; line-height:1; font-weight:600;
  color:var(--n700); background:var(--card);
  border:1px solid var(--border); border-radius:8px; cursor:pointer;
  transition:background .12s, border-color .12s;
}
.fc-mbtn:hover{ background:var(--n50); border-color:var(--n300); }
.fc-mbtn:active{ transform:translateY(.5px); }
.fc-month{ flex:0 0 auto; min-width:150px; max-width:170px; text-align:center; }

/* Clear button — sized to match the filter-row inputs exactly */
.fc-clear{
  flex:0 0 auto; font:inherit; font-size:13px; font-weight:600;
  color:var(--n700); background:var(--card);
  border:1px solid var(--border); border-radius:8px;
  padding:7px 14px; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.fc-clear:hover{ background:var(--n50); border-color:var(--n300); }
.fc-clear:active{ transform:translateY(.5px); }

/* Clear sits on its own row beneath the filters (under the Job Card field),
   so the no-wrap filter row never pushes it off-screen. */
.fc-clearrow{ margin-top:-4px; margin-bottom:14px; }

/* Returned Customer — amber reason tag (mirrors the original's amber badge) */
.rc-rsn{
  display:inline-block; padding:2px 9px; border-radius:6px;
  font-size:12px; font-weight:600; white-space:nowrap;
  background:var(--warn-bg); color:var(--warn);
}
.fc-wd{ max-width:240px; white-space:normal; word-break:break-word;
        font-size:.82rem; color:var(--n600); }
.fc-del{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:26px; padding:0; border:none; border-radius:6px;
  background:var(--bad-bg); color:var(--bad); cursor:pointer;
}
.fc-del:hover{ background:#fbd5d5; }
.fc-del svg{ width:15px; height:15px; }

/* ============================================================
   FLOOR — Phase 3 completion: deliver modal, advisor-change,
   export button, mini badges
   ============================================================ */
.fl-head-actions{ display:flex; gap:8px; flex:none; }
.fl-export{ white-space:nowrap; }
.fl-mini{ font-size:.62rem; margin-left:5px; vertical-align:middle; padding:1px 6px; }

/* deliver modal bits */
.dm-info{ font-size:.9rem; color:var(--n700); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.dm-err{ color:var(--bad); font-size:.8rem; margin:6px 0 0; display:none; }

/* advisor-change pending banner in the panel */
.adv-chg{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; padding:7px 10px; background:var(--warn-bg); border:1px solid #f1d9ad; border-radius:7px; font-size:.76rem; color:var(--warn); }
.adv-chg strong{ color:var(--n800); }
.adv-chg-btns{ display:flex; gap:6px; margin-left:auto; }
.adv-chg-btns .btn{ padding:3px 10px; font-size:.72rem; }

/* ============================================================
   TODAY'S SCHEDULE + MONTHLY VIEW
   ============================================================ */
/* date navigator (Today's Schedule) */
.ts-loc{ font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card); max-width:280px; }
.ts-datebar{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.ts-datebar input[type=date]{ font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card); }
.ts-nav{ width:34px; height:34px; border:1px solid var(--border); background:var(--card); border-radius:8px; cursor:pointer; color:var(--n600); font-size:13px; }
.ts-nav:hover{ border-color:var(--accent); color:var(--accent); }
.ts-dl{ font-size:13px; color:var(--n500); font-weight:600; margin-left:4px; }

/* summary tiles */
.ts-tiles{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin-bottom:18px; }
.ts-tile{ background:var(--card); border:1px solid var(--border); border-left:3px solid var(--n300); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.ts-tile .ts-l{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--n500); }
.ts-tile .ts-v{ font-size:1.4rem; font-weight:700; font-family:var(--font-mono,'JetBrains Mono'),monospace; color:var(--n800); }
.ts-tile.ok{ border-left-color:var(--ok); } .ts-tile.arr{ border-left-color:#f97316; }
.ts-tile.ci{ border-left-color:#3b82f6; } .ts-tile.warn{ border-left-color:var(--warn); }
.ts-tile.rdy{ border-left-color:#059669; } .ts-tile.del{ border-left-color:#10b981; }
.ts-tile.wi{ border-left-color:#f59e0b; } .ts-tile.info{ border-left-color:var(--accent); }
@media (max-width:1100px){ .ts-tiles{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .ts-tiles{ grid-template-columns:repeat(2,1fr); } }

/* by-service-type strip */
.ts-byservice{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:16px; }
.ts-bs-lbl{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--n500); margin-right:4px; }
.ts-svc{ display:inline-flex; align-items:center; gap:5px; font-size:.8rem; }
.ts-svc strong{ color:var(--n700); }
.ts-muted{ color:var(--n400); font-size:.84rem; }

/* Today's Schedule table row tints + cells */
.fst tbody tr.ts-del{ opacity:.55; }
.fst tbody tr.ts-rdy{ background:var(--row-ready); }
.fst tbody tr.ts-ci{ background:#eff6ff; }
.fst tbody tr.ts-arr{ background:#fff7ed; }
.ts-c{ text-align:center; }
.ts-voice{ max-width:200px; font-size:.82rem; color:var(--n600); }
.ts-elsa{ color:var(--bad); font-weight:600; }
.ts-empty, .ts-empty td{ text-align:center; padding:32px; color:var(--n400); }
td.ts-empty{ }

/* Monthly View */
.mv-monthbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.mv-monthbar input[type=month]{ font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card); }
.mv-table tbody tr.mv-main{ cursor:pointer; }
.mv-table tbody tr.mv-main:hover{ background:var(--n50); }
.mv-table tbody tr.mv-dead{ opacity:.6; }
.mv-chev-c{ width:24px; text-align:center; }
.mv-chev{ display:inline-block; transition:transform .15s ease; color:var(--n400); font-size:.7rem; }
.mv-main.expanded .mv-chev{ transform:rotate(90deg); color:var(--accent); }
.mv-date{ font-weight:600; white-space:nowrap; }
.mv-punch{ font-size:.74rem; color:var(--n500); }
.mv-fd{ color:var(--n400); font-style:italic; font-size:.78rem; }
.mv-detail{ display:none; }
.mv-detail > td{ background:var(--n50); padding:0 !important; }
.mv-det{ padding:14px 18px; }
.mv-det-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px 18px; }
.mv-fw{ grid-column:1/-1; }
.mv-dl{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--n400); margin-bottom:2px; }
.mv-dv{ font-size:.86rem; color:var(--n800); }
.mv-det-actions{ display:flex; gap:8px; margin-top:14px; }
@media (max-width:760px){ .mv-det-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   Faithful appointment tables — original ServiceOps mechanics
   (fixed layout, % widths, ellipsis truncation, tight density),
   our look-and-feel (tokens/fonts). Fixes the sprawl + scroll.
   ============================================================ */
/* TODAY'S SCHEDULE — content-sized columns (readable), scroll if needed */
.fst{ width:100%; border-collapse:collapse; font-size:.82rem; }
.fst thead th{ background:var(--n50); padding:8px 12px; text-align:left; font-weight:700;
  color:var(--n500); border-bottom:1px solid var(--border); white-space:nowrap;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; }
.fst tbody td{ padding:8px 12px; border-bottom:1px solid var(--n100); color:var(--n800); vertical-align:middle; white-space:nowrap; }
.fst tbody tr:last-child td{ border-bottom:none; }
.fst tbody tr{ cursor:pointer; }
.fst tbody tr:hover{ filter:brightness(.98); }
.fst td:nth-child(9), .fst td:nth-child(10), .fst th:nth-child(9), .fst th:nth-child(10){ text-align:center; } /* EW / SMP */
/* only the free-text Customer Voice column is capped + ellipsised so it can't blow the width out */
.fst td.ts-voice{ max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* MONTHLY VIEW — content-sized, dense; scroll if needed */
.mv-table{ width:100%; border-collapse:collapse; font-size:.82rem; }
.mv-table thead th{ background:var(--n50); padding:8px 12px; text-align:left; font-weight:700;
  color:var(--n500); border-bottom:1px solid var(--border); white-space:nowrap;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; }
.mv-table tbody td{ padding:7px 12px; border-bottom:1px solid var(--n100); color:var(--n800); vertical-align:middle; font-size:.82rem; white-space:nowrap; }
.mv-table tbody tr.mv-detail > td{ padding:0 !important; white-space:normal; }

/* ===== Day View: filter/action controls row ===== */
.dv-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 18px; }
.dv-fsel{ font-family:"JetBrains Mono",monospace; font-size:13px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--n800); max-width:220px; cursor:pointer; }
.dv-fsel:hover{ border-color:var(--accent); }
.dv-ctlbtn{ display:inline-flex; align-items:center; gap:6px; }

/* ===== Day Summary modal card ===== */
.dvs-card{ max-width:380px; margin:0 auto; }
.dvs-head{ text-align:center; margin-bottom:18px; }
.dvs-kicker{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--n500); margin-bottom:4px; }
.dvs-title{ font-size:1.05rem; font-weight:700; color:var(--n900); letter-spacing:-.02em; }
.dvs-loc{ font-size:.84rem; color:var(--n500); margin-top:2px; }
.dvs-total{ text-align:center; padding:16px; background:var(--page); border:1px solid var(--border); border-radius:10px; margin-bottom:16px; }
.dvs-total-n{ font-size:2rem; font-weight:800; color:var(--n900); line-height:1; }
.dvs-total-l{ font-size:.72rem; font-weight:600; color:var(--n500); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
.dvs-split{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.dvs-pill{ text-align:center; padding:12px; border-radius:10px; border:1px solid var(--border); }
.dvs-pill-pickup{ background:var(--accent-50); border-color:var(--accent-100); }
.dvs-pill-self{ background:var(--ok-bg); border-color:#c9ece0; }
.dvs-pill-n{ font-size:1.3rem; font-weight:800; line-height:1; }
.dvs-pill-pickup .dvs-pill-n{ color:var(--accent-600); }
.dvs-pill-self .dvs-pill-n{ color:var(--ok); }
.dvs-pill-l{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:5px; }
.dvs-pill-pickup .dvs-pill-l{ color:var(--accent-600); }
.dvs-pill-self .dvs-pill-l{ color:var(--ok); }
.dvs-breakdown{ border-top:1px solid var(--border); padding-top:14px; }
.dvs-bd-h{ font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--n400); margin-bottom:8px; }
.dvs-svc{ display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--n100); }
.dvs-svc span{ font-size:.84rem; color:var(--n700); }
.dvs-svc b{ font-size:.84rem; color:var(--n800); }
.dvs-empty{ justify-content:center; color:var(--n400); border-bottom:none; }

/* ===================== VEHICLE HISTORY (modal) ===================== */
.vh-loading{ padding:32px; text-align:center; color:var(--n500); font-size:.9rem; }
.vh-empty{ padding:28px; text-align:center; color:var(--n500); }
.vh-empty-ico{ width:34px; height:34px; margin:0 auto 8px; color:var(--n300); }
.vh-empty-ico svg{ width:34px; height:34px; }

.vh-summary{
  /* premium card finish: white settling into a faint blue ombré, built from
     existing tokens (--card white + --accent-50 tint) — no new palette colors */
  background:linear-gradient(150deg, var(--card) 0%, var(--card) 42%, var(--accent-50) 100%);
  border:1px solid var(--accent-100);
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:14px;
  box-shadow:0 1px 2px rgba(37,99,235,.05), inset 0 1px 0 rgba(255,255,255,.6);
}
.vh-reg{ font-size:1.15rem; font-weight:700; color:var(--n900); letter-spacing:.01em; margin-bottom:10px; }
.vh-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px; }
.vh-meta > div{ display:flex; flex-direction:column; gap:1px; }
.vh-l{ font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--n400); }
.vh-meta > div > span:last-child{ font-size:.86rem; color:var(--n800); }
.vh-danger{ margin-bottom:16px; }

.vh-h{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--n400); margin:4px 0 10px; }
.vh-list{ display:flex; flex-direction:column; gap:10px; }
.vh-visit{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--card); }
.vh-visit.vh-compact{ padding:9px 14px; }

/* Director vehicle-edit form (Vehicle History panel) */
.vh-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.vh-edit .fgi{ margin-bottom:12px; }
.vh-edit-reg{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; margin-bottom:14px;
  background:var(--accent-50); border:1px solid var(--accent-100); border-radius:8px; }
.vh-reg-fixed{ font-weight:700; font-size:1rem; color:var(--n900); }
.vh-edit-note{ font-size:.78rem; color:var(--n500); flex-basis:100%; }

/* Cancel-request alert badges (enhancement). Red = existing --bad token. The nav
   badge right-aligns inside the flex nav-item; the button badge sits inline. */
.nav-badge{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--bad); color:#fff;
  font-size:.68rem; font-weight:700; line-height:18px; text-align:center;
}
.btn-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px; margin-left:7px;
  border-radius:9px; background:var(--bad); color:#fff;
  font-size:.66rem; font-weight:700; vertical-align:middle;
}
.vh-visit.vh-muted{ opacity:.55; }
.vh-visit-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.vh-visit-d{ font-size:.88rem; font-weight:600; color:var(--n900); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vh-visit-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px 14px; }
.vh-visit-grid > div{ display:flex; flex-direction:column; gap:1px; }
.vh-visit-grid .vh-fw{ grid-column:1/-1; }
.vh-dl{ font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--n400); }
.vh-visit-grid > div > span:last-child{ font-size:.82rem; color:var(--n800); }
.vh-rm{ margin-top:10px; }

/* ===================== VEHICLE LOOKUP (screen) ===================== */
.vl-searchbar{ display:flex; gap:10px; align-items:center; margin:0 0 14px; max-width:560px; }
.vl-input{ flex:1; text-transform:uppercase; }
.vl-table-wrap{ margin-top:18px; }
.vlr{ cursor:pointer; }
.vlr:hover{ background:var(--accent-50); }
.vl-reg{ font-weight:600; }
.vl-vin{ font-size:.78rem; color:var(--n500); }

/* Soft destructive button — production's inline delete style (#fee2e2/#991b1b/#fecaca).
   Used for "remove/delete record" actions (e.g. Vehicle History), NOT primary
   destructive confirms which keep the solid .btn-d. */
.btn-softd{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.btn-softd:hover{ background:#fecaca; }

/* ============================================================
   RECEPTION: CHECK-IN
   ============================================================ */
.ci-screen{ max-width:none; }
.ci-card-main{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:22px 24px; box-shadow:var(--shadow-sm);
}
.ci-loc{ font-size:12.5px; color:var(--n500); margin-bottom:16px; }
.ci-srch-label{
  display:block; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--n600); margin-bottom:6px;
}
.ci-search{
  width:100%; box-sizing:border-box; font-family:inherit;
  font-size:15px; letter-spacing:.01em; color:var(--n900);
  background:var(--card); border:1px solid var(--border); border-radius:9px;
  padding:11px 13px; text-transform:uppercase;
}
/* keep the placeholder normal-case (only typed text is uppercased) */
.ci-search::placeholder{ text-transform:none; letter-spacing:normal; color:var(--n400); font-size:14px; }
.ci-search:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
/* auto-filled, read-only "current time" stamp on the walk-in form */
.ci-now{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border:1px solid var(--border); border-radius:8px;
  background:var(--n50); color:var(--n500); font-size:14px;
}
.ci-now .mono{ color:var(--n600); font-weight:600; }
.ci-now-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--n400); }

/* result / status cards — tone set by .t-ok / .t-info / .t-bad / .t-warn */
.ci-card{ margin-top:16px; border:1px solid var(--border); border-radius:12px;
  background:var(--card); overflow:hidden; }
.ci-card-h{ padding:12px 16px; font-weight:600; font-size:1rem;
  letter-spacing:-.01em; border-bottom:1px solid var(--border); }
.ci-card-b{ padding:14px 16px; }
/* found / status card rows flow into columns so they fill the wider screen */
.ci-card .lc-sum{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); column-gap:34px; row-gap:2px; }
@media (max-width:560px){ .ci-card .lc-sum{ grid-template-columns:1fr; } }
.ci-card.t-ok   .ci-card-h{ background:var(--ok-bg);   color:var(--ok);   border-bottom-color:#b7e4cd; }
.ci-card.t-info .ci-card-h{ background:var(--info-bg); color:var(--info); border-bottom-color:#bcd3f7; }
.ci-card.t-bad  .ci-card-h{ background:var(--bad-bg);  color:var(--bad);  border-bottom-color:#f3c2c2; }
.ci-card.t-warn .ci-card-h{ background:var(--warn-bg); color:var(--warn); border-bottom-color:#ecd3a3; }
.ci-btn{ margin-top:14px; }

/* tappable partial-match rows */
.ci-list{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.ci-row{ display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--border); border-radius:8px; background:var(--card); cursor:pointer; }
.ci-row:hover{ background:var(--n50); border-color:var(--n300); }
.ci-row .ci-reg{ font-weight:600; }
.ci-row .ci-sub{ color:var(--n500); font-size:.85rem; }
.ci-row .badge{ margin-left:auto; font-size:.65rem; }