/* =========================================================================
   ServiceConnect — "Apothecary" theme (theme-aesop.css)
   -------------------------------------------------------------------------
   A quiet, editorial reskin inspired by Aesop's design language:
     • warm parchment surfaces, near-black charcoal ink
     • hairline borders instead of shadows; square corners throughout
     • a classical serif for the wordmark and page titles,
       a plain grotesque for the interface, a soft mono for data
     • colour is reserved for meaning (pass / fail / attention), and even
       then it is muted: sage, clay, ochre — apothecary shelf colours
   Loads LAST, so it wins by cascade order without touching the app CSS.
   ========================================================================= */

:root{
  /* palette */
  --paper:#F4F2E9;            /* page */
  --panel:#EDEAE0;            /* sidebar / deep surfaces */
  --card:#FBFAF3;             /* raised surfaces */
  --inset:#ECE8DA;            /* chips, wells */
  --hairline:#D8D3C3;
  --hairline-soft:#E5E1D3;
  --ink:#26241E;
  --ink-dim:#6B665A;
  --ink-faint:#9B9583;

  --sage:#4F6448;   --sage-tint:#E7EAE0;
  --clay:#97402B;   --clay-tint:#F0E4DE;
  --ochre:#8F6C29;  --ochre-tint:#F0EAD9;
  --slate:#4A5A66;  --slate-tint:#E4E8EA;

  /* remap the app's own variables */
  --sb:var(--panel);
  --sb2:var(--panel);
  --accent:var(--ink);
  --acl:var(--inset);
  --acd:#000000;
  --danger:var(--clay);
  --warn:var(--ochre);
  --bg:var(--paper);
  --txt:var(--ink);
  --muted:var(--ink-dim);
  --light:var(--ink-faint);
  --bdr:var(--hairline);
  --bdr2:var(--hairline-soft);
  --r:0;
  --rl:0;
  --font:'Instrument Sans','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono','Consolas',ui-monospace,monospace;
  --shadow:none;
  --shadow-md:0 24px 60px rgba(38,36,30,.14);
}

html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── sidebar: dark console → parchment index ──────────────────────────── */
.sb{background:var(--panel);border-right:1px solid var(--hairline)}
.sb-logo{padding:22px 18px 16px;border-bottom:1px solid var(--hairline-soft)}
.sb-logo-mark{background:var(--ink);border-radius:0}
.sb-logo-mark svg{fill:var(--paper)}
.sb-logo-name{color:var(--ink);font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.01em}
.sb-logo-sub{color:var(--ink-faint);letter-spacing:.22em}
.sb-lbl{color:var(--ink-faint);letter-spacing:.18em;font-size:9px}
.sb-item{color:var(--ink-dim);border-left:2px solid transparent}
.sb-item:hover{background:rgba(38,36,30,.05);color:var(--ink)}
.sb-item.active{background:rgba(38,36,30,.07);color:var(--ink);border-left-color:var(--ink)}
.sb-badge{background:transparent;color:var(--ink-dim);border:1px solid var(--hairline);border-radius:0}
.sb-item.active .sb-badge{color:var(--ink);border-color:var(--ink-dim)}
.sb-un{color:var(--ink)}
.sb-ur{color:var(--ink-faint)}
.sb-fi{color:var(--ink-dim)}
.sb-fi:hover{color:var(--ink);background:rgba(38,36,30,.05)}
.sb-logout{color:var(--ink-faint)}
.sb-logout:hover{color:var(--clay)}
.sb-toggle{color:var(--ink-faint);border:1px solid var(--hairline);background:var(--card)}
.sb-av,.profile-photo{border-radius:0;background:var(--ink);color:var(--paper)}
.sb-av img,.profile-photo img{border-radius:0}

/* ── page chrome & titles ─────────────────────────────────────────────── */
.page-h h1,.page h1,h1,h2,h3,.mo-card h3,#mo-asset-title,#mo-tpl-title{font-family:var(--serif);font-weight:500;letter-spacing:.005em}
.page-h p{color:var(--ink-dim)}

/* ── buttons: hairline rectangles, charcoal fill on hover ─────────────── */
.btn{border-radius:0;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-weight:500;letter-spacing:.02em;transition:background .15s ease,color .15s ease}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover i{color:var(--paper)}
.btn.bp{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.bp:hover{background:#3B382F;border-color:#3B382F}
.btn[style*="color:var(--danger)"],.btn[style*="color: var(--danger)"]{border-color:var(--clay)}
.btn:disabled{opacity:.4}

/* ── tables: ruled paper, not zebra stripes ───────────────────────────── */
thead th{background:transparent;color:var(--ink-dim);font-size:9.5px;letter-spacing:.16em;
  border-bottom:1px solid var(--ink);padding:10px 12px}
tbody td{border-bottom:1px solid var(--hairline-soft)}
tbody tr:hover{background:rgba(38,36,30,.03)}
.tdl{color:var(--ink);font-weight:600}

/* ── cards / stats / panels ───────────────────────────────────────────── */
.box,.up-card,.summary-stat,.det-cell{background:var(--card);border-color:var(--hairline)}
.stat-val{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:0}
.stat-lbl{letter-spacing:.16em;font-size:9.5px}

/* ── inputs ───────────────────────────────────────────────────────────── */
input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],select,textarea{
  background:var(--card);border:1px solid #C7C1AE;border-radius:0;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--ink)!important;box-shadow:none!important;outline:none}
::placeholder{color:var(--ink-faint)}

/* ── badges: outlined, small caps, square ─────────────────────────────── */
.badge{border-radius:0;background:transparent;border:1px solid currentColor;
  text-transform:uppercase;letter-spacing:.1em;font-size:9px;font-weight:600;padding:3px 8px}
.ba{background:transparent;color:var(--ochre)}
.bb{background:transparent;color:var(--slate)}
.bg{background:transparent;color:var(--sage)}
.bgy{background:transparent;color:var(--ink-dim)}
.br{background:transparent;color:var(--clay)}

/* ── tabs ─────────────────────────────────────────────────────────────── */
.tab{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--ink-faint)}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--ink)}

/* ── modals ───────────────────────────────────────────────────────────── */
.mo{background:rgba(38,36,30,.38)}
.mo-card,.mo>div{border-radius:0;border:1px solid var(--hairline);box-shadow:var(--shadow-md)}

/* ── toasts ───────────────────────────────────────────────────────────── */
.tmsg{background:var(--ink);color:var(--paper);border-radius:0;box-shadow:0 16px 40px rgba(38,36,30,.25);
  letter-spacing:.01em}

/* ── sync pill + status dots ──────────────────────────────────────────── */
.sync-pill{border-radius:0;border:1px solid var(--hairline);text-transform:uppercase;
  letter-spacing:.1em;font-size:9px}
.sync-pill.online{background:transparent;color:var(--sage)}
.sync-pill.online .dot{background:var(--sage)}
.sync-pill.offline{background:transparent;color:var(--ochre)}
.sync-pill.offline .dot{background:var(--ochre)}
.sync-pill.syncing{background:transparent;color:var(--slate)}
.sync-pill.syncing .dot{background:var(--slate)}
.sync-pill .pending{background:var(--inset);border-radius:0}

/* ── login: the Aesop moment ──────────────────────────────────────────── */
#login-overlay{background:var(--paper)}
.login-card{background:var(--paper);border:none;border-radius:0;box-shadow:none;max-width:380px}
.login-card>div:first-child{border-bottom:1px solid var(--ink)!important}
.login-logo{background:var(--ink);border-radius:0}
.login-logo svg{fill:var(--paper)}
.login-title{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:.01em}
.login-demo{background:transparent;border:1px solid var(--hairline);border-radius:0}
#login-err{color:var(--clay)}

/* ── service mode header (charcoal bar → parchment rule) ──────────────── */
.svc-top{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--ink)}
.svc-top .svc-tag{color:var(--ink);font-family:var(--serif);font-weight:600;font-size:17px}
.svc-top *{color:var(--ink)}
.svc-top .btn{border-color:var(--ink)}
.svc-saveind{color:var(--ink-dim)!important}
.svc-stepcard{background:var(--card);border-color:var(--hairline);border-radius:0}
.svc-stepcard.done{border-left:2px solid var(--sage)}
.svc-stepnum,.svc-jump-dot,.step-num,.unit-tag{background:var(--inset);color:var(--ink-dim);border-radius:0}
.svc-jump-dot.done{background:var(--sage);color:var(--paper)}
.resp-pill{border-radius:0;border:1px solid var(--hairline);background:var(--card)}
.resp-pill.on,.rc-btn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rc-btn{border-radius:0}
.rc-measure .unit{background:var(--inset);border-radius:0}
.svc-prog-fill,.svc-prog-bar>div{background:var(--ink)!important}

/* pass / fail keep meaning, in shelf colours */
.rc-btn[data-v="Passed"].on,.rc-btn[data-v="Yes"].on{background:var(--sage);border-color:var(--sage)}
.rc-btn[data-v="Failed"].on,.rc-btn[data-v="No"].on{background:var(--clay);border-color:var(--clay)}

/* ── toggles keep their round knob (it's a control, not decoration) ───── */
.perm-check{background:#C7C1AE}
.perm-check.on{background:var(--ink)}
.toggle.on{background:var(--ink)}

/* ── misc chips & wells the app hardcodes ─────────────────────────────── */
.audit-tag{border-radius:0}
.doc-upload-zone,.imp-dropzone{border-radius:0;border:1px dashed #B9B29C;background:var(--card)}
.doc-icon,.up-ic,.mini-ic{border-radius:0}
.empty{color:var(--ink-faint)}

/* ── scrollbars ───────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#C7C1AE;border:3px solid var(--paper);border-radius:0}
::-webkit-scrollbar-track{background:transparent}

/* ── enhancements.js chrome (loader, load bar, recycle bin) ───────────── */
#auth-loader{background:var(--paper)!important;color:var(--ink)}
#auth-loader .mark{font-family:var(--serif)!important;color:var(--ink)!important;letter-spacing:.02em!important;font-size:24px!important}
#auth-loader .msg{color:var(--ink-dim)!important;text-transform:uppercase;letter-spacing:.18em;font-size:9.5px!important}
#auth-loader .ring{border-color:var(--hairline)!important;border-top-color:var(--ink)!important}
#load-bar{background:var(--ink)!important;box-shadow:none!important}
#sc-boot-banner{background:var(--clay)!important}

/* keep the printed service report untouched — it has its own styles */