/* Client Portal kit — secure logged-in surface. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans);
       -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }

/* Nameplate base (column) — used in login aside & sidebar */
.np { display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; }
.np .firm { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1;
            letter-spacing: -0.01em; color: var(--ink-1); white-space: nowrap; }
.np .firm .amp { color: var(--seal); font-style: italic; }
.np .desig { font-family: var(--font-sans); font-size: 9.5px; font-weight: 600;
             letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-deep); white-space: nowrap; }

/* ---- Login -------------------------------------------------------------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 0.95fr; }
.login__aside { background: var(--seal-deep); color: var(--ink-on-dark); padding: 56px 56px;
                display: flex; flex-direction: column; justify-content: space-between; }
.login__aside .np .firm { color: var(--ink-on-dark); }
.login__aside .np .firm .amp { color: var(--brass-tint-2); }
.login__aside .np .desig { color: var(--brass-tint-2); }
.login__aside h1 { font-family: var(--font-serif); font-size: 34px; line-height: 1.2; margin: 0;
                   color: var(--ink-on-dark); max-width: 12ch; }
.login__aside p { color: rgba(246,241,231,0.72); max-width: 42ch; line-height: 1.7; }
.login__note { font-size: var(--fs-caption); color: rgba(246,241,231,0.5); line-height: 1.6; }
.login__main { display: flex; align-items: center; justify-content: center; padding: 40px; }
.login__card { width: 100%; max-width: 380px; }
.login__card h2 { font-family: var(--font-serif); margin: 0 0 6px; font-size: 26px; }
.login__card .sub { color: var(--ink-2); margin: 0 0 28px; font-size: var(--fs-small); }
.login__card .field { margin-bottom: 16px; }

/* ---- Boot splash (while Firebase resolves the session) ------------------ */
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 22px; background: var(--paper-0); }
.boot .np { align-items: center; text-align: center; }
.boot__spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong);
        border-top-color: var(--seal); animation: spin 0.7s linear infinite; }

/* ---- Auth flow extras (validation, Google, demo accounts) --------------- */
.input--err { border-color: var(--alert) !important; box-shadow: 0 0 0 3px var(--alert-tint) !important; }
.autherr { display: flex; align-items: center; gap: 9px; background: var(--alert-tint);
           border: 1px solid var(--alert); color: var(--alert); border-radius: var(--radius);
           padding: 10px 13px; font-size: var(--fs-small); font-weight: 500; margin-bottom: 18px; }
.autherr svg { flex-shrink: 0; }
.authok { display: flex; align-items: center; gap: 9px; background: var(--ok-tint);
          border: 1px solid var(--ok); color: var(--ok); border-radius: var(--radius);
          padding: 10px 13px; font-size: var(--fs-small); font-weight: 500; margin-bottom: 18px; }
.authok svg { flex-shrink: 0; }
.spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(246,241,231,0.4);
        border-top-color: var(--ink-on-dark); animation: spin 0.7s linear infinite; margin-right: 8px; display: inline-block; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.authdiv { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--ink-3); font-size: var(--fs-caption); }
.authdiv::before, .authdiv::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
        font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--ink-1);
        background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius);
        padding: 11px 18px; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn-google:hover { background: var(--paper-1); border-color: var(--ink-3); }
.btn-google:disabled { opacity: 0.5; pointer-events: none; }
.demo { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-1); }
.demo__lbl { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
        text-transform: uppercase; color: var(--brass-deep); display: block; margin-bottom: 10px; }
.demo__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.demo__chips button { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600;
        color: var(--ink-1); background: var(--bg-raised); border: 1px solid var(--line-strong);
        border-radius: var(--radius); padding: 8px 4px; cursor: pointer; transition: all var(--dur) var(--ease); }
.demo__chips button:hover { background: var(--seal); border-color: var(--seal); color: var(--ink-on-dark); }
.demo__hint { font-size: var(--fs-caption); color: var(--ink-2); margin: 10px 0 0; line-height: var(--lh-normal); min-height: 18px; }

/* ---- App shell ---------------------------------------------------------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--seal-deep); color: var(--ink-on-dark); display: flex; flex-direction: column;
        padding: 22px 0; position: sticky; top: 0; height: 100vh; }
.side .brand { padding: 4px 22px 22px; border-bottom: 1px solid rgba(246,241,231,0.12); }
.side .brand .np .firm { color: var(--ink-on-dark); font-size: 18px; }
.side .brand .np .firm .amp { color: var(--brass-tint-2); }
.side .brand .np .desig { color: var(--brass-tint-2); }
.side nav { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; flex: 1; }
.side nav .lbl { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
                 color: rgba(246,241,231,0.45); padding: 8px 12px 6px; font-weight: 700; }
.navitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius);
           color: rgba(246,241,231,0.8); font-size: var(--fs-small); font-weight: 500; cursor: pointer;
           border: 0; background: transparent; text-align: left; width: 100%;
           transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.navitem:hover { background: rgba(246,241,231,0.07); color: var(--ink-on-dark); }
.navitem.active { background: var(--seal-bright); color: var(--ink-on-dark); }
.navitem .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px;
                  background: rgba(246,241,231,0.16); padding: 1px 7px; border-radius: var(--radius-pill); }
.navitem .count--unread { background: var(--seal); color: var(--ink-on-dark); font-weight: 600;
                  box-shadow: 0 0 0 2px rgba(111,44,37,0.35); }
.navitem.active .count--unread { background: var(--paper-0); color: var(--seal); box-shadow: none; }
.side .me { padding: 16px 22px 4px; border-top: 1px solid rgba(246,241,231,0.12); display: flex; align-items: center; gap: 12px; }
.side .me .av { width: 34px; height: 34px; border-radius: 50%; background: var(--brass);
                color: var(--ink-on-dark); display: flex; align-items: center; justify-content: center;
                font-family: var(--font-serif); font-size: 14px; }
.side .me .nm { font-size: var(--fs-small); font-weight: 600; color: var(--ink-on-dark); white-space: nowrap; }
.side .me .co { font-size: var(--fs-caption); color: rgba(246,241,231,0.55); }
/* Super-admin "View as practice" switch — focus one partner or view all. */
.viewas { margin: 12px 22px 0; padding: 12px 0 2px; border-top: 1px solid rgba(246,241,231,0.12); display: flex; flex-direction: column; gap: 7px; }
.viewas__lbl { display: flex; align-items: center; gap: 6px; font-size: var(--fs-eyebrow); font-weight: 700;
               letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brass); }
.viewas__lbl svg { color: var(--brass); }
.viewas__sel { width: 100%; font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600;
               color: var(--ink-on-dark); background: rgba(246,241,231,0.08); border: 1px solid rgba(246,241,231,0.2);
               border-radius: var(--radius); padding: 7px 9px; cursor: pointer; }
.viewas__sel:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.viewas__sel option { color: var(--ink-1); }
.viewas__hint { font-size: 11px; line-height: 1.4; color: rgba(246,241,231,0.5); }

.main { display: flex; flex-direction: column; min-width: 0; }
/* Mobile-nav affordances — hidden on desktop, enabled in the ≤760px block. */
.topbar__menu { display: none; }
.side__close { display: none; }
.navscrim { display: none; }
.topbar { height: 68px; border-bottom: 1px solid var(--line); background: var(--bg-raised);
          display: flex; align-items: center; justify-content: space-between; padding: 0 32px; gap: 20px; position: sticky; top: 0; z-index: 10; }
.topbar .search { display: flex; align-items: center; gap: 10px; background: var(--paper-1);
                  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 14px;
                  width: 320px; color: var(--ink-3); }
.topbar .search input { border: 0; background: transparent; outline: none; font-size: var(--fs-small);
                        color: var(--ink-1); width: 100%; }
.topbar .acts { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.iconbtn { width: 38px; height: 38px; border-radius: var(--radius); border: 1px solid var(--line);
           background: var(--bg-raised); color: var(--ink-2); display: flex; align-items: center;
           justify-content: center; cursor: pointer; position: relative; }
.iconbtn:hover { background: var(--paper-1); }
/* Timesheet delete — clearly visible destructive action (the old ghost icon
   button disappeared against the row). Reads as a delete, not chrome. */
.ts-del { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius);
          border: 1px solid var(--alert); background: var(--alert-tint); color: var(--alert);
          display: flex; align-items: center; justify-content: center; cursor: pointer;
          transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ts-del:hover { background: var(--alert); color: #fff; }
.ts-del:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.ts-lock { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center;
           justify-content: center; color: var(--ink-3); }
/* Workload view — per-staff open-load cards. */
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.wl-card { border: 1px solid var(--line); border-radius: 6px; background: var(--bg-raised); padding: 16px 16px 6px; }
.wl-card--unassigned { border-style: dashed; border-color: var(--warn); background: var(--warn-tint); }
.wl-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wl-who { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.wl-who > div { min-width: 0; }
.wl-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
         justify-content: center; background: var(--seal); color: var(--ink-on-dark);
         font-family: var(--font-serif); font-weight: 600; font-size: 16px; }
.wl-av--none { background: var(--warn); }
.wl-name { font-weight: 600; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-who .caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-counts { display: flex; gap: 6px; flex-shrink: 0; }
.wl-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono);
           font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2);
           background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 7px; }
.wl-pill svg { color: var(--ink-3); }
.wl-pill--over { color: var(--alert); background: var(--alert-tint); border-color: var(--alert); }
.wl-pill--over svg { color: var(--alert); }
.wl-bar { height: 4px; border-radius: 2px; background: var(--paper-2); overflow: hidden; margin: 12px 0 10px; }
.wl-bar__fill { display: block; height: 100%; background: var(--seal); border-radius: 2px; }
.wl-card--unassigned .wl-bar__fill { background: var(--warn); }
.wl-list { list-style: none; margin: 0; padding: 0; }
.wl-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line);
           font-size: var(--fs-caption); }
.wl-item svg { color: var(--ink-3); flex-shrink: 0; }
.wl-item__t { color: var(--ink-1); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.wl-item__c { color: var(--ink-3); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.wl-item--over .wl-item__t { color: var(--alert); }
.wl-tag { flex-shrink: 0; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
          color: var(--alert); background: var(--alert-tint); border-radius: var(--radius); padding: 1px 5px; }
.wl-more { padding: 7px 0 4px; font-size: var(--fs-caption); color: var(--ink-3); border-top: 1px solid var(--line); }
.wl-empty { padding: 8px 0 12px; font-size: var(--fs-caption); color: var(--ink-3); }
/* Per-entity section header for multi-entity client views (deadlines/invoices). */
.ent-head { display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
            padding-bottom: 9px; border-bottom: 1px solid var(--line-strong); color: var(--seal); }
.ent-head h2 { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 600;
               color: var(--ink-1); margin: 0; flex: 1; }
.ent-head .caption { color: var(--ink-3); }
/* Timesheet reviewed archive — collapsible staff/date folders. */
.tsarch__head { display: flex; align-items: center; gap: 9px; margin: 0 0 4px;
                padding-bottom: 9px; border-bottom: 1px solid var(--line-strong); color: var(--brass-deep); }
.tsarch__head h2 { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 600;
                   color: var(--ink-1); margin: 0; flex: 1; }
.tsarch__head .caption { color: var(--ink-3); }
.tsfolder { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised);
            margin-bottom: 10px; overflow: hidden; }
.tsfolder > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
            list-style: none; font-weight: 600; color: var(--ink-1); user-select: none; }
.tsfolder > summary::-webkit-details-marker { display: none; }
.tsfolder > summary:hover { background: var(--paper-1); }
.tsfolder > summary svg { color: var(--brass); flex-shrink: 0; }
.tsfolder__chev { transition: transform var(--dur) var(--ease); }
.tsfolder[open] > summary .tsfolder__chev { transform: rotate(90deg); }
.tsfolder__nm { flex: 1; min-width: 0; }
.tsfolder__body { border-top: 1px solid var(--line); padding: 4px 0; }
.tsfolder__date + .tsfolder__date { border-top: 1px solid var(--line); }
.tsfolder__datehd { display: flex; align-items: center; justify-content: space-between;
            padding: 9px 16px 4px; color: var(--ink-2); font-weight: 600; font-size: var(--fs-caption); }
/* Row-level actions (edit/delete) in tables. */
.rowacts { display: flex; gap: 6px; justify-content: flex-end; }
.iconbtn--sm { width: 32px; height: 32px; }
.iconbtn--danger { color: var(--alert); }
.iconbtn--danger:hover { background: var(--alert-tint); border-color: var(--alert); color: var(--alert); }
.iconbtn .badge { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
                  background: var(--alert); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); }

.view { padding: 32px; max-width: 1100px; width: 100%; }
.view__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; gap: 16px; flex-wrap: wrap; }
.view__head > *:first-child { flex: 1 1 340px; min-width: 0; }
.view__head > *:last-child { flex: 0 1 auto; }
.view__head h1 { font-family: var(--font-serif); font-size: 28px; margin: 0; line-height: 1.2; }
.view__head .greet { color: var(--ink-2); margin: 8px 0 0; font-size: var(--fs-small); line-height: 1.4; }

/* ---- Dashboard ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.stat { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md);
        padding: 20px; box-shadow: var(--shadow-xs); }
.stat .top { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: var(--fs-caption);
             text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.stat .num { font-family: var(--font-serif); font-size: 38px; margin: 12px 0 2px; color: var(--ink-1); }
.stat .sub { font-size: var(--fs-caption); color: var(--ink-3); }
.stat .ic { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.stat--link { cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.stat--link:hover { border-color: var(--seal); box-shadow: var(--shadow-sm); }
.stat--link:hover .stat__go { opacity: 1; transform: none; color: var(--seal); }
.stat--link:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.stat__go { margin-left: auto; color: var(--ink-3); opacity: 0; transform: translateX(-3px);
            transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); }

.panel { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.panel__head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.panel__head h3 { font-family: var(--font-serif); font-size: 17px; margin: 0; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- Lists / tables ----------------------------------------------------- */
.lrow { display: grid; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); gap: 16px; }
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--paper-1); }
.lrow .ic { width: 34px; height: 34px; border-radius: var(--radius); background: var(--paper-2);
            color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lrow .ttl { font-size: var(--fs-small); font-weight: 600; color: var(--ink-1); }
.lrow .meta { font-size: var(--fs-caption); color: var(--ink-3); font-family: var(--font-mono); }
.docrow { grid-template-columns: 34px 1fr 120px 120px 100px; }
.deadrow { grid-template-columns: 1fr 140px 120px; }

.dz { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); padding: 26px;
      text-align: center; color: var(--ink-3); background: var(--paper-1); margin-bottom: 20px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.dz.hot { border-color: var(--seal); background: var(--seal-tint); color: var(--seal); }
.dz--disabled { opacity: 0.6; cursor: not-allowed; }
.dz--disabled.hot { border-color: var(--line-strong); background: var(--paper-1); color: var(--ink-3); }
.dz .big { font-size: var(--fs-small); color: var(--ink-2); font-weight: 600; margin-top: 8px; }

/* ---- Queries ------------------------------------------------------------ */
.qwrap { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--line);
         border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); }
.qlist { border-right: 1px solid var(--line); }
.qitem { padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.qitem:hover { background: var(--paper-1); }
.qitem.active { background: var(--seal-tint); border-left: 3px solid var(--seal); padding-left: 15px; }
.qitem .qt { font-size: var(--fs-small); font-weight: 600; color: var(--ink-1); margin-bottom: 3px; }
.qitem .qm { font-size: var(--fs-caption); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qthread { display: flex; flex-direction: column; }
.qthread__head { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.qbody { padding: 22px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; }
.msg { max-width: 76%; }
.msg .bub { padding: 12px 15px; border-radius: var(--radius-md); font-size: var(--fs-small); line-height: 1.55; }
.msg .when { font-size: 11px; color: var(--ink-3); margin-top: 5px; font-family: var(--font-mono); }
.msg.them .bub { background: var(--paper-1); border: 1px solid var(--line); color: var(--ink-1); }
.msg.me { align-self: flex-end; }
.msg.me .bub { background: var(--seal); color: var(--ink-on-dark); }
.msg.me .when { text-align: right; }
.qreply { border-top: 1px solid var(--line); padding: 14px 18px; display: flex; gap: 10px; align-items: center; }
.qreply input { flex: 1; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 14px;
                font-size: var(--fs-small); outline: none; }
.qreply input:focus { border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-tint); }
.qcompose { border-top: 1px solid var(--line); }
.qcompose .qreply { border-top: 0; }
.qtag { display: flex; align-items: center; gap: 9px; padding: 11px 18px 0; color: var(--ink-3); }
.qtag__sel { flex: 1; max-width: 420px; padding: 7px 11px; font-size: var(--fs-caption); }
.reftag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 600;
          color: var(--brass); background: var(--brass-tint); border: 1px solid var(--line);
          padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 6px; max-width: 100%; }
.reftag svg { flex-shrink: 0; }
.msg.me .reftag { background: rgba(246,241,231,0.18); color: var(--paper-0); border-color: transparent; }
.reftag--draft { margin-bottom: 0; }
.reftag__x { display: inline-flex; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; margin-left: 2px; }

.empty { text-align: center; color: var(--ink-3); padding: 50px 20px; font-size: var(--fs-small); }

/* ---- Data-source badge (live vs preview) -------------------------------- */
.dsrc { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
        font-size: var(--fs-caption); font-weight: 600; color: var(--ink-3); white-space: nowrap; flex-shrink: 0;
        padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.dsrc__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.dsrc--live { color: var(--ok); border-color: var(--ok); background: var(--ok-tint); }
.dsrc--live .dsrc__dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }

/* ---- Data admin: migration + purge ------------------------------------- */
.purge-result { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-1); padding: 14px 16px; }
.purge-result__total { font-family: var(--font-serif); font-size: 16px; color: var(--ink-1); margin-bottom: 8px; }
.purge-result__total--danger { color: var(--alert); }
.purge-list { list-style: none; margin: 0; padding: 0; }
.purge-list li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line);
                 font-size: var(--fs-caption); color: var(--ink-2); text-transform: capitalize; }
.purge-list li:first-child { border-top: 0; }
.purge-list li .tabular { font-family: var(--font-mono); color: var(--ink-1); font-weight: 600; text-transform: none; }
.purge-confirm { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
                 border: 1px solid var(--alert); background: var(--alert-tint); border-radius: var(--radius); padding: 8px 12px; }

/* ---- Job allocation control --------------------------------------------- */
.alloc { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.alloc__sel { padding: 7px 30px 7px 11px; font-size: var(--fs-caption); min-width: 170px;
        font-family: var(--font-mono); color: var(--ink-1); }
.alloc__sel--empty { color: var(--ink-3); font-family: var(--font-sans); font-weight: 600;
        border-style: dashed; border-color: var(--line-strong); }

/* ---- Payments (billing) ------------------------------------------------- */
.paysum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.paysum > div { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-1);
                padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.paysum__k { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
             text-transform: uppercase; color: var(--ink-3); }
.paysum__v { font-size: 18px; font-weight: 600; color: var(--ink-1); }
.payrow { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center;
          padding: 9px 0; border-bottom: 1px solid var(--line); }
.payrow:last-child { border-bottom: 0; }
/* Receipt rows with per-receipt actions (edit / mark-returned). */
.payrow--act { grid-template-columns: 110px 1fr auto auto; }
.payrow__acts { display: inline-flex; gap: 6px; margin-left: 6px; }
.payrow--returned .mono:first-child { text-decoration: line-through; color: var(--ink-3); }
.payrow--returned .caption { color: var(--ink-3); }
.payalloc { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.payalloc__row { display: grid; grid-template-columns: 1fr auto 72px; gap: 14px; align-items: center;
                 padding: 11px 16px; border-bottom: 1px solid var(--line); }
.payalloc__row:last-of-type { border-bottom: 0; }
.payalloc__foot { padding: 11px 16px; background: var(--paper-1); border-top: 1px solid var(--line); }
.settlebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px;
             background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--radius);
             font-size: var(--fs-small); color: var(--ink-2); }

/* ---- Reminders (outbound client nudges) --------------------------------- */
.rmd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.rmd-stats .stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.rmd-stats .stat__k { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
                      text-transform: uppercase; color: var(--ink-3); }
.rmd-stats .stat__v { font-family: var(--font-serif); font-size: 30px; color: var(--ink-1); line-height: 1; }
.rmd-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rmd-lead { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-2); }
.rmd-lead label { font-weight: 600; }
.rmd-list { display: flex; flex-direction: column; gap: 12px; }
.rmd-card { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md);
            box-shadow: var(--shadow-xs); overflow: hidden; }
.rmd-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
                  padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rmd-card__name { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 600; color: var(--ink-1); }
.rmd-card__meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: var(--fs-caption); color: var(--ink-2); }
.rmd-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.rmd-card__actions { display: flex; gap: 8px; flex-shrink: 0; }
.rmd-card__items { display: flex; flex-direction: column; }
.rmd-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.rmd-item:last-child { border-bottom: 0; }
.rmd-item__t { font-size: var(--fs-small); font-weight: 600; color: var(--ink-1); }
.rmd-item__sub { font-weight: 400; color: var(--ink-3); }
.rmd-item__d { font-size: var(--fs-caption); color: var(--ink-3); margin-top: 2px; }
.rmd-item .ic { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center;
                justify-content: center; flex-shrink: 0; }
.ic--info  { background: var(--info-tint);  color: var(--info); }
.ic--warn  { background: var(--warn-tint);  color: var(--warn); }
.ic--alert { background: var(--alert-tint); color: var(--alert); }
.btn--wa { background: #25D366; color: #07331b; border-color: #1faa53; }
.btn--wa:hover { background: #1ebe5a; color: #07331b; }
@media (max-width: 720px) { .rmd-stats { grid-template-columns: 1fr 1fr; } }

/* ---- Reports cards ------------------------------------------------------ */
.repgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 18px 4px; }
.repcard { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--line);
           border-radius: var(--radius-md); background: var(--surface-card); }
.repcard__ic { width: 40px; height: 40px; border-radius: var(--radius); background: var(--seal-tint);
           color: var(--seal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.repcard__body { flex: 1; min-width: 0; }
.repcard__body h4 { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 600; color: var(--ink-1); margin: 0 0 5px; }
.repcard__body p { font-size: var(--fs-caption); color: var(--ink-2); margin: 0 0 8px; line-height: var(--lh-normal); }
.repcard__meta { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-3); }
.repcard .btn { flex-shrink: 0; }

/* ---- Inline flash (admin action results) -------------------------------- */
.flash { display: flex; align-items: center; gap: 10px; margin: 0 18px 16px; padding: 10px 14px;
         border-radius: var(--radius); font-size: var(--fs-small); font-weight: 500; }
.flash--ok { background: var(--ok-tint); border: 1px solid var(--ok); color: var(--ok); }
.flash--info { background: var(--info-tint); border: 1px solid #cdd9e6; color: var(--info); }
.flash svg { flex-shrink: 0; }
.flash__x { border: 0; background: transparent; color: inherit; cursor: pointer; opacity: 0.7;
            display: flex; align-items: center; padding: 2px; flex-shrink: 0; }
.flash__x:hover { opacity: 1; }

/* ---- Modal dialog ------------------------------------------------------- */
.btn--danger { background: var(--alert); color: #fff; }
.btn--danger:hover { background: #8c2f25; color: #fff; }
.modalscrim { position: fixed; inset: 0; z-index: 100; background: rgba(38,33,27,0.42);
              display: flex; align-items: center; justify-content: center; padding: 24px;
              animation: scrimin var(--dur) var(--ease); }
@keyframes scrimin { from { opacity: 0; } to { opacity: 1; } }
.modalcard { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
             box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; }
.modalcard--wide { max-width: 600px; }
.modalcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
                   padding: 20px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-raised); }
.modalcard__head h3 { font-family: var(--font-serif); font-size: var(--fs-h3); margin: 0; line-height: 1.2; }
.modalcard__head p { font-size: var(--fs-caption); color: var(--ink-3); margin: 4px 0 0; }
.modalcard__x { width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--line-strong, var(--line));
                background: var(--paper-1); color: var(--ink-1); cursor: pointer; display: flex;
                align-items: center; justify-content: center; flex-shrink: 0; }
.modalcard__x:hover { background: var(--paper-2); color: var(--ink-1); }
.modalcard__body { padding: 22px; }
.modalcard__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px;
                   padding-top: 18px; border-top: 1px solid var(--line); }

/* ---- Form grid (modals) ------------------------------------------------- */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fgrid .full { grid-column: 1 / -1; }
.fgrid .field > label { margin-bottom: 2px; }
.chk { display: flex; flex-wrap: wrap; gap: 14px; }
.chk label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-small); color: var(--ink-1); cursor: pointer; }
.chk__cat { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase;
            letter-spacing: 0.04em; margin-left: 3px; }
.catpick { margin-bottom: 12px; padding: 12px 13px; background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--radius); }
.catpick__lbl { display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); margin-bottom: 9px; }
.catpick__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.formerr { display: flex; align-items: center; gap: 8px; background: var(--alert-tint); border: 1px solid var(--alert);
           color: var(--alert); border-radius: var(--radius); padding: 9px 12px; font-size: var(--fs-caption); font-weight: 500; margin-top: 16px; }
.invite-note { display: flex; align-items: flex-start; gap: 9px; background: var(--info-tint); border: 1px solid #cdd9e6;
           color: var(--info); border-radius: var(--radius); padding: 11px 13px; font-size: var(--fs-caption); line-height: var(--lh-normal); }
.invite-note svg { flex-shrink: 0; margin-top: 1px; }
.invite-note b { font-weight: 700; }
.linkbox { display: flex; gap: 8px; align-items: center; }
.linkbox__url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-caption);
           color: var(--ink-1); background: var(--paper-1); border: 1px solid var(--line-strong);
           border-radius: var(--radius); padding: 9px 11px; }
.linkbox__url:focus { outline: 2px solid var(--seal); outline-offset: 1px; }
.linkbox__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* calm view entrance — transform only, so content is always visible even if
   the animation clock is throttled (opacity is never driven to 0) */
.viewfade { animation: viewfade var(--dur-slow) var(--ease); }
@keyframes viewfade { from { transform: translateY(5px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .viewfade { animation: none; } }

/* ========================================================================== */
/*  EXTENSIONS — role switcher, layout toggle, calendar, chat, tables, admin  */
/* ========================================================================== */

/* ---- "View as" demo switcher (sidebar footer) --------------------------- */
.viewas { padding: 14px 18px 4px; border-top: 1px solid rgba(246,241,231,0.12); }
.viewas .lbl { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
               color: rgba(246,241,231,0.45); font-weight: 700; display: block; margin-bottom: 8px; }
.viewas .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.viewas .seg button { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
               color: rgba(246,241,231,0.72); background: rgba(246,241,231,0.06);
               border: 1px solid rgba(246,241,231,0.08); border-radius: var(--radius);
               padding: 7px 6px; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.viewas .seg button:hover { background: rgba(246,241,231,0.12); color: var(--ink-on-dark); }
.viewas .seg button.on { background: var(--brass); border-color: var(--brass); color: var(--ink-on-dark); }

/* ---- Universal search dropdown ------------------------------------------ */
.srchpop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
           background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
           box-shadow: var(--shadow-lg); overflow: hidden; max-height: 380px; overflow-y: auto; }
.srchpop__empty { padding: 16px 16px; font-size: var(--fs-small); color: var(--ink-3); }
.srchpop__row { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
           padding: 10px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--line);
           cursor: pointer; color: var(--ink-1); }
.srchpop__row svg { margin-top: 1px; }
.srchpop__row:last-child { border-bottom: 0; }
.srchpop__row:hover { background: var(--paper-1); }
.srchpop__row svg { color: var(--seal); flex-shrink: 0; }
.srchpop__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.srchpop__t { font-size: var(--fs-small); font-weight: 600; white-space: normal;
              overflow-wrap: break-word; line-height: 1.3; }
.srchpop__s { font-size: var(--fs-caption); color: var(--ink-3); font-family: var(--font-mono);
              white-space: normal; overflow-wrap: break-word; line-height: 1.3; }

/* ---- Topbar refinements ------------------------------------------------- */
.topbar .updated { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-3);
                   white-space: nowrap; }
.topbar .updated b { color: var(--ink-2); font-weight: 500; }

/* ---- Notifications / help popover --------------------------------------- */
.pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: 340px;
       background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
       box-shadow: var(--shadow-lg); overflow: hidden; max-height: 460px; overflow-y: auto;
       animation: popIn var(--dur) var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pop__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px;
             border-bottom: 1px solid var(--line); font-family: var(--font-serif); font-size: var(--fs-small);
             font-weight: 600; color: var(--ink-1); }
.pop__count { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-on-dark);
              background: var(--seal); border-radius: var(--radius-pill); padding: 1px 8px; }
.pop__empty { padding: 26px 18px; font-size: var(--fs-small); color: var(--ink-3); text-align: center; }
.pop__row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
            padding: 12px 15px; background: transparent; border: 0; border-bottom: 1px solid var(--line);
            cursor: pointer; color: var(--ink-1); }
.pop__row:last-child { border-bottom: 0; }
.pop__row:hover { background: var(--paper-1); }
.pop__ic { width: 30px; height: 30px; border-radius: var(--radius); flex-shrink: 0; display: flex;
           align-items: center; justify-content: center; background: var(--paper-2); color: var(--ink-2); }
.pop__ic--warn { background: var(--warn-tint); color: var(--warn); }
.pop__ic--ok   { background: var(--ok-tint);   color: var(--ok); }
.pop__ic--info { background: var(--info-tint); color: var(--info); }
.pop__ic--muted { background: var(--paper-2);  color: var(--ink-2); }
.pop__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pop__t { font-size: var(--fs-small); font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.pop__s { font-size: var(--fs-caption); color: var(--ink-3); }
/* Unread dot + read (clicked) styling for notifications. A read item dims and
   loses its dot; it is removed entirely 3 days after being read (in JS). */
.pop__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--seal); flex-shrink: 0;
            align-self: center; margin-left: 4px; }
.pop__row--read { opacity: 0.62; }
.pop__row--read .pop__ic { background: var(--paper-2); color: var(--ink-3); }
.pop__allread { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 500;
                color: var(--seal); background: transparent; border: 0; cursor: pointer; padding: 2px 4px; }
.pop__allread:hover { text-decoration: underline; }
.pop__sec { padding: 14px 16px 6px; border-top: 1px solid var(--line); background: var(--paper-1); }
.pop__note { font-size: var(--fs-caption); color: var(--ink-2); margin: 4px 0 8px; font-family: var(--font-mono); }
.pop__office { display: flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--ink-2);
               padding: 3px 0; }
.pop__office svg { color: var(--brass); flex-shrink: 0; }
.pop__foot { padding: 10px 16px; font-size: var(--fs-caption); color: var(--ink-3);
             font-family: var(--font-mono); border-top: 1px solid var(--line); background: var(--paper-1); }

/* ---- Segmented control (dashboard layout direction) --------------------- */
.segment { display: inline-flex; background: var(--paper-1); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 3px; gap: 2px; }
.segment button { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600;
           color: var(--ink-2); background: transparent; border: 0; border-radius: 3px;
           padding: 6px 13px; cursor: pointer; white-space: nowrap;
           transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.segment button:hover { color: var(--ink-1); }
.segment button.on { background: var(--bg-raised); color: var(--seal); box-shadow: var(--shadow-xs); }

/* ---- Ledger panel (dashboard direction A) ------------------------------- */
.ledger { width: 100%; border-collapse: collapse; }
.ledger thead th { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 700;
           letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3);
           text-align: left; padding: 12px 20px; border-bottom: 1px solid var(--line-strong); }
.ledger thead th.r, .ledger td.r { text-align: right; }
.ledger tbody td { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-small);
           color: var(--ink-1); vertical-align: middle; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover { background: var(--paper-1); }
.ledger .sub { font-size: var(--fs-caption); color: var(--ink-3); margin-top: 2px; }
.ledger .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-1); }

/* ---- Briefing layout (dashboard direction C) ---------------------------- */
.brief { max-width: 720px; }
.brief__lead { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: var(--lh-snug);
           color: var(--ink-1); font-weight: 500; margin: 0 0 8px; }
.brief__by { font-size: var(--fs-caption); color: var(--ink-3); font-family: var(--font-mono);
           text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 26px; }
.attn { display: flex; flex-direction: column; }
.attn__row { display: grid; grid-template-columns: 8px 1fr auto; gap: 16px; align-items: start;
           padding: 18px 0; border-bottom: 1px solid var(--line); }
.attn__row:first-child { border-top: 1px solid var(--line); }
.attn__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; }
.attn__t { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; color: var(--ink-1); }
.attn__d { font-size: var(--fs-small); color: var(--ink-2); margin-top: 3px; line-height: var(--lh-normal); }

/* ---- Generic data table (billing, admin) -------------------------------- */
.tscroll { overflow-x: auto; }
.tscroll .tbl { min-width: 820px; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 700;
           letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-3);
           text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line-strong);
           background: var(--paper-1); white-space: nowrap; }
.tbl thead th.r { text-align: right; }
.tbl thead th.c { text-align: center; }
.tbl tbody td { padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: var(--fs-small);
           color: var(--ink-1); vertical-align: middle; }
.tbl tbody td.r { text-align: right; }
.tbl tbody td.c { text-align: center; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--paper-1); }
.tbl .ent { font-weight: 600; color: var(--ink-1); }
.tbl .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); color: var(--ink-3); }
.tbl .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-1); }

/* small inline progress bar */
.bar { width: 90px; height: 5px; border-radius: var(--radius-pill); background: var(--paper-3); overflow: hidden; display: inline-block; vertical-align: middle; }
.bar > i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.bar.warn > i { background: var(--warn); }
.bar.alert > i { background: var(--alert); }

/* ---- Admin tabs --------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.tab { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 600; color: var(--ink-3);
           background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
           padding: 10px 14px 14px; margin-bottom: -1px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tab:hover { color: var(--ink-1); }
.tab.on { color: var(--seal); border-bottom-color: var(--seal); }

/* settings rows (profile / security / notifications) */
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px;
          padding: 14px 18px; border-top: 1px solid var(--line); }
.setrow:first-of-type { border-top: 0; }
.setrow__k { font-size: var(--fs-small); color: var(--ink-3); }
.setrow__v { font-size: var(--fs-small); color: var(--ink-1); font-weight: 500; text-align: right; }

/* compliance calendar — month navigation + recurrence note */
.monthnav { display: inline-flex; align-items: center; gap: 6px; }
.monthnav__lbl { font-family: var(--font-serif); font-size: var(--fs-h4); color: var(--ink-1);
        font-weight: 600; min-width: 120px; text-align: center; }
.calcell--blank { background: var(--paper-1); opacity: 0.5; }
.freq-note { display: flex; align-items: flex-start; gap: 9px; background: var(--brass-tint);
        border: 1px solid var(--brass); color: var(--brass-deep); border-radius: var(--radius);
        padding: 10px 13px; font-size: var(--fs-caption); line-height: var(--lh-normal); }
.freq-note svg { flex-shrink: 0; margin-top: 1px; color: var(--brass); }
.chk__cat { margin-left: auto; font-size: var(--fs-caption); color: var(--ink-3); font-family: var(--font-mono); }

/* client Excel import */
.imp-steps { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px;
        font-size: var(--fs-small); color: var(--ink-2); line-height: var(--lh-normal); }
.imp-steps li { padding-left: 4px; }
.imp-steps b { color: var(--ink-1); font-weight: 600; }
.imp-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: var(--fs-caption); }
.imp-summary .mono { display: inline-flex; align-items: center; gap: 6px; }

/* toggle switch (admin reminders) */
.toggle { width: 40px; height: 23px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
          background: var(--paper-2); cursor: pointer; padding: 0; position: relative; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); flex-shrink: 0; }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
          background: var(--bg-raised); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease); }
.toggle.on { background: var(--seal); border-color: var(--seal); }
.toggle.on .knob { transform: translateX(17px); }

/* metric tiles (admin overview) */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.metric { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md);
           padding: 18px 20px; box-shadow: var(--shadow-xs); cursor: pointer; transition: border-color var(--dur) var(--ease); }
.metric:hover { border-color: var(--line-strong); }
.metric .k { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
           text-transform: uppercase; color: var(--ink-3); display: block; }
.metric .v { font-family: var(--font-serif); font-size: 34px; color: var(--ink-1); display: block; margin-top: 10px; line-height: 1; }
.metric .vsub { font-size: var(--fs-caption); color: var(--ink-3); margin-top: 6px; display: block; }

/* ---- Documents · OneDrive for Business ---------------------------------- */
.od-conn { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 22px;
           background: var(--info-tint); border: 1px solid #cdd9e6; border-radius: var(--radius-md); }
.od-cloud { width: 44px; height: 44px; border-radius: var(--radius); background: var(--bg-raised);
            border: 1px solid #cdd9e6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.od-conn__t { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 700; color: var(--ink-1);
              display: flex; align-items: center; flex-wrap: wrap; }
.od-conn__m { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--info); margin-top: 3px; }

.docwrap { display: grid; grid-template-columns: 232px 1fr; gap: 24px; align-items: start; }
.frail { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md);
         box-shadow: var(--shadow-xs); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.frail__lbl { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
              text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 6px; }
.fitem { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius);
         border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans);
         font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); width: 100%;
         transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.fitem:hover { background: var(--paper-1); color: var(--ink-1); }
.fitem.on { background: var(--seal-tint); color: var(--seal); font-weight: 600; }
.fitem .lucide, .fitem svg { color: var(--brass-deep); flex-shrink: 0; }
.fitem.on .lucide, .fitem.on svg { color: var(--seal); }
.fitem__n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: var(--paper-2);
            padding: 1px 7px; border-radius: var(--radius-pill); }
.frail__quota { margin-top: 12px; padding: 12px 10px 6px; border-top: 1px solid var(--line); }

/* ---- Staff workdesk job cards ------------------------------------------- */
.jobgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jobcard { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md);
           box-shadow: var(--shadow-xs); padding: 18px; display: flex; flex-direction: column; }
.jobcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.jobcard__top .calpill { overflow: visible; flex-shrink: 0; }
.jobcard__t { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 600; color: var(--ink-1);
           margin: 0 0 6px; line-height: var(--lh-snug); }
.jobcard__c { font-size: var(--fs-caption); color: var(--ink-2); margin: 0 0 10px; }
.jobcard__d { font-size: var(--fs-small); color: var(--ink-2); margin: 0 0 16px; line-height: var(--lh-normal); flex: 1; }
.jobcard__foot { border-top: 1px solid var(--line); padding-top: 14px; }
.jobcard .bar { width: 100%; height: 5px; }

/* ---- Calendar ----------------------------------------------------------- */
.calwrap { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.calgrid { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); overflow: hidden; }
.calgrid__head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.calgrid__head span { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 700;
           letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 11px 0; }
.calgrid__body { display: grid; grid-template-columns: repeat(7, 1fr); }
.calcell { min-height: 96px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
           padding: 8px; display: flex; flex-direction: column; gap: 5px; cursor: pointer;
           transition: background var(--dur) var(--ease); }
.calcell:nth-child(7n) { border-right: 0; }
.calcell.empty-cell { background: var(--paper-1); cursor: default; }
.calcell:hover:not(.empty-cell) { background: var(--paper-1); }
.calcell .dnum { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-2); font-weight: 500; }
.calcell.today .dnum { background: var(--seal); color: var(--ink-on-dark); width: 22px; height: 22px;
           border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.calcell.today { background: var(--seal-tint); }
.calpill { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; line-height: 1.3;
           padding: 3px 6px; border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
           border-left: 2px solid currentColor; }
.calpill.done { opacity: 0.55; text-decoration: line-through; }
/* category colour mapping */
.cat-direct   { background: var(--seal-tint);  color: var(--seal); }
.cat-indirect { background: var(--info-tint);  color: var(--info); }
.cat-corp     { background: var(--brass-tint); color: var(--brass-deep); }
.cat-audit    { background: var(--ok-tint);    color: var(--ok); }
.catdot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.calpill { cursor: pointer; }
.calmore { cursor: pointer; }
.calmore:hover { color: var(--seal) !important; }

/* ---- Compliance roster (item detail) ------------------------------------ */
.rosters { display: flex; flex-direction: column; gap: 16px; margin-bottom: 6px; }
.rgroup__lbl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
        font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
        text-transform: uppercase; margin-bottom: 10px; }
.rgroup__lbl--ok { color: var(--ok); }
.rgroup__lbl--alert { color: var(--alert); }
.roster { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
        font-size: var(--fs-small); font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill);
        border: 1px solid transparent; cursor: pointer; transition: filter var(--dur) var(--ease); }
.rchip:disabled { cursor: default; }
.rchip:not(:disabled):hover { filter: brightness(0.96); }
.rchip--done { background: var(--ok-tint); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.rchip__date { margin-left: 6px; padding-left: 7px; border-left: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
        font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: 0.85; }
.rchip--pending { background: var(--alert-tint); color: var(--alert); border-color: color-mix(in srgb, var(--alert) 35%, transparent); }
.rempty { font-size: var(--fs-caption); color: var(--ink-3); font-style: italic; }

.ddetail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px;
        padding-top: 18px; border-top: 1px solid var(--line); }
.ddetail__k { display: block; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
        text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.ddetail__v { font-size: var(--fs-small); color: var(--ink-1); font-weight: 500; }

.agenda__item--click { cursor: pointer; transition: background var(--dur) var(--ease); }
.agenda__item--click:hover { background: var(--paper-1); }

/* People table — linked-clients column */
.clientcell { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; }
.clientcell__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-small); color: var(--ink-1); }
.clientcell__more { flex-shrink: 0; font-size: 11px; }

/* compliance staff allocation (item detail) */
.alloc-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.alloc-row { display: flex; align-items: center; gap: 12px; }
.alloc-row__c { flex: 1; min-width: 0; font-size: var(--fs-small); color: var(--ink-1); font-weight: 500;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alloc-row .alloc__sel { width: 230px; flex-shrink: 0; }

/* agenda list (calendar side) */
.agenda { display: flex; flex-direction: column; }
.agenda__item { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.agenda__item:last-child { border-bottom: 0; }
.agenda__item .when { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-caption);
           color: var(--ink-2); width: 52px; flex-shrink: 0; text-align: center; line-height: 1.3; }
.agenda__item .when b { display: block; font-size: 17px; color: var(--ink-1); font-weight: 600; }
.agenda__item .t { font-size: var(--fs-small); font-weight: 600; color: var(--ink-1); }
.agenda__item .m { font-size: var(--fs-caption); color: var(--ink-3); margin-top: 2px; }
/* pills/chips inside an agenda row must never truncate or wrap mid-label */
.agenda__item .calpill { overflow: visible; flex-shrink: 0; }
.agenda__item .chip { white-space: nowrap; flex-shrink: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2);
           background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--radius-pill);
           padding: 5px 12px; cursor: pointer; transition: all var(--dur) var(--ease); display: inline-flex; align-items: center; gap: 6px; }
.filter:hover { border-color: var(--line-strong); }
.filter.on { background: var(--seal); border-color: var(--seal); color: var(--ink-on-dark); }
.filter.on .catdot { background: var(--ink-on-dark) !important; }

/* ---- Chat (extends Queries primitives) ---------------------------------- */
.chat { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: minmax(0, 1fr); border: 1px solid var(--line);
        border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); height: 620px; }
.chat__list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.chat__search { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; color: var(--ink-3); }
.chat__search input { border: 0; outline: none; background: transparent; font-size: var(--fs-small); color: var(--ink-1); width: 100%; font-family: var(--font-sans); }
.chat__new { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 11px 16px;
             border: 0; border-bottom: 1px solid var(--line); background: var(--paper-1); cursor: pointer;
             font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600; color: var(--seal);
             transition: background var(--dur) var(--ease); }
.chat__new:hover { background: var(--seal-tint); }
.chat__pick { max-height: 240px; overflow-y: auto; border-bottom: 1px solid var(--line); background: var(--paper-0); }
.chat__pickrow { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 16px; border: 0;
                 border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--ink-2); }
.chat__pickrow:hover { background: var(--seal-tint); color: var(--seal); }
.chat__pickrow:last-child { border-bottom: 0; }
.chat__threads { overflow-y: auto; flex: 1; }
.cthread { padding: 13px 16px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; gap: 11px; }
.cthread:hover { background: var(--paper-1); }
.cthread.active { background: var(--seal-tint); border-left: 3px solid var(--seal); padding-left: 13px; }
.cthread .av { width: 36px; height: 36px; border-radius: 50%; background: var(--brass); color: var(--ink-on-dark);
        display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 15px; flex-shrink: 0; }
.cthread .nm { font-size: var(--fs-small); font-weight: 600; color: var(--ink-1); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cthread .nm .tm { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); font-weight: 400; flex-shrink: 0; }
.cthread .pv { font-size: var(--fs-caption); color: var(--ink-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cthread .role { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--brass-deep); margin-top: 4px; display: inline-block; }
.chat__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--paper-0); }
.chat__head { padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--bg-raised);
        display: flex; align-items: center; justify-content: space-between; }
.chat__head .who { font-family: var(--font-serif); font-size: 17px; color: var(--ink-1); }
.chat__head .who .role { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
        text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; display: block; }
.secure-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 600;
        color: var(--ok); background: var(--ok-tint); padding: 5px 11px; border-radius: var(--radius-pill); }
.chat__headacts { display: flex; align-items: center; gap: 10px; }
/* WhatsApp click-to-send button in the firm message header (staff/partners). */
.wa-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans);
        font-size: var(--fs-caption); font-weight: 600; cursor: pointer;
        color: #0b6b3a; background: #E6F4EA; border: 1px solid #BFE3CC;
        padding: 6px 12px; border-radius: var(--radius-pill);
        transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.wa-btn:hover { background: #128C4A; border-color: #128C4A; color: #fff; }
.wa-btn:focus-visible { outline: 2px solid #128C4A; outline-offset: 2px; }
.chat__body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.chat__day { text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
        text-transform: uppercase; letter-spacing: 0.08em; margin: 4px 0; }

@media (max-width: 1100px) {
  .calwrap { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .jobgrid { grid-template-columns: repeat(2, 1fr); }
  .docwrap { grid-template-columns: 1fr; }
  .repgrid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .stats, .cols2 { grid-template-columns: 1fr; }
  .login { grid-template-columns: 1fr; }
  .login__aside { display: none; }
  .jobgrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  /* Sidebar becomes an off-canvas drawer toggled by the topbar menu button. */
  .side { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: 264px; max-width: 84vw;
          z-index: 60; transform: translateX(-100%); transition: transform var(--dur) var(--ease);
          box-shadow: var(--shadow-lg); }
  .app--navopen .side { transform: translateX(0); }
  .side__close { display: flex; align-items: center; justify-content: center; position: absolute;
          top: 14px; right: 14px; width: 36px; height: 36px; border: 0; cursor: pointer;
          background: rgba(246,241,231,0.10); color: var(--ink-on-dark); border-radius: var(--radius); }
  .navscrim { position: fixed; inset: 0; background: rgba(33,26,22,0.45); z-index: 50; }
  .app--navopen .navscrim { display: block; animation: scrimin var(--dur) var(--ease); }
  .topbar__menu { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
          flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius);
          background: var(--bg-raised); color: var(--ink-1); cursor: pointer; }
  .topbar { padding: 0 14px; gap: 10px; height: 60px; }
  .topbar .search { width: auto; flex: 1; min-width: 0; }
  .view { padding: 20px 16px; }
  .view__head h1 { font-size: 24px; }
  .chat { grid-template-columns: 1fr; }
  .modalscrim { padding: 16px; }
}