/* Workspace visual system — dentist portal, Lab Studio, Administration.

   One set of surfaces, spacing and type for every signed-in screen, on
   the existing Ceram palette (aubergine ink, champagne accents, ivory
   canvas). Appearance only: nothing here changes what a control does.
   Loaded after the older workspace sheets so it settles their overlaps,
   and before mobile-app.css so the phone layout still has the last word. */

body.workplace{
  --ws-side:248px;
  --ws-top:58px;
  --ws-max:1360px;
  --ws-radius:14px;
  --ws-radius-sm:10px;
  --ws-canvas:#f7f5f2;
  --ws-panel:#fff;
  --ws-panel-soft:#faf8fb;
  --ws-line:#ebe5ee;
  --ws-line-strong:#dcd2e2;
  --ws-ink:#2d1142;
  --ws-muted:#6f6478;
  --ws-faint:#6b6075;          /* ≥4.5:1 on every light surface it sits on */
  --case-ink-faint:#6b6075;
  --ws-accent:#6c491d;
  --ws-shadow:0 1px 2px rgba(45,17,66,.04),0 10px 28px -20px rgba(45,17,66,.22);
  --ws-shadow-lift:0 2px 4px rgba(45,17,66,.05),0 18px 36px -20px rgba(45,17,66,.32);
  --ws-ease:cubic-bezier(.2,.7,.2,1);
  background:var(--ws-canvas);
}
body.workplace .workspace-content{background:none}

/* Small print (step names, timestamps, table headings, group labels)
   was a pale grey at ~3.6:1 — under the 4.5:1 floor for text this size.
   One accessible tone for all of it, which the dark theme redefines. */
.workplace :is(.ws-nav-group,.workspace-nav-label,.feed-time,.feed-day,.stat-card-meta,.notif-time,.notif-group,.station-oldest,
  .ws-search-label,.sec-note,.empty-state-text,.chart-empty,.draft-strip-body span,.analytic .eyebrow,.analytic .is-muted,.cc-owner,
  .attention-owner,.ar-meta,.lab-today-tile .m,.field-optional,.field-hint,.case-owner-eyebrow,.case-owner-time,.chat-empty,
  .jstep-label,.case-journey-label,.workspace-brand small){color:var(--ws-faint)}
.workplace .wf-hint-head span,.workplace .wf-hint-x,.workplace .wf-hint-foot,.workplace .wf-hint-mini button{color:#7a5f1f}
.workplace .admin-hero-primary .eyebrow-accent{color:#e3c99f}
.workplace .enq-chan.chan-whatsapp{color:#146c37}

/* ------------------------------------------------------------- shell */

@media(min-width:721px){
  /* The sidebar runs the full height at the left edge and carries the
     brand once; the top bar sits over the content only, as a slim header
     with the workspace name, search and notifications. The old layout
     showed the emblem twice and centred the shell on very wide screens. */
  body.workplace:has(.workspace-shell) .topbar{position:fixed;top:0;left:var(--ws-side);right:0;z-index:40;
    background:rgba(247,245,242,.84);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
    border-bottom:1px solid var(--ws-line)}
  body.workplace:has(.workspace-shell) .topbar-inner{height:var(--ws-top);min-height:var(--ws-top);padding:0 32px;max-width:none;margin:0}
  body.workplace:has(.workspace-shell) .topbar .brand-logo{display:block;width:32px;height:32px}
  body.workplace:has(.workspace-shell) .ws-appbar-title{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ws-muted)}
  body.workplace:has(.workspace-shell) .topbar .brand{text-decoration:none;flex:1}

  .workspace-shell{max-width:none;margin:0;grid-template-columns:var(--ws-side) minmax(0,1fr);min-height:100vh}
  .workspace-sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;padding:24px 16px 18px;gap:18px;
    background:#fff;border-right:1px solid var(--ws-line)}
  .workspace-content{padding:calc(var(--ws-top) + 32px) 40px 56px;min-height:100vh}
  .workspace-content>*{max-width:var(--ws-max);margin-inline:auto}
  .administration-content{max-width:var(--ws-max)}
  /* Long labels ("Case Tracking & Orders") truncate inside the sidebar
     instead of widening the menu past its edge on tablets. */
  .workspace-sidebar nav{grid-template-columns:minmax(0,1fr)}
  /* Anything pinned while scrolling clears the fixed top bar. */
  .prescription-inspector{top:calc(var(--ws-top) + 16px)}
}
@media(min-width:721px) and (max-width:1100px){
  body.workplace{--ws-side:212px}
  .workspace-content{padding:calc(var(--ws-top) + 24px) 24px 48px}
  body.workplace:has(.workspace-shell) .topbar-inner{padding:0 24px}
}
@media(min-width:1700px){
  body.workplace{--ws-side:264px;--ws-max:1480px}
}

/* ----------------------------------------------------------- sidebar */

.workspace-brand-row{padding:0 4px 16px;border-bottom:1px solid var(--ws-line);gap:12px}
.workspace-brand-row>.workspace-brand{flex:1 1 100%}
.workspace-brand-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.workspace-brand{font-size:17px;letter-spacing:.16em;gap:11px}
.workspace-brand small{font-size:11px;letter-spacing:.02em;color:var(--ws-faint);margin-top:2px}
.workspace-monogram{width:36px;height:40px}
.ws-home-btn{padding:6px 11px;font-size:11px;font-weight:600;background:var(--ws-panel-soft);border:1px solid var(--ws-line);color:var(--ws-ink)}
.ws-home-btn:hover{background:#f1ebf5;transform:none}
button.ws-home-btn{border:1px solid var(--ws-line)}
.workspace-sidebar nav{gap:2px}
.workspace-sidebar nav :is(a,button){min-height:40px;padding:9px 12px;border-radius:var(--ws-radius-sm);font-size:13px;font-weight:500;color:#5f5468}
.workspace-sidebar nav :is(a,button):hover{background:#f5f1f8;color:var(--ws-ink)}
.workspace-sidebar nav [aria-current=page]{background:var(--ws-ink);color:#fff;font-weight:600;box-shadow:0 6px 16px -8px rgba(45,17,66,.55)}
.workspace-sidebar nav [aria-current=page]:hover{background:#3b1d52;color:#fff}
.workspace-sidebar nav [aria-current=page] .ws-icon{color:#e8cf9f}
.workspace-sidebar .ws-nav-group{font-size:9.5px;letter-spacing:.16em;color:var(--ws-faint);padding:18px 12px 6px}
.ws-badge{background:#9a2944;font-size:10px;padding:3px 7px}
.workspace-sidebar nav [aria-current=page] .ws-badge{background:#e8cf9f;color:var(--ws-ink)}
.workspace-support{padding:14px 12px 4px;border-top:1px solid var(--ws-line);margin-top:auto}

/* ------------------------------------------------------- page headers */

.workplace .page-head{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin:0 0 28px}
.workplace .page-head>div{min-width:0;max-width:72ch}
.workplace .page-head h1,.workplace .welcome-card h1{font:500 clamp(26px,2.4vw,36px)/1.1 var(--font-accent)!important;letter-spacing:-.02em;color:var(--ws-ink);margin:8px 0 6px}
.workplace .page-head .lede{font-size:14px!important;color:var(--ws-muted);margin:0}
/* Admin tabs carried a stock "Manage X in one focused workspace" line. */
.workplace .page-head .lede-generic{display:none}
.workplace .eyebrow-accent{font-size:10.5px;letter-spacing:.16em;color:var(--ws-accent)}
/* The top bar already names the workspace and the heading names the
   page, so the "Administration / Overview" trail only repeated both. */
.workplace .workspace-context{display:none}
.workplace :is(.section-head,.sec-head){margin:30px 0 14px}
.workplace :is(.section-head,.sec-head) h2{font-size:19px;font-weight:650;letter-spacing:-.01em;color:var(--ws-ink)}

/* ------------------------------------------------------------ surfaces */

.workplace :is(.card,.case-card,.table-wrap,.review-panel,.wizard,.stat-card,.lab-today-tile,.pipe-stage,.chipstat,.role-pick,.action-required-row,.portal-hero){
  border:1px solid var(--ws-line);border-radius:var(--ws-radius);background:var(--ws-panel);box-shadow:var(--ws-shadow)}
.workplace :is(button.stat-card,.case-card[data-case-open],a.pipe-stage,.action-required-row,.role-pick:not(.role-pick-wide)){
  transition:border-color .18s var(--ws-ease),box-shadow .18s var(--ws-ease),transform .18s var(--ws-ease)}
@media(hover:hover){
  .workplace :is(button.stat-card,.case-card[data-case-open],a.pipe-stage,.action-required-row,.role-pick:not(.role-pick-wide)):hover{
    border-color:var(--ws-line-strong);box-shadow:var(--ws-shadow-lift);transform:translateY(-1px)}
}
.workplace .role-pick-wide{border:0;background:linear-gradient(125deg,#2d1142,#4a2d5c)}

/* Figures: one tile style everywhere. Enquiries, Products, Messages and
   Expenses used a separate gold strip with capitalised labels. */
.workplace .stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 24px;padding:0;
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.workplace .chipstat{min-width:0;padding:16px 18px;text-align:left;border:1px solid var(--ws-line)!important}
.workplace .chipstat b{font-size:28px;line-height:1.15;color:var(--ws-ink)}
.workplace .chipstat span{margin-top:4px;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ws-muted)}
.workplace :is(.stat-card,.lab-today-tile) .n{font-size:30px;letter-spacing:-.01em;color:var(--ws-ink)}
.workplace :is(.stat-card,.lab-today-tile) .l{font-size:12.5px;color:var(--ws-muted)}
.workplace :is(.stat-card,.lab-today-tile).tone-danger{border-top:3px solid #9a2944}
.workplace :is(.stat-card,.lab-today-tile).tone-gold{border-top:3px solid #b8945f}
.workplace .stat-card-icon{border-radius:10px}

/* Quick actions: calm tiles with an icon chip. */
.workspace-quick-actions{gap:12px}
.workspace-quick-actions button{min-height:56px;padding:12px 16px;border:1px solid var(--ws-line);border-radius:var(--ws-radius);background:#fff;
  box-shadow:var(--ws-shadow);font-size:13px;font-weight:600;color:var(--ws-ink);transition:border-color .18s,box-shadow .18s,transform .18s}
.workspace-quick-actions button .ws-icon{width:18px;height:18px;padding:7px;box-sizing:content-box;border-radius:9px;background:#f3edf7;color:#6a4680}
@media(hover:hover){.workspace-quick-actions button:hover{border-color:var(--ws-line-strong);box-shadow:var(--ws-shadow-lift);transform:translateY(-1px);background:#fff}}

/* New case · treatment panel. The toolbar holds a heading and two
   button groups (per-tooth treatments, whole-arch appliance) side by side,
   so the treatment group was squeezed to one column of five tall buttons
   next to a mostly empty appliance column. Stack the head above, give the
   treatments the full width, and run the appliance group as its own row. */
.dental-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr);gap:14px;align-items:stretch}
.dental-toolbar-actions{width:100%;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
.dental-toolbar-arch{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;margin-top:0}
.dental-toolbar button{min-height:64px}

/* -------------------------------------------------------------- tables */

.workplace .table-wrap{overflow:auto}
.workplace .cases-table th{padding:12px 16px;font:600 10.5px/1.3 var(--font-mono,monospace);letter-spacing:.08em;color:var(--ws-faint);
  background:var(--ws-panel-soft);border-bottom:1px solid var(--ws-line)}
.workplace .cases-table td{padding:14px 16px;font-size:13.5px;border-bottom:1px solid #f1ecf3}
.workplace .cases-table tbody tr{transition:background .15s}
@media(hover:hover){.workplace .cases-table tbody tr:hover{background:#fbf9fc}}

/* ----------------------------------------------------- controls & chips */

.workplace .btn{border-radius:var(--ws-radius-sm);font-weight:600;letter-spacing:.005em}
.workplace .btn-primary{background:var(--ws-ink);border-color:var(--ws-ink);box-shadow:0 6px 14px -8px rgba(45,17,66,.6)}
.workplace .btn-primary:hover{background:#3b1d52;border-color:#3b1d52}
.workplace .btn-ghost{background:#fff;border:1px solid var(--ws-line-strong);color:var(--ws-ink)}
.workplace .btn-ghost:hover{background:var(--ws-panel-soft);border-color:#c9bbd2}
.workplace :is(input:not([type=checkbox]):not([type=radio]),textarea,select){border-color:#d8cfdf;border-radius:var(--ws-radius-sm);background:#fff;
  transition:border-color .15s,box-shadow .15s}
.workplace :is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:#8f76a3;box-shadow:0 0 0 4px rgba(45,17,66,.08);outline:none}
.workplace :is(input,textarea,select):focus-visible{outline:none}
.workplace .pill,.workplace .case-chip{border-radius:100px;font-weight:600}
.workplace .empty-state{border-radius:var(--ws-radius);border-color:var(--ws-line)}
.workplace .workspace-dialog{border-radius:18px;border-color:var(--ws-line);box-shadow:0 40px 80px -30px rgba(33,19,41,.45)}

@media(prefers-reduced-motion:reduce){
  .workplace :is(button.stat-card,.case-card,a.pipe-stage,.action-required-row,.role-pick,.workspace-quick-actions button){transition:none}
  .workplace :is(button.stat-card,.case-card,a.pipe-stage,.action-required-row,.role-pick,.workspace-quick-actions button):hover{transform:none}
}

/* ----------------------------------------------------- public site, phone */

@media(max-width:720px){
  /* Header: logo, language, Dentist Portal and menu on one tidy row —
     the portal button was wrapping onto two lines beside the cart. */
  .public-site .topbar-inner{gap:6px}
  .public-site .topbar-actions{gap:6px}
  .public-site .topbar-actions .btn-primary{white-space:nowrap;min-height:36px;padding:0 12px;font-size:12px}
  .public-site .lang-switch{min-height:34px;padding:0 10px}
  .public-site .brand-logo{width:40px;height:40px}
  /* The WhatsApp button sat on top of section text; smaller, and tucked
     into the safe area. */
  .whatsapp-fab{width:50px;height:50px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .whatsapp-fab svg{width:24px;height:24px}
}
/* 320px phones: with the cart button showing (shop) the menu toggle was
   pushed past the right edge. */
@media(max-width:360px){
  .public-site .topbar-inner,.public-site .topbar-actions{gap:4px}
  .public-site .topbar-actions .btn-primary{padding:0 9px}
  .public-site .lang-switch{padding:0 7px}
  .public-site .brand-logo{width:34px;height:34px}
}