/* PrintSync YouTube-style theme. Loads AFTER style.css and overrides its tokens. */
:root{--black:#0F0F0F;--black-soft:#1E1E1E;--white:#F1F1F1;--white-dim:#A0A0A0;--white-faint:#7A7A7A;
--red:#E53935;--red-bright:#FF6B66;--red-deep:#B71C1C;--glass-bg:#1E1E1E;--glass-bg-strong:#121212;
--glass-border:#2A2A2A;--glass-shadow:none;--field-bg:#121212;--red-tint:rgba(229,57,53,.14);--radius:16px;--radius-sm:12px}
:root[data-theme="light"]{--black:#FAFAFA;--black-soft:#FFFFFF;--white:#111111;--white-dim:#5F5F5F;--white-faint:#808080;
--red-bright:#C62828;--glass-bg:#FFFFFF;--glass-bg-strong:#F1F1F1;--glass-border:#E0E0E0;--field-bg:#FFFFFF;--red-tint:rgba(229,57,53,.09)}
html{background-color:var(--black)}
body{font-family:Roboto,'IBM Plex Sans',system-ui,sans-serif;background:var(--black)!important;padding:20px 16px 72px}
body:has(.yt-header){padding:56px 0 0}
.glass-card,.aside-card,.topbar{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;background:var(--glass-bg)}
:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px}

/* Header */
.yt-header{position:fixed;top:0;left:0;right:0;height:56px;z-index:110;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--black);border-bottom:1px solid var(--glass-border)}
.yt-icon-btn{position:relative;flex:0 0 auto;width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:1px solid transparent;color:var(--white)}
.yt-icon-btn:hover:not(:disabled){background:var(--glass-bg-strong);border-color:var(--glass-border);color:var(--white);text-decoration:none}
.yt-logo{display:flex;align-items:center;gap:8px;flex:0 0 auto;color:var(--white)}
.yt-logo:hover{text-decoration:none}
.yt-logo-mark{width:32px;height:32px;border-radius:8px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center}
.yt-logo-word{font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.yt-logo-tag{display:none;padding:3px 9px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--white-dim);font-size:.62rem;font-weight:700;letter-spacing:.12em}
@media(min-width:1180px){.yt-logo-tag{display:inline-block}}
.yt-search{position:relative;flex:1;max-width:620px;margin:0 auto}
.yt-search form,.yt-search{margin-top:0;margin-bottom:0}
.yt-search input{width:100%;max-width:none;height:40px;margin:0;padding:0 16px 0 44px;border-radius:999px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);color:var(--white)}
.yt-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--white-dim);pointer-events:none}
.yt-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.yt-header .bell-badge{border-color:var(--black)}
.yt-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-size:.8rem;font-weight:700}
@media(max-width:560px){.yt-logo-word{display:none}.yt-header{gap:6px;padding:0 8px}}

/* Sidebar */
.sidebar{top:56px;height:calc(100vh - 56px);width:240px;background:var(--black);border-right:1px solid var(--glass-border);backdrop-filter:none;transition:width .2s ease,transform .25s ease}
:root[data-theme="light"] .sidebar{background:var(--black)}
.sidebar-nav{padding:12px 10px}
.side-section{margin:14px 12px 4px;font-size:.62rem;font-weight:700;letter-spacing:.14em;color:var(--white-faint)}
.sidebar nav a.side-link,.sidebar-footer .side-link{min-height:44px;border:1px solid transparent;border-radius:12px;padding:10px 12px;color:var(--white-dim)!important}
.sidebar nav a.side-link:hover,.sidebar-footer .side-link:hover{background:var(--glass-bg);color:var(--white)!important}
.sidebar nav a.side-link[aria-current="page"]{background:var(--glass-bg);border:1px solid var(--glass-border);padding-left:12px;color:var(--white)!important}
.sidebar nav a.side-link[aria-current="page"] svg{color:var(--red)}
.sidebar nav a.side-link-cta{background:var(--red);color:#fff!important;margin:6px 0}
.sidebar nav a.side-link-cta:hover{background:var(--red-bright)}
.sidebar nav a.side-link-cta[aria-current="page"]{background:var(--red-deep);border-color:var(--red-deep)}
.sidebar nav a.side-link-admin{border:1px solid rgba(229,57,53,.4);color:var(--red-bright)!important}
.side-count{margin-left:auto;padding:1px 8px;border-radius:999px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);font-size:.68rem;font-weight:700;color:var(--white-dim)}
.app-shell.with-sidebar{margin-left:240px;max-width:none;padding:0 24px 40px;transition:margin .2s ease}
.page-header{padding:20px 0 14px}
.page-header h1{font-size:1.35rem}
#sidebar-toggle{display:none!important}
@media(min-width:901px){
 body.yt-collapsed .sidebar{width:72px}
 body.yt-collapsed .app-shell.with-sidebar{margin-left:72px}
 body.yt-collapsed .sidebar .lbl,body.yt-collapsed .sidebar .side-count,body.yt-collapsed .sidebar .sidebar-user{display:none}
 body.yt-collapsed .sidebar .side-link{justify-content:center;padding-left:0;padding-right:0}
}
@media(max-width:900px){.app-shell.with-sidebar{margin-left:0;padding:0 14px 40px}.sidebar{top:56px}}

/* Status pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid;border-radius:999px;font-size:.62rem;font-weight:700;letter-spacing:.1em;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.tone-checking{color:#FDE68A;background:#2A2412;border-color:#3A341A}
.tone-decision,.tone-pulled{color:#FF9A9A;background:#2E1514;border-color:#4A2220}
.tone-repair{color:#93C5FD;background:#151E2E;border-color:#1E2E4A}
.tone-release{color:#86EFAC;background:#14261A;border-color:#1E3A26}
.tone-released{color:#B0B0B0;background:#1A1A1A;border-color:#2A2A2A}
:root[data-theme="light"] .tone-checking{color:#854D0E;background:#FEF9C3;border-color:#FDE68A}
:root[data-theme="light"] .tone-decision,:root[data-theme="light"] .tone-pulled{color:#B71C1C;background:#FEE2E2;border-color:#FECACA}
:root[data-theme="light"] .tone-repair{color:#1D4ED8;background:#DBEAFE;border-color:#BFDBFE}
:root[data-theme="light"] .tone-release{color:#166534;background:#DCFCE7;border-color:#BBF7D0}
:root[data-theme="light"] .tone-released{color:#555;background:#F1F1F1;border-color:#E0E0E0}

/* Stage filter: one scrollable row of tabs (text + count, red underline on the active one) */
.chips{display:flex;flex-wrap:nowrap;gap:2px;margin:6px 0 22px;border-bottom:1px solid var(--glass-border);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip,.chip.all{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 14px;border:0;border-radius:0;background:transparent;color:var(--white-dim);font-size:.9rem;font-weight:500;white-space:nowrap;scroll-snap-align:start}
.chip::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:transparent;transition:background .15s ease}
.chip:hover{text-decoration:none;color:var(--white);background:transparent}
.chip.active,.chip.all.active{color:var(--white);background:transparent;border:0;font-weight:600}
.chip.active::after{background:var(--red)}
.chip-n{padding:0;background:none;font-size:.78rem;font-weight:600;color:var(--white-faint)}
.chip.active .chip-n{background:none;color:var(--red-bright)}
.chip-v{display:none}
@media(max-width:700px){
  .chips{margin-left:-14px;margin-right:-14px;padding:0 6px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
}

/* Job cards */
.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.job-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;transition:border-color .15s ease,transform .15s ease}
.job-card:hover{border-color:#444;transform:translateY(-2px)}
.job-top,.job-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.job-jo{display:flex;align-items:center;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;color:var(--white-dim)}
.job-link{color:inherit}
.job-link:hover{text-decoration:none;color:var(--white)}
.job-link::after{content:'';position:absolute;inset:0;border-radius:16px}
.job-card .copy-jo{position:relative;z-index:2;min-width:28px;min-height:28px;justify-content:center}
.job-model strong{display:block;font-size:.98rem;letter-spacing:-.01em}
.job-model span{font-size:.78rem;color:var(--white-dim)}
.job-meta{font-size:.78rem;color:var(--white-dim)}
.job-meta b{display:block;color:var(--white);font-weight:500;font-size:.88rem}
.job-foot{padding-top:12px;border-top:1px solid var(--glass-border);font-size:.78rem}
.job-total{font-weight:700;color:var(--white)}
.job-card.declined{border-color:rgba(229,57,53,.35)}

/* Mini stepper */
.mini-steps{display:flex;align-items:center}
.mini-dot{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-border);background:var(--glass-bg-strong);color:var(--white-faint);font-size:.65rem;font-weight:700}
.mini-dot.done{background:rgba(229,57,53,.2);border-color:rgba(229,57,53,.4);color:var(--red-bright)}
.mini-dot.current{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 0 3px rgba(229,57,53,.18)}
.mini-dot.declined{background:var(--red-deep)}
.mini-bar{flex:1;height:2px;margin:0 4px;background:var(--glass-border)}
.mini-bar.done{background:rgba(229,57,53,.55)}

/* Flow panel */
.flow-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.flow-head h3{margin:0}
.tag{padding:3px 8px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg-strong);font-size:.58rem;font-weight:700;letter-spacing:.1em;color:var(--white-dim)}
.flow{position:relative;display:flex;flex-direction:column;gap:20px;list-style:none;margin:16px 0 6px;padding:0}
.flow::before{content:'';position:absolute;left:25px;top:14px;bottom:14px;width:2px;background:var(--glass-border)}
.flow-step{position:relative;display:flex;gap:14px}
.flow-ico{position:relative;flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass-bg-strong);border:2px solid var(--glass-border);color:var(--white-faint)}
.flow-step.on .flow-ico{background:var(--glass-bg);border-color:var(--red);color:var(--red-bright);box-shadow:0 0 0 4px rgba(229,57,53,.12)}
.flow-num{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-size:.65rem;font-weight:700}
.flow-body{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.8rem;color:var(--white-dim);line-height:1.4}
.flow-body strong{color:var(--white);font-size:.9rem}
.flow-body small{font-size:.62rem;font-weight:700;letter-spacing:.1em;color:var(--white-faint)}
.active-tag{margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--red-tint);color:var(--red-bright);font-size:.56rem;font-style:normal;letter-spacing:.1em}

/* Clients */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.client-card{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px}
.client-head{display:flex;align-items:center;gap:12px}
.client-avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--red-tint);color:var(--red-bright);font-weight:700}
.client-head strong{display:block}
.client-head span{font-size:.8rem;color:var(--white-dim)}
.client-jobs{display:flex;flex-wrap:wrap;gap:8px}
.client-job{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 10px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg-strong);font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--white)}
.client-job:hover{text-decoration:none;border-color:var(--red)}

/* Reports */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:16px}
.kpi{padding:16px 18px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px}
.kpi span{font-size:.78rem;color:var(--white-dim)}
.kpi strong{display:block;margin-top:4px;font-size:1.6rem;letter-spacing:-.02em}
.report-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:900px){.report-grid{grid-template-columns:minmax(0,1fr)}}
.bars{display:flex;align-items:flex-end;gap:12px;height:220px;margin-top:14px}
.bar-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.bar{width:100%;min-height:26px;display:flex;align-items:center;justify-content:center;border-radius:12px 12px 0 0;background:var(--red);color:#fff;font-weight:700;font-size:.85rem}
.bar-label{font-size:.68rem;text-align:center;color:var(--white-dim);line-height:1.2}
.rank{list-style:none;margin:10px 0 0;padding:0}
.rank li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--glass-border);font-size:.88rem}
.rank li:last-child{border-bottom:0}
.page-note{font-size:.85rem;color:var(--white-dim);margin:0 0 14px}
.results-note{display:flex;gap:10px;align-items:center;margin:0 0 14px;font-size:.88rem;color:var(--white-dim)}
@media(prefers-reduced-motion:reduce){.job-card,.sidebar,.app-shell.with-sidebar{transition:none}.job-card:hover{transform:none}}

/* Public pages (landing) */
#theme-toggle.yt-icon-btn{flex:0 0 44px;width:44px;min-width:44px;height:44px}
.pub-main{max-width:1040px;margin:0 auto;padding:28px 16px 64px;display:flex;flex-direction:column;gap:20px}
.btn-red,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;font-size:.9rem;font-weight:600;white-space:nowrap}
.btn-red{background:var(--red);border:1px solid var(--red);color:#fff!important}
.btn-red:hover{background:var(--red-bright);border-color:var(--red-bright);text-decoration:none}
.btn-ghost{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--white)!important;font-weight:500}
.btn-ghost:hover{border-color:#444;text-decoration:none}
.hero{padding:36px}
.hero .tag{display:inline-block;margin-bottom:14px}
.hero h1{max-width:760px;margin:0 0 12px;font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1.12;letter-spacing:-.025em}
.hero p{max-width:560px;color:var(--white-dim)}
.hero-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;max-width:680px;margin:22px 0 8px}
.hero-form input{max-width:none;height:44px;margin:0;border-radius:999px;padding:0 18px}
.hero-form .btn-red{cursor:pointer}
.hero-hint{margin:0;font-size:.8rem;color:var(--white-faint)}
@media(max-width:700px){.hero{padding:24px 18px}.hero-form{grid-template-columns:1fr}}
.pub-card{padding:28px}
.pub-card>h2{margin:0 0 4px;font-size:1.15rem}
.pub-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;list-style:none;margin:24px 0 0;padding:0}
.pub-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pub-step:not(:last-child)::after{content:'';position:absolute;top:26px;left:calc(50% + 36px);width:calc(100% - 56px);height:2px;background:var(--glass-border)}
.pub-step .flow-ico{flex:none}
.pub-step.attention .flow-ico{background:var(--glass-bg);border-color:var(--red);color:var(--red-bright);box-shadow:0 0 0 4px rgba(229,57,53,.12)}
.pub-step h3{margin:0;font-size:.95rem}
.pub-step p{margin:0;font-size:.82rem;line-height:1.5;color:var(--white-dim)}
@media(max-width:760px){
 .pub-steps{grid-template-columns:1fr;gap:22px}
 .pub-step{flex-direction:row;align-items:flex-start;text-align:left;gap:14px}
 .pub-step:not(:last-child)::after{display:none}
}
.pub-foot{text-align:center;font-size:.8rem;color:var(--white-faint)}

/* Auth pages (login) */
.auth-main{min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;padding:24px 16px}
.auth-card{width:100%;max-width:400px;padding:32px}
.auth-card h1{margin:0 0 4px;font-size:1.4rem;letter-spacing:-.02em}
.auth-sub{margin:0 0 22px;font-size:.88rem;color:var(--white-dim)}
.field{display:block;margin-bottom:16px}
.field>span{display:block;margin-bottom:6px;font-size:.8rem;font-weight:500;color:var(--white-dim)}
.field input{width:100%;max-width:none;height:44px;margin:0;border-radius:12px}
.pw-row{display:flex;gap:8px}
.pw-row input{flex:1;min-width:0}
.pw-row .pw-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:12px}
.auth-error{margin:0 0 16px;padding:10px 14px;border-radius:12px;background:var(--red-tint);border:1px solid rgba(229,57,53,.4);color:var(--red-bright);font-size:.88rem}
.auth-submit{width:100%;min-height:46px;border-radius:999px;font-size:.95rem;font-weight:600}
.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:.85rem}

/* Track Your Printer */
.track-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media(max-width:900px){.track-layout{grid-template-columns:minmax(0,1fr)}}
.track-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.track-head h2{margin:0;font-size:1.2rem}
.track-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0 0 18px}
.track-facts div{padding:12px 14px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-bg-strong);font-size:.78rem;color:var(--white-dim)}
.track-facts b{display:block;margin-top:2px;font-size:.92rem;font-weight:500;color:var(--white)}
.track-notes{padding:14px 16px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-bg-strong);margin:0 0 16px}
.track-notes h3{margin:0 0 6px;font-size:.78rem;letter-spacing:.1em;color:var(--white-dim)}
.track-notes p{margin:0}
.lookup-card{padding:28px}
.lookup-card h1{margin:0 0 4px;font-size:1.4rem;letter-spacing:-.02em}
.lookup-card .hero-form{margin-bottom:0}
.decision-box{margin-top:18px;padding:16px;border:1px solid rgba(229,57,53,.4);border-radius:12px;background:var(--red-tint)}
.decision-box h3{margin:0 0 4px;font-size:1rem}
@media print{.yt-header,.floating-contact-wrap,.toast-stack{display:none!important}body:has(.yt-header){padding-top:0}}

/* Icon circles keep their size in both row and column layouts */
.flow-ico{flex:none;width:52px;height:52px;min-width:52px;border-radius:50%}
.flow-ico svg{flex:none}

/* Model combobox: the open state can't be overridden by another stylesheet,
   so the list shows/hides and the arrow flips even on an older page. */
.combo .combo-toggle svg{transition:transform .2s ease}
.combo.open .combo-toggle svg{transform:rotate(180deg)!important}
.combo.open .combo-menu{display:block!important}
.combo:not(.open) .combo-menu{display:none!important}

/* Button spacing inside forms (diagnosis, release, master data).
   :where() keeps this weak, so any button with its own class still wins. */
:where(.glass-card form > button){margin:8px 10px 12px 0}
.select-wrap + button{margin-top:12px}
.part-row{margin-bottom:10px}
.decision-buttons>button,.hero-form>button,.pw-row>button{margin:0}

/* The arrow button is centered with top:50% + translateY(-50%). The global
   button:active rule (scale .98) replaced that transform, so the button jumped
   16px on press and clicks on its upper half were lost. Center with a margin
   instead and never transform it. */
.combo .combo-toggle,
.combo .combo-toggle:hover,
.combo .combo-toggle:active{top:50%;margin-top:-16px;transform:none!important}

/* ---------- Model dropdown list design ----------
   Selectors are .combo .combo-menu ... so they beat combo.css whatever the load order. */
.combo .combo-menu{
  padding:6px;max-height:300px;border-radius:14px;border:1px solid var(--glass-border);
  background:var(--black-soft);
  box-shadow:0 18px 44px rgba(0,0,0,.42),0 0 0 1px rgba(229,57,53,.08);
  scrollbar-width:thin;scrollbar-color:var(--glass-border) transparent;
}
:root[data-theme="light"] .combo .combo-menu{box-shadow:0 16px 38px rgba(0,0,0,.14),0 0 0 1px rgba(229,57,53,.06)}
.combo.open .combo-menu{animation:combo-pop .16s ease-out}
@keyframes combo-pop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.combo.open .combo-menu{animation:none}}

/* sticky header */
.combo .combo-menu::before{
  content:'PRINTER MODELS';display:block;position:sticky;top:-6px;z-index:1;
  margin:-6px -6px 6px;padding:11px 16px 9px;border-radius:14px 14px 0 0;
  background:var(--black-soft);border-bottom:1px solid var(--glass-border);
  font-size:.62rem;font-weight:700;letter-spacing:.14em;color:var(--white-faint);
}

/* rows */
.combo .combo-menu .combo-option{
  position:relative;display:flex;align-items:center;gap:12px;margin:2px 0;padding:7px 44px 7px 8px;
  border-radius:10px;font-size:.92rem;font-weight:500;color:var(--white);
  transition:background .12s ease;
}
.combo .combo-menu .combo-option:hover,
.combo .combo-menu .combo-option.active{background:var(--red-tint)}
/* printer tile (replaces the old thin red bar) */
.combo .combo-menu .combo-option::before{
  content:'';position:static;flex:none;width:30px;height:30px;border-radius:8px;
  opacity:1;transform:none;
  background:var(--red-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E53935' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:background-color .12s ease;
}
.combo .combo-menu .combo-option:hover::before,
.combo .combo-menu .combo-option.active::before{background-color:rgba(229,57,53,.24)}
/* round check on the selected model */
.combo .combo-menu .combo-option[aria-selected="true"]{font-weight:600}
.combo .combo-menu .combo-option[aria-selected="true"]::after{
  content:'\2713';position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;font-size:.7rem;font-weight:700;
}
/* matched text while typing */
.combo .combo-menu .combo-option mark{padding:0 2px;border-radius:4px;background:var(--red-tint);color:var(--red-bright);font-weight:700}
/* "no match" message */
.combo .combo-menu .combo-empty.show{padding:18px 14px;text-align:center;font-size:.85rem;color:var(--white-dim)}
.combo .combo-menu .combo-empty strong{color:var(--white)}
.combo .combo-menu::-webkit-scrollbar{width:8px}
.combo .combo-menu::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:8px}

/* keyboard hints, pinned under the list (hidden on touch screens) */
.combo .combo-menu::after{
  content:'\2191\2193 navigate  \00b7  Enter select  \00b7  Esc close';display:block;position:sticky;bottom:-6px;z-index:1;
  margin:6px -6px -6px;padding:10px 16px;border-top:1px solid var(--glass-border);border-radius:0 0 14px 14px;
  background:var(--black-soft);font-size:.68rem;color:var(--white-faint);
}
@media(hover:none){.combo .combo-menu::after{display:none}}
.combo .combo-menu .combo-option[hidden]{display:none!important}

/* Staff Accounts: edit card (floats over the table so rows don't stretch) */
.edit-details{position:relative;display:inline-block;margin-left:8px;vertical-align:middle}
.edit-details > summary{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--glass-border);border-radius:8px;background:transparent;color:var(--white);font-size:.8rem;cursor:pointer;list-style:none}
.edit-details > summary::-webkit-details-marker{display:none}
.edit-details > summary:hover{border-color:var(--red);color:var(--red-bright);background:var(--red-tint)}
.edit-details[open] > summary{border-color:var(--red);color:var(--red-bright);background:var(--red-tint)}
.edit-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;display:grid;gap:14px;width:340px;margin:0;padding:18px;
  border:1px solid var(--glass-border);border-radius:16px;background:var(--black-soft);
  box-shadow:0 20px 48px rgba(0,0,0,.45),0 0 0 1px rgba(229,57,53,.08);
  font-style:normal;white-space:normal;text-align:left;animation:combo-pop .16s ease-out}
:root[data-theme="light"] .edit-panel{box-shadow:0 18px 40px rgba(0,0,0,.16),0 0 0 1px rgba(229,57,53,.06)}
.edit-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--glass-border)}
.edit-head strong{display:block;font-size:.95rem;color:var(--white)}
.edit-head span:not(.client-avatar){font-size:.78rem;color:var(--white-dim)}
.ef{display:block;margin:0}
.ef > span,.ef > label{display:block;margin-bottom:6px;font-size:.78rem;font-weight:500;color:var(--white-dim)}
.ef small{display:block;margin-top:5px;font-size:.72rem;color:var(--white-faint)}
.edit-panel,.edit-panel *{box-sizing:border-box}
.edit-panel input{display:block;width:100%;max-width:none;height:42px;margin:0;border-radius:12px;background-color:var(--field-bg)}
.edit-panel input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--field-bg) inset;-webkit-text-fill-color:var(--white)}
.edit-panel .pw-row{display:flex;gap:8px}
.edit-panel .pw-row input{flex:1;min-width:0}
.edit-divider{display:flex;align-items:center;gap:10px;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white-faint)}
.edit-divider::after{content:'';flex:1;height:1px;background:var(--glass-border)}
.edit-divider em{order:2;font-style:normal;font-weight:500;letter-spacing:.04em;text-transform:none}
.edit-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;padding-top:2px}
/* These beat style.css's "td button" rule, which was turning Save into white-on-clear */
.edit-panel button.edit-cancel,.edit-panel button.btn-red{min-height:44px;margin:0;padding:0 16px;border-radius:999px;font-size:.9rem;font-weight:600}
.edit-panel button.edit-cancel{background:transparent;color:var(--white);border:1px solid var(--glass-border)}
.edit-panel button.edit-cancel:hover:not(:disabled){background:var(--glass-bg-strong);border-color:#555;color:var(--white)}
.edit-panel button.btn-red{background:var(--red);border:1px solid var(--red);color:#fff}
.edit-panel button.btn-red:hover:not(:disabled){background:var(--red-bright);border-color:var(--red-bright);color:#fff}
@media(max-width:640px){
  .edit-panel{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-height:82vh;overflow:auto}
}

.edit-static{margin:0;padding:10px 14px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-bg-strong);font-size:.92rem;color:var(--white-dim)}
.edit-panel .select-wrap{max-width:none}
/* A card that opens from a button on the left edge opens rightwards, not off-screen */
.edit-details.pop-left{margin-left:0}
.edit-details.pop-left .edit-panel{right:auto;left:0}
@media(max-width:640px){.edit-details.pop-left .edit-panel{left:12px}}

/* Pager */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:20px}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-bg);color:var(--white-dim);font-size:.9rem;font-weight:600}
.pager-btn:hover{text-decoration:none;color:var(--white);border-color:#555}
.pager-btn.active{background:var(--red);border-color:var(--red);color:#fff}
.pager-gap{color:var(--white-faint)}
.pager-count{margin:10px 0 0;text-align:center;font-size:.8rem;color:var(--white-faint)}

/* Stage tiles (replace the pill chips) */
.stage-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:6px 0 22px}
.tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:12px 14px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-bg);color:var(--white-dim);transition:border-color .15s ease,background .15s ease}
.tile:hover{text-decoration:none;border-color:#555;color:var(--white)}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--white-faint)}
.tile-n{font-size:1.4rem;font-weight:700;line-height:1;color:var(--white);letter-spacing:-.02em}
.tile-l{font-size:.74rem;font-weight:500;line-height:1.2}
.tile.attention .tile-n{color:var(--red-bright)}
.tile.active{border-color:var(--red);background:var(--red-tint);color:var(--white)}
.tile.active .tile-top{color:var(--red-bright)}
.tile.active .tile-n{color:var(--red-bright)}
@media(max-width:1100px){.stage-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){
  .stage-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tile-all{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between}
  .tile-all .tile-top{order:2;gap:12px;flex-direction:row-reverse}
  .tile{padding:11px 12px}
}

/* The dark area behind the mobile sidebar is a <button>. The global button hover/active
   colour was painting it solid red when tapped, so pin it to the dim overlay in every state. */
button.sidebar-overlay,
button.sidebar-overlay:hover:not(:disabled),
button.sidebar-overlay:active:not(:disabled),
button.sidebar-overlay:focus{background:rgba(0,0,0,.55);border:0;transform:none;outline:none}

.tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--red-tint);color:var(--red-bright);font-size:.66rem;font-weight:700;letter-spacing:.04em;vertical-align:middle}

/* ---------- Brand colours ---------- */
[data-brand="epson"]{--brand:#5B9BFF;--brand-bg:rgba(91,155,255,.16)}
[data-brand="canon"]{--brand:#FF9A4D;--brand-bg:rgba(255,154,77,.16)}
[data-brand="hp"]{--brand:#2CC6DD;--brand-bg:rgba(44,198,221,.16)}
[data-brand="brother"]{--brand:#B79CFF;--brand-bg:rgba(183,156,255,.16)}
:root[data-theme="light"] [data-brand="epson"]{--brand:#1F6FEB;--brand-bg:rgba(31,111,235,.12)}
:root[data-theme="light"] [data-brand="canon"]{--brand:#D2610F;--brand-bg:rgba(210,97,15,.12)}
:root[data-theme="light"] [data-brand="hp"]{--brand:#0A8DA3;--brand-bg:rgba(10,141,163,.12)}
:root[data-theme="light"] [data-brand="brother"]{--brand:#6D4BDB;--brand-bg:rgba(109,75,219,.12)}

.brand-tile{display:inline-flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  background:var(--brand-bg,var(--glass-bg-strong));color:var(--brand,var(--white-dim));font-size:.74rem;font-weight:700;letter-spacing:.04em}
.job-model{display:flex;align-items:center;gap:12px}

/* Model dropdown: brand row, brand headings, brand-coloured rows */
.combo .combo-menu.has-brands::before{display:none}
.combo .combo-menu .combo-brandbar{position:sticky;top:-6px;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:6px;
  margin:-6px -6px 6px;padding:10px;border-bottom:1px solid var(--glass-border);border-radius:14px 14px 0 0;background:var(--black-soft);list-style:none}
.combo .combo-menu .brand-chip{min-width:0;min-height:34px;margin:0;padding:0 3px;border:1px solid var(--glass-border);border-radius:9px;
  background:transparent;color:var(--white-dim);font-size:.74rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo .combo-menu .brand-chip:hover:not(:disabled){background:var(--brand-bg,var(--glass-bg-strong));border-color:var(--brand,#666);color:var(--brand,var(--white))}
.combo .combo-menu .brand-chip.active{background:var(--brand-bg,var(--red-tint));border-color:var(--brand,var(--red));color:var(--brand,var(--red-bright))}
.combo .combo-menu .combo-group{display:flex;align-items:center;gap:8px;margin:10px 4px 4px;padding:0 8px;list-style:none;
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand,var(--white-faint))}
.combo .combo-menu .combo-group::after{content:'';order:2;flex:1;height:1px;background:var(--glass-border)}
.combo .combo-menu .combo-group em{order:3;font-style:normal;font-weight:600;letter-spacing:.04em;color:var(--white-faint)}
.combo .combo-menu .combo-group[hidden]{display:none!important}
.combo .combo-menu .combo-option::before{content:attr(data-initial);display:flex;align-items:center;justify-content:center;
  background:var(--brand-bg,var(--glass-bg-strong));color:var(--brand,var(--white-dim));font-size:.7rem;font-weight:700;letter-spacing:.04em}
.combo .combo-menu .combo-option:hover::before,.combo .combo-menu .combo-option.active::before{background-color:var(--brand-bg,var(--glass-bg-strong));filter:brightness(1.3)}
.combo .combo-menu .brand-chip:not([data-brand=""])::before{content:'';display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--brand,var(--white-faint));vertical-align:1px}

/* ---------- Quotations ---------- */
.quote-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:640px){.quote-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.quote-tiles .tile-all{grid-column:auto}}
.quote-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.quote-actions .btn-red,.quote-actions .btn-ghost{cursor:pointer}

/* The document is always a white sheet, in both themes, like the paper copy. */
.quote-doc{--white:#111;--white-dim:#555;--white-faint:#7A7A7A;--glass-border:#E2E2E2;--glass-bg-strong:#F5F5F5;
  max-width:780px;padding:36px;border:1px solid #E2E2E2;border-radius:16px;background:#fff;color:#111}
.quote-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:20px;border-bottom:2px solid #111}
.quote-brand{display:flex;align-items:center;gap:12px}
.quote-brand strong{display:block;font-size:1.15rem;letter-spacing:-.01em}
.quote-brand span:not(.yt-logo-mark){font-size:.78rem;color:#555}
.quote-title{text-align:right;display:flex;flex-direction:column;gap:2px;font-size:.85rem;color:#555}
.quote-title h2{margin:0;font-size:1.5rem;letter-spacing:.12em;color:#111}
.quote-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin:22px 0}
.quote-meta small,.quote-notes small{display:block;margin-bottom:4px;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7A7A7A}
.quote-meta b{display:block;font-size:.98rem;font-weight:600}
.quote-meta span{font-size:.82rem;color:#555}
.quote-notes{margin:0 0 20px;padding:14px 16px;border-radius:12px;background:#F5F5F5}
.quote-notes p{margin:0;font-size:.9rem}
.quote-table{width:100%;margin:0 0 6px;font-size:.9rem}
.quote-table th{padding:10px 8px;border-bottom:1px solid #111;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#555}
.quote-table td{padding:11px 8px;border-bottom:1px solid #E2E2E2;white-space:normal}
.quote-table .num{text-align:right;white-space:nowrap}
.quote-table tbody tr:hover td{background:transparent}
.quote-table tfoot td{padding:12px 8px;border:0}
.quote-table .grand td{border-top:2px solid #111;font-size:1.1rem;font-weight:700}
.quote-table .paid td{padding-top:2px;font-size:.78rem;color:#7A7A7A}
.quote-foot{display:grid;grid-template-columns:2fr 1fr;gap:36px;margin-top:48px;font-size:.75rem;color:#7A7A7A}
.quote-foot .sig{display:block;height:34px;margin-bottom:6px;border-bottom:1px solid #999}
@media(max-width:640px){.quote-doc{padding:20px 16px}.quote-head{flex-direction:column}.quote-title{text-align:left}}
@media print{
  .sidebar,.yt-header,.page-header,.no-print,#scroll-top-btn,#scroll-progress{display:none!important}
  .app-shell.with-sidebar{margin:0!important;padding:0!important}
  body,html{background:#fff!important}
  .quote-doc{max-width:none;padding:0;border:0;border-radius:0}
}

/* ---------- Quotation pages ---------- */
.btn-sm{min-height:36px;padding:0 14px;font-size:.8rem}
.wait-badge{padding:3px 10px;border-radius:8px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);font-size:.72rem;font-weight:600;color:var(--white-dim);white-space:nowrap}
.job-foot a.btn-red,.job-foot a.btn-ghost{position:relative;z-index:2}
.tile-v{font-size:.72rem;color:var(--white-faint)}

/* ---------- For Quotation: urgency, filters, sort ---------- */
.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles-3 .tile-l{font-size:.68rem}}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 18px}
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--glass-border);border-radius:11px;background:var(--glass-bg)}
.seg a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:8px;font-size:.8rem;font-weight:600;color:var(--white-dim);white-space:nowrap}
.seg a:hover{text-decoration:none;color:var(--white)}
.seg a.active{background:var(--red-tint);color:var(--red-bright)}

.wait-badge.tier-ok{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.35);color:#34D399}
.wait-badge.tier-warn{background:rgba(245,181,68,.12);border-color:rgba(245,181,68,.4);color:#F5B544}
.wait-badge.tier-late{background:var(--red-tint);border-color:rgba(229,57,53,.5);color:var(--red-bright)}
:root[data-theme="light"] .wait-badge.tier-ok{color:#0F7A55}
:root[data-theme="light"] .wait-badge.tier-warn{color:#9A6200}

.wait-meter{display:grid;gap:7px}
.wait-meter-top{display:flex;justify-content:space-between;gap:8px;font-size:.76rem;color:var(--white-dim)}
.wait-meter-top strong{font-weight:600;color:var(--white)}
.wait-track{height:6px;border-radius:999px;background:var(--glass-bg-strong);overflow:hidden}
.wait-track span{display:block;height:100%;border-radius:inherit;background:#34D399}
.wait-meter.tier-warn .wait-track span{background:#F5B544}
.wait-meter.tier-late .wait-track span{background:var(--red)}
.wait-meter.tier-late .wait-meter-top strong{color:var(--red-bright)}

.tel-link{position:relative;z-index:2;color:var(--white)}
.tel-link:hover{color:var(--red-bright);text-decoration:none}
.unassigned{display:inline-flex;align-items:center;gap:8px;color:var(--white-faint)}
.unassigned::before{content:'';width:22px;height:22px;border:1.5px dashed var(--white-faint);border-radius:50%}
.yt-search input{box-sizing:border-box}
.toolbar .yt-search{min-width:220px}
@media(max-width:640px){.toolbar .yt-search{flex:1 1 100%;max-width:none!important}.toolbar .seg{width:100%}.toolbar .seg a{flex:1;justify-content:center}}

/* Homepage: what we repair */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.svc{padding:16px;border:1px solid var(--glass-border);border-radius:14px;background:var(--glass-bg-strong)}
.svc-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:10px;border-radius:12px;background:var(--red-tint);color:var(--red-bright)}
.svc h3{margin:0 0 4px;font-size:1rem}
.svc p{margin:0;font-size:.85rem;line-height:1.5;color:var(--white-dim)}
.svc-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;border-top:1px solid var(--glass-border)}
.svc-meta small{display:block;margin-bottom:2px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white-faint)}
.svc-meta b{font-weight:600}
@media(max-width:760px){.svc-grid{grid-template-columns:1fr}}

/* Homepage: visit the shop */
.visit-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px;margin:18px 0}
.visit-item{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--glass-border);border-radius:14px;background:var(--glass-bg-strong)}
.visit-item .svc-ico{flex:none;margin:0}
.visit-item small{display:block;margin-bottom:3px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white-faint)}
.visit-item address{font-style:normal;font-size:.9rem;line-height:1.5}
.visit-item b{font-weight:600;line-height:1.5}
.visit-actions{display:flex;flex-wrap:wrap;gap:10px}
.pub-foot a{color:inherit}
@media(max-width:760px){.visit-grid{grid-template-columns:1fr}.visit-actions .btn-red,.visit-actions .btn-ghost{flex:1 1 100%}}

.stage-tracker{margin:4px 0 18px}
.stage-tracker-note{margin:8px 0 0;font-size:.78rem;color:var(--white-dim)}

/* Staff records the customer's decision on a Pending Approval job */
.staff-decision{margin:0 0 20px;padding:16px 18px;border:1px solid var(--border,rgba(255,255,255,.12));border-radius:14px;background:var(--surface-2,rgba(255,255,255,.04))}
.staff-decision h3{margin:0 0 12px;font-size:16px}
.staff-decision .sd-channel{display:flex;flex-direction:column;gap:6px;max-width:260px;margin-bottom:14px;font-size:13px}
.staff-decision select{padding:10px 12px;border-radius:10px}
.staff-decision .sd-actions{display:flex;flex-wrap:wrap;gap:12px}
.staff-decision .sd-actions button{min-height:44px;padding:0 22px;border-radius:999px;font-weight:600;cursor:pointer}
.staff-decision .sd-pull{background:transparent;color:inherit;border:1px solid var(--border,rgba(255,255,255,.25))}
.staff-decision .sd-pull:hover{border-color:#E53935;color:#E53935}

/* Read-only parts list on the job page */
.parts-view{margin:0 0 20px}
.parts-view h4{margin:18px 0 8px;font-size:15px}
.parts-view .pv-notes{margin:0;line-height:1.55}
.pv-wrap{overflow-x:auto;border:1px solid var(--border,rgba(255,255,255,.12));border-radius:12px}
.pv-table{width:100%;border-collapse:collapse;font-size:14px}
.pv-table th,.pv-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border,rgba(255,255,255,.08))}
.pv-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.pv-table .num{text-align:right;white-space:nowrap}
.pv-table tfoot td{border-bottom:0;opacity:.85}
.pv-table .pv-grand td{font-weight:700;opacity:1;border-top:1px solid var(--border,rgba(255,255,255,.2))}

/* Condition photos */
.photos-section{margin:0 0 22px}
.photos-section h4{margin:18px 0 10px;font-size:15px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-bottom:14px}
.photo-item{margin:0;border:1px solid var(--border,rgba(255,255,255,.12));border-radius:12px;overflow:hidden;background:var(--surface-2,rgba(255,255,255,.04))}
.photo-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.photo-item figcaption{padding:8px 10px 4px;font-size:12px;opacity:.85;overflow-wrap:anywhere}
.photo-item form{padding:0 10px 10px}
.photo-del{background:transparent;border:0;color:#E53935;font-size:12px;cursor:pointer;padding:4px 0;min-height:32px}
.photo-upload{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.photo-upload input[type=text]{flex:1 1 200px;min-width:0}
.photo-upload button{min-height:44px;padding:0 20px;border-radius:999px;font-weight:600;cursor:pointer}
.photo-note{display:block;margin-top:8px;opacity:.65}


/* History page (closed job orders) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hist-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0 0 14px}
.hist-filters .hist-search{flex:1 1 280px;max-width:420px;margin:0;display:block}
.hist-month{display:flex;flex-direction:column;gap:4px;font-size:.75rem;color:var(--white-dim)}
.hist-month input{height:40px;margin:0;padding:0 12px;border-radius:12px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);color:var(--white);font:inherit}
.hist-filters .btn-sm{min-height:40px;display:inline-flex;align-items:center}
.hist-export{margin-left:auto}
.hist-wrap{overflow-x:auto;border:1px solid var(--glass-border);border-radius:16px;background:var(--glass-bg)}
.hist-table{width:100%;border-collapse:collapse;font-size:.9rem}
.hist-table th,.hist-table td{padding:12px 14px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--glass-border)}
.hist-table th{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--white-faint);white-space:nowrap}
.hist-table tbody tr:last-child td{border-bottom:0}
.hist-table tbody tr:hover{background:rgba(255,255,255,.03)}
.hist-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.hist-table td small{display:block;margin-top:2px;font-size:.76rem;color:var(--white-dim)}
.hist-table .job-link{font-weight:600;color:var(--red-bright);white-space:nowrap}
.hist-go{text-align:right}
.hist-go .btn-sm{min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}
.hist-back{display:inline-flex;align-items:center;min-height:44px;color:var(--white-dim);font-size:.9rem}
.hist-back:hover{color:var(--white);text-decoration:none}
.hist-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.hist-head{margin-bottom:18px}
.hist-jo{margin-right:12px;font-size:1.5rem;font-weight:700;letter-spacing:.01em}
.hist-sub{margin:8px 0 0;color:var(--white-dim)}
.hist-sub b{color:var(--white);font-weight:600}
.hist-detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.hist-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.hist-h{margin:0 0 12px;font-size:1rem}
.hist-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 22px;margin:0}
.hist-dl dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--white-faint)}
.hist-dl dd{margin:3px 0 0;color:var(--white);overflow-wrap:anywhere}
.hist-note{margin:12px 0 0;font-size:.82rem;color:var(--white-dim)}
@media(max-width:900px){.hist-detail{grid-template-columns:1fr}}
@media(max-width:760px){
  .hist-wrap{border:0;background:transparent;overflow:visible}
  .hist-table thead{display:none}
  .hist-table,.hist-table tbody,.hist-table tr,.hist-table td{display:block;width:100%}
  .hist-table tr{margin-bottom:12px;padding:6px 14px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px}
  .hist-table td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;text-align:right;border-bottom:1px solid var(--glass-border)}
  .hist-table td::before{content:attr(data-label);flex:0 0 auto;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--white-faint);text-align:left}
  .hist-table td.hist-go{border-bottom:0;padding-top:12px}
  .hist-table td.hist-go::before{content:none}
  .hist-table td.hist-go .btn-sm{width:100%;justify-content:center}
  .hist-export{margin-left:0}
}
/* Print: job record on A4. Light palette, letterhead, stamp, ruled tables, signature lines. */
.print-only{display:none}
@media print{
  :root,:root[data-theme],:root[data-theme="light"],:root[data-theme="dark"],body{
    --black:#fff;--black-soft:#fff;--white:#111;--white-dim:#444;--white-faint:#555;
    --glass-bg:#fff;--glass-bg-strong:#fff;--glass-border:#bdbdbd;--red:#c62828;--red-bright:#c62828;
  }
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important}
  html,body{background:#fff!important;color:#111!important;font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif;font-size:13px;line-height:1.5}
  .sidebar,#sidebar,.yt-header,.page-header,#theme-toggle,#scroll-top-btn,#scroll-progress,.hist-tools,.skip-link,.floating-contact-wrap,.toast-stack,.copy-jo{display:none!important}
  body:has(.yt-header){padding-top:0!important}
  .app-shell,.app-shell.with-sidebar{margin:0!important;padding:0!important;max-width:none!important;width:auto!important}
  main#main-content{padding:0!important;margin:0!important;max-width:none!important}
  .print-only{display:block}

  /* Letterhead */
  .print-letterhead{display:flex!important;justify-content:space-between;align-items:flex-start;gap:20px;padding:0 0 14px;margin:0 0 16px;border-bottom:2px solid #111}
  .pl-brand{display:flex;gap:12px;align-items:flex-start}
  .pl-mark{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;background:#c62828;color:#fff;flex:none}
  .pl-brand strong{display:block;font-size:19px;letter-spacing:.04em;line-height:1.2}
  .pl-brand span{display:block;font-size:13px;color:#333}
  .pl-brand small,.pl-meta small{display:block;font-size:11.5px;color:#555}
  .pl-meta{text-align:right}
  .pl-meta strong{display:block;font-size:11.5px;letter-spacing:.14em;color:#555}

  /* Cards become plain sections */
  .glass-card,.aside-card{background:none!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important;backdrop-filter:none!important}
  .hist-detail{display:block}
  .hist-col{display:block;gap:0}
  aside.hist-col{margin-top:4px}
  .hist-col>section{margin-bottom:16px!important}
  .hist-h{display:none}
  .aside-card h3{margin:0 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#555}

  /* JO number and status stamp */
  .hist-head{display:block!important;margin:0 0 16px!important}
  .hist-head>div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:16px}
  .hist-jo{display:block;margin:0;font-family:'IBM Plex Mono','Courier New',monospace;font-size:40px;font-weight:600;line-height:1.05;letter-spacing:-.01em;color:#111}
  .hist-head .pill{background:none!important;border:2px solid #c62828!important;color:#c62828!important;border-radius:6px!important;padding:5px 16px!important;font-size:16px!important;font-weight:700;letter-spacing:.16em}
  .hist-head .pill .dot{display:none}
  .hist-sub{margin:6px 0 0!important;color:#333!important;font-size:12.5px}
  .hist-sub b{color:#111}

  /* Facts: ruled three-column grid */
  .hist-dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #111;border-bottom:1px solid #111;margin:0 0 16px}
  .hist-dl>div{padding:9px 12px 9px 0}
  .hist-dl dt{font-size:11.5px;letter-spacing:.08em;color:#555}
  .hist-dl dd{margin:2px 0 0;font-size:13.5px;font-weight:600;color:#111}
  .hist-dl a{color:#111;text-decoration:none}

  /* Diagnosis and parts */
  .parts-view h4{margin:12px 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#555}
  .parts-view .pv-notes{font-size:14px;line-height:1.55;color:#111}
  .pv-wrap{border:0!important;border-radius:0!important;overflow:visible!important}
  .pv-table{font-size:13px}
  .pv-table th{padding:7px 0;font-size:11.5px;letter-spacing:.06em;color:#333;opacity:1;border-bottom:2px solid #111}
  .pv-table td{padding:9px 0;border-bottom:1px solid #bdbdbd;color:#111}
  .pv-table tfoot td{opacity:1;color:#333;padding:6px 0;border-bottom:0}
  .pv-table .pv-grand td{border-top:2px solid #111;color:#111;font-size:17px;font-weight:700}
  .hist-note{font-size:11.5px;color:#555}
  .photo-grid{grid-template-columns:repeat(4,1fr)!important}
  .photo-item img{max-height:120px;object-fit:cover}

  /* Activity log */
  aside.hist-col{break-inside:avoid}
  .activity-feed{margin:0;padding:0;list-style:none;border-top:1px solid #111}
  .activity-feed li{display:block;padding:6px 0;border-bottom:1px solid #bdbdbd;break-inside:avoid}
  .activity-dot{display:none}
  .activity-line{font-size:12.5px;color:#111}
  .activity-meta{font-size:11.5px;color:#555}
  .aside-empty{color:#555}

  /* Signature lines and footer line */
  .print-sign{margin-top:26px;break-inside:avoid}
  .ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .ps-line{display:block;height:34px;border-bottom:1px solid #111}
  .ps-grid small{display:block;margin-top:5px;font-size:11.5px;color:#555}
  .ps-foot{margin:18px 0 0;padding-top:8px;border-top:1px solid #bdbdbd;font-size:11.5px;color:#555}
}

/* ===== Stage tiles, state badges, tracker sub-labels (revamp) ===== */
:root{--ok:#4CCB8A;--ok-bg:rgba(76,203,138,.13);--ok-line:rgba(76,203,138,.38);
      --warn:#F5B94D;--warn-bg:rgba(245,185,77,.12);--warn-line:rgba(245,185,77,.38)}
:root[data-theme="light"]{--ok:#17703F;--ok-bg:#E4F5EC;--ok-line:#B5E0C8;
      --warn:#855300;--warn-bg:#FFF1D1;--warn-line:#EFD494}

.stage-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:6px 0 24px}
.tile{position:relative;justify-content:space-between;gap:8px;min-height:92px;padding:14px 14px 13px;border-radius:14px;
      transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.tile:hover{border-color:var(--red);transform:translateY(-1px);color:var(--white)}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tile-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
          background:var(--glass-bg-strong);border:1px solid var(--glass-border);color:var(--white-dim);flex:0 0 auto}
.tile-n{font-size:1.65rem;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile-l{font-size:.82rem;font-weight:600;line-height:1.25;color:var(--white)}
.tile.attention{border-color:rgba(229,57,53,.45)}
.tile.attention .tile-ico{color:var(--red-bright);border-color:rgba(229,57,53,.4);background:var(--red-tint)}
.tile.active{border-color:var(--red);background:var(--red-tint)}
.tile.active .tile-ico{background:var(--red);border-color:var(--red);color:#fff}
.tile.active .tile-n{color:var(--red-bright)}

.tile-meter{display:block;height:5px;border-radius:99px;background:var(--glass-border);overflow:hidden}
.tile-meter i{display:block;height:100%;border-radius:99px;background:var(--ok);transition:width .3s ease}
.tile-sub{display:block;font-size:.75rem;line-height:1.3;color:var(--white-dim);font-variant-numeric:tabular-nums}
.tile-sub b{font-weight:700;color:var(--ok)}
.tile-sub b.is-wait{color:var(--warn)}
.tile.active .tile-sub{color:var(--white-dim)}

.job-state{display:inline-flex;flex-direction:column;align-items:flex-end;gap:5px}
.done-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 7px;border-radius:999px;border:1px solid;
            font-size:.72rem;font-weight:600;line-height:1.5;white-space:nowrap}
.done-badge.is-done{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.done-badge.is-pending{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}

.stage-sub{display:block;margin-top:3px;font-size:.72rem;line-height:1.25;color:var(--white-faint)}
.stage-step.current .stage-sub{color:var(--white-dim)}
.stage-step.declined .stage-sub{color:var(--red-bright)}

@media(max-width:1100px){.stage-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
  .stage-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile-all{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between}
  .tile-all .tile-top{order:2;flex-direction:row-reverse;gap:12px}
  .stage-tiles .tile:last-child{grid-column:1 / -1}
  .tile{padding:12px}
  .tile-n{font-size:1.45rem}
}
@media(prefers-reduced-motion:reduce){.tile,.tile-meter i{transition:none}.tile:hover{transform:none}}

/* Brand logos (files in /logos). A white tile keeps colour logos readable in dark and light themes. */
.brand-tile.has-logo{background:#fff;border:1px solid var(--glass-border);padding:4px}
.brand-tile.has-logo img{display:block;width:100%;height:100%;object-fit:contain}