:root{
  /* Calendar timed-view hour row height. MUST stay in sync with the
     CAL_HOUR_PX JS constant (search CAL_HOUR_PX). Both define how many px
     equal one hour in day/week views; all event positioning, buffer bands,
     the now-line, and drag-snap math derive from it. */
  --cal-hour-px: 132px;
  /* Dark surfaces - sidebar, topbar, drawers, modals */
  --bg:#14102e;--bg-panel:#1d1840;--bg-card:#272150;--bg-card-hover:#322a63;
  /* Charcoal top bar, matches the mobile app header (mobile --charcoal) */
  --charcoal:#23212b;
  --sb-grad-top:#1c1640;--sb-grad-bot:#0d0a20;--sb-foot-bg:#0b0820;--sb-glass-border:rgba(199,184,255,.35);--sb-item-rest:rgba(255,255,255,.04);--sb-item-hover:rgba(255,255,255,.09);
  --bg-input:#181232;--purple:#6b21ea;--purple-light:#9b55ff;--purple-soft:#c7b8ff;--purple-dim:rgba(107,33,234,.12);
  --purple-border:rgba(107,33,234,.35);--orange:#ff4000;--orange-light:#ff6133;
  --orange-dim:rgba(255,64,0,.12);--orange-border:rgba(255,64,0,.35);
  --text:#ede8ff;--text-muted:#b8aee0;--text-dim:#6b5fa0;
  --border:rgba(255,255,255,.08);--radius:10px;--radius-lg:14px;
  --shadow:0 4px 32px rgba(0,0,0,.5);--shadow-p:0 0 24px rgba(107,33,234,.18);
  --sidebar-w:220px;
  /* Light surfaces - main content area */
  --main-bg:#f2f0f8;--main-card:#ffffff;--main-card-hover:#faf9ff;
  --main-border:rgba(107,33,234,.12);--main-text:#1a1030;--main-text-muted:#5a4d7a;
  --main-input:#ffffff;--main-input-border:rgba(107,33,234,.2);

  /* ============ ADDITIONS (May 12 2026) ============ */
  /* Brand interaction states */
  --purple-hover:#5816c2;--purple-active:#4a0fa3;
  --orange-hover:#e63a00;--orange-active:#cc3300;

  /* Semantic palette */
  --success:#10b981;--success-light:#34d399;--success-dim:rgba(52,211,153,.12);--success-text:#059669;
  --warning:#f59e0b;--warning-light:#fbbf24;--warning-dim:rgba(245,158,11,.12);--warning-text:#92400e;--warning-text-strong:#713f12;
  --danger:#ef4444;--danger-light:#f87171;--danger-dim:rgba(239,68,68,.12);--danger-text:#dc2626;
  --info:#3b82f6;--info-dim:rgba(59,130,246,.12);--info-text:#1e40af;

  /* Form states */
  --text-placeholder:#9ca3af;--text-disabled:#d0d0d8;
  --focus-ring:0 0 0 3px rgba(107,33,234,.25);

  /* Overlays + shadows */
  --overlay:rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 10px 25px rgba(0,0,0,.12);

  /* Radii */
  --radius-sm:4px;--radius-full:9999px;

  /* ============ ADDITIONS (June 9 2026) - Type, weight, line-height, space scales ============ */
  /* Codifies the implicit scales already in use (inline-style catalog, June 9). Numeric names map 1:1 to current px values: Phase 0 is a visual no-op. Off-grid drift (9/15/17px type, 3/5/9px space) is intentionally NOT tokenized; those sites stay inline for Phase 3 review. See MySpark-Inline-Style-Migration-Spec.md. */
  /* Type scale */
  --fs-10:10px;--fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;
  --fs-16:16px;--fs-18:18px;--fs-20:20px;--fs-22:22px;
  /* Weight scale */
  --fw-400:400;--fw-500:500;--fw-600:600;--fw-700:700;--fw-800:800;
  /* Line-height scale (numeric x10: --lh-15 = 1.5) */
  --lh-10:1;--lh-12:1.2;--lh-13:1.3;--lh-14:1.4;--lh-15:1.5;--lh-16:1.6;--lh-17:1.7;
  /* Space scale (2px grid) */
  --space-0:0;--space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;
  --space-10:10px;--space-12:12px;--space-14:14px;--space-16:16px;
  --space-18:18px;--space-20:20px;--space-24:24px;
  /* Light-surface system tokens (June 8 2026), see MySpark-Design-Tokens.docx */
  --divider:rgba(107,33,234,.18);          /* stronger than --main-border for section separation */
  --subnav-bar:#ddd8ee;                      /* tab bar band, clearly distinct from content by tone */
  --subnav-tab-hover:var(--main-text);       /* hover target for inactive tabs */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Lato,sans-serif;background:var(--main-bg);color:var(--main-text);font-size:14px;line-height:1.5}
.hidden{display:none!important}
#mkd-overlay{position:fixed;inset:0;background:var(--main-bg);z-index:1500;display:flex;flex-direction:column;overflow:hidden}
/* Branded light theme + simplifications, scoped to the designer overlay only.
   GrapesJS sets its theme on :root, so we override the concrete classes directly
   for a deterministic light look that matches the app. */
#mkd-overlay{--gjs-main-font:Lato,Helvetica,sans-serif}
#mkd-overlay .gjs-one-bg,#mkd-overlay .gjs-pn-commands,#mkd-overlay .gjs-pn-views,#mkd-overlay .gjs-pn-views-container,#mkd-overlay .gjs-blocks-c{background-color:var(--main-card)}
#mkd-overlay .gjs-pn-panel,#mkd-overlay .gjs-pn-views,#mkd-overlay .gjs-pn-commands{box-shadow:none;border-color:var(--main-border)}
#mkd-overlay .gjs-two-color,#mkd-overlay .gjs-four-color,#mkd-overlay .gjs-sm-sector-label,#mkd-overlay .gjs-block-label,#mkd-overlay .gjs-clm-label{color:var(--main-text)}
#mkd-overlay .gjs-pn-btn{color:var(--main-text-muted)}
#mkd-overlay .gjs-pn-btn:hover{color:var(--main-text)}
#mkd-overlay .gjs-pn-btn.gjs-pn-active{color:var(--purple)}
#mkd-overlay .gjs-three-bg{background-color:var(--purple)}
/* Section/category headers + form fields to light */
#mkd-overlay .gjs-block-category .gjs-title,#mkd-overlay .gjs-sm-sector-title,#mkd-overlay .gjs-trait-category .gjs-title{background-color:var(--main-bg);color:var(--main-text);border-bottom-color:var(--main-border)}
#mkd-overlay .gjs-field{background-color:var(--main-input);color:var(--main-text);border:1px solid var(--main-input-border)}
#mkd-overlay .gjs-field input,#mkd-overlay .gjs-field select,#mkd-overlay .gjs-field textarea{color:var(--main-text)}
/* Compact blocks: 3 per row, smaller icon + label */
#mkd-overlay .gjs-block{width:29%;min-width:0;min-height:58px;padding:.55em .4em;margin:6px 2% 4px;font-size:10px;border-color:var(--main-border);box-shadow:none}
#mkd-overlay .gjs-block:hover{box-shadow:0 0 0 2px var(--purple)}
#mkd-overlay .gjs-block-svg,#mkd-overlay .gjs-block svg{width:24px;height:24px}
#mkd-overlay .gjs-block-label{font-size:9px;font-family:Lato,sans-serif}
/* Style manager lives in the custom #mkd-style "Customize" sidebar, so hide
   GrapesJS's own right panel (empty now) and the class/state selector manager,
   which is not relevant for email editing. */
#mkd-overlay .gjs-pn-views,#mkd-overlay .gjs-pn-views-container{display:none!important}
#mkd-overlay .gjs-clm,#mkd-overlay .gjs-clm-tags,#mkd-overlay .gjs-sm-sels{display:none!important}
/* With the right panel gone, let the canvas fill its container (no blank gap). */
#mkd-overlay .gjs-cv-canvas{width:100%!important;right:0!important}
/* Style sectors always expanded (no collapsing) in the Customize sidebar; the
   headers are static labels — not clickable, no collapse chevron. */
#mkd-style .gjs-sm-sector .gjs-sm-properties{display:block!important}
#mkd-style .gjs-sm-title,#mkd-style .gjs-sm-sector-title{pointer-events:none;cursor:default}
#mkd-style .gjs-caret,#mkd-style [class*="caret"]{display:none!important}
/* Make the exit-preview control an obvious labeled button */
#mkd-overlay .gjs-off-prv{background:var(--orange);color:#fff;border-radius:6px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-md)}
#mkd-overlay .gjs-off-prv svg{width:18px;height:18px;fill:#fff}
#mkd-overlay .gjs-off-prv::after{content:'Exit preview';font-size:12px;font-weight:700;font-family:Lato,sans-serif}
/* Admin-only sidebar items. Body class is set/unset in applyRolePermissions.
   Belt-and-suspenders: even if JS gating misses, the CSS hides them. */
body:not(.role-admin) #sb-admin-label,
body:not(.role-admin) #sb-automations,
body:not(.role-admin) #sb-settings{display:none!important}
body:not(.subaccount-litbiz) #sb-agency-tools,
body:not(.agency-admin) #sb-agency-tools{display:none!important}
/* Role tier backstop — mirrors applyRolePermissions JS hides. */
body.role-user #sb-conversations,
body.role-user #sb-forms,
body.role-user #sb-media,
body.role-user #ppt-specialoffers{display:none!important}
body:not(.role-manager-up) #sb-reporting,
body:not(.role-manager-up) #sb-marketing,
body:not(.role-manager-up) #ppt-transactions,
body:not(.role-manager-up) #ppt-invoices,
body:not(.role-manager-up) #ppt-products{display:none!important}
/* ── AGENCY TOOLS PANEL ─────────────────────────────────── */
#panel-agency-tools{padding:24px 28px 60px}
.at-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-24px -28px 24px;flex-shrink:0;padding:0}
.at-tab{padding:13px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.at-tab:hover{color:var(--main-text)}
.at-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.at-tab-content{display:block}.at-placeholder{padding:60px 20px;text-align:center;color:var(--main-text-muted);font-size:15px;background:var(--main-card);border:1px dashed var(--main-border);border-radius:var(--radius-lg)}
.at-placeholder a{margin-top:16px;display:inline-block}
.at-sec-label{display:flex;align-items:center;gap:10px;margin:28px 0 14px}
.at-sec-label:first-child{margin-top:0}
.at-sec-label-text{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.12em}
.at-sec-label-line{flex:1;height:1px;background:var(--main-border)}



.at-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.at-card-hdr{padding:13px 16px;border-bottom:1px solid var(--main-border);display:flex;align-items:center;gap:10px;background:var(--main-bg)}
.at-card-hdr-title{font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.09em;flex:1}
.at-card-hdr-sub{font-size:11px;color:var(--main-text-muted)}
.at-card-body{padding:14px 16px}



/* Service tier panels */
.at-svc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.at-svc-tab{padding:7px 14px;border-radius:var(--radius);background:var(--main-card);border:1px solid var(--main-border);color:var(--main-text);font-family:'Exo 2',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.at-svc-tab:hover{border-color:var(--purple)}
.at-svc-tab.active{background:var(--purple);border-color:var(--purple);color:#fff}
.at-svc-panel{display:none}
.at-svc-panel.active{display:block}
.at-svc-panel-hdr{padding:14px 16px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none}
.at-svc-panel-name{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;color:var(--main-text);margin-bottom:4px}
.at-svc-panel-desc{font-size:12px;color:var(--main-text-muted);line-height:1.5}
.at-tiers-grid{display:grid;gap:12px;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.at-tiers-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:700px){.at-tiers-grid{grid-template-columns:1fr!important}}
.at-tier-card{padding:16px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);display:flex;flex-direction:column}
.at-tier-card.featured{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple)}
.at-tier-name{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.at-tier-price{font-family:'Exo 2',sans-serif;font-size:24px;font-weight:800;color:var(--purple);margin-bottom:6px;line-height:1}
.at-tier-price span{font-size:12px;font-weight:500;color:var(--main-text-muted);margin-left:2px}
.at-tier-note{font-size:11px;color:var(--main-text-muted);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--main-border);line-height:1.5}
.at-tier-features{list-style:none;padding:0;margin:0;font-size:12px;color:var(--main-text);line-height:1.7}
.at-tier-features li{padding-left:14px;position:relative}
.at-tier-features li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--purple)}

/* Accordion (SOP, Playbook) */

::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--purple-border);border-radius:3px}

/* AUTH */
#auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 25% 20%,rgba(107,33,234,.22) 0%,transparent 55%),
             radial-gradient(ellipse at 75% 80%,rgba(255,64,0,.12) 0%,transparent 50%),var(--bg)}
.auth-card{background:var(--bg-panel);border:1px solid var(--purple-border);border-radius:var(--radius-lg);
  padding:44px 40px;width:380px;box-shadow:var(--shadow),var(--shadow-p)}
.auth-logo{text-align:center;margin-bottom:32px}
.auth-logo img{width:80px;height:80px;object-fit:contain;border-radius:12px}
.auth-logo h1{font-family:Exo 2,sans-serif;font-size:22px;font-weight:800;margin-top:12px;color:#fff}
.auth-logo h1 span{color:var(--orange)}
.auth-subtitle{font-size:12px;color:var(--text-muted);margin-top:3px}
.auth-error{background:var(--orange-dim);border:1px solid var(--orange-border);color:var(--orange-light);
  padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:14px}

/* FORMS */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg-input);
  border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;
  font-family:Lato,sans-serif;font-size:14px;transition:border-color .2s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.form-group textarea{resize:vertical;min-height:80px}
.form-group select option{background:var(--bg-card)}
.pkg-field{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;font-family:Lato,sans-serif;font-size:14px;outline:none;box-sizing:border-box}
.pkg-field:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.pkg-field option{background:var(--bg-card)}
.pkg-field-label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--main-text-muted);margin-bottom:4px}
/* Radio and checkbox inputs should NOT inherit the full-width style above */
.form-group input[type="radio"],.form-group input[type="checkbox"]{width:auto;padding:0}
/* Date/time pickers: render custom white icons so the picker is always
   visible regardless of how the browser handles color-scheme. The native
   indicator is made transparent but stays clickable on top. */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--radius);
  font-family:Lato,sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:none;
  transition:all .18s;white-space:nowrap}
.btn-primary{background:var(--orange);color:#fff}
.btn-action{background:var(--orange);color:#fff;border:none;border-radius:var(--radius)}
.btn-action:hover{background:var(--orange-hover)}
.btn-action:active{background:var(--orange-active)}
.btn-action:disabled{opacity:.5;cursor:not-allowed}.btn-primary:hover{background:var(--orange-light)}
.btn-purple{background:var(--purple);color:#fff}.btn-purple:hover{background:var(--purple-light)}
.btn-ghost{background:transparent;color:var(--main-text-muted);border:1px solid var(--main-border)}
.btn-ghost:hover{background:var(--main-bg);color:var(--main-text);border-color:var(--purple-border)}
.btn-danger{background:rgba(239,68,68,.12);color:var(--danger-light);border:1px solid rgba(239,68,68,.22)}
.btn-danger:hover{background:rgba(239,68,68,.22)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-icon{padding:7px;background:transparent;border:1px solid var(--border);color:rgba(237,232,255,.82)}
.btn-icon:hover{background:var(--bg-card);color:var(--text)}
.btn-full{width:100%;justify-content:center}
/* Universal press feedback so every button responds the instant it is clicked,
   instead of feeling dead until the action renders. Composes with per-variant
   :active background rules. Disabled/busy buttons never press. */
.btn:active:not(:disabled):not(.btn-busy){transform:translateY(1px);filter:brightness(.94)}
.btn:disabled{opacity:.55;cursor:not-allowed}
/* Busy state for async actions (Layer 3): block input, show a spinner, dim. The
   label is swapped to a "working" word by _withBusyBtn. */
.btn-busy{pointer-events:none;opacity:.8;cursor:progress}
.btn-spin{width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;animation:btnspin .6s linear infinite;flex:0 0 auto;vertical-align:middle}
@keyframes btnspin{to{transform:rotate(360deg)}}
.icon-btn-xs{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;
  display:inline-flex;align-items:center;border-radius:4px;transition:all .15s}
.icon-btn-xs:hover{color:var(--orange);background:var(--orange-dim)}
.icon-btn-xs svg{width:13px;height:13px}

/* APP LAYOUT */
#app{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
#sidebar{width:var(--sidebar-w);flex-shrink:0;background:linear-gradient(180deg,var(--sb-grad-top) 0%,var(--bg-panel) 60%,var(--sb-grad-bot) 100%);
  border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50}
.sb-logo{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.sb-logo img{width:32px;height:32px;object-fit:contain;border-radius:6px}
.sb-logo-text{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:800;color:#ffffff}
.sb-logo-text span{color:var(--orange)}
.sb-nav{flex:1;overflow-y:auto;padding:10px 8px}
.sb-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--radius);
  font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:all .18s;
  background:var(--sb-item-rest);border:1px solid transparent;width:100%;text-align:left;font-family:Lato,sans-serif;margin-bottom:3px}
.sb-item:hover{background:var(--sb-item-hover);color:var(--text)}
.sb-item.active{
  background:linear-gradient(180deg,rgba(155,85,255,.28) 0%,rgba(107,33,234,.20) 100%);
  color:var(--purple-soft);font-weight:600;position:relative;
  border:1px solid var(--sb-glass-border);
  box-shadow:0 2px 10px rgba(107,33,234,.30),inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sb-item.active svg{color:var(--orange)}
.sb-item svg{width:18px;height:18px;flex-shrink:0;color:rgba(255,255,255,.72);transition:color .18s}
.sb-item:hover svg{color:var(--purple-light)}
.sb-section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-dim);padding:12px 12px 5px;margin-top:4px}
.sb-bottom{border-top:1px solid var(--border);padding:12px 8px;background:var(--sb-foot-bg)}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;transition:all .18s}
.sb-user:hover{background:var(--bg-card)}
.sb-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:Exo 2,sans-serif;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.sb-user-name{font-size:13px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.85)}
.sb-user-role{font-size:10px;color:rgba(255,255,255,.5)}

/* TOP BAR */
#main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#top-bar{height:52px;background:var(--charcoal);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0;position:relative}
/* Realtime inbound-message pill: absolutely centered in the top bar so it never
   reflows or overlaps the title/controls. Hidden = opacity:0 + no pointer events
   (stays in DOM, zero layout impact). Height stays within the 52px bar. */
.ws-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(-6px);
  display:flex;align-items:center;gap:2px;max-width:440px;height:34px;padding:0 4px 0 12px;
  background:var(--main-card);border:1px solid var(--main-border);border-radius:17px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;z-index:60;overflow:hidden;white-space:nowrap}
.ws-banner.ws-banner-show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) translateY(0)}
.ws-banner-main{display:flex;align-items:center;gap:4px;min-width:0;max-width:404px;
  background:none;border:none;cursor:pointer;padding:0;font-size:12.5px;color:var(--main-text);
  overflow:hidden;font-family:Lato,sans-serif}
.ws-banner-label{font-weight:700;color:var(--purple);flex:0 0 auto}
.ws-banner-name{font-weight:600;flex:0 0 auto}
.ws-banner-text{color:var(--main-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ws-banner-x{flex:0 0 auto;background:none;border:none;cursor:pointer;color:var(--main-text-muted);
  font-size:17px;line-height:1;padding:2px 6px;margin-left:2px;border-radius:8px}
.ws-banner-x:hover{color:var(--main-text);background:var(--main-card-hover)}
.top-bar-title{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;flex:1;color:#ffffff}
.sync-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim)}
.sync-dot.synced{background:var(--success-light)}.sync-dot.syncing{background:var(--orange);animation:blink 1s infinite}
.sync-dot.error{background:var(--danger-light)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* NOTIF BELL */
.notif-wrap{position:relative}
.notif-btn{position:relative;background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  padding:7px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;transition:all .18s}
.notif-btn:hover{background:var(--bg-card);color:var(--text)}
.notif-btn svg{width:16px;height:16px}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--orange);color:#fff;
  font-size:9px;font-weight:700;border-radius:10px;padding:1px 5px;min-width:16px;text-align:center}
.notif-drop{position:absolute;top:calc(100% + 8px);right:0;width:360px;
  background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);z-index:300;overflow:hidden}
.notif-drop-head{padding:12px 16px;border-bottom:1px solid var(--divider);
  display:flex;align-items:center;justify-content:space-between;color:var(--main-text)}
.notif-drop-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text)}
.notif-drop-list{max-height:320px;overflow-y:auto}
.notif-item{padding:11px 16px;border-bottom:1px solid var(--main-border);cursor:pointer;
  transition:background .15s;display:flex;align-items:flex-start;gap:10px}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--main-card-hover)}
.notif-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.ni-overdue{background:rgba(239,68,68,.2);color:var(--danger-light)}
.ni-due{background:var(--orange-dim);color:var(--orange)}
.ni-appt{background:var(--purple-dim);color:var(--purple-light)}
.notif-text{font-size:12px;color:var(--main-text);line-height:1.45}
.notif-sub{font-size:10px;color:var(--main-text);margin-top:2px}
.notif-empty{padding:28px;text-align:center;color:var(--main-text-muted);font-size:13px}
.notif-item .icon-btn-xs{color:var(--main-text-muted)}
.ni-event{background:var(--purple-dim);color:var(--purple-light)}
.ni-success{background:var(--success-dim);color:var(--success-light)}
.ni-info{background:var(--info-dim);color:var(--info)}
.ni-warn{background:var(--orange-dim);color:var(--orange)}
.ni-alert{background:var(--danger-dim);color:var(--danger-light)}
.notif-digest{padding:8px 14px;border-bottom:1px solid var(--divider);font-size:11px;
  color:var(--main-text-muted);line-height:1.5}
.notif-digest b{color:var(--main-text);font-weight:700}
.notif-digest .nd-alert b{color:var(--danger-light)}
@keyframes notifPulse{0%{box-shadow:0 0 0 0 rgba(243,128,32,.55)}70%{box-shadow:0 0 0 6px rgba(243,128,32,0)}100%{box-shadow:0 0 0 0 rgba(243,128,32,0)}}
.notif-badge:not(.hidden){animation:notifPulse 2s ease-out infinite}
.notif-time{font-size:10px;color:var(--main-text-muted);margin-top:2px;opacity:.85}
/* Collapsed category groups in the bell (e.g. "5 appointments tomorrow"). */
.notif-group{border-bottom:1px solid var(--main-border)}
.notif-group:last-child{border-bottom:none}
.notif-group-head{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer}
.notif-group-head:hover{background:var(--main-card-hover)}
.notif-group-head .flex-1{min-width:0}
.notif-group-count{font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--purple-dim);color:var(--purple);display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.notif-group-head .ng-chev{color:var(--main-text-muted);transition:transform .15s;flex-shrink:0}
.notif-group.open .ng-chev{transform:rotate(90deg)}
.notif-group-body{display:none}
.notif-group.open .notif-group-body{display:block;box-shadow:inset 2px 0 0 var(--purple-border)}
.notif-group-body .notif-item{padding-left:22px;background:var(--main-bg)}
/* Child of an event group: the header already said who it is from, so the
   timestamp leads and the repeated sentence sits under it, dimmed. */
.notif-repeat-sub{font-size:10px;color:var(--main-text-muted);margin-top:2px;opacity:.8}
.notif-actions{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--divider);position:sticky;top:0;background:var(--main-card);z-index:1}
.notif-actions .btn[disabled]{opacity:.4;cursor:default}

/* PANELS */
#panels{flex:1;overflow:hidden;position:relative;background:var(--main-bg)}
.panel{position:absolute;inset:0;overflow-y:auto;padding:22px 24px;background:var(--main-bg);color:var(--main-text);
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --bg-card:var(--main-card);
  --bg-card-hover:var(--main-card-hover);
  --bg-input:var(--main-input);
  --border:var(--main-border);
}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px}
.page-title{font-family:Exo 2,sans-serif;font-size:20px;font-weight:700}
.page-subtitle{font-size:12px;color:var(--main-text-muted);margin-top:2px}

/* DASHBOARD */
.dash-greeting{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.dash-greeting h2{font-family:'Exo 2',sans-serif;font-size:24px;font-weight:800;margin-bottom:0;color:var(--main-text)}
.dash-greeting h2 span{color:var(--orange)}
.dash-datetime{font-size:13px;color:var(--main-text-muted)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.acct-row{transition:border-color .12s ease,box-shadow .12s ease}
.acct-row:hover{border-color:var(--purple);box-shadow:0 4px 16px rgba(107,33,234,.13)}
.acct-row-main{cursor:pointer}
.acct-stat{text-align:left}
.acct-stat .n{font-family:Exo 2,sans-serif;font-weight:800;line-height:1;font-size:18px}
.acct-stat .l{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);margin-top:3px;white-space:nowrap}
.acct-chev{display:inline-flex;align-items:center;color:var(--main-text-muted);transition:transform .18s ease;margin-left:2px}
.acct-expand{border-top:1px dashed var(--main-border);padding:12px 16px;align-items:center;gap:8px;flex-wrap:wrap;background:var(--main-card-hover);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.acct-expand .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);font-weight:700;margin-right:4px}
.stat-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);
  padding:14px 16px;border-top:2px solid var(--purple);box-shadow:0 2px 12px rgba(107,33,234,.07)}
.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);font-weight:600;margin-bottom:4px}
.stat-val{font-family:'Exo 2',sans-serif;font-size:24px;font-weight:800;color:var(--main-text)}
.dash-grid{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:start}
.dash-grid-left{display:flex;flex-direction:column;gap:16px;min-width:0}
.dash-grid-right{display:flex;flex-direction:column;gap:16px;min-width:0}
.dash-card-fixed{display:flex;flex-direction:column;height:280px}
.dash-card-fixed .dash-scroll-list{flex:1;overflow-y:auto}
.dash-card-activity{display:flex;flex-direction:column;height:280px}
.dash-card-activity .dash-scroll-list{flex:1;overflow-y:auto}
#dash-revenue-card #dash-revenue-svg{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
#dash-revenue-card #dash-revenue-svg svg{width:100%;height:100%}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}
.dash-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;box-shadow:0 2px 12px rgba(107,33,234,.07)}
.dash-card-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.dash-card-title-row .dash-card-title{margin-bottom:0}
.dash-card-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;margin-bottom:14px;color:var(--main-text);
  display:flex;align-items:center;gap:8px}
.dash-card-title svg{width:14px;height:14px;color:var(--orange)}
.dash-scroll-list{max-height:340px;overflow-y:auto;padding-right:4px}
.dash-scroll-list::-webkit-scrollbar{width:6px}
.dash-scroll-list::-webkit-scrollbar-thumb{background:var(--main-border);border-radius:3px}
.dash-scope-pill{display:inline-flex;background:var(--main-bg);border:1px solid var(--main-border);border-radius:999px;padding:2px;font-size:11px;font-weight:600}
.dash-scope-pill button{background:transparent;border:none;color:var(--main-text-muted);padding:3px 10px;border-radius:999px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit}
.dash-scope-pill button.active{background:var(--purple);color:#fff}

/* Hero card: today at a glance */
.dash-hero{background:linear-gradient(135deg,rgba(107,33,234,.18) 0%,rgba(255,64,0,.10) 100%);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px 22px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;overflow:hidden;transition:background .8s ease}
.dash-hero-block{display:flex;flex-direction:column;gap:4px;min-width:120px}
.dash-hero-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.dash-hero-val{font-family:'Exo 2',sans-serif;font-size:22px;font-weight:800;color:var(--main-text);line-height:1.1}
.dash-hero-sub{font-size:11px;color:var(--main-text-muted)}
/* Time-of-day scenes behind the dashboard hero. Each daypart paints an
   illustrated SVG (self-contained data URI) under a left-weighted white scrim
   so the stats stay readable. Daypart set by _dashDaypart() on #dash-hero. */
.dash-hero[data-daypart] .dash-hero-val{text-shadow:0 1px 2px rgba(255,255,255,.8)}
.dash-hero[data-daypart] .dash-hero-label,.dash-hero[data-daypart] .dash-hero-sub{text-shadow:0 1px 1px rgba(255,255,255,.6)}
.dash-hero[data-daypart="dawn"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNhZWJmZTgnLz48c3RvcCBvZmZzZXQ9Jy41NScgc3RvcC1jb2xvcj0nI2U2YzNkNicvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI2ZmZDdhZCcvPjwvbGluZWFyR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSdnbG93JyBjeD0nLjUnIGN5PScuNScgcj0nLjUnPjxzdG9wIG9mZnNldD0nMCcgc3RvcC1jb2xvcj0nI2ZmZjRkNicvPjxzdG9wIG9mZnNldD0nLjQ1JyBzdG9wLWNvbG9yPScjZmZkMzlhJyBzdG9wLW9wYWNpdHk9Jy45Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZmZkMzlhJyBzdG9wLW9wYWNpdHk9JzAnLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0nODAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0ndXJsKCNza3kpJy8+PGNpcmNsZSBjeD0nNTY1JyBjeT0nMTU4JyByPScxMzAnIGZpbGw9J3VybCgjZ2xvdyknLz48Y2lyY2xlIGN4PSc1NjUnIGN5PScxNTgnIHI9JzQyJyBmaWxsPScjZmZmMWQyJy8+PGcgZmlsbD0nI2Y0YzlkNicgb3BhY2l0eT0nLjcnPjxlbGxpcHNlIGN4PScyNTAnIGN5PSc2MCcgcng9JzYwJyByeT0nMTEnLz48ZWxsaXBzZSBjeD0nNjYwJyBjeT0nNDUnIHJ4PSc0OCcgcnk9JzknLz48L2c+PHBhdGggZD0nTTAgMTY4IFExNjAgMTM4IDMzMCAxNjAgVDgwMCAxNTQgVjIwMCBIMCBaJyBmaWxsPScjYTc5Y2NkJyBvcGFjaXR5PScuNTUnLz48cGF0aCBkPSdNMCAxODIgUTIxMCAxNTYgNDQwIDE3OCBUODAwIDE3NCBWMjAwIEgwIFonIGZpbGw9JyM4Mjc3YjUnIG9wYWNpdHk9Jy42NScvPjwvc3ZnPgo=") center/cover no-repeat}
.dash-hero[data-daypart="morning"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyM3OWI2ZWYnLz48c3RvcCBvZmZzZXQ9Jy42JyBzdG9wLWNvbG9yPScjY2ZlN2ZiJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZmRmMGM5Jy8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J2dsb3cnIGN4PScuNScgY3k9Jy41JyByPScuNSc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjZmZmYmU4Jy8+PHN0b3Agb2Zmc2V0PScuNCcgc3RvcC1jb2xvcj0nI2ZmZTc5YScgc3RvcC1vcGFjaXR5PScuOTUnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNmZmU3OWEnIHN0b3Atb3BhY2l0eT0nMCcvPjwvcmFkaWFsR3JhZGllbnQ+PGZpbHRlciBpZD0nc29mdCcgeD0nLTMwJScgeT0nLTMwJScgd2lkdGg9JzE2MCUnIGhlaWdodD0nMTYwJSc+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMy4yJy8+PC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAnIGhlaWdodD0nMjAwJyBmaWxsPSd1cmwoI3NreSknLz48Y2lyY2xlIGN4PSc2MzAnIGN5PSc3NCcgcj0nOTUnIGZpbGw9J3VybCgjZ2xvdyknLz48Y2lyY2xlIGN4PSc2MzAnIGN5PSc3NCcgcj0nMzAnIGZpbGw9JyNmZmY2Y2YnLz48ZyBmaWxsPScjZmZmZmZmJyBvcGFjaXR5PScuODInIGZpbHRlcj0ndXJsKCNzb2Z0KSc+PGc+PGVsbGlwc2UgY3g9JzIzMicgY3k9Jzg0JyByeD0nNjInIHJ5PScxMCcvPjxjaXJjbGUgY3g9JzE5OCcgY3k9JzgwJyByPScxNScvPjxjaXJjbGUgY3g9JzIyMicgY3k9JzcyJyByPScyMicvPjxjaXJjbGUgY3g9JzI1MCcgY3k9Jzc2JyByPScxOCcvPjxjaXJjbGUgY3g9JzI3MicgY3k9JzgyJyByPScxNCcvPjwvZz48Zz48ZWxsaXBzZSBjeD0nNDk4JyBjeT0nMTEyJyByeD0nNDQnIHJ5PSc4Jy8+PGNpcmNsZSBjeD0nNDgwJyBjeT0nMTA4JyByPScxMycvPjxjaXJjbGUgY3g9JzUwMCcgY3k9JzEwMicgcj0nMTgnLz48Y2lyY2xlIGN4PSc1MjAnIGN5PScxMDgnIHI9JzEzJy8+PC9nPjwvZz48cGF0aCBkPSdNMCAxNjggUTE3MCAxNDIgMzUwIDE2MiBUODAwIDE1NiBWMjAwIEgwIFonIGZpbGw9JyM4ZmMwN2EnIG9wYWNpdHk9Jy42Jy8+PHBhdGggZD0nTTAgMTg0IFEyMjAgMTYwIDQ3MCAxODAgVDgwMCAxNzYgVjIwMCBIMCBaJyBmaWxsPScjNmJhODVjJyBvcGFjaXR5PScuNycvPjwvc3ZnPgo=") center/cover no-repeat}
.dash-hero[data-daypart="midday"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyMzZjkyZTQnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNhN2Q1ZjYnLz48L2xpbmVhckdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0nZ2xvdycgY3g9Jy41JyBjeT0nLjUnIHI9Jy41Jz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNmZmZlZjInLz48c3RvcCBvZmZzZXQ9Jy41JyBzdG9wLWNvbG9yPScjZmZmMmIwJyBzdG9wLW9wYWNpdHk9Jy45Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZmZmMmIwJyBzdG9wLW9wYWNpdHk9JzAnLz48L3JhZGlhbEdyYWRpZW50PjxmaWx0ZXIgaWQ9J3NvZnQnIHg9Jy0yMCUnIHk9Jy0yMCUnIHdpZHRoPScxNDAlJyBoZWlnaHQ9JzE0MCUnPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249JzQnLz48L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9JzgwMCcgaGVpZ2h0PScyMDAnIGZpbGw9J3VybCgjc2t5KScvPjxjaXJjbGUgY3g9JzY5MCcgY3k9JzQ2JyByPSc5MCcgZmlsbD0ndXJsKCNnbG93KScvPjxjaXJjbGUgY3g9JzY5MCcgY3k9JzQ2JyByPScyNicgZmlsbD0nI2ZmZmJkOCcvPjxnIGZpbGw9JyNmZmZmZmYnIG9wYWNpdHk9Jy41JyBmaWx0ZXI9J3VybCgjc29mdCknPjxlbGxpcHNlIGN4PScyMTAnIGN5PSc3OCcgcng9JzYyJyByeT0nMjInLz48ZWxsaXBzZSBjeD0nMjg1JyBjeT0nNjgnIHJ4PSc0Nicgcnk9JzE4Jy8+PGVsbGlwc2UgY3g9JzE1MCcgY3k9Jzg2JyByeD0nNDAnIHJ5PScxNicvPjxlbGxpcHNlIGN4PSc0NzAnIGN5PScxMjAnIHJ4PSc1Micgcnk9JzE4Jy8+PGVsbGlwc2UgY3g9JzUzMCcgY3k9JzExMicgcng9JzM4JyByeT0nMTUnLz48L2c+PHBhdGggZD0nTTAgMTcwIFExODAgMTQ2IDM3MCAxNjQgVDgwMCAxNTggVjIwMCBIMCBaJyBmaWxsPScjN2JiODY3JyBvcGFjaXR5PScuNicvPjxwYXRoIGQ9J00wIDE4NiBRMjMwIDE2MiA0ODAgMTgyIFQ4MDAgMTc4IFYyMDAgSDAgWicgZmlsbD0nIzVjOWU0ZCcgb3BhY2l0eT0nLjcnLz48L3N2Zz4K") center/cover no-repeat}
.dash-hero[data-daypart="afternoon"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNjN2E2ZDInLz48c3RvcCBvZmZzZXQ9Jy40NScgc3RvcC1jb2xvcj0nI2ZmY2Y5NCcvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI2ZmZTNhZCcvPjwvbGluZWFyR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSdnbG93JyBjeD0nLjUnIGN5PScuNScgcj0nLjUnPjxzdG9wIG9mZnNldD0nMCcgc3RvcC1jb2xvcj0nI2ZmZjJjZicvPjxzdG9wIG9mZnNldD0nLjQ1JyBzdG9wLWNvbG9yPScjZmZjMDZhJyBzdG9wLW9wYWNpdHk9Jy45NScvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI2ZmYzA2YScgc3RvcC1vcGFjaXR5PScwJy8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9JzgwMCcgaGVpZ2h0PScyMDAnIGZpbGw9J3VybCgjc2t5KScvPjxjaXJjbGUgY3g9JzYxMCcgY3k9JzEyMCcgcj0nMTIwJyBmaWxsPSd1cmwoI2dsb3cpJy8+PGNpcmNsZSBjeD0nNjEwJyBjeT0nMTIwJyByPSc0NCcgZmlsbD0nI2ZmZTFhNicvPjxnIGZpbGw9JyNmZmQ5YWQnIG9wYWNpdHk9Jy44Jz48ZWxsaXBzZSBjeD0nMjUwJyBjeT0nNjQnIHJ4PSc1OCcgcnk9JzE1Jy8+PGVsbGlwc2UgY3g9JzE3MCcgY3k9JzcyJyByeD0nNDAnIHJ5PScxMicvPjxlbGxpcHNlIGN4PSc3MDAnIGN5PSc1Micgcng9JzQ0JyByeT0nMTInLz48L2c+PHBhdGggZD0nTTAgMTcwIFExNzAgMTQ0IDM2MCAxNjQgVDgwMCAxNTggVjIwMCBIMCBaJyBmaWxsPScjYzk4ZjVjJyBvcGFjaXR5PScuNTUnLz48cGF0aCBkPSdNMCAxODUgUTIyMCAxNjAgNDcwIDE4MSBUODAwIDE3NiBWMjAwIEgwIFonIGZpbGw9JyM5YzZmNDUnIG9wYWNpdHk9Jy42NScvPjwvc3ZnPgo=") center/cover no-repeat}
.dash-hero[data-daypart="evening"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyMzYTJjNjYnLz48c3RvcCBvZmZzZXQ9Jy41JyBzdG9wLWNvbG9yPScjYjA1MTdlJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZmY4YTU0Jy8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J2dsb3cnIGN4PScuNScgY3k9Jy41JyByPScuNSc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjZmZlOWMyJy8+PHN0b3Agb2Zmc2V0PScuNCcgc3RvcC1jb2xvcj0nI2ZmOTU1YScgc3RvcC1vcGFjaXR5PScuOTUnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNmZjk1NWEnIHN0b3Atb3BhY2l0eT0nMCcvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAnIGhlaWdodD0nMjAwJyBmaWxsPSd1cmwoI3NreSknLz48Y2lyY2xlIGN4PSc1NjAnIGN5PScxNjgnIHI9JzE0MCcgZmlsbD0ndXJsKCNnbG93KScvPjxjaXJjbGUgY3g9JzU2MCcgY3k9JzE2OCcgcj0nNTInIGZpbGw9JyNmZmQzOWEnLz48ZyBmaWxsPScjNWEzZjc0JyBvcGFjaXR5PScuNTUnPjxlbGxpcHNlIGN4PScyNTAnIGN5PSc1OCcgcng9JzYwJyByeT0nMTAnLz48ZWxsaXBzZSBjeD0nNjgwJyBjeT0nNDInIHJ4PSc0Nicgcnk9JzgnLz48L2c+PHBhdGggZD0nTTAgMTYyIFExNTAgMTMyIDMyMCAxNTQgVDgwMCAxNDggVjIwMCBIMCBaJyBmaWxsPScjM2IyZjVjJyBvcGFjaXR5PScuOCcvPjxwYXRoIGQ9J00wIDE4MCBRMjEwIDE1MiA0NDAgMTc2IFQ4MDAgMTcyIFYyMDAgSDAgWicgZmlsbD0nIzI0MWQ0MCcvPjwvc3ZnPgo=") center/cover no-repeat}
.dash-hero[data-daypart="night"]{background:linear-gradient(90deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.34) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyMwZDEyMzgnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyMyODI5NWYnLz48L2xpbmVhckdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0nbW9vbicgY3g9Jy41JyBjeT0nLjUnIHI9Jy41Jz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNmM2Y1ZmYnLz48c3RvcCBvZmZzZXQ9Jy4zNScgc3RvcC1jb2xvcj0nI2U3ZWJmZicgc3RvcC1vcGFjaXR5PScuODUnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNlN2ViZmYnIHN0b3Atb3BhY2l0eT0nMCcvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSdtZmFjZScgY3g9Jy40JyBjeT0nLjM2JyByPScuNzUnPjxzdG9wIG9mZnNldD0nMCcgc3RvcC1jb2xvcj0nI2ZmZmZmZicvPjxzdG9wIG9mZnNldD0nLjYnIHN0b3AtY29sb3I9JyNlZWYxZmInLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNjOWNmZTgnLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0nY3JhdGVyJyBjeD0nLjQnIGN5PScuMzQnIHI9Jy43Jz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNhOWIxZDMnLz48c3RvcCBvZmZzZXQ9Jy42NScgc3RvcC1jb2xvcj0nI2MzY2FlNScvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI2U0ZThmNicvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAnIGhlaWdodD0nMjAwJyBmaWxsPSd1cmwoI3NreSknLz48Y2lyY2xlIGN4PSc2NTAnIGN5PSc2Nicgcj0nOTAnIGZpbGw9J3VybCgjbW9vbiknLz48Y2lyY2xlIGN4PSc2NTAnIGN5PSc2Nicgcj0nMzgnIGZpbGw9J3VybCgjbWZhY2UpJy8+PGcgZmlsbD0ndXJsKCNjcmF0ZXIpJyBvcGFjaXR5PScuNjUnPjxjaXJjbGUgY3g9JzYzNicgY3k9JzU1JyByPSc3Jy8+PGNpcmNsZSBjeD0nNjY1JyBjeT0nNTInIHI9JzQuNScvPjxjaXJjbGUgY3g9JzY3MicgY3k9JzcxJyByPSc1LjUnLz48Y2lyY2xlIGN4PSc2NDYnIGN5PSc4Micgcj0nNScvPjxjaXJjbGUgY3g9JzYyNScgY3k9JzcwJyByPSczLjUnLz48Y2lyY2xlIGN4PSc2NTcnIGN5PSc2OCcgcj0nMi42Jy8+PGNpcmNsZSBjeD0nNjU5JyBjeT0nODYnIHI9JzIuOCcvPjwvZz48ZyBmaWxsPScjZmZmZmZmJz48Y2lyY2xlIGN4PScxMjAnIGN5PSc1MCcgcj0nMS42JyBvcGFjaXR5PScuOScvPjxjaXJjbGUgY3g9JzIxMCcgY3k9JzM0JyByPScxLjInIG9wYWNpdHk9Jy43Jy8+PGNpcmNsZSBjeD0nMzAwJyBjeT0nNzAnIHI9JzEuOCcgb3BhY2l0eT0nLjk1Jy8+PGNpcmNsZSBjeD0nMzgwJyBjeT0nNDAnIHI9JzEuMScgb3BhY2l0eT0nLjYnLz48Y2lyY2xlIGN4PSc0NzAnIGN5PSc3OCcgcj0nMS41JyBvcGFjaXR5PScuODUnLz48Y2lyY2xlIGN4PScxNTAnIGN5PSc5Nicgcj0nMS4yJyBvcGFjaXR5PScuNycvPjxjaXJjbGUgY3g9JzUyMCcgY3k9JzM2JyByPScxLjMnIG9wYWNpdHk9Jy43NScvPjxjaXJjbGUgY3g9JzYwJyBjeT0nNzgnIHI9JzEuNCcgb3BhY2l0eT0nLjgnLz48Y2lyY2xlIGN4PScyNTAnIGN5PScxMTInIHI9JzEuMScgb3BhY2l0eT0nLjYnLz48Y2lyY2xlIGN4PSc0MjAnIGN5PScxMTAnIHI9JzEuNScgb3BhY2l0eT0nLjgnLz48Y2lyY2xlIGN4PSc3NDAnIGN5PScxMjAnIHI9JzEuMycgb3BhY2l0eT0nLjc1Jy8+PC9nPjxwYXRoIGQ9J00wIDE1MCBMMTIwIDEwOCBMMjMwIDE0OCBMMzQwIDEwMCBMNDcwIDE1MCBMNTYwIDExOCBMNjgwIDE1MiBMODAwIDExNiBWMjAwIEgwIFonIGZpbGw9JyMwYTBjMmEnIG9wYWNpdHk9Jy45Jy8+PC9zdmc+Cg==") center/cover no-repeat}

/* Quick action buttons */
.dash-quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dash-qa-btn{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s;font-family:inherit;color:var(--main-text);text-align:left}
.dash-qa-btn:hover{border-color:var(--orange);background:var(--main-card-hover);transform:translateY(-1px)}
.dash-qa-btn svg{width:18px;height:18px;color:var(--orange);flex-shrink:0}
.dash-qa-btn-label{font-size:13px;font-weight:600}
@media (max-width:780px){.dash-quick-actions{grid-template-columns:repeat(2,1fr);gap:8px}}

/* Activity feed */
.dash-act-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.dash-act-row:last-child{border-bottom:none}
.dash-act-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(107,33,234,.18)}
.dash-act-icon svg{width:12px;height:12px;color:#a855f7}
.dash-act-text{font-size:12px;color:var(--main-text);line-height:1.4}
.dash-act-when{font-size:10px;color:var(--main-text-muted);margin-top:2px}

.dash-appt-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.dash-appt-row:last-child{border-bottom:none}
.dash-appt-time{font-family:Exo 2,sans-serif;font-size:12px;font-weight:700;min-width:52px;flex-shrink:0;color:var(--purple)}
.dash-appt-title{font-size:13px;font-weight:600;color:var(--main-text)}
.dash-appt-sub{font-size:11px;color:var(--main-text-muted)}
.dash-task-row{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border)}
.dash-task-row:last-child{border-bottom:none}
.dash-task-chk{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);
  flex-shrink:0;margin-top:2px;cursor:pointer;transition:border-color .18s}
.dash-task-chk:hover{border-color:var(--orange)}
.dash-task-name{font-size:13px;font-weight:500;color:var(--main-text)}
.dash-task-due{font-size:11px;color:var(--main-text-muted)}.dash-task-due.overdue{color:var(--danger-light)}.dash-task-due.due-today{color:var(--warning-light)}
.dash-empty{font-size:13px;color:var(--main-text-muted);padding:12px 0;text-align:center}

/* CONTACT TABLE */
.toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.search-box{position:relative;flex:1;min-width:160px;max-width:260px}
.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--text-muted);pointer-events:none}
.search-box input{padding-left:32px;background:var(--main-input);border:1px solid var(--main-input-border);
  border-radius:var(--radius);color:var(--text);height:36px;width:100%;
  font-family:Lato,sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.search-box input:focus{border-color:var(--purple)}
.filter-sel{background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);
  color:var(--main-text);padding:0 10px;height:36px;font-family:Lato,sans-serif;font-size:13px;outline:none;cursor:pointer}
.filter-sel:focus{border-color:var(--purple)}
.filter-sel option{background:var(--main-card);color:var(--main-text)}
.tbl-wrap{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 12px rgba(107,33,234,.07)}
.ct-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ct-table thead{background:var(--main-bg)}
.ct-table th{padding:10px 14px;text-align:left;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);cursor:pointer;
  white-space:nowrap;user-select:none;border-bottom:1px solid var(--main-border)}
.ct-table th:hover{color:var(--main-text)}
.ct-table th.sort-asc::after{content:' \2191'}
.ct-table th.sort-desc::after{content:' \2193'}
.ct-table td{padding:11px 14px;border-bottom:1px solid var(--main-border);vertical-align:middle;color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-table td.ct-tags-cell{white-space:normal;overflow:visible}
.ct-table tbody tr:last-child td{border-bottom:none}
.ct-table tbody tr:hover{background:#f5f3ff;cursor:pointer}
.ct-name-cell{display:flex;align-items:center;gap:10px;color:var(--main-text);min-width:0}
.ct-name-cell>div:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:Exo 2,sans-serif;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.ct-tags{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.tag-pill{padding:2px 7px;border-radius:20px;font-size:10px;font-weight:600}
.ct-tagpill{display:inline-flex;align-items:center;gap:3px}
.ct-tag-x{background:none;border:none;cursor:pointer;font-size:12px;line-height:1;padding:0;margin-left:1px;color:inherit;opacity:.55}
.ct-tag-x:hover{opacity:1}
.ct-tag-add{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px dashed var(--main-border);background:none;color:var(--main-text-muted);cursor:pointer;font-size:13px;line-height:1;padding:0}
.ct-tag-add:hover{color:var(--purple);border-color:var(--purple)}
.ct-tagmenu{position:fixed;z-index:2000;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(107,33,234,.18);padding:6px;width:200px;max-height:280px;overflow:auto}
.ct-tagmenu input{width:100%;box-sizing:border-box;padding:6px 8px;margin-bottom:6px;border:1px solid var(--main-border);border-radius:var(--radius-sm);font-size:12px;background:var(--main-bg);color:var(--main-text)}
.ct-tagmenu-opt{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;color:var(--main-text)}
.ct-tagmenu-opt:hover{background:var(--main-bg)}
.ct-tagmenu-empty{padding:8px;font-size:12px;color:var(--main-text-muted)}
.type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:4px}
.type-lead{background:rgba(255,64,0,.15);color:#ff6133}
.type-client{background:rgba(107,33,234,.2);color:#a855f7}
.type-partner{background:rgba(16,185,129,.15);color:var(--success-light)}
.type-employee{background:rgba(245,158,11,.15);color:var(--warning-light)}
.type-lapsed{background:rgba(156,163,175,.18);color:#9ca3af}
.type-none{background:rgba(156,163,175,.18);color:#9ca3af}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success-light);display:inline-block;margin-right:4px}
.status-dot.inactive{background:var(--text-dim)}
/* In the contacts table the dot is the whole cell: center it and drop the
   drawer-context right margin so it lines up with the checkbox. */
.ct-table td .status-dot{vertical-align:middle;margin-right:0}
/* Zero the checkbox's default top margin so it centers on the same line as
   the status dot (browsers add a few px of top margin by default). */
.ct-table .cb-col input{vertical-align:middle;margin:0}
/* The actions cell holds just the edit icon; don't let the generic cell
   ellipsis clip it into a stray "..". */
.ct-table td.ct-act{overflow:visible;text-overflow:clip;white-space:nowrap;text-align:right;padding-right:22px}

/* CALENDAR */
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.cal-toolbar-left{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.cal-big-month{font-family:'Exo 2',sans-serif;font-size:38px;font-weight:800;color:var(--main-text);line-height:0.9;letter-spacing:-0.5px;text-transform:capitalize}
@media (max-width:600px){.cal-big-month{font-size:26px}}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-period{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;width:280px;white-space:nowrap;text-align:center;color:var(--main-text)}
.view-toggle{display:flex;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.view-btn{padding:6px 14px;font-size:12px;font-weight:600;color:var(--main-text-muted);
  cursor:pointer;background:transparent;border:none;font-family:Lato,sans-serif;transition:all .18s}
.view-btn:hover{color:var(--text)}.view-btn.active{background:var(--purple);color:#fff}
.svc-list-row:hover{background:var(--main-bg)}
.svc-list-row:last-child{border-bottom:none !important}
.svc-detail-tab{padding:10px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);
  background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;margin-bottom:-1px;font-family:Lato,sans-serif}
.svc-detail-tab:hover{color:var(--main-text)}
.svc-detail-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
/* Reusable: white card content inside dark modal context. */
/* Use on any element where bg=main-card so descendants get correct text color. */
.light-card{background:var(--main-card);color:var(--main-text);border:1px solid var(--main-border);border-radius:6px}
.light-card-muted{color:var(--main-text-muted)}
.light-card.clickable{cursor:pointer;transition:background .1s}
.light-card.clickable:hover{background:var(--main-bg)}
.cal-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--main-text-muted)}
.legend-dot{width:10px;height:10px;border-radius:50%}
.cal-month{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 12px rgba(107,33,234,.07);min-height:calc(100vh - 260px);display:flex;flex-direction:column}
.cal-dow-row{display:grid;grid-template-columns:repeat(7,1fr);background:var(--main-bg);border-bottom:1px solid var(--main-border)}
.cal-dow-row div{text-align:center;padding:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);flex:1;grid-auto-rows:1fr}
.cal-cell{min-height:80px;border-right:1px solid var(--main-border);border-bottom:1px solid var(--main-border);padding:6px;cursor:pointer;transition:background .12s}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell:hover{background:#f5f3ff}
.cal-cell.other-month .cal-day-num{opacity:.25}
.cal-cell.today .cal-day-num{background:var(--purple);color:#fff;border-radius:50%}
.cal-cell.cal-blackout{background:repeating-linear-gradient(45deg,rgba(248,113,113,.04),rgba(248,113,113,.04) 10px,rgba(248,113,113,.09) 10px,rgba(248,113,113,.09) 20px)}
.cal-day-num{font-size:12px;font-weight:600;margin-bottom:3px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--main-text)}
.cal-ev{font-size:10px;padding:2px 5px;border-radius:3px;margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.cal-ev:hover{filter:brightness(1.2)}
.cal-ev-task{background:var(--orange-dim);color:var(--orange)}
.cal-more{font-size:10px;color:var(--text-muted);padding:1px 4px;cursor:pointer}
.cal-timed{display:flex;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:auto;box-shadow:0 2px 12px rgba(107,33,234,.07);height:calc(100vh - 260px)}
/* cal-timed viewport fill: day + week match month's responsive height. The box
   fills the viewport and reflows on resize. Flex children (time gutter + day
   columns) stretch to the box height so their backgrounds extend cleanly below
   the last hour. The .tgrid-row 68px height is NOT changed, so all event
   positioning, buffer bands, and drag math stay pixel-exact. */
.cal-timed > div{min-height:max-content}
.time-col{width:52px;flex-shrink:0;background:var(--main-bg);border-right:1px solid var(--main-border);display:flex;flex-direction:column;position:sticky;left:0;z-index:3}
.time-col-head{min-height:56px;border-bottom:1px solid var(--main-border);flex-shrink:0;position:sticky;top:0;z-index:6;background:var(--main-bg)}
.time-col-allday{height:28px;border-bottom:1px solid var(--main-border);font-size:9px;color:var(--text-dim);display:flex;align-items:center;justify-content:flex-end;padding:0 6px;background:var(--main-bg);flex-shrink:0;position:sticky;top:56px;z-index:6}
.day-col-allday{min-height:28px;border-bottom:1px solid var(--main-border);padding:3px 5px;display:flex;flex-wrap:wrap;gap:3px;align-items:center;background:var(--main-card);flex-shrink:0;position:sticky;top:56px;z-index:2}
.cal-allday-chip{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:.02em}
.time-slot{height:var(--cal-hour-px);padding:3px 5px;font-size:10px;color:var(--main-text-muted);
  border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:flex-end;flex-shrink:0;position:relative}
/* Quarter-hour increment ticks on the right edge of the time gutter (day/week).
   The half-hour tick is longer and stronger than the :15/:45 ticks. */
.ts-tick{position:absolute;right:0;border-top:1px solid var(--main-text-muted);pointer-events:none}
.ts-q1{top:25%;width:7px;opacity:.45}
.ts-h{top:50%;width:14px;opacity:.75}
.ts-q3{top:75%;width:7px;opacity:.45}
.day-col{flex:1;min-width:88px;border-right:1px solid var(--main-border);display:flex;flex-direction:column}
.day-col:last-child{border-right:none}
.day-col-head{min-height:56px;background:var(--main-card);padding:6px 4px 5px;text-align:center;position:sticky;top:0;z-index:2;
  border-bottom:1px solid var(--main-border);font-size:11px;font-weight:600;color:var(--main-text);flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.day-col-head.today{color:var(--orange)}
.tgrid-row{height:var(--cal-hour-px);border-bottom:1px solid var(--main-border);position:relative;cursor:pointer}
.tgrid-row::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 16px,rgba(255,255,255,.05) 16px,rgba(255,255,255,.05) 17px)}
.tgrid-row:hover{background:rgba(255,255,255,.012)}
.tgrid-row.off-hours{background:rgba(0,0,0,.18)}
.cal-offhours-band{position:absolute;left:0;right:0;background:rgba(0,0,0,.18);z-index:0;pointer-events:none}
.timed-ev{position:absolute;border-radius:4px;padding:2px 0 0;font-size:11px;font-weight:600;
  overflow:hidden;cursor:pointer;z-index:1;border:1px solid rgba(255,255,255,.15);color:#fff;transition:filter .15s;line-height:1.3}
.timed-ev:hover{filter:brightness(1.15)}
.timed-ev-cancelled{opacity:.45}
.timed-ev-rescheduled{opacity:.45;text-decoration:line-through;background:var(--text-placeholder) !important;cursor:pointer}
.timed-ev-completed{background:#6b7280 !important;opacity:.75}
.appt-row-sm.rescheduled{border-left-color:var(--text-dim);opacity:.5;text-decoration:line-through}
.timed-ev-time{font-size:10px;opacity:.8;white-space:nowrap}
.timed-ev-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timed-ev-client{font-size:10px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.cal-now-line{position:absolute;left:0;right:0;height:2px;background:#ef4444;z-index:10;pointer-events:none}
.cal-now-dot{position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:#ef4444}
.day-off-banner{height:100%;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--text-dim);font-style:italic;background:rgba(0,0,0,.2)}

/* TASKS */
.task-chip-row{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.task-chip-sep{display:inline-block;width:1px;height:20px;background:var(--border,#e5e7eb);margin:0 4px;align-self:center;flex-shrink:0}
.chip{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);color:var(--text-muted);background:transparent;
  font-family:Lato,sans-serif;transition:all .18s}
.chip:hover{color:var(--text);border-color:var(--purple-border)}
.chip.active{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}
.chip-orange.active{background:var(--orange-dim);color:var(--orange);border-color:var(--orange-border)}
.task-list{display:flex;flex-direction:column;gap:8px}
.task-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);
  padding:14px 16px;display:flex;gap:12px;align-items:flex-start;transition:border-color .18s;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.task-card:hover{border-color:var(--purple-border)}
.task-chk{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);
  flex-shrink:0;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.task-chk:hover{border-color:var(--orange)}.task-chk.done{background:var(--success-light);border-color:var(--success-light)}
.task-chk.in-progress{border-color:var(--orange);border-style:dashed}
.task-chk svg{width:10px;height:10px;color:#fff}
.task-body{flex:1;min-width:0}
.task-title{font-size:14px;font-weight:600;margin-bottom:2px;color:var(--main-text)}
.task-title.done{text-decoration:line-through;color:var(--text-muted)}
.task-desc{font-size:12px;color:var(--main-text-muted);margin-bottom:6px;line-height:1.5}
.task-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pri-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:4px}
.ph{background:rgba(239,68,68,.15);color:var(--danger-light)}
.pm{background:rgba(245,158,11,.15);color:var(--warning-light)}
.pl{background:rgba(16,185,129,.15);color:var(--success-light)}
.task-due{font-size:11px;color:var(--text-muted)}.task-due.overdue{color:var(--danger-light)}
.task-link{font-size:11px;color:var(--purple-light);cursor:pointer}.task-link:hover{color:var(--orange)}
.task-actions{display:flex;gap:5px;flex-shrink:0}

/* POS */
.pos-grid{display:grid;grid-template-columns:1fr 330px;gap:14px}
.pos-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;margin-bottom:12px;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.pos-card:last-child{margin-bottom:0}
.pos-card-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.pos-item-add{display:flex;gap:7px;margin-bottom:10px;align-items:flex-end}
.pos-item-add input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);padding:8px 11px;font-family:Lato,sans-serif;font-size:13px;outline:none}
.pos-item-add input:focus{border-color:var(--purple)}
.pos-item-add .price-f{width:90px;flex:none}
.pos-line{display:flex;align-items:center;justify-content:space-between;
  padding:7px 0;border-bottom:1px solid var(--main-border)}
.pos-line:last-child{border-bottom:none}
.pos-line-desc{font-size:13px;font-weight:500;color:var(--main-text)}
.pos-line-price{font-size:13px;font-weight:600;color:var(--main-text)}
.pos-totals{border-top:1px solid var(--main-border);padding-top:12px;margin-top:4px}
.pos-tr{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:13px;color:var(--main-text-muted)}
.pos-tr.grand{font-family:'Exo 2',sans-serif;font-size:18px;font-weight:800;color:var(--main-text);
  padding-top:10px;border-top:1px solid var(--border);margin-top:6px}
.tip-row{display:flex;gap:5px;margin-top:7px}
.tip-btn{flex:1;padding:7px 4px;border-radius:var(--radius);background:var(--main-bg);
  border:1px solid var(--border);color:var(--text-muted);font-family:Lato,sans-serif;
  font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;text-align:center}
.tip-btn:hover{border-color:var(--purple-border);color:var(--text)}
.tip-btn.active{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}
.pay-tabs{display:flex;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.pay-tab{flex:1;padding:8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--main-text-muted);
  background:transparent;border:none;color:var(--text-muted);font-family:Lato,sans-serif;transition:all .18s}
.pay-tab.active{background:var(--purple);color:#fff}
.pay-tab.disabled,.pay-tab[disabled]{opacity:.4;cursor:not-allowed}
.pay-tab.disabled:hover,.pay-tab[disabled]:hover{background:transparent}

/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.s-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.s-card.full{grid-column:1/-1}
.s-card-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;margin-bottom:14px;color:var(--main-text);
  display:flex;align-items:center;gap:8px}
.s-card-title svg{width:14px;height:14px;color:var(--orange)}
.bh-row{display:flex;align-items:center;gap:9px;padding:5px 0}
.bh-label{width:36px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase}
.bh-toggle{width:38px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;
  position:relative;flex-shrink:0;transition:background .2s}
.bh-toggle.on{background:var(--purple)}
.bh-toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:left .2s}
.bh-toggle.on::after{left:21px}
/* Notifications tab styles (Phase 2B-2) */
.notif-cat{margin-bottom:24px}
.notif-cat-title{font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:0.5px;padding:0 0 8px;border-bottom:1px solid var(--main-border);margin-bottom:12px}
.notif-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);margin-bottom:8px;align-items:center}
.notif-info{min-width:0}
.notif-label{font-size:14px;font-weight:600;color:var(--main-text);display:flex;align-items:center;gap:8px}
.notif-desc{font-size:12px;color:var(--main-text-muted);margin-top:2px;line-height:1.5}
.notif-chip-group{display:inline-flex;align-items:center;gap:4px}
.notif-preview-eye{background:transparent;border:none;padding:4px;border-radius:var(--radius-sm);cursor:pointer;color:var(--main-text-muted);display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}
.notif-preview-eye:hover{color:var(--purple);background:var(--purple-dim)}
.notif-preview-eye svg{display:block}
.notif-preview-banner{background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);padding:10px 14px;font-size:12px;color:var(--text-muted);margin-bottom:14px}
.notif-preview-subject{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.notif-preview-subject-label{font-size:11px;color:var(--text-muted);font-weight:500;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
.notif-preview-iframe-wrap{border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;background:#fff}
.notif-preview-iframe{width:100%;border:none;display:block;min-height:400px}
.notif-controls{display:grid;align-items:center;gap:14px;justify-content:end;justify-items:start}
.notif-controls.audience-patient{grid-template-columns:95px 95px}
.notif-section-title{font-size:13px;font-weight:700;color:var(--main-text);margin:32px 0 4px;display:flex;align-items:center;gap:8px}
.notif-section-title:first-of-type{margin-top:0}
.notif-section-desc{font-size:12px;color:var(--main-text-muted);margin-bottom:16px;line-height:1.5}
.notif-section-icon{display:inline-flex;align-items:center;color:var(--main-text-muted)}
.notif-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius-full);font-size:12px;color:var(--main-text-muted);cursor:pointer;transition:all 0.15s;justify-self:start;min-width:78px;justify-content:center}
.notif-chip.on{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
.notif-chip-icon{display:inline-flex;align-items:center}
.notif-collapse{margin-bottom:14px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-bg)}
.notif-collapse-head{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:12px 14px;font-size:13px;font-weight:700;color:var(--main-text)}
.notif-collapse-head .notif-collapse-sum{font-size:11px;color:var(--main-text-muted);font-weight:400;margin-left:8px}
.notif-collapse-head svg.nc-chev{transition:transform 0.15s;flex-shrink:0}
.notif-collapse.open .notif-collapse-head svg.nc-chev{transform:rotate(90deg)}
.notif-collapse-body{display:none;padding:0 14px 14px}
.notif-collapse.open .notif-collapse-body{display:block}
.notif-sms-bubble{max-width:340px;padding:12px 14px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:14px;border-bottom-left-radius:4px;font-size:14px;line-height:1.45;color:var(--main-text);white-space:pre-wrap;word-break:break-word}
.notif-sms-meta{font-size:11px;color:var(--main-text-muted);margin-top:8px}
.notif-save-bar{position:sticky;top:0;background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;z-index:10;box-shadow:var(--shadow-md)}.notif-save-bar-text{font-size:13px;color:var(--main-text)}
.notif-save-bar-text strong{color:var(--purple)}
.notif-save-bar-actions{display:flex;gap:8px}
.bh-time{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;
  color:var(--text);padding:4px 8px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:120px}
.bh-time:focus{border-color:var(--purple)}
.bh-sep{font-size:11px;color:var(--text-muted)}
/* In the appointment modal date/time row, expand time pickers to fill their
   grid cell and match the date input's height. */
#apt-datetime-row .time-pair{width:100%;height:38px}
#apt-datetime-row .time-text{font-size:14px;padding:9px 12px}
#apt-datetime-row .time-clk-btn{width:34px}
#apt-datetime-row .date-pair{width:100%;height:38px}
#apt-datetime-row .date-text{font-size:14px;padding:9px 12px}
#apt-datetime-row .date-clk-btn{width:34px}
/* Free-text time input with a clickable clock-icon picker button.
   The text field accepts loose entry like "9", "9 am", "9:30pm", "21:00";
   on blur the value is normalized and displayed as "9:00 AM". The clock
   button opens the OS-native time picker via showPicker(). */
.time-pair{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);overflow:hidden;height:30px;width:130px;position:relative}
.time-pair:focus-within{border-color:var(--purple)}
.time-pair.is-disabled{opacity:.45}
.time-text{background:transparent;border:none;color:var(--text);padding:4px 6px 4px 10px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:100%;min-width:0}
.time-text.invalid{color:var(--danger-light)}
.time-text:disabled{cursor:not-allowed}
.time-clk-btn{background:transparent;border:none;border-left:1px solid var(--border);color:var(--text-muted);padding:0 7px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px}
.time-clk-btn:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.04)}
.time-clk-btn:disabled{cursor:not-allowed;opacity:.5}
/* Custom time picker popover (hour / minute / AM-PM columns + OK button). */
.time-pop{position:fixed;z-index:99999;background:var(--main-card);border:1px solid var(--main-border);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px 8px 10px;width:208px;
  font-family:Lato,sans-serif;color:var(--main-text)}
.tp-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;height:200px}
.tp-col{overflow-y:auto;text-align:center;scrollbar-width:thin}
.tp-col::-webkit-scrollbar{width:5px}
.tp-col::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px}
.tp-opt{padding:8px 6px;font-size:14px;color:var(--main-text);cursor:pointer;border-radius:6px;
  margin:1px 4px;transition:background .1s}
.tp-opt:hover{background:rgba(107,33,234,.08)}
.tp-opt.selected{background:rgba(107,33,234,.14);color:var(--purple);font-weight:700}
.tp-ok{display:block;margin:8px auto 2px;padding:6px 26px;background:var(--purple);color:#fff;
  border:none;border-radius:6px;font-weight:700;cursor:pointer;font-family:Lato,sans-serif;font-size:13px}
.tp-ok:hover{background:#5b1bd1}
/* Date picker mirrors time picker structure */
.date-pair{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);overflow:hidden;height:30px;width:160px;position:relative}
.date-pair:focus-within{border-color:var(--purple)}
.date-pair.is-disabled{opacity:.45}
.date-text{background:transparent;border:none;color:var(--text);padding:4px 6px 4px 10px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:100%;min-width:0}
.date-text.invalid{color:var(--danger-light)}
.date-text:disabled{cursor:not-allowed}
.date-clk-btn{background:transparent;border:none;border-left:1px solid var(--border);color:var(--text-muted);padding:0 7px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px}
.date-clk-btn:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.04)}
.date-clk-btn:disabled{cursor:not-allowed;opacity:.5}
/* Modal form-group context: date picker fills its grid cell and matches
   input height. Mirrors the time picker's modal sizing pattern. */
.form-group .date-pair{width:100%;height:38px}
.form-group .date-text{font-size:13px;padding:9px 12px}
.form-group .date-clk-btn{width:34px}

.date-pop{position:fixed;z-index:99999;background:var(--main-card);border:1px solid var(--main-border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:10px;width:260px;font-family:Lato,sans-serif;color:var(--main-text)}
.dp-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-title{font-size:14px;font-weight:700;color:var(--main-text)}
.dp-nav{background:none;border:none;color:var(--main-text-muted);cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px}
.dp-nav:hover{background:rgba(107,33,234,.08);color:var(--purple)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-dow > div{text-align:center;font-size:11px;font-weight:700;color:var(--main-text-muted);padding:4px 0;text-transform:uppercase;letter-spacing:.05em}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-day{background:none;border:none;color:var(--main-text);font-size:13px;padding:7px 0;cursor:pointer;border-radius:6px;font-family:Lato,sans-serif;transition:background .1s}
.dp-day:hover:not(:disabled){background:rgba(107,33,234,.08)}
.dp-day-out{color:var(--main-text-muted);opacity:.35;cursor:default}
.dp-day-today{font-weight:700;color:var(--purple)}
.dp-day-selected{background:rgba(107,33,234,.14);color:var(--purple);font-weight:700}
.dp-day-selected.dp-day-today{background:var(--purple);color:#fff}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--main-border)}
.dp-foot-btn{background:none;border:none;color:var(--purple);cursor:pointer;font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;font-family:Lato,sans-serif}
.dp-foot-btn:hover{background:rgba(107,33,234,.08)}

/* Date input picker icon styling */
.date-pick{background-color:var(--bg-input);border:1px solid var(--border);border-radius:6px;
  color:var(--text);padding:7px 10px;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;cursor:pointer}
.date-pick:focus{border-color:var(--purple)}
.role-badge{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;flex-shrink:0}
.role-admin{background:var(--orange-dim);color:var(--orange)}
.role-user{background:var(--purple-dim);color:var(--purple-light)}
.role-viewer{background:rgba(255,255,255,.07);color:var(--text-muted)}
.tag-mgr{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tag-manage-item{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.tag-rm{background:none;border:none;cursor:pointer;font-size:14px;color:currentColor;opacity:.6;padding:0;line-height:1;margin-left:2px}
.tag-rm:hover{opacity:1;color:var(--danger-text)}
.color-swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.color-sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.color-sw.selected{border-color:#fff}

/* SCHEDULE */
.sched-row{display:flex;align-items:center;gap:8px;padding:4px 0;flex-wrap:wrap}
.sched-day{width:40px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase}
.sched-toggle{cursor:pointer;background:transparent;border:1px solid var(--border);border-radius:6px;
  padding:3px 9px;font-size:11px;font-weight:600;color:var(--text-muted);font-family:Lato,sans-serif;transition:all .15s}
.sched-toggle.on{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}
.sched-lunch-toggle{cursor:pointer;background:transparent;border:1px solid var(--border);border-radius:6px;
  padding:3px 9px;font-size:11px;font-weight:600;color:var(--text-muted);font-family:Lato,sans-serif;transition:all .15s;margin-left:6px}
.sched-lunch-toggle.on{background:rgba(245,158,11,.15);color:#d97706;border-color:rgba(245,158,11,.4)}
.sched-lunch-toggle:disabled{opacity:.4;cursor:not-allowed}
.sched-lunch-row{display:flex;align-items:center;gap:8px;padding:0 0 4px 48px;font-size:11px}
.sched-lunch-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.04em;min-width:32px}
.sched-time{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;
  color:var(--text);padding:4px 7px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:120px}
.sched-time:focus{border-color:var(--purple)}
.ov-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-card);
  border-radius:var(--radius);margin-bottom:5px}
.ov-date{font-size:12px;font-weight:600;min-width:80px}
.ov-type{font-size:11px}

/* SEARCHABLE SELECT */
.ss-wrap{position:relative}
.ss-inp{width:100%;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);
  color:var(--main-text);padding:9px 12px;font-family:Lato,sans-serif;font-size:14px;outline:none;transition:border-color .2s}
.ss-inp:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.ss-drop{position:absolute;top:100%;left:0;right:0;background:var(--main-card);
  border:1px solid var(--purple-border);border-radius:var(--radius);margin-top:3px;
  max-height:200px;overflow-y:auto;z-index:400;box-shadow:var(--shadow)}
.ss-opt{padding:9px 12px;font-size:13px;cursor:pointer;transition:background .12s;color:var(--main-text)}
.ss-opt:hover{background:#f5f3ff}
.ss-empty{padding:12px;font-size:13px;color:var(--main-text-muted);text-align:center;background:var(--main-card)}

/* DRAWER */
#drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
#drawer-overlay.open{opacity:1;pointer-events:all}
:root{--tele-dock-w:680px}
#contact-drawer{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.97);width:860px;max-width:95vw;height:85vh;
  background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);z-index:201;
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;box-shadow:var(--shadow-lg)}
/* Drawer-content wraps the head, tabs, and body. Without this flex layout,
   drawer-body's flex:1 + overflow-y:auto don't apply because drawer-content
   isn't a flex container. Result: content overflows the drawer with no
   scrollbar, especially noticeable on smaller screens with long lists. */
#drawer-content{display:flex;flex-direction:column;height:100%;min-height:0;flex:1}
#contact-drawer.open{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)}

/* ── Charting during a video visit ───────────────────────────────────────
   While a telehealth visit is running, the contact drawer stops being a
   centered modal and becomes a right-hand dock beside the call, so a provider
   can write notes and SOAP while they talk.

   This REPOSITIONS THE REAL DRAWER rather than rebuilding one inside the call
   overlay. A second copy would duplicate every element id in it, and the SOAP
   editor keys its rich-text bootstrap off element ids: a duplicate is exactly
   how that editor silently saved blank notes once before. Reusing the real
   drawer keeps inline edits, the PHI fetch, the tabs and the unsaved-changes
   guard working with no new code.

   The call overlay yields the same width so the two sit side by side rather
   than stacking. Below TELE_DOCK_MIN the dock is pointless (nothing legible
   fits beside a video), so the drawer stays a full-screen modal over the call
   and the audio keeps running underneath. */
/* The call overlay's own layout. This MUST live here and not as an inline
   style on the element: an inline `inset:0` outranks every stylesheet
   selector, so the dock below could never shrink it and the contact panel just
   painted on top of a full-width call. */
#tele-overlay{position:fixed;inset:0;z-index:12000;background:var(--main-bg)}
/* Yield width only while the panel is actually OPEN. Gating this on
   body.tele-call alone would leave a dead column beside the video whenever the
   provider closed the panel mid-visit. */
body.tele-call.tele-chart-open #tele-overlay{right:var(--tele-dock-w)}
body.tele-call #contact-drawer{
  top:0;left:auto;right:0;bottom:0;
  width:var(--tele-dock-w);max-width:none;height:100vh;
  border-radius:0;border-top:0;border-right:0;border-bottom:0;
  /* Above the call overlay (12000) so the dock is never clipped by it. */
  z-index:12100;
  transform:translateX(12px)}
body.tele-call #contact-drawer.open{transform:translateX(0)}
/* No dimming during a call: the video beside it must stay clearly visible. */
body.tele-call #drawer-overlay{display:none}

@media (max-width:1280px){
  /* Too narrow to dock. Fall back to the normal centered modal ON TOP of the
     call; the visit keeps running behind it. */
  body.tele-call.tele-chart-open #tele-overlay{right:0}
  body.tele-call #contact-drawer{
    top:50%;left:50%;right:auto;bottom:auto;
    width:860px;max-width:95vw;height:85vh;
    border:1px solid var(--main-border);border-radius:var(--radius-lg);
    transform:translate(-50%,-48%) scale(.97)}
  body.tele-call #contact-drawer.open{transform:translate(-50%,-50%) scale(1)}
  body.tele-call #drawer-overlay{display:block}
}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--divider);display:flex;align-items:center;gap:12px;flex-shrink:0}
.drawer-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:Exo 2,sans-serif;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}
.drawer-name{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;color:var(--main-text)}
.drawer-sub{font-size:12px;color:var(--main-text-muted);margin-top:2px}
.drawer-tabs{display:flex;border-bottom:2px solid var(--divider);flex-shrink:0;background:var(--subnav-bar);padding:0 20px;overflow-x:auto;scrollbar-width:none}
.drawer-tabs::-webkit-scrollbar{display:none}
.drawer-tab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--main-text-muted);
  cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;
  background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap;flex-shrink:0}
.drawer-tab:hover{color:var(--main-text)}
.drawer-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px;min-height:0;-webkit-overflow-scrolling:touch}
.drawer-cards{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px 14px;border-bottom:1px solid var(--divider);flex-shrink:0}
.dcard{flex:1 1 130px;min-width:130px;text-align:left;border:1px solid transparent;border-radius:var(--radius-lg);padding:14px 12px;cursor:pointer;transition:transform .12s,box-shadow .16s;position:relative;font-family:inherit;display:flex;align-items:center;gap:10px;min-height:80px}
.dcard:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(107,33,234,.16)}
.dcard-ico{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.dcard-ico svg{width:16px;height:16px}
.dcard-txt{min-width:0}
.dcard-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.dcard-val{font-size:13px;font-weight:700;color:var(--main-text);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcard-val.muted{font-weight:600;color:var(--main-text-muted);opacity:.8}
.alerts-pop{position:absolute;top:100%;left:0;margin-top:6px;width:300px;max-width:80vw;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:60;padding:10px}
.alerts-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.alerts-pop-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.alerts-pop-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:4px;margin-bottom:5px}
.alerts-pop-empty{font-size:12px;color:var(--main-text-muted);padding:6px 2px}
.ie-line{display:flex;align-items:center;gap:6px;min-height:22px}
.ie-val{font-size:14px;color:var(--main-text);min-width:0;word-break:break-word}
/* Settings > Email: transactional | marketing two-column split with a divider */
.email-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.email-cols>.email-col{min-width:0;overflow-x:auto}
.email-cols>.email-col+.email-col{border-left:1px solid var(--main-border);padding-left:32px}
@media(max-width:1300px){
  .email-cols{grid-template-columns:1fr;gap:0}
  .email-cols>.email-col+.email-col{border-left:none;padding-left:0;border-top:1px solid var(--main-border);padding-top:28px;margin-top:28px}
}
.ie-pencil{background:none;border:none;cursor:pointer;color:var(--main-text-muted);padding:2px;border-radius:6px;flex-shrink:0;opacity:.45;transition:opacity .12s,color .12s;line-height:0}
.ie-pencil:hover{color:var(--purple);opacity:1}
.ie-input{width:100%;height:34px;padding:5px 9px;font-size:13px;border:1px solid var(--main-border);border-radius:8px;background:var(--main-card);color:var(--main-text);font-family:inherit}
.ie-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.ie-savebar{position:sticky;top:-18px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:10px;padding:8px 12px;margin:-4px 0 14px}
.ie-savebar-txt{font-size:12px;font-weight:700;color:var(--purple)}
.ie-tags{display:flex;flex-wrap:wrap;gap:5px}
/* Sticky sub-tab header inside drawer-body. Keeps chips and action button
   visible while the list scrolls. Negative margins pull the background to
   the body edges so it cleanly covers padding. */
.d-sticky-sub{position:sticky;top:-18px;background:var(--main-card);z-index:5;
  margin:-18px -20px 12px;padding:18px 20px 10px}
.sec-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.info-item label{font-size:10px;color:var(--main-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:2px}
.info-item span{font-size:14px;color:var(--main-text)}
.info-item a{color:var(--main-text);text-decoration:none}.info-item a:hover{color:var(--purple)}
.note-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:10px 12px;margin-bottom:7px}
.note-date{font-size:11px;color:rgba(255,255,255,.5)}.note-text{font-size:13px;line-height:1.55;white-space:pre-wrap;margin-top:4px;color:var(--text)}
.appt-row-sm{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--orange);
  border-radius:var(--radius);padding:9px 12px;margin-bottom:6px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap}
.appt-row-sm > div:first-child{min-width:0;flex:1 1 200px}
.appt-row-sm.completed{border-left-color:var(--success-light);opacity:.6}.appt-row-sm.cancelled{border-left-color:var(--text-dim);opacity:.4}.appt-row-sm.waiting_room{border-left-color:var(--warning,#f59e0b)}
.appt-row-menu{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:160px;z-index:50;padding:4px;display:flex;flex-direction:column}
.appt-row-menu-item{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:var(--text);text-align:left;padding:8px 10px;font-size:13px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}
.appt-row-menu-item:hover{background:var(--bg-card-hover);color:var(--orange)}
.appt-row-menu-item svg{flex-shrink:0;color:var(--text-muted)}
.appt-row-menu-item:hover svg{color:var(--orange)}
.appt-row-menu-danger{color:var(--danger-light)}
.appt-row-menu-danger svg{color:var(--danger-light)}
.appt-row-menu-danger:hover{background:var(--danger-dim);color:var(--danger-light)}
.appt-row-menu-danger:hover svg{color:var(--danger-light)}
.appt-row-menu-sep{height:1px;background:var(--border);margin:4px 0}
.appt-sm-title{font-size:13px;font-weight:600;margin-bottom:2px;color:var(--text)}
.appt-sm-meta{font-size:11px;color:var(--text-muted)}
.sb-sm{font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;text-transform:uppercase}
.sched{background:var(--orange-dim);color:var(--orange)}
/* P3-1 confirmed. Greener and stronger than .compl so a confirmed upcoming
   appointment does not read as an already-finished one at a glance. rgba here
   rather than a token to match the other status badges in this block. */
.confd{background:rgba(34,197,94,.18);color:var(--success-light)}
.compl{background:rgba(52,211,153,.15);color:var(--success-light)}
.canc{background:rgba(255,255,255,.08);color:var(--text-muted)}
.reschd{background:rgba(251,191,36,.15);color:var(--warning-light)}
.noshow{background:rgba(249,115,22,.15);color:#f97316}
.task-sm{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);
  padding:8px 11px;margin-bottom:6px;display:flex;align-items:flex-start;gap:8px;color:#ffffff}
.tch-sm{width:15px;height:15px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;margin-top:2px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.tch-sm.done{background:var(--success-light);border-color:var(--success-light)}
.tch-sm.in-progress{border-color:var(--orange);border-style:dashed}
.tch-sm svg{width:9px;height:9px;color:#fff}
.tsk-done{text-decoration:line-through;color:rgba(255,255,255,.4)}
.sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}

/* MODAL */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1500;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity .2s;backdrop-filter:blur(4px);padding:20px}
#modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg-panel);border:1px solid var(--purple-border);border-radius:var(--radius-lg);
  width:100%;max-width:540px;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow),var(--shadow-p);transform:scale(.96);transition:transform .2s}
#modal-overlay.open .modal{transform:scale(1)}
.modal-lg{max-width:640px}.modal-xl{max-width:760px}.modal-xxl{max-width:1100px}
#bulk-body-rte:empty:before{content:attr(data-ph);color:var(--main-text-muted);pointer-events:none}
/* GrapesJS RTE toolbar: let actions size to content with padding so the text
   merge-var buttons (Name/Email/Biz/Phone) aren't scrunched into each other. */
.gjs-rte-action{width:auto!important;min-width:24px;padding:0 7px!important;display:inline-flex!important;align-items:center;justify-content:center}
#bulk-body-rte img{max-width:100%;height:auto;cursor:pointer}
#bulk-body-rte h2{font-size:22px;font-weight:700;margin:0 0 8px;line-height:1.25}
#bulk-body-rte h3{font-size:18px;font-weight:700;margin:0 0 6px;line-height:1.3}
#bulk-body-rte p{margin:0 0 10px}
/* Automation editor inputs used class .msp-input but it was never defined, so
   they rendered unstyled/cramped. Give them the standard input treatment. */
.msp-input{padding:9px 11px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:14px;box-sizing:border-box;font-family:inherit;line-height:1.4}
.msp-input:focus{outline:none;border-color:var(--purple)}
select.msp-input{height:38px;cursor:pointer}
textarea.msp-input{resize:vertical}
.modal-wide{max-width:min(1280px,calc(100vw - 80px));min-height:min(70vh,640px)}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;color:#ffffff}
.modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;color:var(--text)}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);
  display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}
.warn-box{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  border-radius:var(--radius);padding:12px 14px;font-size:13px;color:var(--warning-light);margin-bottom:12px}
.warn-box strong{color:#fde68a}

/* ============================================================
   MASTER LIGHT-SURFACE SYSTEM (June 8 2026)
   Pass 1: inert until a surface opts in via .surface-light or
   migrates a bar to .subnav-tab. Promote to global .modal/.drawer
   in pass 2 after launch. See MySpark-Design-Tokens.docx.
   ============================================================ */

/* Light-surface system tokens (--divider, --subnav-bar, --subnav-tab-hover)
   live in the top :root block. */

/* Reusable light-surface remap. Apply to a shell to flip every
   var()-driven child to the light palette. Mirrors the .panel remap. */
.surface-light{
  background:var(--main-card);
  color:var(--main-text);
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --text-dim:#9b8fc4;
  --bg-card:var(--main-card);
  --bg-card-hover:var(--main-card-hover);
  --bg-input:var(--main-input);
  --bg-panel:var(--main-card);
  --border:var(--main-border);
}
/* Shell holdouts the token remap can't reach (raw hex in base rules) */
.surface-light .modal-title{color:var(--main-text)}
.surface-light .modal-head{border-bottom-color:var(--divider)}
.surface-light .modal-foot{border-top-color:var(--divider)}
.surface-light .form-group input,
.surface-light .form-group select,
.surface-light .form-group textarea{border:1px solid var(--main-input-border)}
.surface-light .btn-icon{color:var(--main-text-muted);border-color:var(--divider)}
.surface-light .btn-icon:hover{background:var(--main-card-hover);color:var(--main-text)}
/* Drawer header on light */
.surface-light .drawer-head{border-bottom-color:var(--divider)}
.surface-light .drawer-name{color:var(--main-text)}
.surface-light .drawer-sub{color:var(--main-text-muted)}
.surface-light .drawer-tabs{background:var(--subnav-bar);border-bottom:2px solid var(--divider)}
.surface-light .drawer-tab{color:var(--main-text-muted)}
.surface-light .drawer-tab:hover{color:var(--main-text)}
.surface-light .drawer-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
/* Drawer body on light */
.surface-light .d-sticky-sub{background:var(--main-card)}
.surface-light .sec-label{color:var(--main-text);font-size:11px;font-weight:800;letter-spacing:.06em;border-bottom-color:var(--divider);margin-top:28px}
.surface-light .sec-label:first-child{margin-top:0}
.surface-light .info-item label{color:var(--main-text-muted)}
.surface-light .info-item a:hover{color:var(--purple)}
.surface-light .note-item{background:var(--main-bg);border-color:var(--main-border)}
.surface-light .note-date{color:var(--main-text-muted)}
.surface-light .appt-row-sm{background:var(--main-bg);border-color:var(--main-border)}
.surface-light .task-sm{background:var(--main-bg);border-color:var(--main-border);color:var(--main-text)}
.surface-light .canc{background:var(--main-bg);color:var(--main-text-muted)}
.surface-light .tsk-done{color:var(--main-text-muted)}
/* Drawer info: breathing room + full-width section dividers */
.surface-light .info-grid{gap:14px 8px}
.surface-light .info-item label{margin-bottom:3px}
.surface-light .sec-row{border-bottom:1px solid var(--divider);padding-bottom:6px;margin-bottom:10px}
.surface-light .sec-row .sec-label{border-bottom:none;padding-bottom:0}
/* Warn-box readable on light surfaces */
.surface-light .warn-box{color:var(--warning-text-strong)}
.surface-light .warn-box strong{color:var(--warning-text-strong)}

/* Collapsed subnav. Replaces pay-panel-tab / cal-panel-tab /
   forms-panel-tab / at-tab (NOT .pay-tab, that's a segmented control). */
.subnav-bar{display:flex;background:var(--subnav-bar);border-bottom:1px solid var(--divider);flex-shrink:0;padding:0}
.subnav-tab{padding:13px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);
  cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;
  background:none;border-top:none;border-left:none;border-right:none;
  font-family:Lato,sans-serif;white-space:nowrap}
.subnav-tab:hover{color:var(--subnav-tab-hover)}
.subnav-tab.active{color:var(--purple);border-bottom-color:var(--purple)}


/* TAG SELECTOR */
.tag-sel-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.tag-opt{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);color:var(--text-muted);background:transparent;
  transition:all .15s;font-family:Lato,sans-serif}
.tag-opt.selected{color:var(--purple-light);border-color:var(--purple-border);background:var(--purple-dim)}
.divider{height:1px;background:var(--border);margin:12px 0}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:14px}
.pg-btn{width:30px;height:30px;border-radius:var(--radius);background:var(--main-card);
  border:1px solid var(--main-border);color:var(--main-text-muted);font-size:12px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;font-family:Lato,sans-serif}
.pg-btn:hover{border-color:var(--purple-border);color:var(--main-text)}
.pg-btn.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.pg-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
.pg-info{font-size:12px;color:var(--main-text-muted);padding:0 3px}

/* CARD ON FILE */
.card-on-file{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-brand-icon{width:36px;height:24px;background:rgba(255,255,255,.12);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(255,255,255,.8);flex-shrink:0}
.card-details{flex:1}
.card-number{font-size:13px;font-weight:600;color:var(--text)}
.card-exp{font-size:11px;color:rgba(255,255,255,.55)}
.card-on-file.on-light{background:var(--main-card);border-color:var(--main-border)}
.card-on-file.on-light .card-brand-icon{background:var(--purple-dim);color:var(--purple)}
.card-on-file.on-light .card-number{color:var(--main-text)}
.card-on-file.on-light .card-exp{color:var(--main-text-muted)}
.sq-card-form{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:12px;min-height:44px}

/* BULK ACTION BAR */
.bulk-bar{background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;box-shadow:0 1px 6px rgba(107,33,234,.08)}
.bulk-count{font-size:13px;font-weight:600;color:var(--purple-light)}
.bulk-select-all-btn{background:none;border:none;color:var(--purple-light);cursor:pointer;
  font-family:Lato,sans-serif;font-size:12px;font-weight:600;padding:0;text-decoration:underline}
.cb-col{width:36px;padding:10px 8px!important}
input[type=checkbox]{cursor:pointer;accent-color:var(--purple);width:15px;height:15px}
.archive-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 6px;border-radius:4px;background:rgba(245,158,11,.15);color:var(--warning-light);margin-left:6px}

/* EMPTY STATE */
.empty-state{text-align:center;padding:44px 20px;color:var(--main-text-muted)}
.empty-state svg{width:38px;height:38px;margin:0 auto 12px;display:block;opacity:.3}
.empty-state h3{font-family:'Exo 2',sans-serif;font-size:15px;margin-bottom:5px;color:var(--main-text)}
.empty-state p{font-size:13px;color:var(--main-text-muted)}

/* TOAST */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:7px}
.toast{background:var(--bg-card);border:1px solid var(--purple-border);border-radius:var(--radius);
  padding:10px 14px;font-size:13px;color:var(--text);box-shadow:var(--shadow);
  animation:toastIn .3s ease;display:flex;align-items:center;gap:8px;max-width:280px}
.toast.success{border-color:rgba(52,211,153,.4)}.toast.error{border-color:var(--orange-border)}.toast.warn{border-color:rgba(245,158,11,.4)}
@keyframes toastIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* User menu popup */
.sb-bottom{position:relative}
.user-menu-popup{position:absolute;bottom:100%;left:8px;right:8px;background:var(--bg-card);
  border:1px solid var(--purple-border);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);z-index:100;margin-bottom:5px}
.um-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;
  font-weight:500;cursor:pointer;transition:background .15s;color:var(--text-muted);
  background:none;border:none;width:100%;text-align:left;font-family:Lato,sans-serif}
.um-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.um-item svg{width:14px;height:14px;flex-shrink:0}
.um-item.danger{color:var(--danger-light)}
.um-item.danger:hover{background:rgba(239,68,68,.1);color:var(--danger-light)}
.um-div{height:1px;background:var(--border)}
/* Products */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.prod-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);
  padding:16px;transition:border-color .18s;display:flex;flex-direction:column;box-shadow:0 1px 6px rgba(107,33,234,.06);
  /* Self-contained light-on-white tokens so the card reads correctly whether
     it sits inside .panel (light theme) or inside a dark modal. */
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --text-dim:#9b8fc4;
  --border:var(--main-border);
  color:var(--main-text);
}
.prod-card:hover{border-color:var(--purple-border)}
.prod-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.prod-name{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;color:var(--main-text)}
.prod-cat-badge{font-size:10px;font-weight:600;color:var(--purple-light);background:var(--purple-dim);
  padding:2px 7px;border-radius:4px;margin-top:3px;display:inline-block}
.prod-status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex-shrink:0;margin-top:4px}
.prod-status-dot.on{background:var(--success-light)}
.prod-desc-text{font-size:12px;color:var(--text-muted);margin-bottom:10px;line-height:1.5;flex:1}
.prod-opts-section{border-top:1px solid var(--border);padding-top:9px;margin-bottom:9px}
.prod-opt-row{display:flex;align-items:center;padding:3px 0;font-size:12px;gap:4px}
.prod-opt-name{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod-opt-price{font-family:Exo 2,sans-serif;font-weight:700;font-size:12px;margin:0 6px}
.prod-opt-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 5px;border-radius:3px;flex-shrink:0}
.prod-opt-badge.one_time{background:var(--orange-dim);color:var(--orange)}
.prod-opt-badge.recurring{background:var(--purple-dim);color:var(--purple-light)}
.prod-foot{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:9px;margin-top:auto}
/* Products | Orders subtabs: underline style, same as Special Offers (_soTab). */
.pst-tabs{display:flex;align-items:center;border-bottom:1px solid var(--main-border);margin-bottom:18px}
.pst-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--main-text-muted);font-size:14px;font-weight:700;padding:8px 2px;margin-right:24px;cursor:pointer}
.pst-tab.active{border-bottom-color:var(--purple);color:var(--main-text)}
.pricing-edit-row{display:flex;align-items:flex-start;gap:8px;padding:12px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px}
.pricing-edit-row:last-child{margin-bottom:0}
/* Notification enhancements */
.notif-read-item{opacity:.8}
.ns-type-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid var(--border)}
.ns-type-row:last-child{border-bottom:none}
.ns-type-label{font-size:13px;font-weight:500}
.ns-sw{position:relative;width:38px;height:20px;border-radius:10px;cursor:pointer;border:none;
  background:var(--border);transition:background .2s;flex-shrink:0}
.ns-sw.on{background:var(--purple)}
.ns-sw::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:left .2s}
.ns-sw.on::after{left:21px}

/* PAYMENT PANEL TABS */
.pay-panel-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-22px -24px 22px;flex-shrink:0}
.pay-panel-tab{padding:14px 20px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.pay-panel-tab:hover{color:var(--main-text)}
.pay-panel-tab.active{color:var(--purple);border-bottom-color:var(--purple)}

/* SUBSCRIPTIONS */
/* Match the white-card pattern used elsewhere (stat-card, prod-card). The
   row sits inside .panel which sets light-theme tokens, but we make the
   tokens self-contained so the row renders correctly anywhere. */
.sub-row{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:13px 16px;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 210px;gap:12px;align-items:center;cursor:pointer;transition:border-color .18s,box-shadow .18s;margin-bottom:7px;box-shadow:0 1px 6px rgba(107,33,234,.06);
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --text-dim:#9b8fc4;
  --border:var(--main-border);
  --bg-card:var(--main-card);
  color:var(--main-text);
}
.sub-row:hover{border-color:var(--purple-border);box-shadow:0 2px 12px rgba(107,33,234,.1)}
.sub-row.active{border-left:3px solid var(--success-light)}
.sub-row.paused{border-left:3px solid var(--orange);opacity:.85}
.sub-row.past_due{border-left:3px solid var(--warning-light)}
.sub-row.suspended{border-left:3px solid var(--danger-light)}
.sub-row.cancelled{border-left:3px solid var(--text-dim);opacity:.55}
.sub-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-biz{font-size:11px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-cycle-badge{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--purple-dim);color:var(--purple-light);display:inline-block;margin-top:3px}
.sub-date-cell{font-size:12px;color:var(--text-muted)}
.sub-date-cell strong{display:block;font-size:13px;font-weight:600;color:var(--text)}
.sub-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.sub-pay-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}
.spb-paid{background:rgba(52,211,153,.15);color:var(--success-light)}
.spb-unpaid{background:var(--orange-dim);color:var(--orange)}
.spb-overdue{background:rgba(239,68,68,.15);color:var(--danger-light)}
.sub-section-label{font-family:Exo 2,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:8px 0 6px;border-bottom:1px solid var(--border);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.sub-count-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--bg-card)}
.sub-item-edit-row{display:flex;align-items:flex-start;gap:7px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px}
.sub-item-edit-row:last-child{margin-bottom:0}

/* CATEGORY MANAGER */
.cat-mgr-bar{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);margin-bottom:14px;overflow:hidden;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.cat-mgr-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;user-select:none;transition:background .15s}
.cat-mgr-head:hover{background:#f5f3ff}
.cat-mgr-head-label{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);display:flex;align-items:center;gap:7px}
.cat-mgr-body{padding:12px 16px;border-top:1px solid var(--main-border);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.cat-chip-item{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--purple-dim);color:var(--purple-light);border:1px solid var(--purple-border)}
.cat-chip-rm{background:none;border:none;cursor:pointer;color:rgba(155,85,255,.45);font-size:15px;padding:0;line-height:1;display:flex;align-items:center;transition:color .15s}
.cat-chip-rm:hover{color:var(--danger-light)}
.cat-mgr-add{display:flex;gap:7px;margin-top:10px;align-items:center;padding-top:10px;border-top:1px solid var(--main-border);width:100%}

/* INVENTORY */
.inv-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;margin-top:3px}
.inv-ok{background:rgba(52,211,153,.12);color:var(--success-light)}
.inv-low{background:rgba(245,158,11,.15);color:var(--warning-light)}
.inv-out{background:rgba(239,68,68,.15);color:var(--danger-light)}
.inv-track-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);margin-top:8px}

/* CAL TABS */
.cal-panel-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-22px -24px 20px;flex-shrink:0;padding:0}
.cal-panel-tab{padding:13px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.cal-panel-tab:hover{color:var(--main-text)}
.cal-panel-tab.active{color:var(--purple);border-bottom-color:var(--purple)}

/* APPTS LIST VIEW */
.appt-list-row{background:var(--main-card);border:1px solid var(--main-border);border-left:4px solid var(--orange);border-radius:var(--radius-lg);padding:13px 16px;display:flex;align-items:flex-start;gap:14px;margin-bottom:8px;cursor:pointer;transition:border-color .18s;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.appt-list-row:hover{border-color:var(--purple-border)}
.appt-list-date{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--main-text-muted);min-width:48px;text-align:center;flex-shrink:0;padding-top:2px}
.appt-list-date .appt-day-num{font-size:22px;font-weight:800;color:var(--main-text);line-height:1;display:block}
.appt-list-body{flex:1;min-width:0}
.appt-list-title{font-size:14px;font-weight:600;margin-bottom:3px;color:var(--main-text)}
.appt-list-meta{font-size:12px;color:var(--main-text-muted)}

/* CONVERSATIONS PANEL */
.conv-wrap{display:flex;flex-direction:column;height:100%;margin:-22px -24px;background:var(--main-bg)}
.conv-toolbar{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--main-card);border-bottom:1px solid var(--main-border);flex-shrink:0}
.conv-filter-group{display:flex;gap:6px;align-items:center}
.conv-filter-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);margin-right:4px}
.conv-pill{padding:5px 12px;border-radius:var(--radius-full);background:var(--main-bg);color:var(--main-text-muted);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--main-border);transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.conv-pill:hover{background:var(--main-card-hover);color:var(--main-text)}
.conv-pill.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.conv-pill .conv-pill-count{font-size:10px;background:rgba(255,255,255,.18);padding:1px 6px;border-radius:var(--radius-full);font-weight:700}
.conv-pill:not(.active) .conv-pill-count{background:var(--purple-dim);color:var(--purple)}
.conv-toolbar-spacer{flex:1}
.conv-refresh{padding:6px 10px;background:none;border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text-muted);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.conv-refresh:hover{background:var(--main-card-hover);color:var(--main-text)}
.conv-actionbar{display:flex;align-items:center;gap:14px;padding:12px 24px;background:var(--main-card);border-bottom:1px solid var(--main-border);flex-shrink:0;flex-wrap:wrap}
.conv-search-wrap{position:relative;flex:1 1 320px;min-width:200px;max-width:480px}
.conv-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--main-text-muted);pointer-events:none}
.conv-search-input{width:100%;padding:8px 36px 8px 34px;border:1px solid var(--main-input-border);border-radius:var(--radius);background:var(--main-input);color:var(--main-text);font-size:13px;font-family:inherit;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.conv-search-input:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-search-input::placeholder{color:var(--text-placeholder)}
.conv-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;color:var(--main-text-muted);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.conv-search-clear:hover{color:var(--main-text);background:var(--main-card-hover)}
.conv-search-clear svg{width:14px;height:14px;display:block}
.conv-search-input:placeholder-shown ~ .conv-search-clear{display:none}
/* Contacts panel search clear-X. Matches conversations pattern. */
/* Contacts search clear-X. Explicit dimensions so svg renders inside the button.
   Button has fixed 22x22 size, svg centered via flex. Auto-hides when input empty. */
.c-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;background:none;border:none;cursor:pointer;padding:0;
  color:var(--main-text-muted);font-size:18px;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.c-search-clear:hover{color:var(--main-text);background:var(--main-card-hover)}
.search-box input:placeholder-shown ~ .c-search-clear{display:none}
.search-box input{padding-right:34px}
.gclr-btn{position:fixed;z-index:100000;width:20px;height:20px;display:none;
  align-items:center;justify-content:center;cursor:pointer;border:none;padding:0;margin:0;
  background:transparent;color:var(--main-text-muted);border-radius:50%;
  font-size:15px;line-height:1;font-family:inherit}
.gclr-btn:hover{color:var(--main-text);background:var(--main-card-hover)}
.conv-stats{display:flex;align-items:center;gap:18px;flex-shrink:0;flex-wrap:wrap}
.conv-stat{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--main-text-muted);white-space:nowrap}
.conv-stat svg{width:14px;height:14px;flex-shrink:0;color:var(--main-text-muted)}
.conv-stat-value{font-size:13px;font-weight:600;color:var(--main-text)}
.conv-stat-value.muted{color:var(--main-text-muted);font-weight:500}
.conv-stat-value.warn{color:var(--warning-text)}
.conv-actionbar-spacer{flex:1}
.conv-new-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;flex-shrink:0}
.conv-new-btn:hover:not(:disabled){background:var(--orange-hover)}
.conv-new-btn:active:not(:disabled){background:var(--orange-active)}
.conv-new-btn:disabled{opacity:.55;cursor:not-allowed}
.conv-new-btn svg{width:14px;height:14px}
.conv-composer-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.conv-composer-card{width:100%;max-width:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--purple-border);border-radius:var(--radius-lg);overflow:hidden}
.conv-composer-card .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.conv-composer-card .modal-title{font-size:16px;font-weight:700;color:#fff}
.surface-light.conv-composer-card .modal-title{color:var(--main-text)}
.conv-composer-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.conv-composer-close:hover{background:var(--bg-card-hover);color:var(--text)}
.conv-composer-close svg{width:18px;height:18px}
.conv-composer-card .modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;color:var(--text)}
.conv-composer-card .modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border)}
.conv-composer-section{margin-bottom:18px}
.conv-composer-section:last-child{margin-bottom:0}
.conv-composer-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:8px}
.conv-composer-search-wrap{position:relative}
.conv-composer-search{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box}
.conv-composer-search:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-composer-search::placeholder{color:var(--text-placeholder)}
.conv-composer-results{margin-top:8px;max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card)}.conv-composer-result{display:flex;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.conv-composer-result:last-child{border-bottom:none}
.conv-composer-result:hover{background:var(--bg-card-hover)}
.conv-composer-result-avatar{width:32px;height:32px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;text-transform:uppercase}
.conv-composer-result-body{flex:1;min-width:0}
.conv-composer-result-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-composer-result-meta{font-size:11px;color:var(--text-muted);display:flex;gap:10px;flex-wrap:wrap}
.conv-composer-result-meta span{display:inline-flex;align-items:center;gap:3px}
.conv-composer-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:12px}
.conv-composer-pinned{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);margin-bottom:0}.conv-composer-pinned-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.conv-composer-pinned-clear:hover{background:var(--bg-card-hover);color:var(--text)}
.conv-composer-pinned-clear svg{width:14px;height:14px}
.conv-composer-channel-row{display:flex;gap:8px}
.conv-composer-channel-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-full);background:var(--bg-card);color:var(--text-muted);font-size:13px;font-weight:600;border:1px solid var(--border);cursor:pointer;font-family:inherit;transition:all .15s}
.conv-composer-channel-pill:hover:not(:disabled){background:var(--bg-card-hover);color:var(--text)}
.conv-composer-channel-pill.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.conv-composer-channel-pill:disabled{opacity:.4;cursor:not-allowed}
.conv-composer-channel-pill svg{width:14px;height:14px}
.conv-composer-subject{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box;margin-bottom:8px}
.conv-composer-subject:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-composer-subject::placeholder{color:var(--text-placeholder)}.conv-composer-body-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box;resize:vertical;min-height:120px;line-height:1.5}
.conv-composer-body-input:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-composer-body-input::placeholder{color:var(--text-placeholder)}
.conv-composer-body-input:disabled{opacity:.6;cursor:not-allowed}
.conv-composer-error{padding:10px 12px;background:var(--danger-dim);color:var(--danger-text);border:1px solid var(--danger);border-radius:var(--radius);font-size:12px;margin-top:12px}.conv-composer-cancel{padding:8px 14px;background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}
.conv-composer-cancel:hover{background:var(--bg-card-hover);color:var(--text)}
.conv-composer-send{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.conv-composer-send:hover:not(:disabled){background:var(--orange-hover)}
.conv-composer-send:active:not(:disabled){background:var(--orange-active)}
.conv-composer-send:disabled{opacity:.45;cursor:not-allowed}
.conv-composer-send svg{width:14px;height:14px}
.conv-main{flex:1;display:flex;min-height:0;overflow:hidden}
.conv-list{width:360px;flex-shrink:0;border-right:1px solid var(--main-border);background:var(--main-card);overflow-y:auto}
.conv-list-empty{padding:40px 20px;text-align:center;color:var(--main-text-muted);font-size:13px}
.conv-list-item{padding:14px 16px;border-bottom:1px solid var(--main-border);cursor:pointer;display:flex;gap:12px;transition:background .12s;border-left:3px solid transparent}
.conv-list-item:hover{background:var(--main-card-hover)}
.conv-list-item.active{background:var(--purple-dim);border-left-color:var(--purple)}
.conv-list-item.unread{background:var(--main-bg)}
.conv-list-item.unread.active{background:var(--purple-dim)}
.conv-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;text-transform:uppercase}
.conv-list-body{flex:1;min-width:0}
.conv-list-row1{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.conv-list-name{font-size:13px;font-weight:600;color:var(--main-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-list-item.unread .conv-list-name{font-weight:700}
.conv-list-time{font-size:11px;color:var(--main-text-muted);flex-shrink:0;white-space:nowrap}
.conv-list-item.unread .conv-list-time{color:var(--purple);font-weight:600}
.conv-list-preview{font-size:12px;color:var(--main-text-muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.conv-list-item.unread .conv-list-preview{color:var(--main-text)}
.conv-list-meta{display:flex;align-items:center;gap:6px;margin-top:4px}
.conv-list-channel{display:inline-flex;align-items:center;gap:4px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);background:var(--main-bg);color:var(--main-text-muted)}
.conv-list-channel.ch-email{background:var(--info-dim);color:var(--info-text)}
.conv-list-channel.ch-sms{background:var(--success-dim);color:var(--success-text)}
.conv-list-channel.ch-chat{background:var(--warning-dim);color:var(--warning-text)}
.conv-list-assignee{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--purple-light);background:var(--purple-dim);padding:2px 7px;border-radius:var(--radius-full)}
.conv-list-assignee svg{width:10px;height:10px}
.conv-assign-select{font-size:12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);color:var(--main-text);padding:6px 8px;cursor:pointer;font-family:inherit;max-width:150px}
.conv-assign-select:hover{background:var(--main-card-hover)}
.conv-list-channel svg{width:11px;height:11px}
.conv-list-direction{font-size:10px;color:var(--main-text-muted);font-weight:600}
.conv-list-direction.inbound{color:var(--success-text)}
.conv-list-unread-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--purple);flex-shrink:0;margin-left:auto}
.conv-thread{flex:1;display:flex;flex-direction:column;min-width:0;background:#e8e5f0}
.conv-thread-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--main-text-muted);padding:40px;text-align:center}
.conv-thread-empty svg{width:48px;height:48px;margin-bottom:14px;opacity:.4}
.conv-thread-empty h3{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--main-text)}
.conv-thread-empty p{font-size:13px;max-width:280px}
.conv-thread-head{background:var(--main-card);border-bottom:1px solid var(--main-border);padding:14px 20px;flex-shrink:0;display:flex;align-items:center;gap:12px}
.conv-thread-head-info{flex:1;min-width:0}
.conv-thread-head-name{font-size:14px;font-weight:700;color:var(--main-text)}
.conv-thread-head-meta{font-size:12px;color:var(--main-text-muted);margin-top:2px;display:flex;align-items:center;gap:8px}
.conv-thread-head-actions{display:flex;gap:6px}
.conv-thread-action{padding:6px 12px;font-size:12px;border-radius:var(--radius);background:none;border:1px solid var(--main-border);color:var(--main-text-muted);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.conv-thread-action:hover{background:var(--main-card-hover);color:var(--main-text)}
.conv-thread-action.danger{color:var(--danger-text);border-color:var(--danger-dim)}
.conv-thread-action.danger:hover{background:var(--danger-dim);color:var(--danger-text)}
.sb-badge{position:absolute;top:8px;right:10px;background:var(--purple);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.sb-item{position:relative}
.conv-thread-action svg{width:13px;height:13px}
.conv-thread-status{display:inline-block;font-size:10px;padding:2px 8px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.conv-thread-status.open{background:var(--success-dim);color:var(--success-text)}
.conv-thread-status.closed{background:var(--main-border);color:var(--main-text-muted)}
.conv-thread-status.archived{background:var(--text-disabled);color:var(--main-text-muted)}
.conv-thread-messages{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:14px;max-width:880px;width:calc(100% - 32px);margin:16px auto;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.conv-msg{max-width:82%;display:flex;flex-direction:column;gap:4px}
.conv-msg.outbound{align-self:flex-end;align-items:flex-end}
.conv-msg.inbound{align-self:flex-start;align-items:flex-start}
.conv-msg-bubble{padding:10px 14px;border-radius:var(--radius-lg);font-size:13px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;min-width:0;max-width:100%}
.conv-msg.outbound .conv-msg-bubble{background:var(--purple);color:#fff;border-bottom-right-radius:var(--radius-sm)}
.conv-msg.inbound .conv-msg-bubble{background:var(--main-card);color:var(--main-text);border:1px solid var(--main-border);border-bottom-left-radius:var(--radius-sm)}
.conv-msg-subject{font-weight:600;margin-bottom:4px;font-size:12px;opacity:.95}
.conv-msg-body{white-space:pre-wrap}
.conv-msg.outbound .conv-msg-bubble.failed{background:var(--danger);}
.conv-msg-meta{font-size:10px;color:var(--main-text-muted);display:flex;align-items:center;gap:6px;padding:0 6px}
.conv-msg-source{text-transform:uppercase;letter-spacing:.05em;font-weight:600;opacity:.8}
.conv-msg-status{font-weight:600}
.conv-msg-status.failed{color:var(--danger-text)}
.conv-composer-wrap{flex-shrink:0;padding:0 0 16px;max-width:880px;width:calc(100% - 32px);margin:0 auto;box-sizing:border-box}
.conv-phi-reminder{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;font-size:11px;color:var(--main-text-muted);background:var(--warning-dim);border:1px solid var(--warning-border,var(--warning));border-radius:var(--radius-sm);line-height:1.4}
.conv-phi-reminder svg{flex-shrink:0;color:var(--warning-text)}
.conv-phi-reminder.conv-phi-reminder-dark{margin-top:8px;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:var(--text-muted)}
.conv-phi-reminder.conv-phi-reminder-dark svg{color:var(--warning-light)}
/* SMS consent state for the open thread. Makes the reply window visible so a
   conversation converts into real consent instead of expiring silently. */
.conv-consent-note{display:flex;align-items:flex-start;gap:9px;padding:10px 20px;font-size:12px;line-height:1.45;background:var(--warning-dim);border-bottom:1px solid var(--warning-border,var(--warning));color:var(--main-text);flex-shrink:0}
.conv-consent-note.blocked{background:var(--danger-dim);border-bottom-color:var(--danger-dim)}
.conv-consent-note svg{flex-shrink:0;width:14px;height:14px;margin-top:1px;color:var(--warning-text)}
.conv-consent-note.blocked svg{color:var(--danger-text)}
.conv-consent-body{flex:1;min-width:0}
.conv-consent-title{font-weight:700}
.conv-consent-sub{color:var(--main-text-muted);margin-top:2px}
.conv-composer{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.conv-composer textarea{width:100%;min-height:60px;max-height:160px;border:none;outline:none;resize:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.55;color:var(--main-text);padding:0;box-sizing:border-box}
.conv-composer textarea::placeholder{color:var(--main-text-muted)}
.conv-composer-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px solid var(--main-border)}
.conv-composer-meta{font-size:11px;color:var(--main-text-muted);display:flex;align-items:center;gap:10px}
.conv-composer-meta .char-count.over{color:var(--danger-text);font-weight:600}
.conv-composer-send{padding:7px 16px;font-size:13px;font-weight:600;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.conv-composer-send:hover:not(:disabled){background:var(--orange-hover)}
.conv-composer-send:disabled{background:var(--main-border);color:var(--main-text-muted);cursor:not-allowed}
.conv-composer-disabled{padding:14px 16px;font-size:13px;color:var(--main-text-muted);text-align:center;background:var(--main-card);border:1px dashed var(--main-border);border-radius:var(--radius-lg)}
.conv-composer-disabled button{background:none;border:none;color:var(--purple);font-weight:600;cursor:pointer;padding:0;font-size:inherit;text-decoration:underline}
.conv-msg.sending .conv-msg-bubble{opacity:.6}
.conv-msg-retry{margin-left:8px;background:none;border:none;color:var(--danger-text);cursor:pointer;font-weight:600;font-size:11px;text-decoration:underline;padding:0}
.conv-msg-date-divider{align-self:center;font-size:10px;color:var(--main-text-muted);background:var(--main-card);padding:3px 10px;border-radius:var(--radius-full);border:1px solid var(--main-border);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
/* Conversations attachments (email) */
.conv-composer-actions{justify-content:flex-start}
.conv-composer-send{margin-left:auto}
.conv-attach-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px;background:none;border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text-muted);cursor:pointer;transition:color .15s,border-color .15s}
.conv-attach-btn:hover{color:var(--purple);border-color:var(--purple)}
.conv-composer-attach{display:flex;align-items:flex-start;gap:8px;margin-top:8px}
.conv-attach-chips{display:flex;flex-wrap:wrap;gap:6px}
.conv-attach-chips:empty{display:none}
.conv-attach-chip{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:4px 8px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);font-size:12px;color:var(--main-text)}
.conv-attach-chip svg{flex:0 0 auto;color:var(--main-text-muted)}
.conv-attach-chip.uploading{opacity:.7}
.conv-attach-chip.error{border-color:var(--danger);color:var(--danger-text)}
.conv-attach-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-attach-chip-size{flex:0 0 auto;color:var(--main-text-muted);font-size:11px}
.conv-attach-chip-x{flex:0 0 auto;background:none;border:none;color:var(--main-text-muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.conv-attach-chip-x:hover{color:var(--danger-text)}
.conv-attach-chip-spin{flex:0 0 auto;width:12px;height:12px;border:2px solid var(--main-text-muted);border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
.conv-msg-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.conv-msg-att{display:inline-flex;align-items:center;gap:6px;max-width:240px;padding:5px 9px;border-radius:var(--radius);font-size:12px;text-decoration:none;overflow-wrap:anywhere}
.conv-msg-att svg{flex:0 0 auto}
.conv-msg-att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-msg-att-size{flex:0 0 auto;opacity:.75;font-size:11px}
.conv-msg-att.disabled{cursor:default;opacity:.6}
.conv-msg-att.image{padding:0;max-width:220px;border-radius:var(--radius);overflow:hidden}
.conv-msg-att.image img{display:block;max-width:220px;max-height:220px;width:auto;height:auto}
.conv-msg.outbound .conv-msg-att.file{background:rgba(255,255,255,.16);color:#fff}
.conv-msg.outbound .conv-msg-att.file:hover{background:rgba(255,255,255,.26)}
.conv-msg.inbound .conv-msg-att.file{background:var(--main-bg);color:var(--main-text);border:1px solid var(--main-border)}
.conv-msg.inbound .conv-msg-att.file:hover{border-color:var(--purple)}

/* FORMS PANEL */
.forms-panel-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-22px -24px 22px;flex-shrink:0;padding:0}
.forms-panel-tab{padding:13px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.forms-panel-tab:hover{color:var(--main-text)}
.forms-panel-tab.active{color:var(--purple);border-bottom-color:var(--purple)}

@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* COMING SOON PLACEHOLDER */
.coming-soon-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}
.coming-soon-wrap svg{width:44px;height:44px;opacity:.18;margin-bottom:16px}
.coming-soon-wrap h3{font-family:Exo 2,sans-serif;font-size:17px;font-weight:700;margin-bottom:7px}
.coming-soon-wrap p{font-size:13px;color:var(--text-muted);max-width:320px}
.coming-soon-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:20px;background:var(--purple-dim);color:var(--purple-light);border:1px solid var(--purple-border);margin-bottom:12px}
/* ===== FORM BUILDER ===== */
#fb-overlay{position:fixed;inset:0;background:var(--main-bg);z-index:150;display:flex;flex-direction:column;overflow:hidden;--bg-panel:var(--main-card);--bg-card:var(--main-bg);--bg-card-hover:var(--main-card-hover);--bg-input:var(--main-input);--text:var(--main-text);--text-muted:var(--main-text-muted);--text-dim:var(--main-text-muted);--border:var(--main-border)}
.fb-topbar{height:52px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:8px;flex-shrink:0}
.fb-name-inp{background:transparent;border:none;color:var(--text);font-family:Exo 2,sans-serif;font-size:15px;font-weight:700;outline:none;flex:1;min-width:0;padding:4px 8px;border-radius:6px;transition:background .15s}
.fb-name-inp:focus{background:var(--bg-input)}
.fb-status-sel{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:5px 9px;font-size:12px;font-family:Lato,sans-serif;outline:none;height:32px}
.fb-body{display:flex;flex:1;overflow:hidden;min-height:0}
.fb-pal{width:190px;flex-shrink:0;background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto;padding:0 0 16px}
@media (max-width:1599px){.fb-pal{width:178px}}
@media (max-width:1199px){.fb-pal{width:164px}}
.fb-pal-search-wrap{position:sticky;top:0;z-index:4;background:var(--bg-panel);padding:10px 10px 8px;border-bottom:1px solid var(--border)}
.fb-pal-search{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:12px;font-family:Lato,sans-serif;padding:7px 9px 7px 30px;outline:none;box-sizing:border-box}
.fb-pal-search:focus{border-color:var(--purple)}
.fb-pal-search-ic{position:absolute;left:19px;top:18px;color:var(--text-dim);pointer-events:none}
.fb-pal-grp{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);padding:11px 12px 6px;cursor:pointer;user-select:none}
.fb-pal-grp:hover{color:var(--text-muted)}
.fb-pal-grp span{flex:1}
.fb-pal-chev{flex-shrink:0;transition:transform .15s}
.fb-pal-chev.closed{transform:rotate(-90deg)}
.fb-pal-grp-count{background:var(--purple-dim);color:var(--purple-light);font-size:9px;padding:1px 6px;border-radius:8px;letter-spacing:0}
.fb-pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 10px}
.fb-pal-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:9px 5px;min-height:54px;cursor:grab;transition:background .12s,border-color .12s;font-size:10.5px;font-weight:500;color:var(--text-muted);user-select:none;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.fb-pal-item:hover{background:var(--main-card);border-color:var(--purple-border);color:var(--text)}
.fb-pal-item:active{cursor:grabbing}
.fb-pal-item svg{width:16px;height:16px;flex-shrink:0;color:var(--purple)}
.fb-pal-item span{line-height:1.25;word-break:break-word}
.fb-pal-newcf{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 20px);margin:8px 10px 0;padding:9px;font-size:11px;font-weight:600;color:var(--purple);background:var(--purple-dim);border:1px dashed var(--purple-border);border-radius:var(--radius);cursor:pointer;font-family:Lato,sans-serif}
.fb-pal-newcf:hover{background:var(--purple-soft)}
.fb-pal-empty{font-size:11px;color:var(--text-dim);padding:14px 12px;text-align:center}
.fb-pal-subcat{font-size:10px;font-weight:600;color:var(--text-muted);padding:8px 12px 3px}
.fb-pal-cf-actions{display:flex;gap:5px;padding:8px 10px 0}
.fb-pal-cf-actions .fb-pal-newcf{margin:0;flex:1;width:auto}
.fb-pal-manage{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;padding:9px;font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-family:Lato,sans-serif}
.fb-pal-manage:hover{border-color:var(--purple-border);color:var(--text)}
/* Custom field manager modal */
.cf-mgr-cat{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.cf-mgr-cat-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-card)}
.cf-mgr-cat-name{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-weight:600;padding:6px 8px;outline:none;font-family:Lato,sans-serif}
.cf-mgr-cat-name:focus{border-color:var(--purple)}
.cf-mgr-fields{padding:4px 10px}
.cf-mgr-field-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.cf-mgr-field-row:last-child{border-bottom:none}
.cf-mgr-field-label{flex:1;font-size:13px;font-weight:500}
.cf-mgr-empty{font-size:12px;color:var(--text-dim);padding:8px 10px}
.cf-mgr-addcat{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.cf-mgr-addcat input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;padding:7px 9px;outline:none;font-family:Lato,sans-serif}
.fb-canvas-area{flex:1;overflow-y:auto;padding:28px 32px;background:var(--main-bg);background-image:radial-gradient(rgba(107,33,234,.05) 1px,transparent 1px);background-size:20px 20px}
.fb-pg-tabs-row{display:flex;align-items:center;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.fb-pg-tab{padding:5px 13px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--main-border);color:var(--main-text-muted);background:transparent;font-family:Lato,sans-serif;transition:all .14s;display:flex;align-items:center;gap:5px}
.fb-pg-tab:hover{border-color:var(--purple-border);color:var(--text)}
.fb-pg-tab.active{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}
.fb-pg-add{padding:5px 10px;border-radius:20px;font-size:12px;cursor:pointer;border:1px dashed var(--main-border);color:var(--main-text-muted);background:transparent;font-family:Lato,sans-serif}
.fb-pg-add:hover{border-color:var(--purple-border);color:var(--purple-light)}
.fb-canvas-center{max-width:800px;margin:0 auto}
.fb-page-canvas{background:#ffffff;border-radius:12px;padding:22px;min-height:280px;transition:background .2s;box-shadow:0 1px 3px rgba(26,16,48,.06),0 8px 28px rgba(26,16,48,.08)}
.fb-page-canvas.dz-active{outline:2px solid var(--purple);outline-offset:2px}
.fb-canvas-title{font-size:19px;font-weight:700;line-height:1.3;margin-bottom:16px;pointer-events:none;word-break:break-word}
.fb-canvas-submit{margin-top:20px;pointer-events:none}
.fb-editing-pill{position:absolute;top:-8px;left:10px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--purple);padding:1px 7px;border-radius:4px;pointer-events:none;z-index:3}
.fb-fields-wrap{position:relative}
.fb-dropzone{height:6px;margin:0;position:relative;z-index:2;border-radius:3px;transition:height .12s,background .12s}
.fb-dropzone.dz-over{height:24px;background:var(--purple-dim)}
.fb-dz-line{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--purple);border-radius:1px;transform:translateY(-50%);opacity:0;transition:opacity .1s}
.fb-dropzone.dz-over .fb-dz-line{opacity:1}
/* Shared drag-to-reorder drop-line indicator. box-shadow draws the line with no
   layout shift (a border would push the row and feel sluggish). The line sits on
   the edge nearest the cursor so it shows exactly where the item will land. */
.dnd-line-above{box-shadow:inset 0 2px 0 0 var(--purple)}
.dnd-line-below{box-shadow:inset 0 -2px 0 0 var(--purple)}
.fb-fields-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-auto-flow:row dense}
.fb-field-wrap{position:relative;grid-column:span 2}
.fb-field-wrap.half-w{grid-column:span 1}
.fb-dropzone{grid-column:span 2}
.fb-fc{position:relative;background:#f8f8f8;border:1px solid var(--text-disabled);border-radius:var(--radius);padding:9px 11px;cursor:pointer;transition:border-color .14s,box-shadow .14s;display:flex;align-items:flex-start;gap:8px}
.fb-fc:hover{border-color:#aaa}
.fb-fc.sel{border-color:var(--purple);box-shadow:0 0 0 2px rgba(107,33,234,.15)}
.fb-fc.is-dragging{opacity:.3;border-style:dashed}
.fb-fc .dh{color:#bbb;cursor:grab;flex-shrink:0;padding-top:1px}
.fb-fc:hover .dh{color:#888}
.fb-fc .dh:active{cursor:grabbing}
.fb-fc .fp{flex:1;min-width:0}
.fb-fc .ft{font-size:9px;font-weight:700;text-transform:uppercase;color:#bbb;flex-shrink:0;padding-top:2px}
.fb-fc .fa{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .12s}
.fb-fc:hover .fa,.fb-fc.sel .fa{opacity:1}
.fb-fc .fa .icon-btn-xs{color:#888}
.fb-fc .fa .icon-btn-xs:hover{color:#ff4000;background:rgba(255,64,0,.08)}
.fb-lbl{font-size:11px;font-weight:600;color:#222;margin-bottom:3px}
.fb-lbl .req{color:#ff4000;margin-left:2px}
.fb-mi{height:26px;background:var(--bg-input);border:1px solid var(--border);border-radius:5px}
.fb-mita{height:48px;background:#f8f8f8;border:1px solid var(--text-disabled);border-radius:5px}
.fb-msel{height:26px;background:#f8f8f8;border:1px solid var(--text-disabled);border-radius:5px;display:flex;align-items:center;padding:0 8px;font-size:10px;color:#bbb;justify-content:space-between}
.fb-mopt{display:flex;align-items:center;gap:5px;font-size:11px;color:#666;padding:2px 0}
.fb-mopt-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--text-disabled);flex-shrink:0}
.fb-mopt-box{width:11px;height:11px;border-radius:3px;border:1.5px solid var(--text-disabled);flex-shrink:0}
.fb-empty-drop{border:2px dashed var(--text-disabled);border-radius:var(--radius);padding:32px 20px;text-align:center;color:var(--main-text-muted);font-size:13px}
.fb-sp{width:480px;flex-shrink:0;background:var(--bg-panel);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
@media (max-width:1599px){.fb-sp{width:340px}}
@media (max-width:1199px){.fb-sp{width:260px}}
.fb-sp-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.fb-sp-t{flex:1;padding:10px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;background:none;border:none;color:var(--text-muted);font-family:Lato,sans-serif;border-bottom:2px solid transparent;transition:all .15s}
.fb-sp-t.active{color:var(--orange);border-bottom-color:var(--orange)}
.fb-sp-t.is-disabled{opacity:.4}
.fb-sp-body{padding:12px;flex:1}
.fb-sl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:10px 0 4px;display:block}
.fb-si{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:7px 9px;font-family:Lato,sans-serif;font-size:13px;outline:none;margin-bottom:8px}
.fb-si:focus{border-color:var(--purple)}
.fb-ss{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:7px 9px;font-family:Lato,sans-serif;font-size:13px;outline:none;margin-bottom:8px;height:36px}
.fb-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:2px 0}
.fb-toggle-lbl{font-size:13px;font-weight:500}
.fb-opt-item{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.fb-opt-item input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:5px 7px;font-size:12px;outline:none;font-family:Lato,sans-serif}
.fb-cond-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:9px;margin-bottom:6px}
.fb-cond-selects{display:flex;gap:4px;margin-bottom:5px;flex-wrap:wrap}
.fb-cond-selects select{flex:1;min-width:64px;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:4px 6px;font-size:11px;outline:none;font-family:Lato,sans-serif;height:28px}
.fb-cond-val{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:4px 6px;font-size:11px;outline:none;font-family:Lato,sans-serif}
.fb-col-row{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px}
.fb-col-btn{flex:1;padding:6px;font-size:11px;font-weight:600;cursor:pointer;background:transparent;border:none;color:var(--text-muted);font-family:Lato,sans-serif;text-align:center;transition:all .12s}
.fb-col-btn.active{background:var(--purple);color:#fff}
.fb-divider{height:1px;background:var(--border);margin:10px 0}
/* Form list */
.fb-list-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.fb-list-card:hover{border-color:var(--purple-border)}
.fb-list-icon{width:38px;height:38px;border-radius:var(--radius);background:var(--purple-dim);border:1px solid var(--purple-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Embed panel */
.fb-code-block{background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);padding:12px;font-family:monospace;font-size:11px;color:var(--main-text);white-space:pre-wrap;word-break:break-all;max-height:160px;overflow-y:auto;line-height:1.6;margin-bottom:8px}
/* Submissions */
.fb-sub-row{background:var(--main-card);border:1px solid var(--main-border);color:var(--main-text);border-radius:var(--radius);padding:10px 14px;margin-bottom:6px;cursor:pointer;transition:border-color .14s,background .14s;display:flex;align-items:flex-start;gap:12px}
.fb-sub-row:hover{background:var(--main-card-hover);border-color:var(--purple-border)}
/* Preview overlay */
.fb-prev-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.fb-prev-card{background:#f4f4f8;border-radius:14px;width:100%;max-width:800px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
/* #form-embed:start (extracted into book.mysparkplus.app/form.html by scripts/frontend/build-form-embed.js; uses --text-disabled, --purple, --orange, defined in that shell's :root) */
.fb-form-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;grid-auto-flow:row dense}
.fb-form-fields-grid > .fb-prev-field{grid-column:span 2}
.fb-form-fields-grid > .fb-prev-field.half-w{grid-column:span 1}
.fb-form-fields-grid > hr{grid-column:span 2}
.fb-prev-head{padding:22px 24px 16px;border-bottom:1px solid #e0e0e8}
.fb-prev-head h2{font-size:18px;font-weight:700;color:#111;margin:0}
.fb-prev-body{padding:20px 24px 28px}
.fb-prev-field{margin-bottom:16px}
.fb-prev-label{display:block;font-size:13px;font-weight:600;color:#222;margin-bottom:5px}
.fb-prev-label .req{color:#ff4000}
.fb-prev-input{width:100%;border:1px solid var(--text-disabled);border-radius:7px;padding:9px 12px;font-size:14px;color:#111;background:#fff;outline:none;font-family:Lato,sans-serif;transition:border-color .2s}
.fb-prev-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(107,33,234,.1)}
.fb-prev-select{width:100%;border:1px solid var(--text-disabled);border-radius:7px;padding:9px 12px;font-size:14px;color:#111;background:#fff;outline:none;font-family:Lato,sans-serif;height:42px}
.fb-prev-opt-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;color:#333;cursor:pointer}
.fb-prev-opt-row input{width:16px;height:16px;cursor:pointer;accent-color:var(--purple)}
.fb-prev-submit{display:inline-block;padding:11px 28px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:Lato,sans-serif;transition:filter .15s}
.fb-prev-submit:hover{filter:brightness(1.1)}
.fb-prev-tnc{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#444}
.fb-prev-tnc input{margin-top:2px;width:15px;height:15px;cursor:pointer;accent-color:var(--purple)}
.fb-prev-sig{width:100%;height:100px;border:1px solid var(--text-disabled);border-radius:7px;background:#fff;cursor:crosshair}
/* #form-embed:end */
.fb-pg-indicator{display:flex;align-items:center;gap:6px;margin-bottom:16px;justify-content:center}
.fb-pg-dot{width:8px;height:8px;border-radius:50%;background:#ddd;transition:background .2s}
.fb-pg-dot.active{background:var(--purple);width:20px;border-radius:4px}

/* RICH TEXT EDITOR */
.fb-rte-wrap{border:1px solid var(--text-disabled);border-radius:8px;overflow:hidden;margin-bottom:8px}
.fb-rte-bar{display:flex;gap:2px;padding:5px 7px;background:#f0f0f4;border-bottom:1px solid var(--text-disabled);flex-wrap:wrap}
.fb-rte-btn{padding:3px 8px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:12px;font-weight:600;color:#444;font-family:Lato,sans-serif;transition:background .12s}
.fb-rte-btn:hover{background:#ddd}
.fb-rte-body{min-height:80px;max-height:160px;overflow-y:auto;padding:10px 12px;font-size:13px;color:#222;line-height:1.6;outline:none;background:#fff}
.fb-rte-body a{color:var(--purple)}
/* FILE TYPE CHECKBOXES */
.fb-file-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:6px}
.fb-file-chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);cursor:pointer;padding:2px 0}
.fb-file-chk input{width:13px;height:13px;cursor:pointer;accent-color:var(--purple);flex-shrink:0}
/* CONTENT ELEMENT PREVIEWS */
.fb-content-el{padding:8px 10px;border-radius:var(--radius);background:#f4f4f8}
.fb-content-header{font-weight:700;color:#111;line-height:1.3}
.fb-content-para{font-size:13px;color:#555;line-height:1.6}
.fb-content-divider{border:none;border-top:1.5px solid var(--text-disabled);margin:4px 0}
/* ALIGNMENT ROW */
.fb-align-row{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px}
.fb-align-btn{flex:1;padding:6px;font-size:11px;font-weight:600;cursor:pointer;background:transparent;border:none;color:var(--text-muted);font-family:Lato,sans-serif;text-align:center;transition:all .12s}
.fb-align-btn.active{background:var(--purple);color:#fff}
/* CUSTOM FIELDS */
.cf-cat-section{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:8px;overflow:hidden}
.cf-cat-head{display:flex;align-items:center;gap:8px;padding:10px 14px;user-select:none}
.cf-cat-name{font-size:13px;font-weight:600;flex:1}
.cf-cat-count{font-size:11px;color:var(--text-muted)}
.cf-cat-body{padding:10px 14px;border-top:1px solid var(--border)}
.cf-field-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.cf-field-row:last-child{border-bottom:none}
.cf-field-key{font-size:10px;font-family:monospace;color:var(--text-muted);background:var(--bg-card);padding:2px 6px;border-radius:4px;flex-shrink:0}
.cf-field-type-badge{font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 5px;border-radius:3px;background:var(--purple-dim);color:var(--purple-light);flex-shrink:0}
/* CONTACT DRAWER CUSTOM FIELDS */
.drawer-cf-section{margin-bottom:4px}
.drawer-cf-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-top:22px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text);transition:color .14s}
.drawer-cf-head:hover{color:var(--purple)}
.drawer-cf-body{padding:10px 12px}
.drawer-cf-label{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;display:block;margin-bottom:3px}
.drawer-cf-inp{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;font-family:Lato,sans-serif;margin-bottom:8px}
.drawer-cf-inp:last-child{margin-bottom:0}

/* STAFF PANEL */
.staff-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-22px -24px 22px;flex-shrink:0}
.staff-tab{padding:14px 20px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.staff-tab:hover{color:var(--main-text)}
.staff-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.staff-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.staff-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.add-tile{border:2px dashed var(--border);border-radius:var(--radius-lg);background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:120px;color:var(--main-text-muted);font-weight:600;transition:border-color .15s,color .15s}
.add-tile:hover{border-color:var(--purple);color:var(--purple)}
.staff-card-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Exo 2,sans-serif;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}
.staff-card-name{font-size:14px;font-weight:700}
.staff-card-pos{font-size:12px;font-weight:600;color:var(--text);min-height:15px}.staff-card-role{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted)}
.staff-card-sched{font-size:11px;color:var(--text-muted);margin-top:2px}
.staff-pending-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--warning-dim);color:var(--warning-light);border:1px solid var(--warning);border-radius:var(--radius-full);padding:2px 10px;margin-top:2px;cursor:default}
/* REPORTING TABLE */
.rpt-filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.rpt-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--main-card)}
.rpt-table th{text-align:left;padding:8px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);border-bottom:1px solid var(--main-border);background:var(--main-bg)}
.rpt-table td{padding:10px 12px;border-bottom:1px solid var(--main-border);vertical-align:middle;color:var(--main-text)}
.rpt-table tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--main-border)}
.data-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--main-card)}
.data-table th{text-align:left;padding:10px 16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);border-bottom:1px solid var(--main-border);background:var(--main-bg);white-space:nowrap}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--main-border);vertical-align:middle;color:var(--main-text)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--main-card-hover)}
.rpt-total-row td{font-weight:700;background:var(--main-bg);color:var(--main-text)}
/* WEEK SCHEDULE DASHBOARD */
.dash-week{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;box-shadow:0 2px 12px rgba(107,33,234,.07)}
.dash-week-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.week-day-col{margin-bottom:12px}
.week-day-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:5px}
.week-day-label.is-today{color:var(--purple)}
.week-appt-item{background:var(--bg-card);border-radius:6px;padding:7px 10px;margin-bottom:4px;border-left:3px solid var(--purple);display:flex;align-items:center;gap:8px}
.week-appt-time{font-size:11px;font-weight:700;color:var(--text-muted);flex-shrink:0;min-width:52px}
.week-appt-title{font-size:13px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.week-no-appts{font-size:12px;color:var(--text-dim);padding:4px 0}
/* AGENCY DASHBOARD TABS */
.agency-tab-bar{background:var(--bg-panel);border-bottom:1px solid var(--border);padding:0 32px;display:flex;gap:0;align-items:flex-end}
.agency-tab{background:transparent;border:none;color:var(--text-muted);padding:14px 20px;font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;letter-spacing:0.02em;transition:color .15s}
.agency-tab:hover{color:var(--text)}
.agency-tab.active{color:var(--orange);border-bottom-color:var(--orange)}
.agency-tab-content{padding:28px 32px}
/* Agency Users master-detail panel */
.au-wrap{display:flex;gap:0;border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--main-card);min-height:520px}
.au-side{width:260px;flex-shrink:0;border-right:1px solid var(--main-border);display:flex;flex-direction:column;background:rgba(107,33,234,.06)}
.au-side-search{padding:16px 14px;border-bottom:1px solid var(--main-border)}
.au-side-list{overflow-y:auto;flex:1}
.au-side-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--main-border);font-size:13px;color:var(--main-text);transition:background .12s}
.au-side-item:hover{background:var(--main-card-hover)}
.au-side-item.active{background:var(--purple-dim);border-left:3px solid var(--orange);padding-left:11px}
.au-side-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-side-badge{font-size:11px;color:var(--main-text-muted);flex-shrink:0;font-weight:600}
.au-main{flex:1;display:flex;flex-direction:column;min-width:0}
.au-toolbar{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--main-border);flex-wrap:wrap}
.au-toolbar .input{flex:1;min-width:200px}
.au-table{width:100%;border-collapse:collapse;font-size:13px}
.au-table th{text-align:left;padding:10px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--main-text-muted);border-bottom:1px solid var(--main-border);font-weight:700}
.au-table td{padding:13px 16px;border-bottom:1px solid var(--main-border);color:var(--main-text);vertical-align:middle}
.au-table tr:hover td{background:var(--main-card-hover)}
.au-pill-ok{display:inline-block;background:var(--success-dim);color:var(--success-text);border:1px solid var(--success);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full)}
.au-pill-pending{display:inline-block;background:var(--warning-dim);color:var(--warning-text);border:1px solid var(--warning);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full)}
.au-pager{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px}
.au-empty{padding:48px 24px;text-align:center;color:var(--main-text-muted);font-size:14px}
.au-wrap .input{padding:11px 14px}
.au-side-item{padding-top:13px;padding-bottom:13px}
.agency-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.agency-toolbar input[type="text"],.agency-toolbar select{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 10px;font-size:13px;height:34px;font-family:inherit}
.agency-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.agency-stat-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.agency-stat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:6px}
.agency-stat-value{font-family:Exo 2,sans-serif;font-size:26px;font-weight:800;color:var(--text)}
.agency-stat-sub{font-size:12px;color:var(--text-muted);margin-top:4px}

/* BOOKING WIDGETS */
.booking-widget-placeholder{background:var(--bg-card);border:1px dashed var(--border);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;color:var(--text-muted)}
/* CUSTOM FIELD READ-ONLY */
.cf-ro-val{font-size:13px;color:var(--text);padding:3px 0;min-height:20px;word-break:break-word}
.cf-ro-val.empty{color:var(--text-dim);font-style:italic}

/* CALENDAR SCHEDULE BLOCKS */
.cal-off-block{position:absolute;left:2px;right:2px;border-radius:5px;padding:5px 7px;font-size:11px;font-weight:700;z-index:3;pointer-events:none;overflow:hidden}
.cal-off-block-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.cal-off-block-reason{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:400;opacity:.8}
.cal-off-banner{font-size:10px;padding:3px 8px;display:flex;flex-wrap:wrap;gap:4px;background:rgba(248,113,113,.07);border-bottom:1px solid rgba(248,113,113,.12)}
.cal-off-pill{display:flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600}
.off-day-overlay{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 4px,rgba(248,113,113,.08) 4px,rgba(248,113,113,.08) 8px);pointer-events:none;border-radius:4px}
/* AM/PM TIME HINT */
.bh-time-fmt{font-size:10px;color:var(--text-muted);min-width:52px;font-weight:600;display:inline-block;margin-left:4px}
/* ACCOUNT CREDITS */
.credit-balance-card{background:linear-gradient(135deg,#6b21ea22,#ff400012);border:1px solid var(--purple-border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.credit-balance-amt{font-family:Exo 2,sans-serif;font-size:22px;font-weight:800;color:var(--purple-light)}
.credit-balance-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.credit-hist-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.credit-hist-row:last-child{border-bottom:none}
.credit-pos{color:var(--success-light);font-weight:700}
.credit-neg{color:var(--danger-light);font-weight:700}
.dpay-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.dpay-tile-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}
.dpay-tile-val{font-family:Exo 2,sans-serif;font-size:18px;font-weight:800;color:var(--text);line-height:1.2}

/* Media Library */
.media-grid-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:14px}
.media-tile{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s;position:relative}
.media-tile:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(107,33,234,.1)}
.media-thumb{height:120px;display:flex;align-items:center;justify-content:center;background:var(--main-bg);overflow:hidden;position:relative}
.media-thumb img{width:100%;height:100%;object-fit:cover}
.media-thumb-icon{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--main-text-muted)}
.media-thumb-ext{font-family:Exo 2,sans-serif;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff}
.media-tile-info{padding:8px 10px}
.media-tile-name{font-size:12px;font-weight:600;color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.media-tile-meta{font-size:10px;color:var(--main-text-muted);display:flex;justify-content:space-between}
.media-list-table{width:100%;border-collapse:collapse;margin-top:14px;background:var(--main-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--main-border)}
.media-list-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);background:var(--main-bg);border-bottom:1px solid var(--main-border)}
.media-list-table td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--main-border);color:var(--main-text)}
.media-list-table tr:last-child td{border-bottom:none}
.media-list-table tr:hover{background:var(--main-card-hover)}
.media-list-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:800;color:#fff;text-transform:uppercase}
.media-empty{text-align:center;padding:48px 20px;color:var(--main-text-muted)}
.media-empty svg{margin:0 auto 12px;display:block;opacity:.3}
.media-drop-zone{border:2px dashed var(--purple-border);border-radius:var(--radius-lg);padding:32px 20px;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.media-drop-zone:hover,.media-drop-zone.dragover{background:rgba(107,33,234,.04);border-color:var(--purple)}
.media-drop-zone svg{margin:0 auto 10px;display:block;color:var(--purple-light)}
.media-progress-wrap{margin-top:14px;background:var(--main-bg);border-radius:var(--radius);overflow:hidden;height:6px}
.media-progress-bar{height:100%;background:var(--orange);width:0%;transition:width .2s}
.media-crumb{display:flex;align-items:center;gap:10px;margin:14px 0 4px}
.media-crumb-label{font-size:13px;font-weight:700;color:var(--main-text)}
.media-folder-row{cursor:pointer}
.media-folder-ico{background:var(--purple) !important}
.media-folder-tile .media-thumb{background:var(--main-bg)}
.media-folder-thumb{color:var(--purple-light)}
.media-tile[draggable="true"]{cursor:grab}
.media-tile[draggable="true"]:active{cursor:grabbing}
.media-list-table tr[draggable="true"]{cursor:grab}
.media-drop-hot{background:rgba(107,33,234,.10) !important;box-shadow:inset 0 0 0 2px var(--purple)}
.media-folder-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 4px}
.media-folder-bar-hint{font-size:11px;color:var(--main-text-muted);margin:0 0 2px}
.media-folder-pill{font-size:12px;font-weight:600;color:var(--main-text);background:var(--main-card);border:1px solid var(--main-border);border-radius:999px;padding:5px 12px;cursor:pointer;transition:background .12s,border-color .12s}
.media-folder-pill:hover{background:var(--main-card-hover)}
.media-folder-pill.is-active{border-color:var(--purple);color:var(--purple-light)}
.media-folder-pill.is-home{display:inline-flex;align-items:center;gap:5px;background:rgba(107,33,234,.10);border-color:var(--purple);color:var(--purple-light)}
.media-folder-pill.is-home:hover{background:rgba(107,33,234,.16)}
.media-folder-pill.is-home svg{width:13px;height:13px}
/* DRILL-DOWN TABLE */
.drill-table{width:100%;border-collapse:collapse;font-size:12px}
.drill-table th{text-align:left;padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border)}
.drill-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.drill-table tr:last-child td{border-bottom:none}
/* MY WEEK REDESIGN */
.week-sched-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.week-sched-day{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center}
.week-sched-day.is-today{border-color:var(--purple);background:rgba(107,33,234,.08)}
.week-sched-day-name{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;letter-spacing:.05em}
.week-sched-day-num{font-size:18px;font-weight:800;font-family:Exo 2,sans-serif;line-height:1;margin-bottom:6px}
.week-sched-status{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;margin-bottom:3px;display:inline-block}
.sched-on{background:#34d39920;color:var(--success-light)}
.sched-off{background:#f8717120;color:var(--danger-light)}
.sched-custom{background:#fbbf2420;color:var(--warning-light)}
.week-sched-hours{font-size:10px;color:var(--text-muted);line-height:1.4}

/* MULTI-COLUMN DAY VIEW */
.cal-mc-col{flex:1;min-width:180px;border-left:1px solid var(--main-border);display:flex;flex-direction:column}
/* === CALENDAR DRAG === */
.timed-ev[draggable="true"]{cursor:grab}
.timed-ev[draggable="true"]:active{cursor:grabbing}
.timed-ev[data-cal-drag="1"]{cursor:grab}
.timed-ev[data-cal-drag="1"]:active{cursor:grabbing}
.timed-ev.cal-dragging{opacity:.4}
.cal-drop-target{position:absolute;left:3px;right:3px;border-radius:6px;pointer-events:none;z-index:5;transition:top .05s ease}
.cal-drop-target.ok{background:rgba(52,211,153,.20);border:2px dashed var(--success);box-shadow:0 0 0 2px rgba(52,211,153,.15)}
.cal-drop-target.bad{background:rgba(248,113,113,.20);border:2px dashed var(--danger);box-shadow:0 0 0 2px rgba(248,113,113,.15)}
.cal-drop-target-label{position:absolute;top:4px;left:8px;font-size:11px;font-weight:700;color:var(--main-text);background:var(--main-card);padding:2px 6px;border-radius:4px;box-shadow:var(--shadow-sm)}
.cal-drop-confirm{position:fixed;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;z-index:10000;min-width:280px;max-width:340px}
.cal-drop-confirm-title{font-size:13px;font-weight:700;color:var(--main-text);margin:0 0 8px}
.cal-drop-confirm-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--main-text-muted);margin-bottom:4px}
.cal-drop-confirm-row strong{color:var(--main-text)}
.cal-drop-confirm-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
.cal-ev[draggable="true"]{cursor:grab}
.cal-ev[draggable="true"]:active{cursor:grabbing}
.cal-ev.cal-dragging{opacity:.4}
.cal-cell.cal-drop-cell-ok{background:rgba(52,211,153,.18) !important;box-shadow:inset 0 0 0 2px var(--success)}
.cal-cell.cal-drop-cell-bad{background:rgba(248,113,113,.18) !important;box-shadow:inset 0 0 0 2px var(--danger)}
.cal-drop-confirm-time-input{padding:4px 8px;border:1px solid var(--main-border);border-radius:var(--radius-sm);background:var(--main-input);color:var(--main-text);font-size:12px;font-weight:700;width:90px;text-align:right;font-family:inherit}
.cal-drop-confirm-time-input:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.cal-ctx-menu{position:fixed;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:4px;z-index:10000;min-width:160px}
.cal-ctx-menu-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:var(--main-text);cursor:pointer;border-radius:var(--radius-sm)}
.cal-ctx-menu-item:hover{background:var(--main-card-hover)}
.cal-move-picker{position:fixed;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;z-index:10001;min-width:260px}
.cal-move-picker-title{font-size:13px;font-weight:700;color:var(--main-text);margin:0 0 10px}
.cal-move-picker-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.cal-move-picker-row label{font-size:11px;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.cal-move-picker-row input{padding:8px 10px;border:1px solid var(--main-border);border-radius:var(--radius-sm);background:var(--main-input);color:var(--main-text);font-size:13px;font-family:inherit}
.cal-move-picker-row input:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.cal-move-picker-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.cal-mc-head{height:56px;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--divider);background:var(--subnav-bar);position:sticky;top:0;z-index:2;flex-shrink:0}
.cal-mc-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Exo 2,sans-serif;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.cal-mc-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--main-text)}
.cal-mc-role{font-size:10px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* MANAGE VIEW PANEL */
.cal-manage-panel{width:280px;position:fixed;top:0;right:0;height:100vh;background:var(--main-card);border-left:1px solid var(--main-border);overflow-y:auto;z-index:200;box-shadow:-4px 0 20px rgba(0,0,0,.35);display:flex;flex-direction:column;color:var(--main-text)}
.cal-manage-head{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--divider);flex-shrink:0}
.cal-manage-head-title{font-family:Exo 2,sans-serif;font-size:14px;font-weight:700}
.cal-manage-section{padding:12px 16px;border-bottom:1px solid var(--divider)}
.cal-manage-section-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.cal-staff-row{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;cursor:pointer;transition:background .1s}
.cal-staff-row:hover{background:var(--main-card-hover)}
.cal-sf-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cal-sf-name{font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-sf-role{font-size:10px;color:var(--main-text-muted);flex-shrink:0}
.cal-sf-cb{accent-color:var(--purple);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.cal-manage-panel .icon-btn-xs{color:var(--main-text-muted)}
.cal-manage-btn{padding:6px 12px;font-size:12px;font-weight:600;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text);cursor:pointer;display:flex;align-items:center;gap:5px;font-family:Lato,sans-serif;transition:all .12s;white-space:nowrap}
.cal-manage-btn:hover{background:var(--main-card-hover);border-color:var(--purple-border);color:var(--main-text)}
.cal-manage-btn.active{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple-light)}
.cal-body-outer{display:block}
.svc-ms-wrap{position:relative}
.svc-ms-display{min-height:38px;border:1px solid var(--main-input-border);border-radius:6px;padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;flex-wrap:wrap;background:var(--main-input)}
.svc-ms-chips{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:22px}
.svc-ms-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap}
.svc-ms-arrow{color:var(--text-muted);font-size:11px;flex-shrink:0;margin-left:4px}
.svc-ms-dd{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--main-card);border:1px solid var(--main-border);border-radius:6px;z-index:500;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.svc-ms-search{width:100%;border:none;border-bottom:1px solid var(--main-border);padding:8px 10px;background:transparent;color:var(--main-text);font-size:12px;outline:none;box-sizing:border-box}
.svc-ms-options{max-height:180px;overflow-y:auto}
.svc-ms-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font-size:12px;color:var(--main-text)}
.svc-ms-opt:hover{background:var(--main-bg)}
.svc-ms-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} /* unused */
/* ── Tabbed widget editor + ordered service list ─────────────────────────── */
.swg-tabs{display:flex;gap:4px;border-bottom:1px solid var(--main-border);margin-bottom:14px;padding:0 0 0 2px}
.swg-tab{padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;text-transform:none}
.swg-tab:hover{color:var(--text)}
.swg-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.swg-tab-badge{display:inline-block;background:var(--main-bg);color:var(--text-muted);font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px;margin-left:6px;min-width:14px;text-align:center}
.swg-tab.active .swg-tab-badge{background:var(--purple);color:#fff}
.swg-tab-pane{display:none}
.swg-tab-pane.active{display:flex;flex-direction:column;gap:14px}
.swg-svc-add-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.swg-svc-add-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--purple);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer}
.swg-svc-add-btn:hover{filter:brightness(1.1)}
.swg-svc-add-wrap{position:relative}
.swg-svc-add-pop{position:absolute;top:calc(100% + 4px);left:0;width:340px;max-width:calc(100vw - 32px);background:var(--main-card);color:var(--main-text);border:1px solid var(--main-border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:600;overflow:hidden;display:flex;flex-direction:column;max-height:420px}
.swg-svc-add-search{width:100%;border:none;border-bottom:1px solid var(--main-border);padding:9px 12px;background:transparent;color:var(--main-text);font-size:13px;outline:none;box-sizing:border-box;flex-shrink:0}
.swg-svc-add-search::placeholder{color:#8a7fb0}
.swg-svc-add-list{overflow-y:auto;flex:1;min-height:60px}
.swg-svc-add-cathdr{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f4f1fb;font-size:11px;font-weight:700;color:var(--main-text);text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:1;border-bottom:1px solid var(--main-border)}
.swg-svc-add-catbtn{font-size:11px;font-weight:600;color:var(--purple);background:none;border:none;cursor:pointer;text-transform:none;letter-spacing:0;padding:0}
.swg-svc-add-catbtn:hover{text-decoration:underline}
.swg-svc-add-row{display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;font-size:13px;color:var(--main-text);border-bottom:1px solid rgba(0,0,0,.04)}
.swg-svc-add-row:hover{background:#f7f4fc}
.swg-svc-add-row input[type=checkbox]{margin:0;flex-shrink:0;cursor:pointer}
.swg-svc-add-row .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.swg-svc-add-empty{padding:20px 14px;text-align:center;font-size:12px;color:var(--main-text-muted)}
.swg-svc-add-foot{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:#f4f1fb;border-top:1px solid var(--main-border);flex-shrink:0;font-size:12px}
.swg-svc-add-foot .ct{color:var(--main-text);font-weight:600}
.swg-svc-add-foot .acts{display:flex;gap:6px}
.swg-svc-add-foot button{font-size:12px;font-weight:600;padding:5px 12px;border-radius:5px;border:none;cursor:pointer}
.swg-svc-add-foot .cancel{background:transparent;color:var(--main-text-muted)}
.swg-svc-add-foot .ok{background:var(--purple);color:#fff}
.swg-svc-add-foot .ok:disabled{opacity:.45;cursor:not-allowed}
.swg-svc-list{display:flex;flex-direction:column;gap:6px;background:#f4f1fb;border-radius:8px;padding:8px;border:1px solid var(--main-border);min-height:280px;color:var(--main-text)}
.swg-svc-list-empty{padding:28px 14px;text-align:center;font-size:12px;color:var(--main-text-muted);font-style:italic}
.swg-svc-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--main-border);border-radius:6px;color:var(--main-text);transition:box-shadow .15s,opacity .15s}
.swg-svc-row[draggable=true]{cursor:grab}
.swg-svc-row.is-drag{opacity:.4}
.swg-svc-row.drop-above{border-top:2px solid var(--purple)}
.swg-svc-row.drop-below{border-bottom:2px solid var(--purple)}
.swg-svc-handle{color:#8a7fb0;font-size:14px;line-height:1;cursor:grab;user-select:none;padding:0 2px}
.swg-svc-row .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.swg-svc-name{flex:1;font-size:13px;font-weight:600;color:var(--main-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swg-svc-cat{font-size:10px;font-weight:700;color:var(--main-text-muted);background:#f4f1fb;border:1px solid var(--main-border);padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;white-space:nowrap}
.swg-svc-rm{background:transparent;border:none;color:#8a7fb0;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1}
.swg-svc-rm:hover{background:rgba(248,113,113,.12);color:var(--danger-light)}
.cal-appt-count{font-size:10px;font-weight:600;color:var(--orange);margin-top:1px}
.tpl-list{display:flex;flex-direction:column;gap:8px}
.tpl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--main-border,rgba(107,33,234,.12));border-radius:8px;cursor:pointer;transition:border-color .15s}
.tpl-row:hover{border-color:var(--purple)}
.tpl-row.active{border-color:var(--purple);background:#faf8ff}
.tpl-row-name{flex:1;font-size:14px;font-weight:600;color:var(--main-text)}
.tpl-row-sub{font-size:12px;color:var(--main-text-muted);margin-top:2px}
.tpl-editor{max-width:700px}
.tpl-toolbar{display:flex;gap:4px;padding:6px 8px;background:var(--main-bg,#f2f0f8);border:1px solid var(--main-border,rgba(107,33,234,.12));border-bottom:none;border-radius:6px 6px 0 0;flex-wrap:wrap;align-items:center}
.tpl-tb-btn{background:none;border:1px solid transparent;border-radius:4px;padding:3px 7px;font-size:12px;cursor:pointer;color:var(--main-text);font-family:inherit;transition:background .15s}
.tpl-tb-btn:hover{background:#6b21ea22;border-color:var(--purple);color:var(--purple)}
.tpl-tb-sep{width:1px;height:18px;background:var(--main-border,rgba(107,33,234,.12));margin:0 4px}
.tpl-body{min-height:220px;padding:12px;border:1px solid var(--main-border);border-radius:0 0 6px 6px;background:#fff;font-size:14px;line-height:1.6;color:var(--main-text);outline:none;font-family:Arial,sans-serif}
.tpl-preview{background:#fff;border:1px solid var(--main-border);border-radius:6px;padding:20px;font-size:14px;line-height:1.6;color:var(--main-text);margin-top:16px;max-width:700px}
.tpl-preview-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);margin-bottom:8px}
.var-picker{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}
.var-chip{background:#6b21ea15;color:var(--purple);border:1px solid #6b21ea33;border-radius:4px;padding:3px 9px;font-size:11px;cursor:pointer;font-family:monospace;transition:background .15s}
.var-chip:hover{background:#6b21ea30}
.settings-tab-bar{display:flex;gap:2px;margin-bottom:20px;border-bottom:2px solid var(--main-border,rgba(107,33,234,.12))}
.stab{background:none;border:none;border-bottom:3px solid transparent;padding:10px 18px;color:var(--main-text-muted);font-size:13px;font-weight:600;cursor:pointer;margin-bottom:-2px;transition:color .15s,border-color .15s;font-family:inherit;letter-spacing:.01em}
.stab:hover{color:var(--main-text)}
.stab.active{color:var(--purple);border-bottom-color:var(--purple)}
.email-wizard{max-width:560px}
.dns-rec-row{background:var(--main-bg,#f2f0f8);border:1px solid var(--main-border,rgba(107,33,234,.12));border-radius:6px;padding:12px 14px;margin-bottom:10px}
.dns-rec-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);margin-bottom:3px}
.dns-rec-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dns-rec-type{font-size:10px;font-weight:700;background:#6b21ea22;color:var(--purple);border-radius:3px;padding:1px 6px;letter-spacing:.04em}
.dns-rec-val{font-family:monospace;font-size:12px;color:var(--main-text);word-break:break-all;line-height:1.5;flex:1}
.dns-rec-copy{flex-shrink:0;background:none;border:1px solid var(--main-border);border-radius:4px;padding:3px 10px;font-size:11px;cursor:pointer;color:var(--main-text-muted);transition:background .15s;font-family:inherit}
.dns-rec-copy:hover{background:#6b21ea22;color:var(--purple);border-color:var(--purple)}
.domain-verified-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(52,211,153,.12);color:#059669;border:1px solid rgba(52,211,153,.3);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:600;margin-bottom:16px}

/* CONTACT IMPORT */
.import-upload-zone{border:2px dashed var(--border);border-radius:var(--radius);
  padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.import-upload-zone:hover,.import-upload-zone.drag-over{border-color:var(--purple-border);background:var(--purple-dim)}
.import-map-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px}
.import-map-table th{text-align:left;padding:6px 10px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border)}
.import-map-table td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.import-map-sel{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;
  padding:5px 8px;font-size:12px;color:var(--text);outline:none;width:100%}
.import-map-sel:focus{border-color:var(--purple-border)}
.import-stat-card{flex:1;border-radius:10px;padding:14px;text-align:center}
.import-stat-num{font-size:26px;font-weight:700;line-height:1}
.import-stat-label{font-size:12px;margin-top:4px}
.import-dupe-list{max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:8px}
.import-dupe-row{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--border)}
.import-dupe-row:last-child{border-bottom:none}


/* ============================================================
   Help Center
   ============================================================ */
.help-root {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  height: 100%;
  min-height: 500px;
  background: var(--main-bg);
  color: var(--main-text);
}
@media (max-width: 768px) {
  .help-root { grid-template-columns: 1fr; }
  .help-sidebar { border-right: none; border-bottom: 1px solid var(--main-border); padding-bottom: 16px; }
}

.help-sidebar {
  padding: 16px 12px 16px 0;
  border-right: 1px solid var(--main-border);
  overflow-y: auto;
}
.help-sidebar h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--main-text-muted);
  margin: 4px 0 8px 12px;
  font-weight: 600;
}
.help-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--main-text);
  user-select: none;
  transition: background 0.12s;
}
.help-cat:hover { background: var(--main-card-hover); }
.help-cat.active { background: var(--purple-dim); color: var(--purple); font-weight: 600; }
.help-cat .help-cat-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.help-cat .help-cat-admin { margin-left: auto; font-size: 9px; text-transform: uppercase; opacity: 0.7; letter-spacing: 0.5px; font-weight: 700; color: var(--purple); }
.help-support-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--main-border); }
.help-support-block .help-support-hint { font-size: 11px; color: var(--main-text-muted); margin: 0 12px 8px; line-height: 1.4; }
.help-support-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--purple);
  background: var(--purple-dim);
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.help-support-btn:hover { background: var(--purple); color: #ffffff; }
.help-support-btn .help-support-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }

.help-content { padding: 16px 4px 32px; overflow-y: auto; }

.help-search-wrap { position: relative; margin-bottom: 20px; }
.help-search {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--main-input-border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--main-input);
  color: var(--main-text);
  outline: none;
  font-family: inherit;
}
.help-search:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-dim); }
.help-search::placeholder { color: var(--main-text-muted); }
.help-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.6;
  font-size: 14px;
}

.help-header { margin-bottom: 16px; }
.help-header h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--main-text); }
.help-header .help-header-sub { color: var(--main-text-muted); font-size: 14px; }

.help-article-grid { display: grid; gap: 10px; }
.help-article-card {
  padding: 16px 18px;
  border: 1px solid var(--main-border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--main-card);
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.help-article-card:hover {
  border-color: var(--purple);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px var(--purple-dim);
  background: var(--main-card-hover);
}
.help-article-card .help-article-title { font-weight: 600; font-size: 15px; color: var(--main-text); margin-bottom: 4px; }
.help-article-card .help-article-summary { color: var(--main-text-muted); font-size: 13px; line-height: 1.5; }
.help-article-card .help-article-meta { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 11px; color: var(--main-text-muted); }
.help-article-card .help-pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--purple-dim);
  color: var(--purple);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.help-empty { padding: 40px 20px; text-align: center; color: var(--main-text-muted); }
.help-loading { padding: 40px 20px; text-align: center; color: var(--main-text-muted); }

.help-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--purple);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
  margin-bottom: 16px;
  font-family: inherit;
}
.help-back:hover { text-decoration: underline; }

.help-reader { max-width: 760px; }
.help-reader h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: var(--main-text); }
.help-reader .help-reader-meta { color: var(--main-text-muted); font-size: 12px; margin-bottom: 24px; display: flex; gap: 10px; align-items: center; }
.help-reader .help-p { font-size: 15px; line-height: 1.65; color: var(--main-text); margin: 12px 0; }
.help-reader .help-h2 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; color: var(--main-text); }
.help-reader .help-ul, .help-reader .help-ol, .help-reader .help-steps { margin: 12px 0; padding-left: 24px; }
.help-reader .help-ul li, .help-reader .help-ol li { font-size: 14px; line-height: 1.6; color: var(--main-text); margin: 6px 0; }
.help-reader .help-steps { list-style: none; padding-left: 0; counter-reset: step; }
.help-reader .help-steps li {
  counter-increment: step;
  position: relative;
  padding: 12px 14px 12px 48px;
  margin: 8px 0;
  background: var(--main-card);
  border: 1px solid var(--main-border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--main-text);
}
.help-reader .help-steps li::before {
  content: counter(step);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: var(--purple);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-reader .help-tip, .help-reader .help-warn {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.55;
}
.help-reader .help-tip { background: rgba(16, 185, 129, 0.08); border-left: 3px solid #10b981; color: var(--main-text); }
.help-reader .help-warn { background: var(--orange-dim); border-left: 3px solid var(--orange); color: var(--main-text); }
.help-reader .help-callout-label { font-weight: 700; flex-shrink: 0; }
.help-reader .help-tip .help-callout-label { color: #10b981; }
.help-reader .help-warn .help-callout-label { color: var(--orange); }
.help-reader .help-table-wrap { margin: 18px 0; overflow-x: auto; border: 1px solid var(--main-border); border-radius: 10px; }
.help-reader .help-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.help-reader .help-table th { text-align: center; font-weight: 700; color: var(--main-text); background: var(--main-card); padding: 10px 12px; border-bottom: 1px solid var(--main-border); white-space: nowrap; }
.help-reader .help-table th:first-child { text-align: left; }
.help-reader .help-table td { padding: 9px 12px; border-bottom: 1px solid var(--main-border); text-align: center; color: var(--main-text); }
.help-reader .help-table tr:last-child td { border-bottom: none; }
.help-reader .help-td-label { text-align: left; font-weight: 600; }
.help-reader .help-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.help-reader .help-cell-yes { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.help-reader .help-cell-no { color: var(--main-text-muted); }
.help-reader .help-cell-view { background: rgba(55, 138, 221, 0.15); color: #378add; }

.help-search-hit { background: rgba(255, 200, 0, 0.35); border-radius: 2px; padding: 0 2px; color: var(--main-text); font-weight: 600; }

/* Inline info-icon tooltip (used on coupon usage rules). Bubble uses --main-text
   as background and --main-card as text so it inverts correctly in both themes. */
.help-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 5px; border-radius: var(--radius-full); border: 1px solid var(--main-border); background: var(--main-bg); color: var(--main-text-muted); font-size: 9px; font-weight: 700; font-style: normal; line-height: 1; cursor: help; vertical-align: middle; user-select: none; flex-shrink: 0; }
.help-tip:hover, .help-tip:focus { border-color: var(--purple); color: var(--purple); outline: none; }
.help-tip .help-tip__pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 210px; padding: 8px 10px; border-radius: var(--radius); background: var(--main-text); color: var(--main-card); font-size: 11px; font-weight: 500; font-style: normal; line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 2300; pointer-events: none; box-shadow: var(--shadow-lg); white-space: normal; }
.help-tip .help-tip__pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--main-text); }
.help-tip:hover .help-tip__pop, .help-tip:focus .help-tip__pop, .help-tip:focus-within .help-tip__pop { opacity: 1; visibility: visible; }

/* ===================== INVOICES (Payments > Invoices) ===================== */
.ta-r{text-align:right}
/* List */
.inv-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.inv-chips{display:flex;gap:6px;flex-wrap:wrap}
.inv-chip{padding:5px 12px;border-radius:var(--radius-full);border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text-muted);font-size:12px;cursor:pointer}
.inv-chip.active{background:var(--purple);border-color:var(--purple);color:#fff}
.inv-search{max-width:220px}
.inv-empty,.inv-lines-empty{padding:28px;text-align:center;color:var(--main-text-muted);font-size:13px}
.inv-table{width:100%;border-collapse:collapse;font-size:13px}
.inv-table th{text-align:left;padding:8px 10px;color:var(--main-text-muted);font-weight:600;border-bottom:1px solid var(--main-border);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.inv-table td{padding:9px 10px;border-bottom:1px solid var(--divider);vertical-align:middle}
.inv-num{font-weight:600;color:var(--main-text)}
.inv-actions{display:flex;gap:8px;justify-content:flex-end;white-space:nowrap}
.inv-danger-link{color:var(--danger)}
/* Status badges */
.inv-badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-full);font-size:11px;font-weight:600}
.inv-badge-draft{background:var(--main-input);color:var(--main-text-muted)}
.inv-badge-info{background:var(--info-dim);color:var(--info-text)}
.inv-badge-warn{background:var(--orange-dim);color:var(--orange)}
.inv-badge-paid{background:var(--success-dim);color:var(--success-text)}
.inv-badge-void{background:var(--danger-dim);color:var(--danger-text)}
/* Builder overlay */
#inv-overlay{position:fixed;inset:0;background:var(--main-bg);z-index:160;display:flex;flex-direction:column;overflow:hidden}
.inv-ov-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--main-border);background:var(--main-card)}
.inv-ov-title{font-size:16px;font-weight:700;color:var(--main-text)}
.inv-ov-body{flex:1;overflow:auto;padding:20px}
.inv-ov-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;max-width:1100px;margin:0 auto;align-items:start}
.inv-ov-main,.inv-ov-side{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.inv-ov-foot{padding:14px 20px;border-top:1px solid var(--main-border);background:var(--main-card);display:flex;gap:10px}
.inv-sec-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--main-text-muted);margin-bottom:8px}
.inv-locked-banner{background:var(--orange-dim);color:var(--orange);padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:16px;max-width:1100px;margin-left:auto;margin-right:auto}
.mt-14{margin-top:14px}
.inv-field-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inv-toggle{font-size:13px;color:var(--main-text);display:flex;align-items:center;gap:5px;cursor:pointer}
.inv-adhoc{display:flex;flex-direction:column;gap:8px}
.inv-lbl{display:block;font-size:12px;color:var(--main-text-muted);margin-bottom:4px}
.inv-ta{width:100%;min-height:54px;resize:vertical}
/* Line editor */
.inv-add-wrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--divider)}
.inv-add-grid{display:grid;grid-template-columns:1fr 70px 100px 128px;gap:8px;align-items:start;margin-bottom:8px}
.inv-add-head{margin-bottom:2px}
.inv-add-head>div{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--main-text-muted)}
.inv-add-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.inv-add-grid .ss-inp{width:100%}
.inv-add-btn{width:100%;padding:9px 11px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;min-height:38px}
.inv-qty-in{width:64px}
.inv-price-in{width:96px}
.inv-line-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--divider)}
.inv-line-desc-cell{flex:1;min-width:0}
.inv-line-name{font-size:13px;color:var(--main-text)}
.inv-line-desc{width:100%}
.inv-tax-cell{font-size:12px;color:var(--main-text-muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
.inv-line-total{width:82px;text-align:right;font-size:13px;color:var(--main-text);font-weight:600}
.inv-line-rm{border:none;background:none;color:var(--main-text-muted);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.inv-line-rm:hover{color:var(--danger)}
/* Totals */
.inv-totals{margin-top:16px;padding-top:12px;border-top:1px solid var(--main-border)}
.inv-tot-row{display:flex;justify-content:space-between;font-size:13px;color:var(--main-text-muted);padding:3px 0}
.inv-tot-grand{font-size:15px;font-weight:700;color:var(--main-text);border-top:1px solid var(--divider);margin-top:5px;padding-top:8px}
/* Mark-paid modal */
.inv-modal-overlay{position:fixed;inset:0;background:var(--overlay);z-index:1600;display:flex;align-items:center;justify-content:center;padding:20px}
.inv-modal-card{width:100%;max-width:360px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:20px}
.inv-modal-title{font-size:15px;font-weight:700;color:var(--main-text)}
.inv-modal-sub{font-size:13px;color:var(--main-text-muted);margin:4px 0 14px}
.inv-modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
@media (max-width:720px){.inv-ov-grid{grid-template-columns:1fr}}


/* Quiet hours card (Notifications tab, P0-3) */
.notif-quiet-card{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--main-border);border-radius:10px;background:var(--main-bg);margin-bottom:16px}
.notif-quiet-controls{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.notif-quiet-times{font-size:12px;color:var(--main-text-muted);display:inline-flex;align-items:center;gap:6px}
.notif-quiet-times input[type="time"]{border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text);border-radius:6px;padding:4px 6px;font-size:12px}
@media (max-width:720px){.notif-quiet-card{flex-direction:column}.notif-quiet-controls{justify-content:flex-start}}

/* Single-row multi-stage reminder (stage pills + shared channel chips) */
.notif-controls.reminder-group{grid-template-columns:auto 95px 95px}
.notif-stage-pills{display:inline-flex;gap:6px;align-items:center;margin-right:4px}
.notif-stage-pill{padding:4px 10px;border:1px solid var(--main-border);border-radius:var(--radius-full);font-size:11px;font-weight:600;color:var(--main-text-muted);cursor:pointer;background:var(--main-bg);transition:all 0.15s;white-space:nowrap}
.notif-stage-pill.on{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
@media (max-width:720px){.notif-controls.reminder-group{grid-template-columns:auto;justify-items:start}}

/* SOAP rich section editor: prose + inline checkbox lines (Settings > Clinical
   templates and the note editor). Checkbox state round-trips in the section
   text as leading ☐ / ☑ markers; no separate storage. */
.soap-rt{width:100%;min-height:90px;max-height:340px;overflow-y:auto;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;font-family:Lato,sans-serif;font-size:13px;line-height:1.7;outline:none;box-sizing:border-box;white-space:pre-wrap}
.soap-rt:focus{border-color:var(--purple)}
.soap-rt-line{min-height:1.2em}
.soap-cb{cursor:pointer;user-select:none;display:inline-block;margin-right:3px;font-size:15px;line-height:1;color:var(--purple)}
.soap-rt[contenteditable="false"]{opacity:.85}

/* New-build banner. Shown when /version.json reports a build id different from
   the one stamped into this page, i.e. a deploy landed while the tab stayed
   open. Bottom-LEFT on purpose: #toast-container owns bottom-right. */
.build-update-bar{position:fixed;bottom:20px;left:20px;z-index:9999;display:flex;align-items:center;gap:12px;
  max-width:340px;padding:12px 14px;background:var(--bg-card);border:1px solid var(--purple-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);animation:bubIn .3s ease}
.build-update-bar .bub-txt{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.build-update-bar .bub-txt strong{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--text)}
.build-update-bar .bub-txt span{font-size:12px;color:var(--text-muted)}
.build-update-bar .bub-x{background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:13px;
  line-height:1;padding:4px;flex-shrink:0;font-family:Lato,sans-serif}
.build-update-bar .bub-x:hover{color:var(--text)}
@keyframes bubIn{from{transform:translateY(120%);opacity:0}to{transform:translateY(0);opacity:1}}
@media (max-width:720px){.build-update-bar{left:12px;right:12px;bottom:12px;max-width:none}}

/* Settings > Mobile: per-staff header band + labeled dropdown grid (2026-08-04) */
.mob-user{border-bottom:1px solid var(--main-border)}
.mob-user:last-child{border-bottom:none}
.mob-user-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--main-bg);border-radius:8px;padding:9px 14px;margin-top:14px}
.mob-acc-toggle{display:inline-block;vertical-align:middle}
/* bh-toggle's off track is a translucent white (built for dark surfaces);
   on this light band it vanishes. Solid track, off state only. */
.mob-acc-toggle:not(.on){background:var(--main-border)}
.mob-perm-grid{display:flex;flex-wrap:wrap;gap:12px 20px;padding:12px 6px 16px}
.mob-perm-cell{display:flex;flex-direction:column;gap:5px;width:132px}
.mob-perm-lbl{font-size:11px;color:var(--main-text-muted);line-height:1.3;min-height:28px;display:flex;align-items:flex-end}
.mob-perm-sel{width:100%;font-size:12px;background:var(--main-card);color:var(--main-text);
  border:1px solid var(--main-border);border-radius:6px;padding:4px 6px}
.mob-perm-sel:disabled{opacity:.4;background:var(--main-bg)}
.mob-row-off .mob-perm-grid{opacity:.35;pointer-events:none}
.mob-phi-note{margin-top:16px;padding:12px 16px;border:1px solid var(--warning-dim);
  border-left:3px solid var(--warning);border-radius:8px;background:var(--warning-dim);
  font-size:12px;color:var(--warning-text);line-height:1.6}

/* ── Conversations Stage 5: snooze + bulk actions (2026-08-04) ───────────── */
/* Bulk selection bar. Sits between the toolbar and the list, only present when
   something is selected, so the normal inbox is unchanged. */
.conv-bulk-bar{display:flex;align-items:center;gap:8px;padding:10px 24px;background:var(--purple-dim);border-bottom:1px solid var(--main-border);flex-shrink:0;flex-wrap:wrap}
.conv-bulk-count{font-size:12px;font-weight:700;color:var(--purple);margin-right:4px}
.conv-bulk-btn{padding:5px 12px;border-radius:var(--radius-full);background:var(--main-card);color:var(--main-text);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--main-border);transition:all .15s}
.conv-bulk-btn:hover{background:var(--main-card-hover);border-color:var(--purple)}
.conv-bulk-btn.ghost{background:none;color:var(--main-text-muted)}
.conv-bulk-btn.ghost:hover{color:var(--main-text)}

/* Row checkbox. Its own click target, separate from the row's open-thread
   handler, which is why the label carries a stopPropagation of its own. */
.conv-list-check{display:flex;align-items:center;flex-shrink:0;cursor:pointer;padding-right:2px}
.conv-list-check input{cursor:pointer;accent-color:var(--purple);width:14px;height:14px}
.conv-list-item.picked{background:var(--purple-dim)}

/* Snooze controls live in the row meta line. Hidden until the row is hovered or
   focused within, so three extra buttons per row do not add permanent noise to
   a list staff scan all day. Keyboard users get them via :focus-within. */
.conv-snooze-group{display:inline-flex;gap:4px;opacity:0;transition:opacity .12s}
.conv-list-item:hover .conv-snooze-group,
.conv-list-item:focus-within .conv-snooze-group{opacity:1}
.conv-snooze-btn{padding:1px 7px;border-radius:var(--radius-sm);background:var(--main-bg);color:var(--main-text-muted);font-size:10px;font-weight:700;cursor:pointer;border:1px solid var(--main-border);line-height:1.6}
.conv-snooze-btn:hover{background:var(--main-card-hover);color:var(--purple);border-color:var(--purple)}
.conv-list-snoozed{font-size:10px;font-weight:700;color:var(--purple);background:var(--purple-dim);padding:1px 7px;border-radius:var(--radius-full)}

/* ── Conversations Stage 5: saved replies (2026-08-04) ───────────────────── */
.conv-snippet-btn{padding:6px 10px;background:none;border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text-muted);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.conv-snippet-btn:hover{background:var(--main-card-hover);color:var(--main-text)}
/* Anchored to the composer actions row, which is position:relative in context. */
.conv-snippet-menu{position:absolute;bottom:100%;left:0;margin-bottom:6px;min-width:280px;max-width:380px;max-height:300px;overflow-y:auto;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:1200;padding:4px}
.conv-snippet-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:7px 10px;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left}
.conv-snippet-item:hover{background:var(--main-card-hover)}
.conv-snippet-title{font-size:12px;font-weight:700;color:var(--main-text)}
.conv-snippet-preview{font-size:11px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.conv-snippet-empty{padding:10px;font-size:12px;color:var(--main-text-muted)}
.conv-snippet-manage{display:block;width:100%;margin-top:4px;padding:7px 10px;background:none;border:none;border-top:1px solid var(--main-border);color:var(--purple);font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.conv-snippet-manage:hover{background:var(--main-card-hover)}

/* Manage modal */
.conv-snippet-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1700;padding:20px}
.conv-snippet-modal{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:82vh;overflow-y:auto;padding:22px}
.conv-snippet-modal-title{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;color:var(--main-text)}
.conv-snippet-modal-sub{font-size:12px;color:var(--main-text-muted);margin:4px 0 16px;line-height:1.5}
.conv-snippet-list{display:flex;flex-direction:column;gap:12px}
.conv-snippet-row,.conv-snippet-add{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-bg)}
.conv-snippet-add{margin-top:16px;border-style:dashed}
.conv-snippet-add-label{font-size:12px;font-weight:700;color:var(--main-text)}
.conv-snippet-input,.conv-snippet-textarea,.conv-snippet-select{width:100%;padding:7px 10px;border:1px solid var(--main-input-border);border-radius:var(--radius-sm);background:var(--main-input);color:var(--main-text);font-size:12px;font-family:inherit;box-sizing:border-box}
.conv-snippet-textarea{resize:vertical;line-height:1.5}
.conv-snippet-input:focus,.conv-snippet-textarea:focus,.conv-snippet-select:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-snippet-row-actions{display:flex;align-items:center;gap:8px}
.conv-snippet-row-actions .conv-snippet-select{width:auto;flex:1}
.conv-snippet-foot{display:flex;justify-content:flex-end;margin-top:16px}
/* The saved-replies menu is position:absolute and anchors to this row. Without
   an explicit positioned ancestor it would escape to the viewport. */
.conv-composer-actions{position:relative}

/* Staff notification routing grid.
   Width is deliberately NOT capped. Capping it to 760px did fix the travel
   distance from a type label to its checkboxes, but it left this card skinny
   while the software-notifications table and the patient rows above it run
   full width, and the staggered edges read worse than the long rows did.
   Row tracking is handled by the hover band instead, which works at any width.
   The spine ties type rows to their open group header and is what separates an
   expanded group from the next collapsed one. */
.snr-row{border-left:3px solid transparent}
.snr-row:hover{background:var(--main-card-hover)}
.snr-trow{border-left:3px solid var(--main-border)}
.snr-grow-open{border-left:3px solid var(--purple)}


/* ---------------------------------------------------------------------------
   STAFF > SCHEDULING
   Week roster (staff rows x day columns) plus a per-person month view.

   READS AS A ROSTER, NOT A TABLE: each staff/day cell holds one BLOCK PER
   RESOLVED WINDOW, tinted with that staff member's own colour, so a row scans
   as one person and an hours-off carve-out splits into two blocks by itself.
   A day with no windows is left EMPTY, so the eye lands on who is working.
   An earlier cut printed a time range in every cell, which read as a
   spreadsheet.

   PALETTE: content-area chrome, so the --main-* ramp (--main-card /
   --main-border / --main-text), NOT --bg-*. --bg is #14102e, the dark SIDEBAR
   colour; using it painted near-black blocks across a light panel.
   --------------------------------------------------------------------------- */
.sched-bar{display:flex;align-items:center;gap:var(--space-10);margin-bottom:var(--space-12);flex-wrap:wrap}
.sched-nav{display:flex;align-items:center;gap:var(--space-6)}
.sched-range{min-width:170px;text-align:center;font-weight:var(--fw-600);color:var(--main-text);font-size:var(--fs-13)}
.sched-spacer{flex:1}

.sched-seg{display:inline-flex;border:1px solid var(--main-border);border-radius:var(--radius-sm);overflow:hidden}
.sched-seg-btn{border:none;background:var(--main-card);color:var(--main-text-muted);
  padding:5px 12px;font-size:var(--fs-12);cursor:pointer}
.sched-seg-btn:hover{background:var(--main-card-hover)}
.sched-seg-btn.active{background:var(--purple);color:#fff}

.sched-legend{display:flex;align-items:center;gap:var(--space-14);flex-wrap:wrap;
  margin-top:var(--space-10);font-size:var(--fs-12);color:var(--main-text-muted)}
.sched-legend span{display:inline-flex;align-items:center;gap:var(--space-6)}
.sched-legend-note{font-style:italic}
.sched-dot{width:14px;height:10px;border-radius:3px;display:inline-block}
.sched-dot-sched{background:var(--purple)}
.sched-dot-mod{background:var(--purple);outline:2px dashed var(--main-text-muted);outline-offset:1px}
.sched-dot-offchip{background:var(--main-card-hover);border:1px solid var(--main-border)}

/* Roster scrolls horizontally rather than crushing columns. */
.sched-roster-wrap{overflow-x:auto;border:1px solid var(--main-border);
  border-radius:var(--radius-lg);background:var(--main-card)}
.sched-roster{display:grid;grid-template-columns:190px repeat(7,minmax(120px,1fr));min-width:940px}

.sched-r-head{padding:8px 6px;text-align:center;font-size:var(--fs-12);
  color:var(--main-text-muted);border-bottom:1px solid var(--main-border);background:var(--main-card-hover)}
.sched-r-head-today{color:var(--purple);font-weight:var(--fw-600)}
.sched-r-dow{font-weight:var(--fw-600)}
.sched-r-date{font-size:var(--fs-11)}

/* Left rail: who, and how many hours they are scheduled this week. */
.sched-r-name{padding:10px 12px;border-bottom:1px solid var(--main-border);
  border-right:1px solid var(--main-border);background:var(--main-card);
  display:flex;flex-direction:column;justify-content:center;gap:2px}
.sched-r-nm{font-size:var(--fs-13);color:var(--main-text);font-weight:var(--fw-600);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-r-sub{font-size:var(--fs-11);color:var(--main-text-muted)}
.sched-r-total{font-weight:var(--fw-600);color:var(--main-text);background:var(--main-card-hover)}

.sched-c{min-height:64px;padding:5px;border-bottom:1px solid var(--main-border);
  border-right:1px solid var(--main-border);background:var(--main-card);
  display:flex;flex-direction:column;justify-content:center;gap:3px;cursor:pointer}
.sched-c:hover{background:var(--main-card-hover)}
.sched-c:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
/* Shaded column, not a top border. The inset border drew a heavy bar on EVERY
   cell's top edge, so a seven-row roster stacked seven bars down the column. */
.sched-c-today{background:var(--purple-dim)}
.sched-c-today:hover{background:var(--purple-dim)}
.sched-c-total{background:var(--main-card-hover);font-size:var(--fs-12);
  color:var(--main-text);font-weight:var(--fw-600);text-align:center;
  align-items:center;cursor:default;min-height:0;padding:8px 5px}
.sched-c-total:hover{background:var(--main-card-hover)}

/* A day is a list of time ranges. Times are a fixed column so they stay aligned
   down the row; the label takes the slack; the calendar glyph is pinned right so
   it can never push the times out of alignment. */
.sched-line{display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:var(--space-6);font-size:var(--fs-11);line-height:var(--lh-13);
  padding:2px 4px;border-radius:var(--radius-sm);background:var(--purple);color:#fff}
.sched-line-t{white-space:nowrap;font-variant-numeric:tabular-nums}
.sched-line-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
/* Colour by what the block IS. Four variants, scannable down a dense week.
   The two break tones are DERIVED from --charcoal with color-mix rather than
   being new hex values, so there is one grey in the system and these are
   provably two shades of it. Appointments keep the brand purple because that is
   the block a manager is looking for; Scheduled takes --info so working-but-not-
   bookable is distinguishable at a glance rather than being a second purple. */
/* Read-only cell: no pointer, no hover affordance. Below manager the roster is
   a thing you look at. */
.sched-c-ro{cursor:default}
.sched-line-appt{background:var(--purple)}
.sched-line-sched{background:var(--info)}
.sched-line-bpaid{background:color-mix(in srgb, var(--charcoal) 42%, white)}
.sched-line-bunpaid{background:color-mix(in srgb, var(--charcoal) 72%, white)}
/* A GAP is absence of work, so it reads as empty rather than as a block. */
.sched-line-gap{background:none;color:var(--main-text-muted)}
/* A DAY OFF that was taken off a working day. Not a gap -- something happened
   here, and on a roster that is the cell worth spotting. Outlined rather than
   filled: it is an absence, so it should not weigh as much as a shift. */
.sched-line-off{background:var(--warning-light);color:var(--warning-text);
  border:1px dashed var(--warning);display:flex;gap:var(--space-6);
  align-items:baseline;flex-wrap:wrap}
.sched-off-was{opacity:.85;text-decoration:line-through}

/* Month view reuses the same cell and blocks, taller, with a date number. */
.sched-month{display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid var(--main-border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--main-card)}
.sched-c-month{min-height:78px;justify-content:flex-start}
.sched-c-num{font-size:var(--fs-12);font-weight:var(--fw-600);color:var(--main-text)}
.sched-c-empty{background:var(--main-bg);cursor:default}
.sched-c-empty:hover{background:var(--main-bg)}

.sched-modal-row{display:flex;gap:var(--space-14);flex-wrap:wrap;margin-bottom:var(--space-12)}
.sched-radio{display:inline-flex;align-items:center;gap:var(--space-6);font-size:var(--fs-13);
  color:var(--text);cursor:pointer}
.sched-modal-times{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);margin-bottom:var(--space-6)}

.sched-err{margin-top:var(--space-10);padding:var(--space-10);border-radius:var(--radius-sm);
  background:var(--danger-dim);border:1px solid var(--danger);color:var(--danger-text);
  font-size:var(--fs-13)}
.sched-conflicts{margin:var(--space-6) 0 0;padding-left:var(--space-16)}
.sched-conflicts li{margin-top:2px}

/* Class .inp was used throughout Staff > Scheduling but NEVER DEFINED, so every
   time input and select in the tab rendered with raw browser defaults. That is
   why the kind selector did not match the time fields beside it: nothing was
   styling either of them, and a <select> and an <input type=time> disagree by
   default about height, padding and font.

   Same situation, and same fix, as .msp-input above (see the note there). The
   metrics are copied from it deliberately rather than invented, so the two
   blocks stay one look.

   An explicit height on BOTH is what actually lines them up: padding alone
   leaves the select a pixel or two short, because it does not inherit the
   input's line-box the same way. */
.inp{padding:9px 11px;background:var(--main-input);border:1px solid var(--main-input-border);
  border-radius:var(--radius);color:var(--main-text);font-size:var(--fs-14);
  box-sizing:border-box;font-family:inherit;line-height:1.4;height:38px}
.inp:focus{outline:none;border-color:var(--purple)}
select.inp{cursor:pointer}
textarea.inp{height:auto;resize:vertical}

/* Schedule-hours editor: a day as a list of time ranges. */
/* ONE LINE per range: x, start, to, end, what-it-is. It used to wrap, and once
   the kind selector replaced the checkbox the row no longer fit, so every range
   rendered as two stacked lines and the selector read as belonging to the range
   below it. Wrapping is kept only where the row genuinely cannot fit. */
.sched-seg-row{display:flex;align-items:center;gap:var(--space-8);
  padding:var(--space-6) 0;flex-wrap:nowrap}
/* Fixed, and not allowed to shrink: a time input that flexes down clips the
   AM/PM and the stepper. */
.sched-seg-row .inp{width:130px;flex:0 0 auto}
.sched-seg-dash{font-size:var(--fs-12);color:var(--text-muted)}
/* The bookable tick. Whole label is the hit target, and it does not shrink:
   this is the control that decides whether the range reaches the widget. */
/* Remove-this-range. Leads the row rather than trailing it, so the destructive
   control is never adjacent to Save. Sized to a comfortable hit target even
   though the glyph is small. */
.sched-seg-x{flex:0 0 auto;width:26px;height:26px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;
  font-size:var(--fs-18);color:var(--danger-text)}
.sched-seg-x:hover{background:var(--danger-dim)}
/* What the range IS. One control, four options, because it is one decision.
   Takes the width left over rather than reserving a fixed 170px, which is what
   pushed the row onto a second line. min-width:0 lets it actually shrink; a
   flex item defaults to min-width:auto and refuses to go below its longest
   option ("Working, not bookable"). */
/* Selector, NOT `.sched-seg-kind` alone: the element also carries class `inp`,
   so `.sched-seg-row .inp` above (two classes) outranks a single-class rule and
   would pin this to 130px and flex:none, putting the row right back onto two
   lines. Same specificity, declared later, so this wins. */
.sched-seg-row .sched-seg-kind{flex:1 1 150px;min-width:0;max-width:220px;width:auto;cursor:pointer}
/* Only where the row truly cannot fit, e.g. the modal on a phone. */
@media (max-width:640px){
  .sched-seg-row{flex-wrap:wrap}
  .sched-seg-row .sched-seg-kind{flex:1 1 100%}
}
/* Time nobody is scheduled. Derived from the gap between two ranges, never
   stored: since breaks became rows, a hole means genuinely not present. */
/* Clear-all sits with Add, not with Save: it edits the list, it does not
   write. Pushed right so it is not the button next to the cursor. */
.sched-seg-clearall{margin-left:var(--space-8);color:var(--danger-text)}
.sched-seg-gap{padding:var(--space-4) 0 var(--space-4) 34px;
  font-size:var(--fs-12);color:var(--text-muted);font-style:italic}

/* Provider availability editor (Staff > Scheduling). Replaces Team > Schedule. */
.sched-av-btn{margin-top:4px;background:none;border:none;padding:0;cursor:pointer;
  font-size:var(--fs-11);color:var(--purple);text-align:left;text-decoration:underline}
.sched-av-btn:hover{color:var(--purple-hover)}
/* FIXED COLUMNS, not flex-wrap. Wrapping let the two lunch pickers fall to a
   second line and align to the row's left edge instead of under the Lunch
   checkbox, so every enabled day read as staggered. */
/* FRACTIONAL tracks, not fixed px. input[type=time] carries a large intrinsic
   min-content width (the browser's spinner + clock affordance), which beat the
   fixed 112px tracks and pushed the lunch columns outside the modal. minmax(0,
   1fr) cannot overflow its container, and min-width:0 on the inputs lets them
   actually shrink to their track. */
.sched-av-row{display:grid;
  grid-template-columns:20px 92px minmax(0,1fr) minmax(0,1fr) 84px minmax(0,1fr) minmax(0,1fr);
  align-items:center;column-gap:var(--space-8);
  padding:var(--space-6) 0;border-bottom:1px solid var(--main-border)}
.sched-av-off{opacity:.5}
.sched-av-day{font-size:var(--fs-13);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-av-row .inp{width:100%;min-width:0}
/* Set Default Schedule: one labelled range list per weekday, using the same
   .sched-seg-row control as the day editor. Blocks are separated by a rule
   rather than a card each, so seven of them stack without the modal reading as
   seven separate settings. */
.sched-av-day-block{padding:var(--space-10) 0;border-top:1px solid var(--main-border)}
.sched-av-day-block:first-of-type{border-top:none}
.sched-av-day-head{font-size:var(--fs-12);font-weight:700;color:var(--main-text-muted);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-6)}
.sched-av-day-list .sched-seg-row{padding:var(--space-2) 0}
/* Add sits tight under the ranges it extends, not floating a row away. */
.sched-av-day-list .btn-sm{margin-top:var(--space-4)}
.sched-av-lw{white-space:nowrap}

/* Each field is its own grid so label / input / hint sit on shared rows across
   all three columns. Without this a label that wraps to two lines pushes its
   own input down and the row stops lining up. */
.sched-av-extras{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-10);margin-top:var(--space-14);align-items:start}
.sched-av-extras>div{display:grid;grid-template-rows:auto auto auto;
  row-gap:var(--space-4);height:100%}
.sched-av-extras .lbl{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:760px){
  /* Two rows per day, but ALIGNED: the lunch controls sit under the start/end
     columns rather than jumping to the left edge. */
  .sched-av-row{grid-template-columns:20px 92px 1fr 1fr;row-gap:var(--space-6)}
  .sched-av-lw{grid-column:2/3}
  .sched-av-extras{grid-template-columns:1fr}
  .sched-av-extras .lbl{white-space:normal}
}

/* Staff > Workplace > Time Clock. */
.tc-bar{display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap;
  padding-bottom:var(--space-12);border-bottom:1px solid var(--main-border)}
.tc-status{display:flex;align-items:center;gap:var(--space-8)}
.tc-dot{width:9px;height:9px;border-radius:50%;display:inline-block;
  background:var(--main-border)}
.tc-dot-on{background:var(--success)}
.tc-status-t{font-size:var(--fs-13);color:var(--main-text);font-weight:var(--fw-600)}
.tc-head{font-size:var(--fs-12);font-weight:var(--fw-600);color:var(--main-text);
  margin:var(--space-12) 0 var(--space-8)}
.tc-row{display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap;
  padding:var(--space-6) 0;border-bottom:1px solid var(--main-border);font-size:var(--fs-13)}
.tc-who{min-width:150px;color:var(--main-text);font-weight:var(--fw-600);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-times{min-width:150px;color:var(--main-text);font-variant-numeric:tabular-nums}
.tc-dur{min-width:70px;color:var(--main-text-muted);font-variant-numeric:tabular-nums}
.tc-flags{display:flex;gap:var(--space-6);flex-wrap:wrap;margin-left:auto}
.tc-flag{font-size:var(--fs-11);color:var(--main-text-muted);
  border:1px solid var(--main-border);border-radius:var(--radius-sm);padding:1px 7px;white-space:nowrap}
.tc-flag-on{color:var(--success-text);border-color:var(--success);background:var(--success-light)}
.tc-flag-auto{color:var(--warning-text);border-color:var(--warning);background:var(--warning-light)}

/* Staff > Timesheets. Payroll review before export.
   FULL WIDTH, but the columns are FIXED and the slack goes into ONE of them.
   The washed-out look came from seven fluid columns stretching across a 2000px
   monitor, which put a name and its hours a foot apart. Capping the table fixed
   that and left an odd empty gutter instead, so: everything carrying a figure
   gets a fixed width and stays grouped, and the flags column absorbs whatever
   is left over. */
.ts-wrap{width:100%}
.ts-bar{display:flex;align-items:flex-end;gap:var(--space-10);flex-wrap:wrap;
  margin-bottom:var(--space-14)}
.ts-field{display:flex;flex-direction:column;gap:3px}
.ts-field .lbl{font-size:var(--fs-11);color:var(--main-text-muted);margin:0}
.ts-field .inp,.ts-field .filter-sel{min-width:150px}
.ts-spacer{flex:1}

.ts-warn{padding:var(--space-10) var(--space-12);border-radius:var(--radius-sm);
  margin-bottom:var(--space-12);
  background:var(--warning-light);border:1px solid var(--warning);color:var(--warning-text);
  font-size:var(--fs-13);font-weight:var(--fw-600)}

/* The hours are the number people came for, so they are the biggest thing on
   the card; the name is the label above it, not the other way round. */
.ts-totals{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:var(--space-10);margin-bottom:var(--space-16)}
.ts-tot{background:var(--main-card);border:1px solid var(--main-border);
  border-radius:var(--radius-lg);padding:var(--space-12) var(--space-14)}
.ts-tot-n{font-size:var(--fs-11);color:var(--main-text-muted);text-transform:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.ts-tot-h{font-size:20px;line-height:1.15;font-weight:var(--fw-700);color:var(--main-text);
  font-variant-numeric:tabular-nums}
.ts-tot-sub{font-size:var(--fs-11);color:var(--main-text-muted);font-variant-numeric:tabular-nums}
.ts-tot-s{font-size:var(--fs-11);color:var(--main-text-muted);margin-top:5px}
.ts-tot-flag{color:var(--warning-text);font-weight:var(--fw-600)}

/* Rows sit in a card so the table reads as one object rather than text floating
   on the panel. */
.ts-table{background:var(--main-card);border:1px solid var(--main-border);
  border-radius:var(--radius-lg);overflow:hidden}
.ts-row{display:grid;grid-template-columns:200px 110px 150px 95px 95px 95px minmax(130px,1fr) 76px;
  gap:var(--space-10);align-items:center;padding:9px var(--space-14);
  border-bottom:1px solid var(--main-border);font-size:var(--fs-13)}
.ts-row:last-child{border-bottom:none}
.ts-row:not(.ts-head):hover{background:var(--main-card-hover)}
.ts-head{background:var(--main-card-hover);font-size:var(--fs-11);
  color:var(--main-text-muted);font-weight:var(--fw-600);letter-spacing:.02em}
.ts-c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--main-text)}
/* The person is the anchor of the row; times and hours are figures. */
.ts-c0{font-weight:var(--fw-600)}
.ts-c1,.ts-c2,.ts-c3,.ts-c4{font-variant-numeric:tabular-nums;color:var(--main-text-muted)}
.ts-c5{font-variant-numeric:tabular-nums;font-weight:var(--fw-600)}
.ts-c6{display:flex;gap:var(--space-6);flex-wrap:wrap;white-space:normal}
.ts-c7{text-align:right}
.ts-open .ts-c4{color:var(--danger-text);font-weight:var(--fw-600)}
/* Worked but never rostered. Reads as something to look at, not as an empty
   cell, because it is the case a manager most wants to catch. */
.ts-unsched{color:var(--warning-text);font-style:italic}

/* Variance against the roster. The sign carries the meaning; colour only
   reinforces it. */
.ts-tot-var{font-size:var(--fs-12);font-weight:var(--fw-600);color:var(--main-text-muted);margin-top:2px}
.ts-tot-var.over{color:var(--warning-text)}
.ts-tot-var.under{color:var(--main-text-muted)}

/* STAFF > WORKPLACE. The employee's own view: clock, hours, next shifts,
   requests. Not a second dashboard -- nothing here is about a patient. */
/* The clock slot is a bare container, NOT a card: the hero draws its own
   border, and wrapping it in one produced a visible box inside a box. The
   punch list underneath gets the card treatment instead. */
.wp-clock{margin-bottom:var(--space-14)}
.tc-list{background:var(--main-card);border:1px solid var(--main-border);
  border-radius:var(--radius);padding:var(--space-14) var(--space-18);
  margin-top:var(--space-10)}

/* The time clock HERO. Top of the tab, touched twice a day by everyone, so the
   state has to read from across the room: the whole band goes green while you
   are on the clock. The elapsed time is the biggest number on the screen
   because it is the question being asked. */
.tc-hero{display:flex;align-items:center;gap:var(--space-16);flex-wrap:wrap;
  border-radius:var(--radius);padding:var(--space-16) var(--space-18);
  border:1px solid var(--main-border);background:var(--main-card-hover)}
.tc-hero-on{background:var(--success-dim);border-color:var(--success)}
.tc-hero-l{flex:1;min-width:200px}
.tc-hero-big{font-size:28px;line-height:1.1;font-weight:var(--fw-700);
  color:var(--main-text);font-variant-numeric:tabular-nums}
.tc-hero-on .tc-hero-big{color:var(--success-text)}
/* "Not on the clock" is a sentence, not a number: same slot, smaller, so the
   headline does not shout a non-value. */
.tc-hero-off{font-size:var(--fs-16);font-weight:var(--fw-600);color:var(--main-text-muted)}
.tc-hero-u{font-size:var(--fs-13);font-weight:var(--fw-400);color:var(--main-text-muted)}
.tc-hero-on .tc-hero-u{color:var(--success-text)}
.tc-hero-sub{font-size:var(--fs-12);color:var(--main-text-muted);margin-top:3px}
.tc-hero-on .tc-hero-sub{color:var(--success-text)}
.tc-hero-btn{font-size:var(--fs-16);font-weight:var(--fw-600);border:none;
  padding:14px 30px;border-radius:var(--radius);color:#fff;cursor:pointer;
  min-width:150px;transition:background .12s ease}
.tc-hero-in{background:var(--purple)}
.tc-hero-in:hover{background:var(--purple-hover)}
.tc-hero-out{background:var(--danger)}
.tc-hero-out:hover{background:var(--danger-text)}
.tc-hero-btn:disabled{opacity:.6;cursor:default}
.wp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-14);margin-bottom:var(--space-14)}
.wp-card{background:var(--main-card);border:1px solid var(--main-border);
  border-radius:var(--radius);padding:var(--space-16) var(--space-18)}
.wp-card-full{margin-bottom:var(--space-14)}
.wp-card-head{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:var(--space-8)}
.wp-card-t{font-size:var(--fs-13);font-weight:var(--fw-600);color:var(--main-text);
  margin-bottom:var(--space-8)}
.wp-sub{font-size:var(--fs-11);color:var(--main-text-muted);margin-bottom:var(--space-6)}
.wp-big-row{display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap}
.wp-big{font-size:30px;line-height:1.1;font-weight:var(--fw-700);color:var(--main-text);
  font-variant-numeric:tabular-nums}
.wp-big-u{font-size:var(--fs-13);font-weight:var(--fw-400);color:var(--main-text-muted)}
/* Overtime is a different KIND of hour, so it sits beside the total as a chip
   rather than under it as a footnote about the same number. */
.wp-otchip{font-size:var(--fs-11);font-weight:var(--fw-600);padding:3px 10px;
  border-radius:var(--radius-sm);background:var(--warning-light);color:var(--warning-text)}

/* The week as bars. Turns a total into a shape you can read at a glance:
   which day was long, which day you were off. */
.wp-bars{display:flex;align-items:flex-end;gap:6px;height:86px;margin:var(--space-12) 0 var(--space-8);max-width:520px}
.wp-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.wp-bar{width:100%;background:var(--purple);border-radius:3px;cursor:help}
.wp-bar-ot{background:var(--warning)}
.wp-bar-none{background:var(--main-border);cursor:default}
.wp-bar-l{font-size:var(--fs-11);color:var(--main-text-muted);margin-top:4px}

/* Request + decide modal.
   `.lbl` has no base rule anywhere and `.inp` sets no width, so a bare
   label+input pair renders INLINE, side by side, staggered by whatever each
   control happens to be wide. Both are fixed here rather than by sprinkling
   inline styles through the markup. */
.wp-form .lbl{display:block;margin:0 0 4px;font-size:var(--fs-11);
  font-weight:var(--fw-600);color:var(--main-text-muted)}
.wp-form .inp{display:block;width:100%}
/* Vertical rhythm between fields, without a margin on the first one. */
.wp-form > *+*{margin-top:var(--space-12)}

/* Two fields side by side on a wide modal, stacked on a narrow one, so a date
   range never wraps into a single cramped column. */
.wp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12)}
.wp-form-row > *+*{margin-top:0}
@media (max-width:520px){ .wp-form-row{grid-template-columns:1fr;gap:var(--space-10)} }

/* Your own earnings. Sits under the hours it was derived from, quieter than
   the hours themselves: this is a staff portal, not a payslip. */
.wp-pay{margin-top:var(--space-8);font-size:var(--fs-18);font-weight:var(--fw-700);
  color:var(--success-text);font-variant-numeric:tabular-nums}
.wp-pay-u{font-size:var(--fs-12);font-weight:var(--fw-400);color:var(--main-text-muted)}

.wp-link{background:none;border:none;padding:0;font-size:var(--fs-11);
  color:var(--purple);cursor:pointer;font-weight:var(--fw-600)}
.wp-link:hover{text-decoration:underline}
.wp-punches{margin-top:var(--space-8)}
.wp-note{font-size:var(--fs-11);color:var(--main-text-muted);margin-top:3px}
.wp-ot{color:var(--warning-text);font-weight:var(--fw-600)}
/* Tips. Same weight as the other callouts, in the positive colour, and kept a
   note rather than promoted to .wp-pay so it never reads as the wage total. */
.wp-tip{color:var(--success-text);font-weight:var(--fw-600);cursor:help}
.wp-warn{color:var(--danger-text);font-weight:var(--fw-600)}
.wp-foot{margin-top:var(--space-10);padding-top:var(--space-8);
  border-top:1px solid var(--main-border);font-size:var(--fs-11);color:var(--main-text-muted);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-10);flex-wrap:wrap}
.wp-ok{color:var(--success-text);font-weight:var(--fw-600)}

.wp-row{display:flex;justify-content:space-between;gap:var(--space-10);
  padding:7px 0;border-top:1px solid var(--main-border);font-size:var(--fs-13)}
.wp-row-d{color:var(--main-text)}
.wp-row-v{color:var(--main-text-muted);font-variant-numeric:tabular-nums}

.wp-actions{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-bottom:var(--space-10)}
.wp-req{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--space-10);padding:var(--space-10) 0;border-top:1px solid var(--main-border);
  flex-wrap:wrap}
.wp-req-main{flex:1;min-width:200px}
.wp-req-l{font-size:var(--fs-13);color:var(--main-text)}
.wp-req-s{font-size:var(--fs-11);color:var(--main-text-muted);margin-top:2px}
.wp-req-r{display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap}
.wp-chip{font-size:var(--fs-11);font-weight:var(--fw-600);padding:2px 9px;
  border-radius:var(--radius-sm);white-space:nowrap}
.wp-chip-wait{background:var(--warning-light);color:var(--warning-text)}
.wp-chip-ok{background:var(--success-dim);color:var(--success-text)}
.wp-chip-no{background:var(--danger-dim);color:var(--danger-text)}
.wp-chip-muted{background:var(--main-card-hover);color:var(--main-text-muted)}
/* The inbox leads the tab: it is the only thing here other people wait on. */
.wp-inbox{border-color:var(--purple-border)}

/* Pay period approval. Sits above the totals because whether these numbers are
   still moving matters before the numbers themselves. */
.ts-lockbar{display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap;
  padding:var(--space-10) var(--space-12);border-radius:var(--radius-sm);
  border:1px solid var(--main-border);background:var(--main-card);
  margin-bottom:var(--space-12)}
.ts-locked{border-color:var(--success);background:var(--success-light)}
.ts-lock-t{font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--success-text)}
.ts-lock-d{font-size:var(--fs-12);color:var(--main-text-muted);flex:1;min-width:220px}
.ts-lock-note{font-size:var(--fs-12);color:var(--main-text);font-style:italic;
  width:100%;order:5}
.ts-lock-hist{font-size:var(--fs-11);color:var(--main-text-muted);width:100%;order:6;
  padding-top:var(--space-6);border-top:1px solid var(--main-border)}

/* The unpaid-break deduction, on the card and on the row. Muted rather than
   alarming: it is a correct figure, not a problem, but it has to be visible or
   the hours simply look wrong. */
.ts-tot-ded{margin-top:2px;font-style:italic}
.ts-tot-ot{margin-top:2px;color:var(--warning-text);font-weight:var(--fw-600)}
.ts-c5-sub{font-size:var(--fs-11);font-weight:var(--fw-400);color:var(--main-text-muted);
  white-space:normal;font-style:italic;cursor:help}

/* Labour cost. Admin only, and never rendered at all for anyone else. */
.ts-tot-cost{margin-top:6px;font-size:var(--fs-14);font-weight:var(--fw-700);
  color:var(--main-text);font-variant-numeric:tabular-nums}
.ts-tot-norate{font-size:var(--fs-12);font-weight:var(--fw-600);color:var(--warning-text);cursor:help}

/* Tips. Deliberately quieter than the cost above it and set apart from it,
   because it is money the clinic owes somebody but is NOT part of what the
   hours cost, and the two must not read as one figure. */
.ts-tot-tip{margin-top:3px;color:var(--success-light);font-weight:var(--fw-600);cursor:help}

.ts-tag{font-size:var(--fs-11);color:var(--main-text-muted);border:1px solid var(--main-border);
  border-radius:var(--radius-sm);padding:1px 7px;white-space:nowrap;cursor:help}
.ts-tag-auto{color:var(--warning-text);border-color:var(--warning);background:var(--warning-light)}
.ts-tag-open{color:var(--danger-text);border-color:var(--danger);background:var(--danger-dim)}

@media (max-width:900px){
  .ts-row{grid-template-columns:1fr 1fr;row-gap:3px;padding:10px var(--space-12)}
  .ts-head{display:none}
  .ts-c7{grid-column:2;text-align:right}
}


/* Set wage modal (admin only). */
.wg-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-10);margin-bottom:var(--space-8)}
.wg-field{display:flex;flex-direction:column;gap:3px}
.wg-field .lbl{margin:0}
.wg-head{font-size:var(--fs-12);font-weight:var(--fw-600);color:var(--text);
  margin:var(--space-16) 0 var(--space-8);padding-top:var(--space-12);
  border-top:1px solid var(--main-border)}
.wg-row{display:grid;grid-template-columns:1.2fr .9fr .6fr 1.3fr;gap:var(--space-8);
  align-items:center;padding:var(--space-6) 0;border-bottom:1px solid var(--main-border);
  font-size:var(--fs-13)}
.wg-date{color:var(--text);font-variant-numeric:tabular-nums}
.wg-amt{color:var(--text);font-weight:var(--fw-600);font-variant-numeric:tabular-nums}
.wg-tag{font-size:var(--fs-11);color:var(--main-text-muted)}
.wg-by{font-size:var(--fs-11);color:var(--main-text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Blog admin editor (Agency Tools, litbiz only) ─────────────────────── */
.blog-toolbar{display:flex;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-6);background:var(--subnav-bar);border:1px solid var(--main-border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0}
.blog-toolbar button{border:1px solid var(--main-input-border);background:var(--main-card);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-10);font-size:var(--fs-13);cursor:pointer;color:var(--main-text)}
.blog-toolbar button:hover{background:var(--main-card-hover)}
.blog-body-editor{min-height:340px;max-height:60vh;overflow-y:auto;background:var(--main-card);border:1px solid var(--main-input-border);border-radius:0 0 var(--radius) var(--radius);padding:var(--space-16);font-size:var(--fs-14);line-height:var(--lh-17);color:var(--main-text)}
.blog-body-editor:focus{outline:none;box-shadow:var(--focus-ring)}
.blog-body-editor img{max-width:100%;border-radius:var(--radius-sm)}
.blog-body-editor h2{font-size:var(--fs-20);margin:var(--space-16) 0 var(--space-8)}
.blog-body-editor h3{font-size:var(--fs-16);margin:var(--space-12) 0 var(--space-6)}
.blog-body-editor p{margin-bottom:var(--space-10)}
.blog-body-editor ul,.blog-body-editor ol{padding-left:var(--space-24);margin-bottom:var(--space-10)}

/* ── LitBiz SOP work queue (165-litbiz-sop.js) ──────────────────────────────
   Replaces the iframed sop-tracker.html. Tokens only, no raw hex: the status
   colours reuse the same success/warning/danger tokens the rest of the app
   uses, so the queue reads correctly in both themes. */


.ls-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
@media(max-width:900px){.ls-stats{grid-template-columns:repeat(2,1fr)}}
.ls-stat{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm)}
.ls-stat-val{font-family:'Exo 2',sans-serif;font-size:26px;font-weight:800;color:var(--main-text);line-height:1}
.ls-stat-val.good{color:var(--success)}
.ls-stat-val.warn{color:var(--warning)}
.ls-stat-val.bad{color:var(--danger)}
.ls-stat-lbl{font-size:11px;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:6px;font-weight:600}

.ls-week{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);height:640px;overflow-y:auto}
.ls-week .ls-empty{border:none;background:none;height:100%;display:flex;flex-direction:column;justify-content:center}
.ls-day-hdr{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--main-bg);border-bottom:1px solid var(--main-border);font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.ls-day-hdr.overdue{color:var(--danger)}
.ls-day-hdr.delayed{color:var(--warning)}
.ls-day-n{margin-left:auto;font-size:11px;font-weight:700;color:var(--main-text-muted)}
.ls-rowact{flex-shrink:0;white-space:nowrap;align-self:center;width:88px;text-align:right}

.ls-task.counted{align-items:center;position:relative;padding-top:17px}
.ls-task.counted .ls-check{margin-top:0}
.ls-count-bar{position:absolute;top:2px;left:0;right:0;height:5px;background:var(--main-bg);overflow:hidden}
.ls-count-fill{height:100%;background:var(--purple);transition:width .2s}
.ls-count-fill.complete{background:var(--success)}
.ls-sched{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.ls-sched-lbl{font-size:12px;font-weight:600;color:var(--main-text)}
.ls-sched-input{width:auto}
.ls-plus1{background:var(--purple);border:1px solid var(--purple);border-radius:var(--radius);color:#fff;font-family:Lato,sans-serif;font-size:12px;font-weight:700;padding:6px 11px;cursor:pointer;transition:opacity .15s}
.ls-plus1:hover{opacity:.85}
.ls-plus1:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.ls-task{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-bottom:1px solid var(--divider)}
.ls-task:last-child{border-bottom:none}
.ls-task.done .ls-task-label{text-decoration:line-through;color:var(--main-text-muted)}
.ls-task.late{background:var(--danger-dim)}
.ls-task-main{flex:1;min-width:0}
.ls-task-label{font-size:14px;font-weight:600;color:var(--main-text);line-height:1.4}
.ls-task-why{font-size:12px;color:var(--main-text-muted);line-height:1.45;margin-top:3px}
.ls-task-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}

.ls-check{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;cursor:pointer}
.ls-check input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.ls-check-box{width:20px;height:20px;border:2px solid var(--main-input-border);border-radius:var(--radius-sm);background:var(--main-input);transition:all .15s}
.ls-check input:checked + .ls-check-box{background:var(--success);border-color:var(--success)}
.ls-check input:checked + .ls-check-box::after{content:'';position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ls-check input:focus-visible + .ls-check-box{box-shadow:var(--focus-ring)}

.ls-chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);background:var(--main-bg);border:1px solid var(--main-border);color:var(--main-text-muted);white-space:nowrap}
.ls-chip-client{background:var(--purple-soft);border-color:var(--purple-border);color:var(--purple)}
.ls-chip-plan{background:var(--purple);border-color:var(--purple);color:#fff}
.ls-chip-late{background:var(--danger-dim);border-color:var(--danger);color:var(--danger-text)}
.ls-chip-warn{background:var(--warning-dim);border-color:var(--warning);color:var(--warning-text)}
.ls-k-contractual{background:var(--info-dim);color:var(--info-text)}
.ls-k-needle{background:var(--success-dim);color:var(--success-text)}
.ls-k-hygiene{background:var(--main-bg);color:var(--main-text-muted)}
.ls-k-dep{background:var(--warning-dim);color:var(--warning-text)}

.ls-prog{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ls-prog-input{width:56px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:5px 7px;font-family:Lato,sans-serif;font-size:13px;text-align:center;outline:none}
.ls-prog-of{font-size:12px;color:var(--main-text-muted);white-space:nowrap}

.ls-empty{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:44px 24px;text-align:center}
.ls-empty-title{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;color:var(--main-text);margin-bottom:6px}
.ls-empty-sub{font-size:13px;color:var(--main-text-muted);margin-bottom:16px;max-width:460px;margin-left:auto;margin-right:auto;line-height:1.5}

.ls-section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ls-section-title{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.09em;flex:1}
.ls-sub-hdr{font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.08em;margin:14px 0 8px}
.ls-sub{font-size:13px;color:var(--main-text-muted);padding:8px 0}
.ls-note{font-size:12px;color:var(--main-text-muted);line-height:1.5;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);padding:10px 12px;margin:10px 0}

.ls-client{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);margin-bottom:10px;overflow:hidden}
.ls-client-hdr{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer}
.ls-client-hdr:hover{background:var(--main-card-hover)}
.ls-client-name{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;color:var(--main-text);flex-shrink:0}
.ls-client-badges{display:flex;flex-wrap:wrap;gap:5px;flex:1}
.ls-client-arrow{color:var(--main-text-muted);font-size:11px}
.ls-client-body{padding:0 15px 15px;border-top:1px solid var(--main-border)}
.ls-client-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}

.ls-delivs{display:grid;gap:10px}
.ls-deliv-top{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.ls-deliv-label{font-size:13px;color:var(--main-text);flex:1}
.ls-deliv-count{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:800}
.ls-deliv-count.good{color:var(--success-text)}
.ls-deliv-count.warn{color:var(--warning-text)}
.ls-deliv-count.bad{color:var(--danger-text)}
.ls-bar{height:5px;background:var(--main-bg);border-radius:var(--radius-full);overflow:hidden}
.ls-bar-fill{height:100%;border-radius:var(--radius-full);transition:width .2s}
.ls-bar-fill.good{background:var(--success)}
.ls-bar-fill.warn{background:var(--warning)}
.ls-bar-fill.bad{background:var(--danger)}

.ls-carve{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--main-border);border-radius:var(--radius);margin-bottom:8px}
.ls-carve.unnoticed{border-color:var(--danger);background:var(--danger-dim)}
.ls-carve-main{flex:1;min-width:0}
.ls-carve-item{font-size:13px;font-weight:600;color:var(--main-text)}
.ls-carve-meta{font-size:11px;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

.ls-cat-tpl{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);margin-bottom:12px;padding:14px 16px}
.ls-cat-hdr{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ls-cat-name{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;color:var(--main-text)}
.ls-cat-desc{font-size:12px;color:var(--main-text-muted);line-height:1.5;margin-bottom:10px}
.ls-cat-cad{font-size:11px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:.08em;margin:12px 0 6px}
.ls-cat-task{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--divider)}
.ls-cat-task:last-child{border-bottom:none}
.ls-cat-task-main{flex:1;min-width:0}

.ls-modal-backdrop{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1800;padding:20px}
.ls-modal{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.ls-modal-hdr{padding:15px 18px;border-bottom:1px solid var(--main-border);font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;color:var(--main-text)}
.ls-modal-body{padding:16px 18px;overflow-y:auto}
.ls-modal-foot{padding:13px 18px;border-top:1px solid var(--main-border);display:flex;justify-content:flex-end;gap:8px}
.ls-lbl{display:block;font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.07em;margin:12px 0 5px}
.ls-input{width:100%;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:9px 11px;font-family:Lato,sans-serif;font-size:14px;outline:none}
.ls-input:focus{border-color:var(--purple);box-shadow:var(--focus-ring)}
.ls-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ls-cbgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.ls-cbrow{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--main-text);padding:4px 0;cursor:pointer}

@media(max-width:900px){
  .ls-cbgrid,.ls-row2{grid-template-columns:1fr}
}

/* ── SOP catalog editor (modal) ─────────────────────────────────────────── */

.ls-modal-wide{max-width:1080px;height:86vh}
.ls-modal-hdr{display:flex;align-items:center;gap:10px}
.ls-x{margin-left:auto;background:none;border:none;color:var(--main-text-muted);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-sm)}
.ls-x:hover{background:var(--main-bg);color:var(--main-text)}
.ls-cat-loading{padding:40px;text-align:center;color:var(--main-text-muted)}

.ls-cat-body{display:grid;grid-template-columns:238px 1fr;flex:1;min-height:0}
.ls-cat-left{border-right:1px solid var(--main-border);display:flex;flex-direction:column;min-height:0;background:var(--main-bg)}
.ls-cat-left-hdr{padding:11px 14px;font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--main-border)}
.ls-cat-list{flex:1;overflow-y:auto;padding:6px}
.ls-cat-row{display:flex;align-items:stretch;gap:2px}
.ls-cat-row .ls-cat-item{flex:1;min-width:0;width:auto}
.ls-cat-arrows{display:flex;flex-direction:column;justify-content:center}
.ls-cat-arrow{background:none;border:none;color:var(--main-text-muted);cursor:pointer;font-size:8px;line-height:1;padding:2px 5px;border-radius:var(--radius-sm)}
.ls-cat-arrow:hover:not(:disabled){background:var(--main-card-hover);color:var(--main-text)}
.ls-cat-arrow:disabled{opacity:.25;cursor:default}
.ls-cat-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;border-radius:var(--radius);padding:8px 10px;font-family:Lato,sans-serif;font-size:13px;color:var(--main-text);cursor:pointer}
.ls-cat-item:hover{background:var(--main-card-hover)}
.ls-cat-item.active{background:var(--purple-soft);color:var(--purple);font-weight:700}
.ls-cat-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-cat-item-n{font-size:11px;font-weight:700;color:var(--main-text-muted)}
.ls-cat-item.active .ls-cat-item-n{color:var(--purple)}
.ls-cat-left-foot{display:flex;flex-direction:column;gap:5px;padding:10px;border-top:1px solid var(--main-border)}

.ls-cat-right{overflow-y:auto;padding:16px 20px;min-height:0}
.ls-cat-title-row{display:flex;align-items:center;gap:10px}
.ls-cat-title{flex:1;background:none;border:1px solid transparent;border-radius:var(--radius);color:var(--main-text);font-family:'Exo 2',sans-serif;font-size:18px;font-weight:700;padding:5px 8px;outline:none}
.ls-cat-title:hover{border-color:var(--main-border)}
.ls-cat-title:focus{border-color:var(--purple);background:var(--main-input)}
.ls-cat-desc-input{width:100%;background:none;border:1px solid transparent;border-radius:var(--radius);color:var(--main-text-muted);font-family:Lato,sans-serif;font-size:13px;padding:5px 8px;margin-top:2px;outline:none}
.ls-cat-desc-input:hover{border-color:var(--main-border)}
.ls-cat-desc-input:focus{border-color:var(--purple);background:var(--main-input);color:var(--main-text)}

.ls-cat-sec{margin-top:18px}
.ls-cat-sec-hdr{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--main-border)}
.ls-cat-sec-name{font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:.08em}
.ls-cat-sec-n{font-size:11px;font-weight:700;color:var(--main-text-muted)}
.ls-addtask{margin-left:auto;background:none;border:none;color:var(--purple);font-family:Lato,sans-serif;font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px}
.ls-addtask:hover{text-decoration:underline}
.ls-cat-none{font-size:12px;color:var(--main-text-muted);padding:9px 0;font-style:italic}
.ls-cat-task-acts{display:flex;gap:8px;flex-shrink:0;align-items:flex-start;padding-top:2px}
.ls-linkbtn{background:none;border:none;color:var(--purple);font-family:Lato,sans-serif;font-size:12px;font-weight:600;cursor:pointer;padding:2px 3px}
.ls-linkbtn:hover{text-decoration:underline}
.ls-linkbtn.danger{color:var(--danger-text)}

.ls-tform{background:var(--main-bg);border:1px solid var(--purple-border);border-radius:var(--radius);padding:12px 14px;margin:8px 0}
.ls-tform-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ls-tform-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.ls-kindhint{font-size:11px;color:var(--main-text-muted);margin-top:5px;line-height:1.45}

@media(max-width:820px){
  .ls-cat-body{grid-template-columns:1fr}
  .ls-cat-left{border-right:none;border-bottom:1px solid var(--main-border);max-height:170px}
  .ls-tform-row{grid-template-columns:1fr}
}

/* ── Agency dashboard: work queue left, tools right ─────────────────────────
   The queue is the thing you work out of all day and the tools are a set of
   links you reach for occasionally, so they get a sidebar rather than a full
   row of large cards competing with it. Services and Tiers stays full width
   underneath, since it is reference material. */
.at-dash-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:34px;align-items:start}
.at-dash-main{min-width:0}
.at-dash-side{min-width:0}

@media(max-width:1180px){
  .at-dash-grid{grid-template-columns:1fr;gap:0}
  .at-actions{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .at-actions{grid-template-columns:1fr}
}
}

/* Agency quick actions. Replaced the tool cards that linked out to the
   standalone /litbiz/*.html report builders. Stacked buttons rather than cards
   with descriptions: each is one action with an obvious name, and the sidebar
   column is a quarter of the width. */
.at-actions{display:grid;grid-template-columns:1fr;gap:12px}
.at-action{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);cursor:pointer;transition:border-color .15s,background .15s;box-shadow:var(--shadow-sm)}
.at-action:hover{border-color:var(--purple);background:var(--main-card-hover)}
.at-action:focus-visible{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.at-action-icon{font-size:17px;line-height:1;flex-shrink:0}
.at-action-name{flex:1;min-width:0}

/* ── SOPs tab in the contact drawer ─────────────────────────────────────── */
.ls-sop-loading{padding:30px 10px;text-align:center;font-size:13px;color:var(--main-text-muted)}
.ls-sop-list{margin-top:8px}
.ls-sop-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--main-border);border-radius:var(--radius);margin-bottom:7px;background:var(--main-card)}
.ls-sop-main{flex:1;min-width:0}
.ls-sop-name{font-size:13px;font-weight:600;color:var(--main-text)}
.ls-sop-meta{font-size:11px;color:var(--main-text-muted);margin-top:2px;line-height:1.45}
.ls-sop-linked{display:flex;align-items:baseline;gap:9px;padding:9px 12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card)}
.ls-sop-linked-name{font-size:13px;font-weight:600;color:var(--main-text)}
.ls-sop-start{display:flex;align-items:center;gap:7px;margin-top:6px}
.ls-sop-startlbl{font-size:11px;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.06em}
.ls-sop-startinput{background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:4px 8px;font-family:Lato,sans-serif;font-size:12px;outline:none}
.ls-sop-startinput:focus{border-color:var(--purple);box-shadow:var(--focus-ring)}
.ls-sop-none{font-size:13px;color:var(--main-text-muted);padding:14px 0}
.ls-sop-picker{border:1px solid var(--purple-border);border-radius:var(--radius);padding:11px 12px;margin:8px 0;background:var(--main-bg)}
.ls-sop-picker-foot{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}
.ls-sop-fields{margin-top:6px}
/* ============ UTILITY LAYER (June 9 2026) - Phase 1 of inline-style migration ============ */
/* Token-backed utility classes. Every value references a :root token, never raw px.
   Built from the June 9 inline-style catalog (top static declarations).
   Color utilities intentionally NOT built: color is already token-backed inline.
   Padding PAIRS and off-grid values intentionally NOT built: they surface in Phase 3 review.
   .hidden and .clickable already existed and are reused, not redefined.
   See MySpark-Inline-Style-Migration-Spec.md. */

/* Font size */
.fs-10{font-size:var(--fs-10)}.fs-11{font-size:var(--fs-11)}.fs-12{font-size:var(--fs-12)}
.fs-13{font-size:var(--fs-13)}.fs-14{font-size:var(--fs-14)}.fs-16{font-size:var(--fs-16)}
.fs-18{font-size:var(--fs-18)}.fs-20{font-size:var(--fs-20)}.fs-22{font-size:var(--fs-22)}

/* Font weight */
.fw-400{font-weight:var(--fw-400)}.fw-500{font-weight:var(--fw-500)}.fw-600{font-weight:var(--fw-600)}
.fw-700{font-weight:var(--fw-700)}.fw-800{font-weight:var(--fw-800)}

/* Line height */
.lh-10{line-height:var(--lh-10)}.lh-12{line-height:var(--lh-12)}.lh-13{line-height:var(--lh-13)}
.lh-14{line-height:var(--lh-14)}.lh-15{line-height:var(--lh-15)}.lh-16{line-height:var(--lh-16)}
.lh-17{line-height:var(--lh-17)}

/* Margin bottom */
.mb-0{margin-bottom:var(--space-0)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.mb-10{margin-bottom:var(--space-10)}
.mb-12{margin-bottom:var(--space-12)}.mb-14{margin-bottom:var(--space-14)}.mb-16{margin-bottom:var(--space-16)}
.mb-18{margin-bottom:var(--space-18)}.mb-20{margin-bottom:var(--space-20)}.mb-24{margin-bottom:var(--space-24)}

/* Margin top */
.mt-0{margin-top:var(--space-0)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mt-10{margin-top:var(--space-10)}
.mt-12{margin-top:var(--space-12)}.mt-14{margin-top:var(--space-14)}.mt-16{margin-top:var(--space-16)}

/* Gap */
.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}
.gap-8{gap:var(--space-8)}.gap-10{gap:var(--space-10)}.gap-12{gap:var(--space-12)}
.gap-14{gap:var(--space-14)}.gap-16{gap:var(--space-16)}

/* Padding (single-value only; pairs deferred to Phase 3) */
.pad-4{padding:var(--space-4)}.pad-6{padding:var(--space-6)}.pad-8{padding:var(--space-8)}
.pad-10{padding:var(--space-10)}.pad-12{padding:var(--space-12)}.pad-14{padding:var(--space-14)}
.pad-16{padding:var(--space-16)}

/* Layout primitives */
.u-flex{display:flex}.u-grid{display:grid}.u-block{display:block}
.flex-center{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}
.w-full{width:100%}

/* Text */
.text-upper{text-transform:uppercase}.text-center{text-align:center}

/* Color (added June 9 2026, batch 2b recon) - unlocks multi-property migration.
   These wrap already-token-backed color values so multi-prop attributes whose
   only unmappable piece was color become fully mappable. See migration spec. */
.txt-muted{color:var(--text-muted)}.txt-main-muted{color:var(--main-text-muted)}
.txt{color:var(--text)}.txt-main{color:var(--main-text)}.txt-dim{color:var(--text-dim)}
.txt-orange{color:var(--orange)}
.bg-card{background:var(--bg-card)}.bg-input{background:var(--bg-input)}
.bg-main-card{background:var(--main-card)}.bg-main-input{background:var(--main-input)}