/* ============================================================
   JOIN Handover Admin - design system (single source of truth)
   Linked by editor.html and styleguide.html. Edit tokens or
   components here once; every admin page updates.
   The app shell (topbar + sidebar) lives in admin-nav.js.
   ============================================================ */

/* Tokens + platform-wide components (buttons, chip, pills, tabs, toast)
   come from the shared base, so the admin and the client portal are one
   system. Only admin-specific styles live below - including the denser
   custom form controls (select caret, checkbox).
   base.css here is a DEPLOY COPY - the source of truth is
   ../portal/shared/base.css; re-copy after any design-system change. */
@import "base.css";

/* Linear-style shell: white topbar + white side nav, grey canvas, white cards.
   Full ink retheme lives at the END of this file (DS RETHEME block). */
body{background:var(--bg)}

/* ---- Form controls (admin's denser variant) ---- */
select,input,textarea{font:inherit;font-size:11px;border:1px solid var(--border);border-radius:var(--radius);padding:6px 9px;background:var(--surface);color:var(--fg)}
select:focus,input:focus,textarea:focus{outline:2px solid var(--brand-navy);outline-offset:-1px}
textarea{resize:none;min-height:32px;overflow:hidden}

/* Selects: custom caret, no native chrome */
select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 9px center;background-size:11px;cursor:pointer}
select:hover{border-color:var(--border-strong)}

/* Checkboxes: custom box + tick */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;min-width:16px;padding:0;border:1.5px solid var(--border-strong);border-radius:5px;background:var(--surface);cursor:pointer;vertical-align:middle;transition:background .12s,border-color .12s}
input[type=checkbox]:hover{border-color:var(--muted)}
input[type=checkbox]:checked{background-color:var(--brand-navy);border-color:var(--brand-navy);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:11px}
input[type=checkbox]:focus-visible{outline:2px solid var(--brand-navy);outline-offset:1px}

/* Dates: mono face + calendar icon spacing (same treatment as the portal) */
input[type=date]{font-size:11px;font-variant-numeric:tabular-nums}
input[type=date]::-webkit-calendar-picker-indicator{margin-left:4px;opacity:.6;cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Disabled controls */
select:disabled,input:disabled,textarea:disabled{opacity:.5;cursor:default}

/* ---- Combobox (AdminShell.combobox): select-like trigger, panel with its
   own search row above the full option list ---- */
.combo-input{cursor:pointer;caret-color:transparent;appearance:none;-webkit-appearance:none;padding-right:28px;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 9px center;background-size:11px}
.combo-input:hover{border-color:var(--border-strong)}
.combo-panel{position:fixed;z-index:130;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;min-width:200px}
.combo-search{flex:none;padding:6px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.combo-search input{width:100%;background:var(--surface)}
.combo-list{flex:1;overflow:auto;padding:4px}
.combo-item{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--fg)}
.combo-item.active{background:var(--surface-2)}
.combo-sub{font-size:11px;color:var(--muted)}
.combo-empty{padding:10px;font-size:12px;color:var(--muted)}

/* ---- Buttons: .btn / .btn-primary are in base; admin adds ghost + danger ---- */
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted);padding:7px 8px}
.btn-ghost:hover{background:var(--surface-2);color:var(--fg);border-color:transparent}
.btn[disabled]{opacity:.5}
.btn-danger{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--danger-bg);background:var(--surface);color:var(--danger);font-size:12px;font-weight:500;padding:8px 14px;border-radius:var(--radius);cursor:pointer;white-space:nowrap}
.btn-danger svg{opacity:.85}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn-danger.armed{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}

/* ---- Page scaffolding ---- */
.main{padding:24px 26px;min-width:0}
/* Detail-page head (round.html): mirrors the drawer-head standard -
   eyebrow + title + status row under the title, controls top right. */
.backlink{display:inline-block;font-size:12px;color:var(--muted);text-decoration:none;margin-bottom:8px}
.backlink:hover{color:var(--fg)}
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.page-heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.page-head .save-state{margin-top:8px}
.page-head .seg{margin-top:5px}
.round-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:2px 20px 16px;margin-top:14px}
h1{font-size:20px;font-weight:600;margin-bottom:2px}
.hint{font-size:12px;color:var(--muted);margin-top:2px;max-width:760px}
.bar{display:flex;gap:8px;align-items:center;margin:14px 0;flex-wrap:wrap}
.bar input[type=search]{flex:1;max-width:320px}
.bar .spacer{flex:1}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:auto}

/* ---- Tables ---- */
table{width:100%;border-collapse:collapse}
th{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:12px}
td input,td textarea,td select{width:100%;min-width:110px;border-color:transparent;background-color:transparent}
td input:hover,td textarea:hover,td select:hover{border-color:var(--border)}
td input:focus,td textarea:focus,td select:focus{background-color:var(--surface)}
td input[type=checkbox]{width:16px;min-width:16px}
tr.grouphead td{background:var(--surface-2);font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:6px 12px}
tr.grouphead.drop-into td{box-shadow:inset 0 0 0 2px var(--brand-navy)}
tr.drow.dragging{opacity:.4}
tr.drow.drop-before td{box-shadow:inset 0 2px 0 0 var(--brand-navy)}
tr.drow.drop-after td{box-shadow:inset 0 -2px 0 0 var(--brand-navy)}
tr.speclink{cursor:pointer}
tr.speclink:hover td{background:var(--surface-2)}
.cellname{font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spec-col{max-width:460px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strong{font-weight:600}
.cap{text-transform:capitalize}
.empty{padding:30px 14px;text-align:center;color:var(--muted)}

/* ---- Drag handle ---- */
.gripcell{width:30px;padding-left:10px;padding-right:0}
.grip{cursor:grab;color:var(--muted-2);font-size:15px;line-height:1;padding:2px 3px;border-radius:4px;user-select:none}
.grip:hover{color:var(--fg);background:var(--surface-2)}
.grip:active{cursor:grabbing}

/* ---- Row-end: save status + delete ---- */
.rowend{white-space:nowrap;width:1%;text-align:right}
.rstat{display:inline-block;font-size:11px;font-weight:600;margin-right:8px;vertical-align:middle;transition:opacity .3s;min-width:44px;text-align:right}
.rstat.dirty{color:var(--gold-fg)}
.rstat.saving{color:var(--muted)}
.rstat.saved{color:var(--success-fg)}
.rstat.err{color:var(--danger-fg)}
.rstat.fade{opacity:0}
.del{border:1px solid transparent;background:none;cursor:pointer;color:var(--muted-2);font-size:12px;padding:4px 8px;border-radius:5px}
.del:hover{color:var(--danger);background:var(--danger-bg)}
.del.armed{color:#fff;background:var(--danger);border-color:var(--danger);font-weight:600}

/* ---- Pills, contact chip, level pill, ref tag and .tab come from base ---- */
/* Saved-views tab container (the .tab buttons live in base) */
.tabs{display:flex;gap:20px;align-items:center;border-bottom:1px solid var(--border)}
#segTabs{margin:14px 0 0}
#segTabs:empty{display:none}
.tab .count{color:var(--muted-2);font-weight:400;font-size:11px;margin-left:5px}
/* Bulk-select column + action bar */
.selcell{width:32px;padding-left:12px;padding-right:0}
.bulkbar{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:10px 0 0;background:var(--brand-navy);color:#fff;border-radius:var(--radius);font-size:12px}
.bulkbar.hidden{display:none}
.bulkbar .bn{font-weight:600}
.bulkbar .lbl{color:rgba(255,255,255,.7)}
.bulkbar .sp{flex:1}
.bulkbar button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);padding:5px 11px;font-size:12px;cursor:pointer}
.bulkbar button:hover{background:rgba(255,255,255,.22)}
.bulkbar button.danger{background:var(--danger);border-color:var(--danger)}
.bulkbar button.danger.armed{background:#fff;color:var(--danger);font-weight:600}
.bulkbar select{background-color:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:5px 26px 5px 10px;font-size:11px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:9px}
.bulkbar select option{color:var(--fg)}
.bulkbar input.combo-input{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:5px 26px 5px 10px;font-size:11px;width:150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:9px}
.bulkbar input.combo-input::placeholder{color:rgba(255,255,255,.75)}
.bulkbar input.combo-input:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:-1px}
/* ---- Pill select: THE status control (14 Jul). Trigger is a pastel .pill
   with a caret; AdminShell.openPillPanel renders the options as the same
   pastel pills. Native selects are never used for statuses. ---- */
.psel{display:inline-flex;align-items:center;gap:5px;border:0;cursor:pointer;font:inherit;line-height:1.35}
.psel svg{flex:none;opacity:.55}
.psel:hover{filter:brightness(.96)}
.psel:focus-visible{outline:2px solid var(--brand-navy);outline-offset:1px}
.psel-panel{position:fixed;z-index:140;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:4px;display:flex;flex-direction:column;gap:2px;min-width:150px;max-height:60vh;overflow:auto}
.psel-item{display:flex;align-items:center;border:0;background:none;padding:5px 8px;border-radius:6px;cursor:pointer;font:inherit;font-size:12px;color:var(--fg);text-align:left;white-space:nowrap}
.psel-item:hover{background:var(--surface-2)}
.psel-item.on{background:var(--surface-2)}
.proj-btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:11px;font-weight:500;color:var(--fg);border:1px solid var(--border);background:var(--surface);border-radius:6px;padding:5px 9px;cursor:pointer;max-width:260px;white-space:nowrap;overflow:hidden;text-transform:none;letter-spacing:0}
.proj-btn svg{flex:none;opacity:.55}
.proj-btn:hover{border-color:var(--border-strong)}
.proj-btn:focus-visible{outline:2px solid var(--brand-navy);outline-offset:-1px}
/* Segmented status control (drawer header): one button per state, the
   current one filled. Draft = neutral, live = green, archived/hidden
   = grey (.seg-grey). Reusable anywhere a 2-3 state toggle saves on click. */
.seg{display:inline-flex;flex:none;border:1px solid var(--border);border-radius:999px;background:var(--surface);overflow:hidden}
.seg button{border:0;border-right:1px solid var(--border);background:transparent;padding:4px 12px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:capitalize;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--surface-2);color:var(--fg)}
.seg button:focus-visible{outline:2px solid var(--brand-navy);outline-offset:-2px}
.seg button.on{background:var(--surface-3);color:var(--fg-2)}
.seg button.on.seg-live{background:var(--success-bg);color:var(--success-fg)}
.seg button.on.seg-grey{background:var(--surface-3);color:var(--muted)}

/* ---- Utility ---- */
.m0{margin:0}
.mt0{margin-top:0}
.mt10{margin-top:10px}
.pad-v16{padding:16px 0}
.muted{color:var(--muted)}
.warnx{color:var(--danger-fg);font-weight:500}
.nowrap{white-space:nowrap}
.hidden{display:none}

/* ---- Toast ---- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--brand-navy);color:#fff;font-size:12px;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s;pointer-events:none;z-index:99}
.toast.show{opacity:1}
/* Undo variant: the toast carries an action, so it accepts clicks */
.toast.has-undo{pointer-events:auto}
.toast .toast-undo{margin-left:10px;border:0;background:none;color:#fff;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0}

/* ---- Skeleton loading (first query in flight) ---- */
.skel{display:inline-block;width:100%;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:skel-shimmer 1.4s ease-in-out infinite}
.skel-row td{padding:11px 12px}
.skel-w40{width:40%}
.skel-w60{width:60%}
.skel-w80{width:80%}
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- Inline add (e.g. add level) ---- */
.inline-add{display:inline-flex;gap:6px;align-items:center}
.inline-add input{width:180px}

/* ---- Lists page (managed dropdown editor) ---- */
.lists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.listcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px 14px 12px;display:flex;flex-direction:column}
.listcard h3{font-size:13px;font-weight:600;margin-bottom:2px}
.listcard .sub{font-size:11px;color:var(--muted);margin-bottom:10px}
/* Managed-list option rows (was .chip - renamed so .chip means the
   platform contact chip from base.css). */
.chips{list-style:none;display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.optrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);font-size:12px}
.optrow.dragging{opacity:.4}
.optrow.drop-before{box-shadow:inset 0 2px 0 0 var(--brand-navy)}
.optrow.drop-after{box-shadow:inset 0 -2px 0 0 var(--brand-navy)}
.optrow .grip{font-size:14px}
.optrow .cv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.optrow .x{border:none;background:none;cursor:pointer;color:var(--muted-2);font-size:15px;line-height:1;padding:0 2px}
.optrow .x:hover{color:var(--danger)}
.optrow .x.armed{color:#fff;background:var(--danger);border-radius:4px;padding:0 5px}
.addrow{display:flex;gap:6px;margin-top:auto}
.addrow input{flex:1}

/* ---- Drawer (slide-over modal) ---- */
.drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
.drawer-overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:500px;max-width:94vw;background:var(--surface);box-shadow:-18px 0 44px -14px rgba(20,20,20,.28);transform:translateX(103%);transition:transform .24s cubic-bezier(.4,0,.2,1);z-index:81;display:flex;flex-direction:column}
.drawer.show{transform:none}
.drawer-head{display:flex;align-items:center;gap:12px;padding:15px 16px 15px 20px;border-bottom:1px solid var(--border);background:var(--surface)}
.drawer-heading{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
/* Status row: lifecycle status sits in the head, under the title.
   Visibility (Hidden / Visible to client) sits top right, before the close X. */
.drawer-status{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.drawer-status:empty{display:none}
.drawer-eyebrow{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.drawer-head h2{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-close{width:30px;height:30px;min-width:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:background .12s,color .12s}
.drawer-close:hover{background:var(--surface-2);color:var(--fg);border-color:var(--border-strong)}
.drawer-body{flex:1;overflow:auto;padding:6px 20px 48px}
.dsection{padding:18px 0;border-bottom:1px solid var(--border)}
.dsection:last-child{border-bottom:none}
.dsection h4{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dfooter{display:flex;justify-content:flex-start;gap:8px;padding-top:20px;flex-wrap:wrap}
/* Drawer sticky footer: live save state (auto-save drawers) or
   Cancel + primary action (action drawers). One per drawer. */
.drawer-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--border);background:var(--surface)}
.drawer-foot .sp{flex:1}
.save-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-2);min-width:0}
.save-state svg{flex:none}
.save-state.saved{color:var(--muted)}
.save-state.saved svg{color:var(--success-fg)}
.save-state.saving{color:var(--muted)}
.save-state.error{color:var(--danger-fg);font-weight:500}
.save-state.error a{color:var(--danger-fg);font-weight:600;text-decoration:underline;cursor:pointer}
.save-state .hintx{color:var(--muted);font-weight:400;margin-left:6px}
.save-dot{width:7px;height:7px;min-width:7px;border-radius:50%;background:var(--muted);animation:savepulse 1s ease-in-out infinite}
@keyframes savepulse{0%,100%{opacity:.25}50%{opacity:1}}
/* Add-from-library picker (centered modal) */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:82}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-47%);width:560px;max-width:94vw;max-height:82vh;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:83;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal-head{display:flex;align-items:center;gap:10px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--border)}
.modal-head h2{flex:1;font-size:15px;font-weight:600}
.modal-bar{padding:12px 20px 0}
.modal-bar input{width:100%}
.modal-body{overflow:auto;padding:6px 20px 12px;flex:1}
.modal-foot{display:flex;align-items:center;gap:10px;padding:13px 20px;border-top:1px solid var(--border)}
.modal-foot .sp{flex:1}
.modal-sm{width:420px}
.modal-lg{width:760px}
.lib-group{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);margin:12px 0 3px}
.lib-item{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-radius:var(--radius);cursor:pointer}
.lib-item:hover{background:var(--surface-2)}
.lib-item input{margin-top:2px}
.lib-item .li-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lib-item .li-name{font-weight:600;font-size:12px}
.lib-item .li-sub{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted);margin:14px 0 0}
.np-f input,.np-f select{width:100%;font-weight:400;color:var(--fg)}
.np-note{font-size:11px;color:var(--muted);margin:12px 0 4px;line-height:1.5}
.fkwrap{display:flex;gap:6px;align-items:stretch}
.fkwrap select,.fkwrap input{flex:1;min-width:0}
.fk-add{flex:none;width:32px;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius);color:var(--brand-navy);font-size:16px;line-height:1;cursor:pointer}
.fk-add:hover{background:var(--info-bg)}
.pill-red{background:var(--danger-bg);color:var(--danger)}
.barsel{font-size:12px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--fg);cursor:pointer}
/* Maintenance hub cockpit */
.mh-inbox{display:flex;flex-direction:column;gap:8px}
.ibrow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px}
.ibrow .ib-ic{font-size:18px;color:var(--muted)}
.ibrow.warn .ib-ic{color:var(--gold-fg)}
.ibrow.info .ib-ic{color:var(--brand-navy)}
.ibmain{flex:1;min-width:0}
.ibtitle{font-size:13px}
.ibsub{font-size:11px;color:var(--muted)}
/* Inbox rows that open a round or a page: whole row is the click target */
.ibrow.ibnav{cursor:pointer}
.ibrow.ibnav:hover{background:var(--surface-2)}
/* Section header with a control on the right (e.g. inbox sort toggle) */
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.seg.seg-plain button{text-transform:none}
.pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:start}
.pcol-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px;display:flex;justify-content:space-between}
.rcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;cursor:pointer}
.rcard:hover{border-color:var(--brand-navy)}
.rcard .rc-t{font-size:13px;font-weight:600}
.rcard .rc-m{font-size:11px;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.vclient-name{font-size:13px;font-weight:500;margin-bottom:10px;overflow-wrap:anywhere}
.closeout-row{display:flex;align-items:center;gap:10px}
.stg{font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--border);white-space:nowrap}
.stg.proposing{background:var(--gold-bg);color:var(--gold-fg);border-color:transparent}
.stg.booking{background:var(--info-bg);color:var(--brand-navy);border-color:transparent}
.stg.ready{background:var(--success-bg);color:var(--success-fg);border-color:transparent}
.stg.completed,.stg.draft{background:var(--surface-3);color:var(--muted);border-color:transparent}
/* Maintenance calendar */
.cal-head{display:flex;align-items:center;gap:8px;margin:14px 0 10px}
.cal-title{font-weight:600;font-size:13px;min-width:150px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.cal-dow{background:var(--surface-2);padding:6px 8px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center}
.cal-cell{background:var(--surface);min-height:96px;padding:5px 6px;display:flex;flex-direction:column;gap:3px}
.cal-cell.cal-out{background:var(--surface-2)}
.cal-cell.cal-out .cal-dnum{color:var(--muted-2)}
.cal-cell.cal-today{box-shadow:inset 0 0 0 2px var(--brand-navy)}
.cal-dnum{font-size:11px;color:var(--muted);font-weight:500}
.cal-task{font-size:11px;padding:2px 6px;border-radius:4px;background:var(--surface-3);color:var(--fg-2);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-task:hover{filter:brightness(.96)}
.cal-task.live{background:var(--success-bg);color:var(--success-fg)}
.cal-task.archived{background:var(--gold-bg);color:var(--gold-fg)}
.cal-task.overdue{background:var(--danger-bg);color:var(--danger-fg)}
.cal-wrap{display:grid;grid-template-columns:1fr 250px;gap:16px;align-items:start}
@media(max-width:1100px){.cal-wrap{grid-template-columns:1fr}}
.cal-side{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px}
.cal-side-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.cal-side-g{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);margin:10px 0 4px}
.cal-side-g:first-of-type{margin-top:0}
.cal-sidetask{font-size:12px;padding:6px 8px;border-radius:var(--radius);background:var(--surface-2);cursor:pointer;margin-bottom:4px;display:flex;flex-direction:column;gap:1px}
.cal-sidetask:hover{background:var(--surface-3)}
.cal-sidesys{font-size:10px;color:var(--muted)}
/* Maintenance view toggle (List / Calendar / Schedule) */
.vtoggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.vt{border:0;background:none;padding:6px 13px;font-size:12px;color:var(--muted);cursor:pointer;border-right:1px solid var(--border)}
.vt:last-child{border-right:0}
.vt.active{background:var(--brand-navy);color:#fff;font-weight:600}
/* Schedule board - Kellie's visits */
.sched-top{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
.sched-sec-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 0 8px}
.sched-sec-h:first-child{margin-top:0}
.sched-alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.alertrow{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--gold-bg);border-radius:var(--radius);font-size:12px}
.alert-txt{flex:1;color:var(--fg)}
.tpl-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--brand-navy);padding:3px 8px;border-radius:999px;flex:none}
.tpl-meta{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.tpl-meta label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--muted)}
.tpl-meta input,.tpl-meta select{font-weight:400;color:var(--fg)}
.lead-in{display:flex;align-items:center;gap:6px}
.lead-in input{width:60px}
.lead-in span{font-weight:400;color:var(--muted);font-size:11px}
.visit{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:12px 14px;margin-bottom:12px}
.visit-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.visit-title{flex:1;font-weight:600;border-color:transparent;background:transparent;font-size:13px}
.visit-title:hover,.visit-title:focus{border-color:var(--border);background:var(--surface)}
.visit-date{width:150px}
.visit-items{display:flex;flex-direction:column;gap:10px}
.vgroup-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.vgroup-mail{border:1px solid var(--border);background:var(--surface);color:var(--brand-navy);font-size:10px;font-weight:600;padding:2px 9px;border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:0}
.vgroup-mail:hover{background:var(--info-bg)}
.alertrow.remind{background:var(--info-bg)}
.vitem{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--radius);background:var(--surface-2);font-size:12px;margin-bottom:3px}
.vitem-label{flex:1;min-width:0;overflow-wrap:anywhere}
.vitem.st-done .vitem-label{color:var(--muted)}
.vitem-adhoc{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-fg);background:var(--gold-bg);padding:2px 7px;border-radius:999px}
.vitem-x{border:0;background:none;color:var(--muted-2);cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.vitem-x:hover{color:var(--danger)}
.vitem-note{width:100%;font-size:11px;margin:2px 0 6px}
.visit-add{display:flex;align-items:center;gap:8px;margin-top:9px}
.visit-count{margin-left:auto;font-size:11px;color:var(--muted)}
/* Master-detail: on wide screens the drawer docks beside the list */
tr.speclink.open td{background:var(--info-bg)}
@media (min-width:1280px){
  body.docked .drawer-overlay{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
  body.docked .drawer{width:440px;box-shadow:-1px 0 0 var(--border)}
  body.docked .main{margin-right:440px}
}

/* ---- Drawer fields ---- */
.field{margin-bottom:12px}
.field label{display:block;font-size:11px;font-weight:500;color:var(--fg-2);margin-bottom:4px}
.field input,.field textarea,.field select{width:100%;padding:8px 10px}
.field select{padding-right:28px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field.dcheck{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer}
.field.dcheck input{width:16px;min-width:16px}
.field.dcheck span{font-size:12px;color:var(--fg)}
/* Dependent field indented under its service toggle (e.g. gas isolator) */
.field.indent{margin-left:24px}

/* ---- Drawer: room toggles ---- */
.roomtoggles{display:flex;flex-wrap:wrap;gap:6px}
.rlevel{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin:10px 0 5px;width:100%}
.rlevel:first-child{margin-top:0}
.rtog{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--border);border-radius:999px;font-size:12px;cursor:pointer;background:var(--surface-2);color:var(--fg-2);user-select:none}
.rtog:hover{border-color:var(--border-strong)}
.rtog.on{background:var(--brand-navy);color:#fff;border-color:var(--brand-navy)}

/* ---- Drawer: suppliers ---- */
.suplist{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.suprow{display:flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:var(--radius);padding:7px 9px;background:var(--surface-2)}
.suprow .supname{flex:1;font-weight:600;font-size:12px}
.suprow .snote{flex:1.4;min-width:0;background:var(--surface)}
.suprow .x{border:none;background:none;color:var(--muted-2);cursor:pointer;font-size:16px;line-height:1;padding:0 4px}
.suprow .x:hover{color:var(--danger)}
/* Read-only display rows (key details, linked documents): click to edit */
.suprow.rowlink{cursor:pointer}
.suprow.rowlink:hover{border-color:var(--border-strong)}
.suprow .rowval{flex:1.4;min-width:0;font-size:12px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty-sub{font-size:12px;color:var(--muted);margin-bottom:8px}
/* Room care guide cards */
.carecard{border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;margin-bottom:8px;background:var(--surface-2)}
.cc-head{display:flex;align-items:center;gap:10px}
.cc-head .supname{flex:1;font-weight:600;font-size:12px}
.cc-day{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--fg-2);white-space:nowrap;cursor:pointer}
.cc-day input{width:15px;height:15px;min-width:15px}
.carecard details{margin-top:6px}
.carecard summary{font-size:11px;color:var(--muted);cursor:pointer;list-style:none}
.carecard summary::-webkit-details-marker{display:none}
.carecard textarea{width:100%;margin-top:6px}
.cc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.cc-actions .btn{padding:4px 9px;font-size:11px}
.supadd{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.supadd select,.supadd input{flex:1;min-width:0}
.supadd .btn{flex:0 0 auto;white-space:nowrap}
/* Quiet + button that opens the add-child modal from a drawer */
.add-child{margin-top:8px}

/* ---- Small button ---- */
.btn-sm{padding:5px 10px;font-size:12px}

/* ---- Dashboard + login (index.html, styles moved out of its page head) ---- */
.wrap{max-width:960px;margin:0 auto;padding:24px 26px 100px}
.wrap.flush{margin:0}
.login-logo{height:28px;margin-bottom:14px}
.proj-summary{margin:0 0 12px;color:var(--muted);font-size:13px}
.section{margin-top:26px}
.section-kicker{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.login{max-width:360px;margin:12vh auto 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.login h1{font-size:18px;margin-bottom:16px}
.login label{display:block;font-size:12px;font-weight:500;color:var(--fg-2);margin:12px 0 4px}
.login input{width:100%;padding:9px 12px}
.login .btn{width:100%;justify-content:center;margin-top:16px}
.login .alt{width:100%;justify-content:center;margin-top:8px}
.msg{margin-top:12px;font-size:12px;border-radius:var(--radius);padding:8px 12px;display:none}
.msg.err{display:block;background:var(--danger-bg);color:var(--danger-fg)}
.msg.ok{display:block;background:var(--success-bg);color:var(--success-fg)}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.proj-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:box-shadow .15s}
.proj-card:hover{box-shadow:var(--shadow-lg)}
.proj-card.sel{outline:2px solid var(--brand-navy)}
.proj-card .addr{font-weight:600;font-size:13px}
.meter{height:5px;background:var(--surface-3);border-radius:999px;margin-top:12px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--success);border-radius:999px}
.proj-card .meta{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--muted)}
.proj-card .block{color:var(--warning-fg);font-weight:500}
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);padding:24px;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.over{border-color:var(--brand-navy);background:var(--surface-2);color:var(--fg-2)}
.dropzone .big{font-size:13px;font-weight:500;color:var(--fg-2)}
.uplist{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.uprow{display:flex;justify-content:space-between;font-size:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px}
.uprow .st{font-size:11px;color:var(--muted)}
.uprow.done .st{color:var(--success-fg)}
.uprow.fail .st{color:var(--danger-fg)}
.strong{font-weight:600}
.sub{color:var(--muted);font-size:11px;display:block;margin-top:1px}
.pill-amber{background:var(--warning-bg);color:var(--warning-fg)}
.num{text-align:right;font-size:12px;font-variant-numeric:tabular-nums}
details.group{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:8px;overflow:hidden}
details.group:last-child{margin-bottom:0}
details.group summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
details.group .sum-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
details.group .sum-main .sub{margin-top:0}
details.group summary::-webkit-details-marker{display:none}
details.group summary:hover{background:var(--surface-2)}
details.group .n{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.group-body{border-top:1px solid var(--border)}
.group-body tr:last-child td{border-bottom:none}
/* Dashboard: blocking go-live grouped by project, waiting list rows */
.golive-proj{padding:14px 16px;border-bottom:1px solid var(--border)}
.golive-proj:last-child{border-bottom:none}
.golive-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.golive-addr{font-weight:600;font-size:13px;line-height:1.35}
.golive-sub{font-size:11px;color:var(--muted);display:block;margin-top:1px}
.golive-count{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.rowy td{padding:9px 12px}
.fixrow{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.fixrow select,.fixrow input{font:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);max-width:220px}
.fixrow select:focus,.fixrow input:focus{outline:2px solid var(--brand-navy);outline-offset:-1px}

/* ---- Requests queue ---- */
/* Filter/sort bar: active filters render as small clearable chips */
.filterchips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.filterchips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;background:var(--info-bg);color:var(--brand-navy);border-radius:999px;padding:3px 5px 3px 10px}
.fchip button{border:0;background:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:1px 4px;border-radius:999px}
.fchip button:hover{background:rgba(3,19,43,.12)}
.filter-combo{width:180px}
.req-photos{display:flex;flex-wrap:wrap;gap:8px}
.req-photos a{display:block}
.req-photos img{width:110px;height:82px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);display:block}
.req-photos img:hover{border-color:var(--brand-navy)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;font-size:12px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.tl{display:flex;flex-direction:column;gap:8px}
.tl-ms{font-size:12px;color:var(--muted);padding-left:10px}
.tl-msg{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;font-size:12px;white-space:pre-wrap}
.tl-meta{font-size:11px;color:var(--muted);margin-bottom:2px}
.commentbox{display:flex;gap:8px;align-items:flex-start;margin-top:10px}
.commentbox textarea{flex:1;min-height:56px}
.desc-block{font-size:12px;white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
/* Requests queue on a phone: the table collapses to stacked cards
   (ref + status up top, subject full width, property + age below),
   the drawer goes full width and touch targets grow to 40px. */
@media (max-width:700px){
  .req-queue thead{display:none}
  .req-queue tr.speclink,.req-queue tr.skel-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:12px 14px;border-bottom:1px solid var(--border);min-height:44px}
  .req-queue td{display:block;padding:0;border-bottom:none}
  .req-queue td:nth-child(4),.req-queue td:nth-child(5){display:none}
  .req-queue tr.speclink td:nth-child(1){order:1}
  .req-queue tr.speclink td:nth-child(7){order:2;margin-left:auto}
  .req-queue tr.speclink td:nth-child(3){order:3;flex-basis:100%;white-space:normal;max-width:none}
  .req-queue tr.speclink td:nth-child(2){order:4}
  .req-queue tr.speclink td:nth-child(6){order:5;margin-left:auto}
  .req-queue tr.skel-row td{flex:1}
  .drawer{width:100vw;max-width:100vw}
  .drawer-close{width:40px;height:40px;min-width:40px}
  .drawer-body select,.drawer-body input,.drawer-body .btn{min-height:40px}
  .drawer-foot .btn,.drawer-foot .btn-danger{min-height:40px}
}

/* ---- AI intake ---- */
.ai-steps{max-width:760px}
.ai-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;text-align:center}
.ai-spinner{width:28px;height:28px;border:3px solid var(--surface-3);border-top-color:var(--brand-navy);border-radius:50%;animation:aispin .8s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.ai-line{font-size:13px;color:var(--fg-2);font-weight:500}
.ai-line-sub{font-size:11px;color:var(--muted)}
.dcard{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);padding:10px 12px;margin-bottom:8px}
.dcard-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dcard-head .t{flex:1;font-weight:600;font-size:12px}
.dcard-x{border:none;background:none;color:var(--muted-2);cursor:pointer;font-size:16px;line-height:1;padding:0 4px}
.dcard-x:hover{color:var(--danger)}
/* Intake queue (ai-intake.html) */
.qlist{margin-top:10px}
.qrow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;margin-bottom:6px}
.qrow .pill{text-transform:none;white-space:nowrap}
.qmain{flex:1;min-width:0}
.qname{font-size:12px;font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qsize{font-size:11px;font-weight:400;color:var(--muted);margin-left:6px}
.qerr{font-size:11px;color:var(--danger-fg);margin-top:2px}
.qspin{width:14px;height:14px;min-width:14px;border:2px solid var(--surface-3);border-top-color:var(--brand-navy);border-radius:50%;animation:aispin .8s linear infinite}
.filepick{display:flex;align-items:center;gap:10px;justify-content:center;font-size:12px}
.success-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:16px 18px}
.success-panel h3{font-size:15px;margin-bottom:6px}
.success-panel ul{margin:0 0 12px 18px;font-size:12px;color:var(--fg-2)}

/* ---- Media library ---- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:14px}
.media-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
.media-thumb{position:relative;height:140px;background:var(--surface-3);display:flex;align-items:center;justify-content:center}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.media-glyph{font-size:28px;color:var(--muted)}
.media-tag{position:absolute;top:6px;left:6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:rgba(20,20,20,.7);color:#fff;border-radius:999px;padding:2px 8px}
.media-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.media-body input,.media-body select{width:100%}
.media-foot{display:flex;justify-content:flex-end;padding:0 10px 8px}
.pending-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pending-row{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px}
.pending-row.missing{border-color:var(--danger)}
.pending-thumb{width:74px;height:56px;flex:none;border-radius:var(--radius);background:var(--surface-3);object-fit:cover;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;overflow:hidden}
.pending-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pending-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pending-main .fname{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-fields{display:flex;gap:6px;flex-wrap:wrap}
.pending-fields input[data-cap]{flex:2;min-width:180px}
.pending-fields select,.pending-fields input[data-cat]{flex:1;min-width:120px}

/* ---- Rooms & levels: level section headers with their own controls ---- */
tr.grouphead .gh-wrap{display:flex;align-items:center;gap:6px}
tr.grouphead .gh-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghbtn{border:none;background:none;color:var(--muted);font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;padding:2px 7px;border-radius:4px;white-space:nowrap}
.ghbtn:hover{background:var(--surface);color:var(--fg)}
.ghbtn.gh-del:hover{color:var(--danger);background:var(--danger-bg)}
.ghbtn.armed{color:#fff;background:var(--danger)}
.ghbtn.gh-move{font-size:12px;padding:2px 6px}
.ghbtn:disabled{opacity:.3;cursor:default;pointer-events:none}
td.level-empty{font-size:12px;color:var(--muted);padding:10px 12px}

/* ---- Small-modal textareas (key detail) match the np-f inputs ---- */
.np-f textarea{width:100%;font-weight:400;color:var(--fg)}

/* ---- Document rows inside drawers: name links to the Documents page ---- */
.suprow a.supname{color:var(--brand-navy);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suprow a.supname:hover{text-decoration:underline}

/* ---- Spec import (Import button on the Specs page) ---- */
.imp-actions{display:flex;align-items:center;gap:10px;margin:14px 0 6px}
.imp-note{font-size:11px;color:var(--muted);margin:8px 0 12px;line-height:1.5}
.imp-prev{border:1px solid var(--border);border-radius:var(--radius);overflow:auto;max-height:46vh;margin-top:4px}
.imp-prev td{font-size:12px}
.imp-flag{display:inline-block;font-size:10px;font-weight:600;border-radius:999px;padding:2px 8px;background:var(--warning-bg);color:var(--warning-fg);margin:1px 3px 1px 0;white-space:nowrap}
.imp-check{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:12px;cursor:pointer}
.imp-summary{font-size:12px;line-height:1.8;padding:6px 0}

/* ---- Visit item lifecycle (maintenance hub) ---- */
.vitem.st-client_declined .vitem-label{color:var(--muted);text-decoration:line-through}
/* Manual attendance override (trade replied by email or phone) */
.ovr{border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:10px;font-weight:500;padding:2px 8px;border-radius:999px;cursor:pointer;white-space:nowrap;flex:none}
.ovr:hover{color:var(--fg);border-color:var(--border-strong)}
.ovr.on{background:var(--success-bg);color:var(--success-fg);border-color:transparent;font-weight:600}
.ovr.on.no{background:var(--danger-bg);color:var(--danger-fg)}
.vitem-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin:1px 0 6px;padding-left:8px}
.mrec{margin-bottom:8px}
/* Round tasks table (round.html): hairline stamp line under the task name,
   and a wide-enough trigger for the add-from-plan picker in the toolbar. */
.td-sub{font-size:10px;color:var(--muted);margin-top:2px;padding-left:1px}
.add-plan{width:220px}
/* Round drawer: full-width stacked sections (Details, Client, Trades,
   Internal tasks, Close out). The details row wraps so the stage pill
   drops to its own line instead of truncating, and no control may be
   wider than the drawer body (a horizontal scrollbar is a bug). */
.drawer .visit-h{flex-wrap:wrap}
.drawer .visit-title{flex:1 1 160px;min-width:0}
.drawer .add-child{max-width:100%}
.vclient-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.vclient-col .vclient-name{margin-bottom:0}
.vclient-col .field.dcheck{margin-bottom:0}
.vclient-col .np-note{margin:0}
/* Sub-line under a drawer section heading */
.dsec-sub{font-size:11px;color:var(--muted);margin:-8px 0 12px}
.empty-col{padding:6px 2px}

/* ---- Templates planner (templates.html) ---- */
/* Master-detail: quiet secondary sub-nav of properties on the left
   (transparent on the canvas, active item solid ink), the selected
   property's round templates and jobs on the right. The nav collapses
   to a select above the detail on small screens. */
.planner{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start;margin-top:14px}
.subnav{display:flex;flex-direction:column;gap:8px;position:sticky;top:58px}
.subnav input[type=search]{width:100%}
.subnav-eyebrow{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 9px 0}
.subnav-items{display:flex;flex-direction:column;gap:2px;overflow:auto;max-height:calc(100vh - 210px)}
.subnav-item{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;border:0;background:none;font:inherit;font-size:12px;font-weight:450;color:var(--fg-2);padding:6px 9px;border-radius:var(--radius);cursor:pointer;width:100%;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.subnav-item:hover{background:var(--surface)}
.subnav-item.active{background:var(--fg);color:#fff}
.subnav-sub{font-size:11px;color:var(--muted)}
.subnav-item.active .subnav-sub{color:rgba(255,255,255,.65)}
.pdetail{min-width:0}
.pdetail-h{font-size:15px;font-weight:600;margin:2px 0 12px}
.subnav-sel{display:none}
@media(max-width:760px){
  .planner{grid-template-columns:1fr}
  .subnav{display:none}
  .subnav-sel{display:block;width:100%;margin-bottom:12px}
}
/* Read-only job rows: notes get an ellipsis, the row opens the drawer */
.jnotes{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.prop-sec{margin-bottom:10px}
.prop-body{padding:12px 12px 14px;border-top:1px solid var(--border)}
.prop-body .visit{box-shadow:none}
.jobs-card{margin-top:10px;box-shadow:none}
/* Frequency values are managed list text - keep them sentence case */
.jobs-card .pill{text-transform:none}
/* Task section inside a template card (one merged table per template;
   the Type pill in each row marks Scope vs Internal). The section is a
   drag target: .drop-into marks a drop that appends to the table. */
.tsec{margin-top:14px;border-radius:var(--radius)}
.tsec-h{display:flex;align-items:baseline;gap:10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.tsec-sub{font-size:11px;font-weight:400;text-transform:none;letter-spacing:0}
.tsec.drop-into{outline:2px dashed var(--brand-navy);outline-offset:3px}
.tpl-note{font-size:11px;color:var(--muted);margin-top:8px}
button.rtog{font-family:inherit;line-height:1.3}
.page-save{position:fixed;right:18px;bottom:16px;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;box-shadow:var(--shadow-lg)}
.page-save:has(.save-state:empty){display:none}
/* Year view: 12-month portfolio grid */
.yr-grid{display:grid;grid-template-columns:190px repeat(12,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:14px}
.yr-head{background:var(--surface-2);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:6px 4px;text-align:center}
.yr-prop{background:var(--surface-2);font-size:12px;font-weight:600;padding:8px 10px;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yr-cell{background:var(--surface);min-height:54px;padding:4px;display:flex;flex-direction:column;gap:3px}
.yr-chip{display:block;font-size:10px;padding:2px 6px;border-radius:4px;background:var(--info-bg);color:var(--brand-navy);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;text-align:left}
.yr-chip:hover{filter:brightness(.96)}
.yr-chip.done{background:var(--surface-3);color:var(--muted)}
.yr-chip.ghost{background:var(--surface);border:1px dashed var(--border-strong);color:var(--muted);cursor:default}
@media(max-width:1100px){.yr-grid{grid-template-columns:130px repeat(12,1fr)}.yr-cell{min-height:40px}}

/* ---- Maintenance settings (maintenance-settings.html) ---- */
.settings-wrap{max-width:640px;margin-top:14px}
.set-row{display:flex;align-items:center;gap:16px;padding:13px 16px;border-bottom:1px solid var(--border)}
.set-row:last-child{border-bottom:none}
.set-main{flex:1;min-width:0}
.set-label{font-size:13px;font-weight:500;color:var(--fg)}
.set-hint{font-size:11px;color:var(--muted);margin-top:1px}
.set-ctl{flex:none;display:flex;align-items:center}
.set-ctl input[type=number]{width:80px}
.set-ctl input[type=email]{width:240px}
.set-ctl input[type=text]{width:240px}

/* =========================================================
   DS RETHEME (14 Jul 2026) - ADMIN-ONLY layer.
   The ink theme itself (tokens, pills + pastels, ink buttons,
   focus rings, toast) lives in the shared base.css so the client
   portal matches. This block holds what differs on the admin:
   ink replaces navy EVERYWHERE (incl. remaining --brand-navy
   refs), denser controls, seg track, table + overlay treatments.
   Keep this block LAST in the file.
   ========================================================= */
:root{
  --brand-navy:#141414; /* admin has no brand moments outside the logo image */
}

/* Headings: display face with tight tracking */
h1,.pdetail-h{font-family:var(--font-display);letter-spacing:-.01em}
.drawer-head h2,.modal-head h2,h2{font-family:var(--font-display);letter-spacing:-.005em}

/* ---- Round page: Overview layout ---- */
.round-view{margin-top:14px}
.ov-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.ov-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:12px 14px}
.ov-v{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ov-l{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;align-items:stretch}
.ov-card{padding:16px 18px;margin:0}
.ov-card+.ov-card,.ov-grid+.card{margin-top:0}
.round-view>.card{margin-bottom:12px}
.ov-h{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ov-fields{display:grid;grid-template-columns:1fr 170px;gap:12px}
.ov-fields .field,.ov-card .field{margin-bottom:0}
.ov-card .field>span{display:block;font-size:11px;font-weight:500;color:var(--fg-2);margin-bottom:4px}
.ov-card .field.dcheck{margin:10px 0 8px}
.ov-client-name{font-size:13px;font-weight:500}
.ov-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
.ov-foot{display:flex;justify-content:flex-end;padding:2px 0 24px}
.round-view .card table{margin:0}
@media (max-width:900px){.ov-stats{grid-template-columns:repeat(2,1fr)}.ov-grid{grid-template-columns:1fr}.ov-fields{grid-template-columns:1fr}}

/* ---- Sort button (editor toolbar) ---- */
.sortbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:transparent;font:inherit;font-size:11px;font-weight:500;color:var(--muted);padding:6px 9px;border-radius:var(--radius);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.sortbtn:hover{background:var(--surface-2);color:var(--fg-2)}
.sortbtn.on{color:var(--fg);background:var(--surface-2)}
.sortbtn svg{opacity:.7;flex:none}

/* ---- Dashboard (handover) ---- */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 6px}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:12px 14px}
.stat-v{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat-l{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.dash-cols{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.dash-side .dropzone{padding:22px 14px}
.dash-side .dropzone .big{font-size:12px}
.proj-card{cursor:pointer;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.proj-card.on{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pc-sub{font-size:11px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px}
@media (max-width:1100px){.dash-cols{grid-template-columns:1fr}}
@media (max-width:900px){.stat-strip{grid-template-columns:repeat(2,1fr)}}

/* Buttons: motion + quiet danger-ghost until armed */
.btn{transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn-danger{border-color:transparent;background:transparent}
.btn-danger:hover{background:var(--danger-bg);border-color:transparent}
.btn-danger.armed{background:var(--danger);border-color:var(--danger)}

/* Round-stage pill joins the dotted-pill family */
.stg{display:inline-flex;align-items:center;gap:5px;border:0}
.stg::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.stg.booking{color:var(--info-fg)}

/* Seg: recessed track, raised white active segment */
.seg{padding:3px;gap:2px;background:var(--surface-3);border:0;border-radius:var(--radius)}
.seg button{border:0;border-right:0;background:transparent;padding:3px 11px;border-radius:4px;font-size:11px;font-weight:500;letter-spacing:.01em;color:var(--muted);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.seg button:hover{background:transparent;color:var(--fg)}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm)}
.seg button.on.seg-live{background:var(--surface);color:var(--success-fg)}
.seg button.on.seg-grey{background:var(--surface);color:var(--muted)}

/* Filter chips (requests): active = solid ink */
.fchip{background:var(--fg);color:#fff;padding:4px 6px 4px 11px}
.fchip button:hover{background:rgba(255,255,255,.2)}

/* Tables: white header band, hairline rows */
th{background:var(--surface)}
td{border-bottom-color:var(--border-soft)}

/* Inputs: slightly stronger hairline so fields read on white cards */
select,input,textarea,.combo-input{border-color:var(--border-strong)}
td input,td textarea,td select{border-color:transparent}

/* Overlays: flat ink scrim, no blur */
.drawer-overlay,.modal-overlay{background:var(--scrim);backdrop-filter:none;-webkit-backdrop-filter:none}