/* ============================================================================
   MTG Command Center — app.css
   Two jobs:
   1. A tiny hand-rolled utility layer (the "offline fallback") so the layout
      is still legible if the Tailwind Play CDN is blocked (no network). Only
      the classes the markup actually leans on are defined here; when the CDN
      loads, Tailwind's own rules win by source order / specificity and these
      are harmless.
   2. Component styling that Tailwind utilities don't cover cleanly: the dark
      theme tokens, the chat bubbles, tool-call chips, the drawer transition,
      scrollbars, spinners and skeletons.
   ========================================================================== */

:root {
  /* MTG brand — gold / bronze / silver on a warm near-black. Palette pulled
     from the real More Than Gates intake forms + logo (M·G gate wordmark). */
  --bg:          #101114;
  --bg-2:        #141519;
  --panel:       #181a20;
  --panel-2:     #1f222b;
  --border:      #2c2f39;
  --border-soft: #23262e;
  --text:        #ecebe4;   /* warm off-white */
  --text-dim:    #b4b0a5;
  --text-faint:  #7e7b70;
  --brand:       #d4a437;   /* MTG gold */
  --brand-2:     #a9852f;   /* gold, deeper */
  --accent:      #e8c45c;   /* gold, bright */
  --bronze:      #8a6a3c;
  --bronze-dark: #6f5430;
  --silver:      #c8ccd2;
  --good:        #4bbe86;
  --warn:        #e0b64a;
  --bad:         #c0392b;   /* brand error red */
  --chip:        #241f14;   /* warm, gold-tinted */
  --on-gold:     #1a1508;   /* dark ink for text on gold surfaces */
  /* WP-6 sharpen pass — one radius scale + one crisp shadow, applied everywhere */
  --r-lg:     6px;      /* cards / panels / modals / sheets / tiles */
  --r-sm:     4px;      /* buttons / inputs / chips / pills / rows */
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);   /* max elevation — borders do the separation */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(212,164,55,0.09), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, rgba(138,106,60,0.07), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------------- fallback --
   Minimal reimplementations of the exact Tailwind classes the markup uses,
   guarded so they don't fight the CDN. These are plain enough that if the CDN
   never loads the page is still a usable dark dashboard. */
.mtg-fallback .flex        { display: flex; }
.mtg-fallback .hidden      { display: none; }
.mtg-fallback .grid        { display: grid; }
.mtg-fallback .items-center{ align-items: center; }
.mtg-fallback .justify-between { justify-content: space-between; }
.mtg-fallback .gap-2       { gap: .5rem; }
.mtg-fallback .gap-3       { gap: .75rem; }
.mtg-fallback .gap-4       { gap: 1rem; }
.mtg-fallback .p-4         { padding: 1rem; }
.mtg-fallback .p-3         { padding: .75rem; }
.mtg-fallback .mb-2        { margin-bottom: .5rem; }
.mtg-fallback .mb-3        { margin-bottom: .75rem; }
.mtg-fallback .w-full      { width: 100%; }
.mtg-fallback .text-sm     { font-size: 13px; }
.mtg-fallback .text-xs     { font-size: 12px; }
.mtg-fallback .font-semibold { font-weight: 600; }
.mtg-fallback .rounded     { border-radius: var(--r-lg); }
.mtg-fallback .col         { flex-direction: column; }

/* ------------------------------------------------------------------ layout -- */
.app-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) minmax(360px, 460px);
  grid-template-rows: 100vh;
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: 1fr;
  }
  /* Collapse the side nav to a clean icon rail: hide the brand text, the nav
     link labels, and the footer blurb so nothing overflows the 68px column. */
  .side-nav { padding: 18px 10px; align-items: center; }
  .side-nav .nav-collapsible { display: none; }
  .side-nav .brand-mark-mini { display: grid; }   /* the compact serif M·G mark */
  .side-nav .nav-brand-row { justify-content: center; margin-bottom: 18px; }
  .side-nav .nav-link { justify-content: center; gap: 0; padding: 10px 0; width: 44px; }
  .side-nav .nav-link .label { display: none; }
  .app-shell .assistant-col { display: none; }
  .app-shell.chat-open .assistant-col {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(460px, 100vw);
    z-index: 60;
    box-shadow: none;
  }
}
@media (max-width: 720px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell .side-nav { display: none; }
}

.side-nav {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 6px;
  min-width: 0;
}
.main-col {
  overflow-y: auto;
  min-width: 0;
  padding: 20px 24px 56px;
}
.assistant-col {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
}

/* ------------------------------------------------------------------- brand -- */
.brand-mark {
  width: 36px; height: 36px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  font-family: Georgia, "Times New Roman", serif;   /* the M·G wordmark is serif */
  font-weight: 700; font-size: 17px; letter-spacing: .5px;
  color: var(--on-gold);
  background: linear-gradient(140deg, var(--bronze-dark), var(--bronze) 45%, var(--brand) 100%);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.15);
  flex: 0 0 auto;
}
/* full inline MTG logo in the expanded sidebar; compact serif mark when collapsed */
.nav-logo svg, .nav-logo img { display: block; height: 34px; width: auto; }
.brand-mark-mini { display: none; }
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  cursor: pointer;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.nav-link:hover { background: var(--panel); color: var(--text); }
.nav-link.active {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border);
}
.nav-link .ic { width: 18px; text-align: center; opacity: .9; }

/* ------------------------------------------------------------------- cards -- */
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}
.card + .card { margin-top: 20px; }
.card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.card-title .count {
  margin-left: auto;
  font-size: 12px; font-weight: 600;
  color: var(--text-faint);
  text-transform: none; letter-spacing: 0;
}

/* ------------------------------------------------------------------ inputs -- */
.input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(212,164,55,.16);
}

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: transform .06s, background .12s, border-color .12s, opacity .12s;
  white-space: nowrap;
}
.btn:hover { background: #24262e; border-color: var(--border); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border-color: transparent; color: var(--on-gold);
  box-shadow: var(--shadow-1);
}
.btn-primary:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--brand), var(--accent)); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--panel); }

/* --------------------------------------------------------------- list rows -- */
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.row:hover { background: var(--panel-2); border-color: var(--border-soft); }
.row .avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 9px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  color: var(--brand);
  background: rgba(212,164,55,.11);
  border: 1px solid rgba(212,164,55,.20);
}
.row .avatar.lead { color: var(--warn); background: rgba(224,182,74,.10); border-color: rgba(224,182,74,.20); }
.row .grow { min-width: 0; flex: 1 1 auto; }
.row .name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { color: var(--text-faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- watchdog -- */
.wd-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-2);
}
.wd-row + .wd-row { margin-top: 10px; }
.wd-amount { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.wd-meta { color: var(--text-faint); font-size: 12.5px; }

/* ---------------------------------------------------------------- badges -- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--chip); color: var(--text-dim);
}
.badge.mock { color: var(--warn); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.08); }
.badge.live { color: var(--good); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge .dot.pulse { animation: pulse 1.8s ease-in-out infinite; }

.pill {
  display: inline-block;
  padding: 2px 9px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600;
  background: var(--chip); color: var(--text-dim);
  border: 1px solid var(--border-soft);
}
.pill.warn { color: var(--warn); }
.pill.good { color: var(--good); }
.pill.bad  { color: var(--bad); }

/* --------------------------------------------------------------- drawer -- */
.drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(2,6,12,.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  z-index: 70;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  z-index: 71;
  display: flex; flex-direction: column;
  box-shadow: none;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.drawer-body { overflow-y: auto; padding: 18px 20px 36px; flex: 1 1 auto; }

.kv { display: flex; gap: 10px; font-size: 13px; padding: 4px 0; }
.kv .k { color: var(--text-faint); min-width: 74px; }
.kv .v { color: var(--text); }

.section-label {
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint);
  margin: 22px 0 10px;
}
.mini-card {
  border: 1px solid var(--border-soft);
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 12px 13px;
}
.mini-card + .mini-card { margin-top: 9px; }

/* ----------------------------------------------------------------- chat -- */
.chat-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.chat-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 18px 8px;
  display: flex; flex-direction: column; gap: 14px;
}
.chat-compose {
  border-top: 1px solid var(--border);
  padding: 14px 16px 16px;
}
.msg { display: flex; gap: 10px; max-width: 100%; }
.msg .who {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
.msg.user { flex-direction: row-reverse; }
.msg .bubble {
  padding: 10px 13px; border-radius: var(--r-lg);
  font-size: 13.5px; line-height: 1.55;
  border: 1px solid var(--border-soft);
  max-width: 82%;
  white-space: pre-wrap; word-wrap: break-word;
}
.msg.assistant .who   { background: linear-gradient(140deg, var(--bronze), var(--brand)); color: var(--on-gold); }
.msg.assistant .bubble{ background: var(--panel-2); color: var(--text); border-top-left-radius: 2px; }
.msg.user .who        { background: var(--panel-2); color: var(--brand); border: 1px solid var(--border); }
.msg.user .bubble     { background: rgba(212,164,55,.10); border-color: rgba(212,164,55,.24); color: var(--text); border-top-right-radius: 2px; }

.trace-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.trace-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  color: var(--accent);
  background: rgba(212,164,55,.10);
  border: 1px solid rgba(212,164,55,.26);
  padding: 3px 9px; border-radius: var(--r-sm);
  cursor: default;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.trace-chip .glyph { opacity: .8; }

.suggest-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.suggest {
  font-size: 12px; color: var(--text-dim);
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 6px 11px; border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.suggest:hover { background: var(--panel-2); color: var(--text); }

/* --------------------------------------------------------------- states -- */
.empty {
  text-align: center;
  color: var(--text-faint);
  padding: 26px 14px;
  font-size: 13px;
}
.empty .ic { font-size: 24px; display: block; margin-bottom: 8px; opacity: .55; }

.skeleton {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.sk-row { height: 56px; margin-bottom: 10px; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
  animation: blink 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }

/* toast */
.toast-wrap {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
}

/* legal footer (spec A5) — quiet corner link, present in any login state */
.mtg-legal-footer {
  position: fixed; bottom: 8px; right: 12px; z-index: 5;
  font-size: 11px; color: var(--text-faint);
}
.mtg-legal-footer a { color: var(--text-faint); text-decoration: underline; }
.mtg-legal-footer a:hover { color: var(--text-dim); }
.mtg-legal-footer span { margin: 0 5px; }
.toast {
  padding: 10px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-1);
  animation: rise .2s ease;
}
.toast.good { border-color: rgba(52,211,153,.4); color: var(--good); }
.toast.bad  { border-color: rgba(248,113,113,.4); color: var(--bad); }

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes blink   { 0%,60%,100% { opacity:.25; } 30% { opacity:1; } }
@keyframes pulse   { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes rise    { from { transform: translateY(8px); opacity:0; } to { transform: none; opacity:1; } }

/* scrollbars */
.main-col::-webkit-scrollbar,
.chat-scroll::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar { width: 9px; }
.main-col::-webkit-scrollbar-thumb,
.chat-scroll::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.main-col::-webkit-scrollbar-track { background: transparent; }

/* small helpers used inline */
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mono  { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.tabnum { font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; }
.rowflex { display: flex; align-items: center; }
.spread { justify-content: space-between; }

/* ============================================================================
   Team Roles additions — login gate, user chip, and the six role-gated
   sections (Field Service / Purchasing / Inventory / Facilities / Documents /
   Team Roles). All lean on the existing brand tokens; nothing here overrides
   the base brand.
   ========================================================================== */

/* ---------------------------------------------------------------- login -- */
.login-gate {
  position: fixed; inset: 0;
  display: none;                 /* app.js flips to grid when no token */
  place-items: center;
  padding: 24px;
  z-index: 80;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(212,164,55,0.10), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, rgba(138,106,60,0.08), transparent 55%),
    var(--bg);
  overflow-y: auto;
}
.login-gate.show { display: grid; }
.login-card {
  width: min(400px, 100%);
  background: linear-gradient(180deg, var(--panel), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px 22px;
  box-shadow: var(--shadow-1);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand .nav-logo svg, .login-brand .nav-logo img { display: inline-block; height: 40px; width: auto; }
.login-sub {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  margin-top: 8px;
}
.login-label {
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-faint);
}
.login-error {
  font-size: 12.5px; font-weight: 600; color: var(--bad);
  background: rgba(192,57,43,.10);
  border: 1px solid rgba(192,57,43,.30);
  border-radius: var(--r-sm); padding: 8px 11px;
}
.login-hint {
  font-size: 11.5px; line-height: 1.6;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.login-hint .mono { color: var(--text-dim); }

/* -------------------------------------------------------------- user chip -- */
.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-2);
}
.user-avatar {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 8px; display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
  color: var(--brand);
  background: rgba(212,164,55,.12);
  border: 1px solid rgba(212,164,55,.22);
}
.user-name { font-weight: 600; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.user-signout { margin-left: auto; padding: 5px 8px; font-size: 11px; flex: 0 0 auto; }

/* -------------------------------------------------------------- mini form -- */
.mini-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-faint);
}
.field-add-grid, .doc-add-grid {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
}
.field-add-grid .stack, .doc-add-grid .stack { flex: 1 1 160px; min-width: 130px; }
select.input { appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 30px;
}

/* ------------------------------------------------------ data tables (rows) -- */
.data-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
.data-scroll { overflow-x: auto; }
.data-table th {
  text-align: left; font-size: 10.5px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint);
  padding: 8px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--border-soft);
}
.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--panel-2); }
.data-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.data-table input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer;
}
.data-wrap {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  overflow: hidden;
}
.data-wrap + .section-label { margin-top: 22px; }

/* ---------------------------------------------------------------- select -- */
.role-select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 6px 26px 6px 10px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.role-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(212,164,55,.16); }

/* --------------------------------------------------------- doc-type badge -- */
.doc-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-sm);
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--border-soft);
  background: var(--chip); color: var(--text-dim);
}
.doc-badge.coi      { color: var(--good);   border-color: rgba(75,190,134,.30);   background: rgba(75,190,134,.08); }
.doc-badge.w9       { color: var(--accent); border-color: rgba(212,164,55,.30);   background: rgba(212,164,55,.08); }
.doc-badge.check    { color: var(--silver); border-color: rgba(200,204,210,.24);  background: rgba(200,204,210,.06); }
.doc-badge.invoice  { color: var(--warn);   border-color: rgba(224,182,74,.30);   background: rgba(224,182,74,.08); }
.doc-badge.contract { color: var(--text-dim); }

/* a simple two-line list row reused by Field Service / Facilities / Documents */
.line-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-2);
}
.line-row + .line-row { margin-top: 9px; }
.line-row .grow { min-width: 0; flex: 1 1 auto; }
.line-row .title { font-weight: 600; color: var(--text); }
.line-row .meta { color: var(--text-faint); font-size: 12px; margin-top: 2px; }
.line-row .actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.line-row.due { border-color: rgba(224,182,74,.35); background: rgba(224,182,74,.06); }

/* material-line state pills reuse .pill; a couple of extra state colors */
.pill.state-cart      { color: var(--text-dim); }
.pill.state-requested { color: var(--warn); }
.pill.state-ordered   { color: var(--accent); }
.pill.state-received  { color: var(--good); }
.pill.state-used      { color: var(--good); }

@media (max-width: 560px) {
  .field-add-grid, .doc-add-grid { gap: 8px; }
  .field-add-grid .btn, .doc-add-grid .btn { width: 100%; }
}

/* portal */
/* ============================================================================
   WP-B customer portal (portal.html / portal.js). Everything is prefixed
   .pt- so nothing collides with the dashboard styles above. Reuses the brand
   tokens + the shared shimmer/rise keyframes.
   ========================================================================== */
.pt-app {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px 84px;   /* room for the fixed bottom nav */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
}

/* --- header ------------------------------------------------------------- */
.pt-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 10px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.pt-header-logo img { width: 34px; height: auto; display: block; }
.pt-header-title { font-weight: 600; font-size: 16px; letter-spacing: .3px; flex: 1 1 auto; }

/* --- cards + sections ----------------------------------------------------- */
.pt-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 12px;
}
.pt-section-title {
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint);
  margin: 20px 0 10px;
}
.pt-empty { text-align: center; padding: 40px 16px; color: var(--text-faint); }
.pt-meta { font-size: 13px; color: var(--text-faint); }
.pt-mt-8 { margin-top: 8px; }
.pt-mt-12 { margin-top: 12px; }

/* --- buttons -------------------------------------------------------------- */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--r-sm);
  font-size: 16px; font-weight: 600; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  min-height: 48px;
  transition: background .12s, transform .06s;
}
.pt-btn:active { transform: translateY(1px); }
.pt-btn:disabled { opacity: .55; cursor: default; }
.pt-btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border-color: transparent; color: var(--on-gold);
  box-shadow: var(--shadow-1);
}
.pt-btn-outline { background: transparent; color: var(--text-dim); }
.pt-btn-outline:hover { background: var(--panel); color: var(--text); }
.pt-btn-small { padding: 8px 14px; font-size: 14px; min-height: 44px; }
.pt-btn-full { width: 100%; }
.pt-btn-icon {
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: none; color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); cursor: pointer;
}
.pt-btn-icon:hover { background: var(--panel); color: var(--text); }

/* --- inputs ---------------------------------------------------------------- */
.pt-input {
  width: 100%; min-height: 48px; padding: 14px 16px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-size: 16px; /* 16px stops iOS zoom-on-focus */
  outline: none;
}
.pt-input::placeholder { color: var(--text-faint); }
.pt-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(212,164,55,.16); }
.pt-input-wrap { margin-bottom: 14px; }
.pt-textarea {
  width: 100%; padding: 12px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-size: 16px; resize: vertical; min-height: 80px;
}

/* --- login ------------------------------------------------------------------ */
.pt-login {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px 16px;
  max-width: 420px; margin: 0 auto;
}
.pt-login-logo { width: 96px; margin-bottom: 18px; }
.pt-login-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--accent); }
.pt-login-sub { font-size: 13px; color: var(--text-faint); margin: 0 0 28px; text-align: center; }
.pt-login-card {
  width: 100%; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px 18px;
}
.pt-form-error { margin-top: 10px; font-size: 13px; color: var(--bad); display: none; }
.pt-confirmation { text-align: center; padding: 24px 8px; }
.pt-confirmation p { color: var(--text-dim); font-size: 15px; line-height: 1.55; margin: 14px 0; }

/* --- consent checkbox + legal footer (spec A5) -------------------------------- */
.pt-consent-check {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  margin: 2px 0 16px; font-size: 12.5px; line-height: 1.45; color: var(--text-faint);
}
.pt-consent-check input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto;
  accent-color: var(--brand); cursor: pointer;
}
.pt-legal-footer {
  text-align: center; padding: 18px 12px 28px; font-size: 12px; color: var(--text-faint);
}
.pt-legal-footer a { color: var(--text-faint); text-decoration: underline; }
.pt-legal-footer a:hover { color: var(--text-dim); }
.pt-legal-footer span { margin: 0 6px; }

/* --- tabs -------------------------------------------------------------------- */
.pt-tabs { display: flex; margin-bottom: 18px; background: var(--bg-2); border-radius: var(--r-lg); padding: 4px; }
.pt-tab {
  flex: 1 1 0; padding: 11px 8px; text-align: center; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; border-radius: var(--r-sm);
  color: var(--text-dim); background: transparent;
  transition: background .12s, color .12s;
}
.pt-tab.active { background: var(--brand); color: var(--on-gold); }

/* --- home: banner + job cards -------------------------------------------------- */
.pt-banner {
  width: 100%; border: none; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--on-gold); border-radius: var(--r-lg); padding: 15px 16px;
  margin: 14px 0 4px; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.pt-banner-badge {
  background: rgba(0,0,0,.22); padding: 3px 10px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 700;
}
.pt-job-card {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 4px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; margin-top: 12px; cursor: pointer;
}
.pt-job-card.needs-approval { border-left-color: var(--brand); }
.pt-job-status { font-weight: 700; font-size: 17px; line-height: 1.35; }
.pt-job-status.gold { color: var(--accent); }
.pt-job-name { font-size: 14px; color: var(--text-dim); margin-top: 4px; }
.pt-job-meta { font-size: 13px; color: var(--text-faint); display: flex; gap: 12px; margin-top: 6px; }

/* --- job detail ------------------------------------------------------------------ */
.pt-back {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
  font-size: 14px; color: var(--text-dim); cursor: pointer;
  margin: 12px 0 4px; padding: 8px 0; min-height: 44px;
}
.pt-back:hover { color: var(--text); }
.pt-status-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px 16px; margin-bottom: 4px; text-align: center;
}
.pt-status-label { font-size: 21px; font-weight: 700; line-height: 1.35; }
.pt-lifecycle-chip {
  display: inline-block; margin-top: 10px; padding: 4px 12px;
  border-radius: var(--r-sm); font-size: 11px; font-weight: 700; letter-spacing: .4px;
  background: var(--chip); color: var(--text-dim); text-transform: uppercase;
}
.pt-doc-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.pt-doc-name { flex: 1 1 auto; font-size: 14px; }
.pt-billing-label { font-weight: 700; font-size: 17px; }
.pt-billing-amount { font-size: 19px; font-weight: 700; margin-top: 8px; color: var(--accent); }
.pt-reschedule-area { margin-top: 20px; }

/* --- approvals ---------------------------------------------------------------------- */
.pt-approval {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px; margin-bottom: 12px; background: var(--panel);
}
.pt-approval h4 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.pt-approval .meta { font-size: 13px; color: var(--text-faint); }
.pt-approval-actions { display: flex; gap: 10px; margin-top: 12px; }
.pt-approval-actions .pt-btn { flex: 1 1 0; }
.pt-decision-done { color: var(--good); font-weight: 600; margin: 6px 0 0; }

/* --- timeline ------------------------------------------------------------------------- */
.pt-timeline { position: relative; padding-left: 22px; margin: 4px 0; }
.pt-timeline::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.pt-timeline-item { position: relative; padding: 0 0 18px 8px; }
.pt-timeline-item:last-child { padding-bottom: 4px; }
.pt-timeline-dot {
  position: absolute; left: -22px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--brand); border: 2px solid var(--bg);
}
.pt-timeline-type { font-weight: 600; font-size: 14px; }
.pt-timeline-date { font-size: 12px; color: var(--text-faint); margin: 2px 0 4px; }

/* --- chips ---------------------------------------------------------------------------- */
.pt-chip {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  background: var(--chip); color: var(--text-dim); border: 1px solid var(--border-soft);
}
.pt-chip.good { color: var(--good); border-color: rgba(75,190,134,.3); background: rgba(75,190,134,.08); }
.pt-chip.warn { color: var(--warn); border-color: rgba(224,182,74,.3); background: rgba(224,182,74,.08); }
.pt-chip.bad  { color: var(--bad);  border-color: rgba(192,57,43,.3);  background: rgba(192,57,43,.10); }

/* --- gate health ------------------------------------------------------------------------ */
.pt-warranty-kind { font-weight: 600; font-size: 15px; }
.pt-warranty-countdown { font-size: 20px; font-weight: 700; margin: 8px 0; color: var(--accent); }

/* --- bottom nav ------------------------------------------------------------------------- */
.pt-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center; gap: 4px;
  background: var(--panel); border-top: 1px solid var(--border);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
}
.pt-nav-item {
  flex: 1 1 0; max-width: 172px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; background: none; cursor: pointer;
  color: var(--text-dim); font-size: 11px; font-weight: 600;
  border-radius: var(--r-sm); position: relative;
}
.pt-nav-item.active { color: var(--accent); }
.pt-nav-badge {
  position: absolute; top: 4px; right: calc(50% - 24px);
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--brand); color: var(--on-gold);
  border-radius: 999px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- toast + skeleton ---------------------------------------------------------------------- */
.pt-toast-container {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: max-content; max-width: 90vw;
}
.pt-toast {
  padding: 10px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  box-shadow: var(--shadow-1);
  animation: rise .2s ease;
}
.pt-toast.good { border-color: rgba(75,190,134,.4); color: var(--good); }
.pt-toast.bad  { border-color: rgba(192,57,43,.4);  color: var(--bad); }
.pt-skeleton {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.pt-sk-row { height: 88px; border-radius: var(--r-lg); margin-top: 14px; }

/* tech */
/* ============================================================================
   MTG Tech PWA — one-thumb field app (WP-C). Everything here rides the :root
   brand tokens above and only touches t-prefixed classes on the /tech page
   (body.tech-app), so the dashboard and portal styles are never affected.
   Touch targets are >= 48px throughout — this app is used with gloves on.
   ========================================================================== */

body.tech-app {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── header ── */
body.tech-app .t-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 14px;
  background: rgba(16,17,20,0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
body.tech-app .t-header[hidden] { display: none; }
body.tech-app .t-logo { width: 30px; height: 30px; object-fit: contain; }
body.tech-app .t-app-name { font-weight: 700; color: var(--brand); font-size: 17px; margin-right: auto; }
body.tech-app .t-user-chip { display: flex; align-items: center; gap: 8px; }
body.tech-app .t-user-chip .user-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px; color: var(--brand);
  background: rgba(212,164,55,0.12); border: 1px solid rgba(212,164,55,0.22);
}
body.tech-app .t-user-chip .user-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
body.tech-app .t-user-chip .user-role {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}

/* ── offline / queued banner ── */
body.tech-app .t-banner {
  background: rgba(224,182,74,0.12);
  border-bottom: 1px solid rgba(224,182,74,0.25);
  color: var(--warn);
  padding: 12px 16px; text-align: center;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
body.tech-app .t-banner[hidden] { display: none; }

/* ── layout ── */
body.tech-app .t-main {
  max-width: 640px; margin: 0 auto;
  padding: 16px 14px 110px;   /* room for the pinned action bar */
}
body.tech-app .t-actionbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px; z-index: 40;
  display: flex; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(16,17,20,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}
body.tech-app .t-actionbar[hidden] { display: none; }
body.tech-app .t-actionbar .t-btn { flex: 1 1 auto; }

/* ── buttons + inputs ── */
body.tech-app .t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; min-width: 48px; padding: 0 16px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text);
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s, transform .06s;
}
body.tech-app .t-btn:active { transform: scale(0.97); }
body.tech-app .t-btn[disabled] { opacity: .5; pointer-events: none; }
body.tech-app .t-btn-gold {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border-color: transparent; color: var(--on-gold);
  box-shadow: var(--shadow-1);
}
body.tech-app .t-btn-ghost { background: transparent; }
body.tech-app .t-btn-block { width: 100%; }
/* Phase 3b Facility step: compact per-asset actions on the job card. */
body.tech-app .t-btn-sm { min-height: 36px; min-width: 36px; padding: 0 10px; font-size: 13px; }
body.tech-app .t-asset-row { align-items: flex-start; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
body.tech-app .t-asset-actions { display: flex; gap: 8px; margin-left: auto; }
body.tech-app #t-asset-add { margin-top: 10px; }
body.tech-app .t-back-btn { align-self: flex-start; margin-bottom: 12px; }
body.tech-app .t-input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--panel); color: var(--text);
  font-size: 16px; outline: none;   /* 16px stops iOS zoom-on-focus */
  transition: border-color .12s, box-shadow .12s;
}
body.tech-app .t-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(212,164,55,0.18); }
body.tech-app .t-input::placeholder { color: var(--text-faint); }
body.tech-app .t-label {
  display: block; margin: 12px 0 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ── login ── */
body.tech-app .t-login {
  display: flex; flex-direction: column; align-items: center;
  max-width: 380px; margin: 0 auto; padding: 48px 8px 24px;
}
body.tech-app .t-login-logo { width: 96px; margin-bottom: 12px; }
body.tech-app .t-login h1 { color: var(--brand); font-size: 26px; margin: 0 0 28px; }
body.tech-app .t-login-form { width: 100%; display: flex; flex-direction: column; gap: 4px; }
body.tech-app .t-login-form .t-btn { margin-top: 16px; }
body.tech-app .t-login-error {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(192,57,43,0.10); border: 1px solid rgba(192,57,43,0.30);
  color: var(--bad); font-size: 13px; font-weight: 600;
}
body.tech-app .t-login-error[hidden] { display: none; }

/* ── today's queue ── */
body.tech-app .t-queue-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
body.tech-app .t-heading { font-size: 22px; font-weight: 800; margin: 0; }
body.tech-app .t-date { color: var(--text-dim); font-size: 13px; }
body.tech-app .t-queue-head .t-btn { margin-left: auto; min-height: 44px; }
body.tech-app .t-vcard {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 10px; align-items: center;
  min-height: 76px; padding: 12px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); cursor: pointer;
  transition: background .1s, border-color .1s;
}
body.tech-app .t-vcard:active { background: var(--panel-2); border-color: var(--border); }
body.tech-app .t-vcard.is-done { opacity: .55; }
body.tech-app .t-time {
  font-variant-numeric: tabular-nums; text-align: center;
  font-weight: 700; font-size: 15px; color: var(--brand);
}
body.tech-app .is-done .t-time { color: var(--text-dim); }
body.tech-app .t-vbody { min-width: 0; }
body.tech-app .t-job-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tech-app .t-meta, body.tech-app .t-addr { font-size: 12px; color: var(--text-dim); }

/* ── chips ── */
body.tech-app .t-chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
body.tech-app .tone-gold    { color: var(--accent);   background: rgba(212,164,55,0.12); border: 1px solid rgba(212,164,55,0.25); }
body.tech-app .tone-good    { color: var(--good);     background: rgba(75,190,134,0.10); border: 1px solid rgba(75,190,134,0.25); }
body.tech-app .tone-warn    { color: var(--warn);     background: rgba(224,182,74,0.10); border: 1px solid rgba(224,182,74,0.25); }
body.tech-app .tone-bad     { color: var(--bad);      background: rgba(192,57,43,0.12);  border: 1px solid rgba(192,57,43,0.30); }
body.tech-app .tone-neutral { color: var(--text-dim); background: var(--chip);           border: 1px solid var(--border-soft); }

/* ── job detail ── */
body.tech-app .t-job-title h2 { margin: 0; font-size: 20px; }
body.tech-app .t-job-title { margin-bottom: 14px; }
body.tech-app .t-job-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
body.tech-app .t-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 12px;
}
body.tech-app .t-coa { border-color: rgba(212,164,55,0.35); }
body.tech-app .t-card-title {
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px;
}
body.tech-app .t-kv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
body.tech-app .t-k-label { color: var(--text-faint); font-size: 12px; white-space: nowrap; min-width: 74px; }
body.tech-app .t-k-value { flex: 1 1 auto; font-weight: 600; min-width: 120px; }
body.tech-app .t-card-note { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
body.tech-app .t-emp-notes {
  background: var(--panel-2); border-radius: var(--r-sm); padding: 10px 12px;
  margin-top: 10px; font-size: 13px; color: var(--text-dim);
}
body.tech-app .t-tel {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid rgba(212,164,55,0.30);
  color: var(--brand); font-weight: 600; text-decoration: none;
}
body.tech-app .t-tel:active { background: rgba(212,164,55,0.10); }
body.tech-app .t-part-line {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; font-size: 13px;
  border-bottom: 1px solid var(--border-soft);
}
body.tech-app .t-part-line:last-of-type { border-bottom: 0; }
body.tech-app .t-part-line > span:first-child { flex: 1 1 auto; min-width: 0; }
body.tech-app .t-qty { color: var(--text-dim); font-weight: 600; }
body.tech-app .t-price { font-variant-numeric: tabular-nums; }
body.tech-app .t-part-total { text-align: right; font-weight: 700; color: var(--brand); margin-top: 10px; }
body.tech-app .t-timeline-item {
  padding: 10px 0 10px 14px; border-left: 2px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  font-size: 13px;
}
body.tech-app .t-timeline-item .t-note { width: 100%; color: var(--text-dim); font-size: 12px; }

/* ── bottom sheets ── */
body.tech-app .t-sheet-backdrop { position: fixed; inset: 0; background: rgba(2,6,12,0.6); z-index: 50; }
body.tech-app .t-sheet {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px; z-index: 51;
  max-height: 85vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -1px 2px rgba(0,0,0,.5);
  animation: t-slide-up .22s ease;
}
@keyframes t-slide-up {
  from { transform: translate(-50%, 18%); opacity: 0; }
  to   { transform: translate(-50%, 0);   opacity: 1; }
}
body.tech-app .t-sheet-head { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
body.tech-app .t-sheet-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
body.tech-app .t-opt {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 12px;
  border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: border-color .12s, background .12s;
}
body.tech-app .t-opt:has(input:checked) { border-color: var(--brand); background: rgba(212,164,55,0.06); }
body.tech-app .t-opt[aria-disabled] { opacity: .45; pointer-events: none; }
body.tech-app .t-opt input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
body.tech-app .t-notes { min-height: 84px; margin: 14px 0; resize: vertical; }
body.tech-app .t-warnbox {
  background: rgba(224,182,74,0.08); border: 1px solid rgba(224,182,74,0.28);
  border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--warn);
}

/* need-parts sheet */
body.tech-app .t-stepper { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; align-items: stretch; }
body.tech-app .t-stepper button {
  min-height: 48px; font-size: 24px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r-sm);
}
body.tech-app .t-stepper button:active { background: var(--panel); }
body.tech-app .t-stepper .t-input { text-align: center; font-size: 18px; font-weight: 600; -moz-appearance: textfield; }
body.tech-app .t-stepper input::-webkit-outer-spin-button,
body.tech-app .t-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.tech-app .t-results {
  max-height: 220px; overflow-y: auto; margin-top: 6px;
  border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--bg-2);
}
body.tech-app .t-results[hidden] { display: none; }
body.tech-app .t-result-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 12px; font-size: 14px; cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
body.tech-app .t-result-row:last-child { border-bottom: 0; }
body.tech-app .t-result-row:active { background: var(--panel-2); }
body.tech-app .t-result-row > span:first-child { flex: 1 1 auto; min-width: 0; }
body.tech-app .t-sku { color: var(--text-faint); font-size: 12px; }
body.tech-app .t-result-row .t-price { color: var(--brand); font-weight: 600; }
body.tech-app .t-selected-price { font-size: 12px; color: var(--brand); margin: 6px 0 12px; min-height: 16px; }
body.tech-app .t-resultbox {
  padding: 14px 16px; border-radius: var(--r-sm); font-weight: 600;
  margin: 14px 0 10px; font-size: 14px;
}
body.tech-app .t-resultbox-good { background: rgba(75,190,134,0.10); border: 1px solid rgba(75,190,134,0.30); color: var(--good); }
body.tech-app .t-resultbox-warn { background: rgba(224,182,74,0.08); border: 1px solid rgba(224,182,74,0.30); color: var(--warn); }

/* text-client sheet (4c §2) */
body.tech-app .t-thread {
  max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 8px; margin-bottom: 12px; padding-right: 2px;
}
body.tech-app .t-msg {
  max-width: 84%; padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.4; word-break: break-word;
}
body.tech-app .t-msg-out {
  align-self: flex-end; background: rgba(212,164,55,0.14);
  border: 1px solid rgba(212,164,55,0.30); border-bottom-right-radius: 2px;
}
body.tech-app .t-msg-in {
  align-self: flex-start; background: var(--panel-2);
  border: 1px solid var(--border-soft); border-bottom-left-radius: 2px;
}
body.tech-app .t-msg-sender { font-size: 11px; font-weight: 700; color: var(--brand); margin-bottom: 2px; }
body.tech-app .t-msg-body { white-space: pre-wrap; }
body.tech-app .t-msg-time { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
body.tech-app .t-thread-compose { display: flex; gap: 8px; align-items: flex-end; }
body.tech-app .t-thread-compose .t-input { flex: 1 1 auto; resize: none; }
body.tech-app .t-thread-compose .t-btn { flex: 0 0 auto; min-height: 48px; }

/* ── toasts + odds and ends ── */
body.tech-app #t-toast-root {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
  z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: max-content; max-width: 92vw;
}
body.tech-app .t-toast {
  padding: 10px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  box-shadow: var(--shadow-1);
  animation: t-toast-in .2s ease; transition: opacity .2s, transform .2s;
  max-width: 92vw; white-space: normal; text-align: center;
}
@keyframes t-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
body.tech-app .t-toast-good { border-color: rgba(75,190,134,0.4); color: var(--good); }
body.tech-app .t-toast-bad  { border-color: rgba(192,57,43,0.45); color: var(--bad); }
body.tech-app .t-toast-warn { border-color: rgba(224,182,74,0.4); color: var(--warn); }
body.tech-app .t-empty { text-align: center; color: var(--text-faint); padding: 22px 12px; font-size: 14px; }
body.tech-app .t-loading { color: var(--text-faint); text-align: center; padding: 18px; }

@media (max-width: 400px) {
  body.tech-app .t-main { padding: 12px 10px 110px; }
  body.tech-app .t-vcard { grid-template-columns: 54px 1fr auto; }
}

/* portal-invoice */
/* ============================================================================
   WP-5 invoice card on the customer-portal job detail (portal.js). Rides
   .pt-card for the outer chrome and only touches pt-invoice-* classes, so
   nothing above shifts. Uses the :root brand tokens exclusively.
   ========================================================================== */
.pt-invoice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pt-invoice-number { font-weight: 700; font-size: 15px; letter-spacing: .3px; }

/* line items — description grows, amount stays right-aligned and tabular */
.pt-invoice-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}
.pt-invoice-line + .pt-invoice-line { border-top: 1px solid var(--border-soft); }
.pt-invoice-line-desc { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.pt-invoice-line-meta {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}
.pt-invoice-line-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-faint);
  background: var(--panel-2);
  padding: 2px 6px; border-radius: var(--r-sm);
  white-space: nowrap; margin-top: 2px;
}
.pt-invoice-line-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 70px;
  white-space: nowrap;
}

/* total — separated from the lines, gold amount */
.pt-invoice-total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: 8px;
  font-weight: 700;
}
.pt-invoice-total span:last-child { color: var(--brand); font-variant-numeric: tabular-nums; }

/* footer — the payment copy + sent/paid date */
.pt-invoice-footer {
  margin-top: 12px;
  font-size: 13px; color: var(--text-dim);
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 4px 8px;
}
.pt-invoice-date { color: var(--text-faint); white-space: nowrap; }

/* ══════════ WP-4 · launcher, topbar & app views (append-only) ══════════
   New classes only — the global sharpening pass (WP-6) owns restyling the
   existing rules. These are born sharp: 6px cards/tiles, 4px controls,
   crisp 1px borders, no soft blur shadows. */

/* topbar (chrome for the non-command views) */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.topbar-logo img { height: 26px; display: block; }
.topbar-grid {
  width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.topbar-grid:hover { border-color: var(--brand); color: var(--brand); }
.topbar-grid svg { width: 18px; height: 18px; }
.topbar-title { font-weight: 700; letter-spacing: .03em; }
.topbar-spacer { flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.topbar-user .user-name { font-weight: 600; font-size: 13px; color: var(--text); }
.topbar-user .user-role {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
}

/* view roots + the shared shell the app views render into */
.view-root { min-height: calc(100vh - 57px); }
.view-shell { max-width: 1080px; margin: auto; padding: 26px 24px 60px; }
.view-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.view-title { font-size: 20px; font-weight: 800; margin: 0; }

/* launcher */
.launcher { max-width: 1080px; margin: auto; padding: 40px 24px; }
.launcher-head { font-weight: 800; font-size: 26px; margin: 0; letter-spacing: -.3px; }
.launcher-sub { margin: 4px 0 26px; font-size: 13px; }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.app-tile {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 18px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer; color: var(--text); text-decoration: none;
  text-align: left; font: inherit;
  transition: border-color .15s, background .15s;
}
.app-tile:hover { border-color: var(--brand); background: var(--panel-2); }
.app-tile .tile-ic { color: var(--brand); }
.app-tile .tile-ic svg { width: 26px; height: 26px; display: block; }
.tile-label { font-weight: 700; font-size: 14.5px; }
.tile-desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; }

/* modal shared by the new app views */
.wp4-modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
}
.wp4-modal-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px; max-width: 480px; width: 92%; max-height: 90vh; overflow: auto;
}

/* timeline filter pills (360) */
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12px; color: var(--text-dim); cursor: pointer;
  background: transparent;
  transition: border-color .15s, color .15s, background .15s;
}
.filter-pill.active {
  border-color: var(--brand); color: var(--brand);
  background: rgba(212,164,55,.08);
}

/* stat chips (360 header) */
.stat-chips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.stat-chip {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 12px 14px;
}
.stat-chip .num { font-size: 22px; font-weight: 800; color: var(--accent); }
.stat-chip .lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim);
}

/* unified activity timeline (360) — square markers, crisp rail */
.tl-list {
  border-left: 2px solid var(--border-soft); margin-left: 6px; padding-left: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.tl-item { position: relative; font-size: 13px; }
.tl-item::before {
  content: ''; position: absolute; left: -19px; top: 6px;
  width: 8px; height: 8px;
  background: var(--panel); border: 1px solid var(--brand);
}
.tl-item .tl-ts { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tl-item .tl-title { font-size: 13.5px; font-weight: 600; }
.tl-item .tl-detail { font-size: 12.5px; color: var(--text-dim); }
.tl-item.clickable { cursor: pointer; }
.tl-item.clickable:hover .tl-title { color: var(--accent); }

/* scheduling: week rows, per-tech day lanes, slot chips */
.sched-day-row.past, .lane-slot.past { opacity: .45; }
.lane {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 12px; margin-bottom: 10px;
}
.lane-head {
  display: flex; justify-content: space-between; margin-bottom: 8px;
  font-weight: 700; gap: 10px;
}
.slot-chip {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12.5px;
  margin: 0 6px 6px 0;
}
.slot-chip.free {
  color: var(--good); border-color: rgba(75,190,134,.35);
  cursor: pointer;
}
.slot-chip.free:hover { background: rgba(75,190,134,.08); }
.slot-chip.booked { color: var(--text); background: var(--panel-2); cursor: pointer; }
.slot-chip.booked:hover { border-color: var(--brand); }
.slot-chip.disabled { opacity: .45; cursor: default; }

@media (max-width: 720px) {
  .launcher { padding: 24px 14px; }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .view-shell { padding: 18px 14px 40px; }
}

/* ══════════ WP-6 · sharpen overrides for JS-injected section styles ══════════
   properties.js appends its own <style> to <head> AFTER this stylesheet, so
   these carry one extra level of specificity (the tag) to win the cascade.
   CSS-only mandate: the class hooks already exist — only styling lives here. */
div.ptree-node { border-radius: var(--r-lg); }                 /* was 10px */
div.mtg-modal-panel { border-radius: var(--r-lg); box-shadow: var(--shadow-1); }  /* was 14px + 0 28px 70px blur */
div.partner-results { border-radius: var(--r-sm); }            /* was 10px */

/* photos */
/* tech.js — the job-detail Photos card (mirrors .t-card's own spacing) */
.t-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.t-photo-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
}

/* properties.js — the 360 view's horizontally-scrolling photo strip */
.t360-photo-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.t360-photo-thumb {
  height: 72px;
  width: 72px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: var(--panel-2);
}

/* ── Tech PWA: crew staffing + hours verification (Art 07-16) ─────────── */
body.tech-app .t-nav { display: flex; background: var(--panel); border-bottom: 1px solid var(--border); }
body.tech-app .t-nav-tab {
  flex: 1; min-height: 48px; padding: 12px 0; background: transparent; border: none;
  color: var(--text-dim); font-size: 15px; font-weight: 600; cursor: pointer; position: relative;
}
body.tech-app .t-nav-tab.active { color: var(--accent); }
body.tech-app .t-nav-tab.active::after {
  content: ""; position: absolute; bottom: 0; left: 22%; right: 22%; height: 3px; background: var(--accent);
}
body.tech-app .t-badge[hidden] { display: none; }
body.tech-app .t-badge {
  background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px;
  min-width: 18px; border-radius: var(--r-sm); padding: 0 5px; margin-left: 6px; display: inline-block; vertical-align: middle;
}
body.tech-app .t-crew-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap;
}
body.tech-app .t-crew-row:last-child { border-bottom: 0; }
body.tech-app .t-crew-row.removed { opacity: 0.55; }
body.tech-app .t-crew-tag { color: var(--text-dim); font-size: 13px; }
body.tech-app .t-quick-chips { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
body.tech-app .t-quick-chip {
  min-height: 44px; min-width: 52px; padding: 0 12px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text);
  font-size: 14px; cursor: pointer;
}
body.tech-app .t-quick-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-gold); }
body.tech-app .t-pending-line {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px; margin-bottom: 8px;
}
body.tech-app .t-line-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
body.tech-app .t-line-actions .t-btn { min-height: 44px; }

/* ── Tech PWA: time clock bar (decision #63) ──────────────────────────── */
body.tech-app #t-clockbar[hidden] { display: none; }
body.tech-app #t-clockbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--border);
}
body.tech-app #t-clockbar .t-btn { min-height: 44px; }

/* ── Tech PWA: assistant chat (decision #70) ─────────────────────────── */
body.tech-app .t-assistant-wrap { display:flex; flex-direction:column; min-height:70vh; padding:0 12px; }
body.tech-app .t-assistant-messages { flex:1; overflow-y:auto; }
body.tech-app .t-assistant-msg { display:flex; margin-bottom:8px; }
body.tech-app .t-assistant-msg.user { justify-content:flex-end; }
body.tech-app .t-assistant-msg.assistant { justify-content:flex-start; }
body.tech-app .t-assistant-bubble { max-width:85%; padding:10px 12px; border-radius:6px; font-size:14px; line-height:1.4; white-space:pre-wrap; word-break:break-word; background:var(--panel); border:1px solid var(--border); }
body.tech-app .t-assistant-msg.user .t-assistant-bubble { background:rgba(224,182,74,.18); }
body.tech-app .t-assistant-trace { font-size:11px; opacity:.6; margin-top:3px; }
body.tech-app .t-assistant-chip { display:inline-block; padding:8px 12px; margin:4px 4px 0 0; border:1px solid var(--border); border-radius:6px; background:var(--panel); font-size:13px; cursor:pointer; }
body.tech-app .t-assistant-inputbar { position:sticky; bottom:0; background:var(--bg); padding:8px 0; border-top:1px solid var(--border); display:flex; gap:8px; }
body.tech-app .t-assistant-inputbar .t-input { flex:1; min-height:44px; font-size:16px; }
body.tech-app .t-assistant-inputbar .t-btn { min-height:44px; min-width:64px; }