/* ── DESIGN SYSTEM — TABULATED ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root{
  /* WorkDesk Brand */
  --sage:#3D5A80;--sage-l:#e8f0f8;--sage-m:#7A9EC4;--sage-d:#2d4570;
  --sage-hover:#344f72;

  /* Blue + Green UI colors */
  --wd-blue:#7A9EC4;--wd-blue-l:#e8f0f8;
  --wd-green:#8FA89B;--wd-green-l:#eef3f1;
  --wd-peach:#D4845A;--wd-peach-l:#fdf0e8;
  --wd-slate:#3D5A80;
  --wd-warm:#EDE8E0;

  /* Neutrals */
  /* polishPass: the page ground was linen (#f0ede8), close enough to the white
     cards that nothing read as raised, and heavy enough to feel flat. A warm
     near-white keeps the warmth but lets shadow do the layering. */
  --bg:#FBFAF8;
  --surface:#ffffff;
  --surface-2:#F6F4F0;
  --surface-raised:#ffffff;
  --text:#22304A;
  --text-2:#3d4e60;
  --text-3:#8B8578;
  --text-4:#a0aab5;

  /* Borders */
  --border:rgba(0,0,0,0.06);
  --border-2:rgba(0,0,0,0.10);
  --border-3:rgba(0,0,0,0.16);

  /* Semantic */
  --amber:#c17d27;--amber-l:#fef8ee;
  --red:#c0392b;--red-l:#fef2f2;
  --blue:#1a6bc4;--blue-l:#eff6ff;
  --green:#2d7a3a;--green-l:#f0faf2;
  --purple:#6b48c8;--purple-l:#f4f0ff;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.06),0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.04);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.08),0 10px 10px -5px rgba(0,0,0,.03);

  /* Radius */
  --r:10px;--rl:14px;--rx:20px;

  /* Keep compat */
  --white:#fff;--warm:#f5f3ef;--cream:#EDE8E0;
  --muted:#6b7a8d;--hint:#a0aab5;
  --border2:rgba(0,0,0,0.10);
}

/* ── BASE ───────────────────────────────────────────────── */
*{box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;}body{font-family:'DM Sans',system-ui,sans-serif;background:#f0ede8;color:var(--text);font-size:16px;line-height:1.6;}
.hidden{display:none!important;}

/* ── LOADING ────────────────────────────────────────────── */
.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--surface);gap:16px;}
.loading-logo{font-family:'Georgia',serif;font-size:32px;font-style:italic;color:var(--sage-d);letter-spacing:-0.5px;}
.loading-spinner{width:20px;height:20px;border:2px solid var(--border-2);border-top-color:#3D5A80;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── LAYOUT ─────────────────────────────────────────────── */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden;flex-direction:row;}
.wd-contract-body h2,.wd-contract-body h3{font-family:Georgia,serif;color:#3D5A80;font-size:15px;margin:16px 0 6px;font-weight:600;}
.wd-contract-body h2:first-child,.wd-contract-body h3:first-child{margin-top:0;}
.wd-contract-body p{margin:0 0 10px;}
.wd-contract-body ul{margin:0 0 10px 0;padding-left:20px;}
.wd-contract-body li{margin-bottom:4px;}
.wd-contract-body strong{color:#2d4570;}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);min-width:0;height:100vh;height:100dvh;}
.view{display:none;flex-direction:column;overflow:hidden;height:0;flex:0;}
.view.active{display:flex;flex:1;width:100%;min-height:0;flex-direction:column;overflow:hidden;}
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:24px 28px 80px;min-height:0;}
.content::-webkit-scrollbar{width:10px;}
.content::-webkit-scrollbar-thumb{background:rgba(120,120,120,.35);border-radius:6px;border:2px solid transparent;background-clip:padding-box;}
.content::-webkit-scrollbar-thumb:hover{background:rgba(120,120,120,.55);background-clip:padding-box;}
.content::-webkit-scrollbar-track{background:transparent;}
.content{scrollbar-width:thin;scrollbar-color:rgba(120,120,120,.4) transparent;}
/* Client profile panel + any scrollable area: visible neutral scrollbar */
.client-profile-panel{scrollbar-width:thin;scrollbar-color:rgba(120,120,120,.45) transparent;}
.client-profile-panel ::-webkit-scrollbar,.client-profile-panel::-webkit-scrollbar{width:10px;height:10px;}
.client-profile-panel ::-webkit-scrollbar-thumb,.client-profile-panel::-webkit-scrollbar-thumb{background:rgba(120,120,120,.45);border-radius:6px;border:2px solid transparent;background-clip:padding-box;}
.client-profile-panel ::-webkit-scrollbar-track,.client-profile-panel::-webkit-scrollbar-track{background:transparent;}
/* Sidebar is navy — needs a LIGHT, clearly visible scrollbar */
.s-nav::-webkit-scrollbar{width:12px;}
.s-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5);border-radius:6px;border:3px solid transparent;background-clip:padding-box;min-height:40px;}
.s-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.75);background-clip:padding-box;}
.s-nav::-webkit-scrollbar-track{background:rgba(255,255,255,.08);}
.s-nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.55) rgba(255,255,255,.08);}
#o-pipeline .content-col{overflow:hidden;display:flex;flex-direction:column;padding:16px 20px;}
#o-pipeline .pipe-cols{flex:1;overflow-x:auto;overflow-y:visible;display:flex;gap:14px;align-items:flex-start;padding-bottom:12px;}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar{
  width:220px;background:#3D5A80;display:flex;flex-direction:column;
  flex-shrink:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
  border-right:1px solid rgba(255,255,255,0.05);
}
.s-logo{padding:22px 18px 16px;border-bottom:1px solid rgba(255,255,255,0.08);}
.s-logo-text{font-family:Georgia,serif;font-size:21px;font-style:italic;color:#EDE8E0;letter-spacing:-0.3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.s-logo-sub{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4);display:block;margin-top:2px;}
.s-nav{flex:1;min-height:0;padding:10px 0;overflow-y:auto;}
.s-section{
  font-size:9px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,0.35);padding:16px 18px 5px;
}
.s-item{
  display:flex;align-items:center;gap:9px;padding:8px 12px;margin:1px 8px;
  border-radius:8px;color:rgba(255,255,255,0.7);cursor:pointer;font-size:13px;
  font-weight:400;transition:all .15s;border:none;background:none;width:calc(100% - 16px);text-align:left;
}
.s-item:hover{background:rgba(255,255,255,0.08);color:#fff;}
.s-item.active{background:rgba(255,255,255,0.10);color:#fff;font-weight:500;border-left:2px solid #8FA89B;}
.s-item i{font-size:15px;opacity:.8;flex-shrink:0;}
.s-footer{padding:14px;border-top:1px solid rgba(255,255,255,0.08);flex-shrink:0;}
.s-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:default;transition:background .15s;}
.s-user:hover{background:rgba(255,255,255,0.08);}
.avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.15);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;}
.u-name{font-size:13px;color:#fff;font-weight:500;}
.u-role{font-size:11px;color:rgba(255,255,255,0.45);}
.s-signout{width:100%;margin-top:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);padding:8px;border-radius:8px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;font-family:inherit;}
.s-signout:hover{background:rgba(255,255,255,0.12);color:#fff;}

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:18px 28px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;gap:16px;
}
.pg-title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-0.3px;}
.pg-sub{font-size:14px;color:var(--text-3);margin-top:4px;}
.t-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{
  padding:8px 15px;border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;border:1px solid var(--border-2);background:var(--surface);
  color:var(--text-2);display:inline-flex;align-items:center;gap:6px;
  transition:all .15s;font-family:inherit;white-space:nowrap;box-shadow:var(--shadow-xs);
}
.btn:hover{background:var(--surface-2);border-color:var(--border-3);box-shadow:var(--shadow-sm);}
.btn-p{
  background:#3D5A80;color:#fff;border-color:#3D5A80;box-shadow:0 1px 2px rgba(61,90,128,.3);
}
.btn-p:hover{background:#344f72;border-color:#344f72;box-shadow:0 2px 4px rgba(61,90,128,.35);}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:7px;gap:4px;}
.btn-danger{color:var(--red);border-color:rgba(192,57,43,0.2);background:var(--red-l);}
.btn-danger:hover{background:#fee2e2;border-color:var(--red);}
.btn i{font-size:13px;}

/* ── TABS ───────────────────────────────────────────────── */
.pipe-tab-row,.view-tabs{
  display:flex;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--rx);padding:3px;gap:2px;width:fit-content;
}
.pipe-tab-btn,.view-tab{
  padding:6px 14px;border-radius:calc(var(--rx) - 4px);font-size:13px;font-weight:500;
  cursor:pointer;border:none;background:transparent;color:var(--text-3);
  transition:all .2s;font-family:inherit;white-space:nowrap;
}
.pipe-tab-btn:hover,.view-tab:hover{color:var(--text-2);}
.pipe-tab-btn.active,.view-tab.active{
  background:var(--surface);color:#3D5A80;
  box-shadow:var(--shadow-sm);font-weight:600;
}
.auto-pipe-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.auto-pipe-tab{
  padding:7px 14px;border-radius:var(--rx);font-size:13px;font-weight:500;
  cursor:pointer;border:1px solid var(--border-2);background:var(--surface);
  color:var(--text-3);transition:all .15s;font-family:inherit;
}
.auto-pipe-tab:hover{border-color:var(--border-3);color:var(--text);}
.auto-pipe-tab.active{background:#3D5A80;color:#fff;border-color:#3D5A80;}
.auto-pipe-tab.blue.active{background:var(--blue);border-color:var(--blue);}
.auto-pipe-tab.amber.active{background:var(--amber);border-color:var(--amber);}
.auto-pipe-tab.red.active{background:var(--red);border-color:var(--red);}

/* ── CARDS ──────────────────────────────────────────────── */
.card{
  /* borders make an interface look drawn; shadow makes it look layered */
  background:var(--surface);border:none;
  border-radius:12px;overflow:hidden;margin-bottom:18px;
  box-shadow:0 1px 2px rgba(45,69,112,.05), 0 1px 3px rgba(45,69,112,.04);
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface);
}
.card-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.1px;}

/* ── STATS ──────────────────────────────────────────────── */
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);
  padding:22px 24px;box-shadow:var(--shadow-xs);transition:box-shadow .15s,transform .15s;
}
.stat-icon{display:flex;align-items:flex-start;gap:14px;}
.stat-icon-tile{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px;}
.stat-icon .stat-l{margin-bottom:6px;}
.ops-strip{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);box-shadow:var(--shadow-xs);overflow:hidden;}
.ops-stat{flex:1;padding:16px 20px;text-align:center;border-right:1px solid var(--border);}
.ops-stat:last-child{border-right:none;}
.ops-v{font-family:Georgia,'Times New Roman',serif;font-size:24px;font-weight:500;color:var(--text);letter-spacing:-0.4px;line-height:1.05;}
.ops-l{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;margin-top:5px;}
.stat:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.stat-l{font-size:10px;font-weight:600;color:#A79F93;text-transform:uppercase;letter-spacing:1.3px;margin-bottom:9px;}
.stat-v{font-family:Georgia,'Times New Roman',serif;font-size:31px;font-weight:500;color:var(--text);letter-spacing:-0.5px;line-height:1.05;}

/* ── GRID ───────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.camp-tpl{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 16px;text-align:center;cursor:pointer;transition:transform .12s,box-shadow .15s,border-color .15s;}
.camp-tpl:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(61,90,128,.10);border-color:rgba(61,90,128,.25);}
.camp-tpl-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 12px;}
.camp-tpl-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-0.2px;margin-bottom:4px;}
.camp-tpl-sub{font-size:11px;color:var(--muted);line-height:1.45;}
.camp-tpl-blank{border-style:dashed;border-color:var(--border2);background:var(--warm);}
.camp-tpl-blank .camp-tpl-icon{border:1px dashed var(--border2);}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}

/* Invoices redesign — scoped to #o-invoices */
#o-invoices .topbar{background:var(--surface);position:relative;overflow:hidden;border-bottom:1px solid #EDE9E3;padding:20px 28px 18px;align-items:flex-end;}
#o-invoices .topbar::after{content:"";position:absolute;top:0;right:0;width:200px;height:100%;background:linear-gradient(90deg,transparent,rgba(212,132,90,.12));pointer-events:none;}
#o-invoices .topbar .pg-title{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:27px;font-weight:500;color:#22304A;letter-spacing:-0.5px;position:relative;}
#o-invoices .topbar .pg-title::before{content:"Billing";display:block;font-family:'DM Sans',sans-serif;font-style:normal;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#A79F93;font-weight:600;margin-bottom:5px;}
#o-invoices .topbar .pg-title::after{content:"";position:absolute;top:-26px;left:0;width:42px;height:3px;background:#D4845A;border-radius:2px;}
#o-invoices .topbar .pg-sub{display:none;}
#o-invoices .topbar .btn-p{background:#D4845A;border-color:#D4845A;color:#fff;position:relative;}
#o-invoices .topbar .btn-p:hover{background:#c4734a;}
/* editorial stat tiles */
#o-invoices .inv-stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 17px;display:flex;align-items:center;gap:13px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
#o-invoices .inv-stat-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
#o-invoices .inv-stat-v{font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:600;color:var(--text);letter-spacing:-0.3px;line-height:1;}
#o-invoices .inv-stat-l{font-size:10.5px;color:var(--muted);margin-top:3px;}
/* filter pills */
#o-invoices .view-tabs{background:transparent;border:none;padding:0;gap:6px;}
#o-invoices .view-tab{border-radius:20px;padding:6px 14px;font-size:12px;font-weight:500;color:var(--text-2,#5a5a5a);background:var(--surface-2,#f0ede8);border:1px solid var(--border);}
#o-invoices .view-tab.active{background:#3D5A80;color:#fff;box-shadow:none;}
/* table card */
#o-invoices #invoices-table-wrap{border-radius:16px;border:1px solid var(--border);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:0;}
#o-invoices #invoices-table-wrap table{width:100%;border-collapse:collapse;}
#o-invoices #invoices-table-wrap thead th{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600;background:#fbfaf7;padding:13px 16px;text-align:left;border-bottom:1px solid var(--border);}
#o-invoices #invoices-table-wrap tbody td{padding:15px 16px;border-bottom:1px solid #f5f2ec;}
#o-invoices #invoices-table-wrap tbody tr:last-child td{border-bottom:none;}
#o-invoices #invoices-table-wrap tbody tr:hover{background:#fbfaf7;}
#o-invoices .inv-num{font-family:'DM Sans',sans-serif;font-weight:700;color:#7a9788;font-size:14px;}

/* ============ BATCHED DESKTOP REDESIGN — editorial headers + cards ============ */
/* Shared navy hero applied to each view's topbar. Eyebrow text set per-view below. */
#o-schedule .topbar,#o-settings .topbar,#o-templates .topbar,#o-bizreports .topbar,
#o-team .topbar,#o-supplypacks .topbar,#o-vendors .topbar{
  background:var(--surface);
  position:relative;overflow:hidden;border-bottom:1px solid #EDE9E3;padding:20px 28px 18px;align-items:flex-end;
}
#o-schedule .topbar::after,#o-settings .topbar::after,#o-templates .topbar::after,
#o-bizreports .topbar::after,#o-team .topbar::after,#o-supplypacks .topbar::after,
#o-vendors .topbar::after{content:"";position:absolute;top:0;right:0;width:200px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(212,132,90,.12));pointer-events:none;}
#o-schedule .topbar .pg-title,#o-settings .topbar .pg-title,#o-templates .topbar .pg-title,
#o-bizreports .topbar .pg-title,#o-team .topbar .pg-title,#o-supplypacks .topbar .pg-title,
#o-vendors .topbar .pg-title{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:26px;
  font-weight:500;color:#22304A;letter-spacing:-0.5px;position:relative;}
#o-schedule .topbar .pg-title::after,#o-settings .topbar .pg-title::after,
#o-templates .topbar .pg-title::after,#o-bizreports .topbar .pg-title::after,
#o-team .topbar .pg-title::after,#o-supplypacks .topbar .pg-title::after,
#o-vendors .topbar .pg-title::after{content:"";position:absolute;top:-26px;left:0;width:42px;height:3px;
  background:#D4845A;border-radius:2px;}
/* per-view eyebrow */
#o-schedule .topbar .pg-title::before,#o-settings .topbar .pg-title::before,
#o-templates .topbar .pg-title::before,#o-bizreports .topbar .pg-title::before,
#o-team .topbar .pg-title::before,#o-supplypacks .topbar .pg-title::before,
#o-vendors .topbar .pg-title::before{display:block;font-family:'DM Sans',sans-serif;font-style:normal;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#A79F93;font-weight:600;margin-bottom:5px;}
#o-schedule .topbar .pg-title::before{content:"Calendar";}
#o-settings .topbar .pg-title::before{content:"Configuration";}
#o-templates .topbar .pg-title::before{content:"Document Library";}
#o-bizreports .topbar .pg-title::before{content:"Analytics";}
#o-team .topbar .pg-title::before{content:"People";}
#o-supplypacks .topbar .pg-title::before{content:"Inventory";}
#o-vendors .topbar .pg-title::before{content:"Referral Network";}
/* hide the old subtitle (eyebrow replaces it); keep dynamic ones that show counts */
#o-templates .topbar .pg-sub,#o-bizreports .topbar .pg-sub,#o-settings .topbar .pg-sub,
#o-supplypacks .topbar .pg-sub{display:none;}
#o-schedule .topbar .pg-sub,#o-team .topbar .pg-sub,#o-vendors .topbar .pg-sub{color:#A79F93;position:relative;}
/* topbar controls on navy */
#o-schedule .topbar .btn,#o-settings .topbar .btn,#o-templates .topbar .btn,
#o-bizreports .topbar .btn,#o-team .topbar .btn,#o-supplypacks .topbar .btn,
#o-vendors .topbar .btn{background:#fff;border:1px solid #DFDAD1;color:#4A5C74;position:relative;box-shadow:0 1px 1px rgba(45,69,112,.04);}
#o-schedule .topbar .btn:hover,#o-settings .topbar .btn:hover,#o-templates .topbar .btn:hover,
#o-bizreports .topbar .btn:hover,#o-team .topbar .btn:hover,#o-supplypacks .topbar .btn:hover,
#o-vendors .topbar .btn:hover{background:#F6F4F0;border-color:#CFC8BC;color:#22304A;}
#o-schedule .topbar .btn-p,#o-settings .topbar .btn-p,#o-templates .topbar .btn-p,
#o-bizreports .topbar .btn-p,#o-team .topbar .btn-p,#o-supplypacks .topbar .btn-p,
#o-vendors .topbar .btn-p{background:#D4845A;border-color:#D4845A;color:#fff;}
#o-schedule .topbar .btn-p:hover,#o-settings .topbar .btn-p:hover,#o-templates .topbar .btn-p:hover,
#o-bizreports .topbar .btn-p:hover,#o-team .topbar .btn-p:hover,#o-supplypacks .topbar .btn-p:hover,
#o-vendors .topbar .btn-p:hover{background:#c4734a;}
/* topbarSearchReadable: these were styled for the old dark-navy header (white
   text on a see-through box). The header is light now, so typed text was
   invisible. Normal field colors instead. */
#o-schedule .topbar .f-input,#o-vendors .topbar .f-input{background:var(--surface);
  border-color:var(--border-2);color:var(--text);}
#o-schedule .topbar .f-input::placeholder,#o-vendors .topbar .f-input::placeholder{color:var(--text-4);}
/* soft elevated cards across these views */
#o-templates .card,#o-bizreports .card,#o-team .card,#o-supplypacks .card,#o-vendors .card,#o-settings .card{
  border-radius:14px;border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.04);}
/* serif section titles inside these cards */
#o-templates .card-title,#o-bizreports .card-title,#o-team .card-title,#o-supplypacks .card-title,
#o-vendors .card-title,#o-settings .card-title{font-family:'DM Sans',system-ui,sans-serif;font-weight:600;letter-spacing:-0.2px;}
/* schedule day cells — softer, rounded */
#o-schedule .sched-day,#o-schedule .cal-day{border-radius:10px;}
#o-invoices .badge{border-radius:14px;padding:3px 11px;font-weight:600;}
#o-invoices .badge.b-amber{background:#fbece2;color:#b05f30;}
#o-invoices .badge.b-blue{background:#eef3f8;color:#3f5f82;}

/* ====== BATCH 2 — remaining 12 views get the editorial navy header ====== */
#o-clients .topbar,#o-newsletter .topbar,#o-automations .topbar,#o-reports .topbar,
#o-inventory .topbar,#o-chat .topbar,#o-timesheets .topbar,#o-reimbursements .topbar,
#o-docs .topbar,#o-media .topbar,#o-plans .topbar,#o-leadform .topbar{
  background:var(--surface);
  position:relative;overflow:hidden;border-bottom:1px solid #EDE9E3;padding:20px 28px 18px;align-items:flex-end;
}
#o-clients .topbar::after,#o-newsletter .topbar::after,#o-automations .topbar::after,
#o-reports .topbar::after,#o-inventory .topbar::after,#o-chat .topbar::after,
#o-timesheets .topbar::after,#o-reimbursements .topbar::after,#o-docs .topbar::after,
#o-media .topbar::after,#o-plans .topbar::after,#o-leadform .topbar::after{
  content:"";position:absolute;top:0;right:0;width:200px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(212,132,90,.12));pointer-events:none;}
#o-clients .topbar .pg-title,#o-newsletter .topbar .pg-title,#o-automations .topbar .pg-title,
#o-reports .topbar .pg-title,#o-inventory .topbar .pg-title,#o-chat .topbar .pg-title,
#o-timesheets .topbar .pg-title,#o-reimbursements .topbar .pg-title,#o-docs .topbar .pg-title,
#o-media .topbar .pg-title,#o-plans .topbar .pg-title,#o-leadform .topbar .pg-title{
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:26px;font-weight:500;
  color:#22304A;letter-spacing:-0.5px;position:relative;}
#o-clients .topbar .pg-title::after,#o-newsletter .topbar .pg-title::after,
#o-automations .topbar .pg-title::after,#o-reports .topbar .pg-title::after,
#o-inventory .topbar .pg-title::after,#o-chat .topbar .pg-title::after,
#o-timesheets .topbar .pg-title::after,#o-reimbursements .topbar .pg-title::after,
#o-docs .topbar .pg-title::after,#o-media .topbar .pg-title::after,
#o-plans .topbar .pg-title::after,#o-leadform .topbar .pg-title::after{
  content:"";position:absolute;top:-26px;left:0;width:42px;height:3px;background:#D4845A;border-radius:2px;}
#o-clients .topbar .pg-title::before,#o-newsletter .topbar .pg-title::before,
#o-automations .topbar .pg-title::before,#o-reports .topbar .pg-title::before,
#o-inventory .topbar .pg-title::before,#o-chat .topbar .pg-title::before,
#o-timesheets .topbar .pg-title::before,#o-reimbursements .topbar .pg-title::before,
#o-docs .topbar .pg-title::before,#o-media .topbar .pg-title::before,
#o-plans .topbar .pg-title::before,#o-leadform .topbar .pg-title::before{
  display:block;font-family:'DM Sans',sans-serif;font-style:normal;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:#A79F93;font-weight:600;margin-bottom:5px;}
#o-clients .topbar .pg-title::before{content:"People";}
#o-newsletter .topbar .pg-title::before{content:"Email Marketing";}
#o-automations .topbar .pg-title::before{content:"Workflow";}
#o-reports .topbar .pg-title::before{content:"Field Reports";}
#o-inventory .topbar .pg-title::before{content:"Stock";}
#o-chat .topbar .pg-title::before{content:"Messages";}
#o-timesheets .topbar .pg-title::before{content:"Time Tracking";}
#o-reimbursements .topbar .pg-title::before{content:"Team";}
#o-docs .topbar .pg-title::before{content:"Knowledge Base";}
#o-media .topbar .pg-title::before{content:"Assets";}
#o-plans .topbar .pg-title::before{content:"Billing";}
#o-leadform .topbar .pg-title::before{content:"Lead Capture";}
/* dynamic subtitles stay (counts), static ones hide */
#o-newsletter .topbar .pg-sub,#o-automations .topbar .pg-sub,#o-reports .topbar .pg-sub,
#o-docs .topbar .pg-sub,#o-media .topbar .pg-sub,#o-plans .topbar .pg-sub,
#o-leadform .topbar .pg-sub,#o-reimbursements .topbar .pg-sub{display:none;}
#o-clients .topbar .pg-sub,#o-inventory .topbar .pg-sub,#o-chat .topbar .pg-sub,
#o-timesheets .topbar .pg-sub{color:#A79F93;position:relative;}
/* topbar buttons on navy */
#o-clients .topbar .btn,#o-newsletter .topbar .btn,#o-automations .topbar .btn,
#o-reports .topbar .btn,#o-inventory .topbar .btn,#o-chat .topbar .btn,
#o-timesheets .topbar .btn,#o-reimbursements .topbar .btn,#o-docs .topbar .btn,
#o-media .topbar .btn,#o-plans .topbar .btn,#o-leadform .topbar .btn{
  background:#fff;border:1px solid #DFDAD1;color:#4A5C74;position:relative;box-shadow:0 1px 1px rgba(45,69,112,.04);}
#o-clients .topbar .btn:hover,#o-newsletter .topbar .btn:hover,#o-automations .topbar .btn:hover,
#o-reports .topbar .btn:hover,#o-inventory .topbar .btn:hover,#o-chat .topbar .btn:hover,
#o-timesheets .topbar .btn:hover,#o-reimbursements .topbar .btn:hover,#o-docs .topbar .btn:hover,
#o-media .topbar .btn:hover,#o-plans .topbar .btn:hover,#o-leadform .topbar .btn:hover{
  background:#F6F4F0;border-color:#CFC8BC;color:#22304A;}
#o-clients .topbar .btn-p,#o-newsletter .topbar .btn-p,#o-automations .topbar .btn-p,
#o-reports .topbar .btn-p,#o-inventory .topbar .btn-p,#o-chat .topbar .btn-p,
#o-timesheets .topbar .btn-p,#o-reimbursements .topbar .btn-p,#o-docs .topbar .btn-p,
#o-media .topbar .btn-p,#o-plans .topbar .btn-p,#o-leadform .topbar .btn-p{
  background:#D4845A;border-color:#D4845A;color:#fff;}
#o-clients .topbar .btn-p:hover,#o-newsletter .topbar .btn-p:hover,#o-automations .topbar .btn-p:hover,
#o-reports .topbar .btn-p:hover,#o-inventory .topbar .btn-p:hover,#o-chat .topbar .btn-p:hover,
#o-timesheets .topbar .btn-p:hover,#o-reimbursements .topbar .btn-p:hover,#o-docs .topbar .btn-p:hover,
#o-media .topbar .btn-p:hover,#o-plans .topbar .btn-p:hover,#o-leadform .topbar .btn-p:hover{
  background:#c4734a;}
#o-clients .topbar .f-input,#o-inventory .topbar .f-input,#o-newsletter .topbar .f-input{
  background:var(--surface);border-color:var(--border-2);color:var(--text);}
#o-clients .topbar .f-input::placeholder,#o-inventory .topbar .f-input::placeholder,
#o-newsletter .topbar .f-input::placeholder{color:var(--text-4);}
/* soft cards + serif titles across these views */
#o-clients .card,#o-newsletter .card,#o-automations .card,#o-reports .card,
#o-inventory .card,#o-timesheets .card,#o-reimbursements .card,#o-docs .card,
#o-media .card,#o-plans .card,#o-leadform .card{
  border-radius:14px;border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.04);}
#o-clients .card-title,#o-newsletter .card-title,#o-automations .card-title,#o-reports .card-title,
#o-inventory .card-title,#o-timesheets .card-title,#o-reimbursements .card-title,
#o-docs .card-title,#o-media .card-title,#o-plans .card-title,#o-leadform .card-title{
  font-family:'DM Sans',system-ui,sans-serif;font-weight:600;letter-spacing:-0.2px;}
.g-main{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;}

/* ── FORMS ──────────────────────────────────────────────── */
.f-group{margin-bottom:18px;}
.f-label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:6px;}
.f-input{
  width:100%;padding:11px 13px;border:1px solid var(--border-2);border-radius:9px;
  font-size:14px;font-family:inherit;color:var(--text);background:var(--surface);
  transition:all .15s;outline:none;
}
.f-input:focus{border-color:#7A9EC4;box-shadow:0 0 0 3px rgba(122,158,196,0.15);}
.f-input::placeholder{color:var(--text-4);}
select.f-input{cursor:pointer;}
textarea.f-input{resize:vertical;min-height:80px;line-height:1.6;}

/* ── BADGES ─────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;
  border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;
}
.b-green{background:#eef3f1;color:#5a8a78;}
.b-amber{background:var(--amber-l);color:var(--amber);}
.b-red{background:var(--red-l);color:var(--red);}
.b-blue{background:var(--blue-l);color:var(--blue);}
.b-gray{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border-2);}
.b-purple{background:var(--purple-l);color:var(--purple);}

/* ── TABLES ─────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px;}
th{
  text-align:left;padding:10px 14px;font-size:11px;font-weight:600;
  color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;
  background:var(--surface-2);border-bottom:1px solid var(--border);
}
td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-2);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--surface-2);}

/* ── PIPELINE ───────────────────────────────────────────── */
.pipeline-board{display:flex;gap:14px;overflow-x:auto;flex:1;padding-bottom:16px;align-items:flex-start;}
.pipe-cols-v2{display:flex;gap:14px;overflow-x:auto;flex:1;padding-bottom:16px;align-items:flex-start;}min-height:400px;}
.pipe-col{
  min-width:250px;max-width:270px;flex-shrink:0;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--rl);display:flex;flex-direction:column;
  max-height:calc(100vh - 160px);overflow:hidden;
}
.pipe-col-.nl-.email-body-wrap{flex:1;overflow-y:auto;padding:4px;}
.pipe-col-h{
  padding:14px 16px;font-size:14px;font-weight:700;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);border-bottom:1px solid var(--border);
}
.pipe-cnt{
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-3);font-size:11px;padding:1px 7px;border-radius:20px;font-weight:600;
}
.pcard{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px;margin:8px;cursor:pointer;transition:all .15s;
  box-shadow:var(--shadow-xs);
}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:#7A9EC4;}
.pcard-name{font-size:15px;font-weight:700;color:#3D5A80;margin-bottom:4px;}
.pcard-detail{font-size:13px;color:var(--text-3);}

/* Pipeline redesign — editorial, scoped to #o-pipeline */
#o-pipeline .topbar{background:var(--surface);position:relative;overflow:hidden;border-bottom:1px solid #EDE9E3;padding:20px 28px 18px;align-items:flex-end;}
#o-pipeline .topbar::after{content:"";position:absolute;top:0;right:0;width:200px;height:100%;background:linear-gradient(90deg,transparent,rgba(212,132,90,.12));pointer-events:none;}
#o-pipeline .topbar .pg-title{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:27px;font-weight:500;color:#22304A;letter-spacing:-0.5px;position:relative;}
#o-pipeline .topbar .pg-title::before{content:"Sales Pipeline";display:block;font-family:'DM Sans',sans-serif;font-style:normal;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#A79F93;font-weight:600;margin-bottom:5px;}
#o-pipeline .topbar .pg-title::after{content:"";position:absolute;top:-26px;left:0;width:42px;height:3px;background:#D4845A;border-radius:2px;}
#o-pipeline .topbar .pg-sub{color:#A79F93;position:relative;}
#o-pipeline .topbar .btn{background:#fff;border:1px solid #DFDAD1;color:#4A5C74;position:relative;box-shadow:0 1px 1px rgba(45,69,112,.04);}
#o-pipeline .topbar .btn:hover{background:#F6F4F0;border-color:#CFC8BC;color:#22304A;}
#o-pipeline .topbar .btn-p{background:#D4845A;border-color:#D4845A;color:#fff;}
#o-pipeline .topbar .btn-p:hover{background:#c4734a;}
/* boxless columns */
#o-pipeline .pipe-col{min-width:236px;max-width:256px;flex-shrink:0;background:transparent;border:none;border-radius:0;display:flex;flex-direction:column;max-height:calc(100vh - 210px);overflow:hidden;box-shadow:none;}
#o-pipeline .pipe-col-h{padding:0 4px 9px;font-family:'DM Sans',system-ui,sans-serif;font-size:15px;font-weight:600;color:#2c3e54;display:flex;align-items:center;justify-content:space-between;background:transparent;border-bottom:none;}
#o-pipeline .pipe-cnt{background:#e7ecf2;border:none;color:#5a6b80;font-size:11px;padding:2px 9px;border-radius:20px;font-weight:600;}
#o-pipeline .pipe-col-rule{height:2px;border-radius:2px;margin:0 4px 12px;opacity:.55;}
#o-pipeline .pipe-col-body{flex:1;overflow-y:auto;padding:2px 2px 4px;}
/* editorial cards */
#o-pipeline .pcard{background:#fff;border:1px solid #eae5db;border-radius:13px;padding:14px 15px;margin:0 0 10px;cursor:pointer;transition:all .15s;box-shadow:0 1px 3px rgba(45,69,112,.05);}
#o-pipeline .pcard:hover{box-shadow:0 4px 14px rgba(45,69,112,.1);transform:translateY(-1px);border-color:#d8cfc0;}
#o-pipeline .pcard-name{font-family:'DM Sans',system-ui,sans-serif;font-size:16px;font-weight:600;color:#3D5A80;margin-bottom:4px;letter-spacing:-0.2px;}
#pipeline-service-tabs{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:4px;gap:3px;}
#pipeline-service-tabs .pipe-tab-btn{padding:7px 15px;border-radius:8px;font-size:13px;}
#pipeline-service-tabs .pipe-tab-btn.active{background:#3D5A80;color:#fff;box-shadow:0 1px 3px rgba(61,90,128,.3);}

/* ── SECTION DIVIDERS ───────────────────────────────────── */
.s-div{
  font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.8px;padding:20px 0 8px;margin-bottom:2px;
}

/* ── CONNECTION BANNER ──────────────────────────────────── */
.conn-banner{
  display:flex;align-items:flex-start;gap:10px;padding:12px 16px;
  background:#e8f0f8;border:1px solid rgba(122,158,196,0.25);
  border-radius:10px;font-size:13px;color:#2d4570;margin-bottom:16px;line-height:1.5;
}

/* ── MODALS ─────────────────────────────────────────────── */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:950;
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(4px);
}
.modal{
  background:var(--surface);border-radius:18px;width:100%;max-width:520px;
  max-height:90vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow-xl);border:1px solid var(--border);
  animation:modalIn .2s ease;
}
@keyframes modalIn{from{opacity:0;transform:scale(.97) translateY(4px);}to{opacity:1;transform:none;}}
.modal-head{
  padding:20px 22px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.modal-title{font-size:16px;font-weight:600;color:var(--text);letter-spacing:-0.2px;}
.modal-body{padding:22px 26px;overflow-y:auto;flex:1;min-height:0;}
.modal-close{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);
  width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.modal-close:hover{background:var(--red-l);color:var(--red);border-color:rgba(192,57,43,0.2);}
.modal-.settings-.email-body-wrap2{flex:1;overflow-y:auto;padding:20px 22px;}
.modal-foot{
  padding:16px 22px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;background:var(--surface-2);
  border-radius:0 0 18px 18px;flex-wrap:wrap;
}
.modal-foot .btn{white-space:nowrap;}
/* footSafety: four buttons squashed into one phone-width row put Delete a
   thumb's width from Update Job. Under 560px they stack, the save goes to the
   top where the thumb lands, and the destructive one drops to the bottom. */
@media (max-width:560px){
  .modal-foot{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px;}
  .modal-foot .btn{width:100%;justify-content:center;padding-top:13px;padding-bottom:13px;order:5;}
  .modal-foot .btn-p{order:1;}
  .modal-foot .btn-danger{order:99;margin-top:14px;opacity:.85;}
}

/* ── PROGRESS BARS ──────────────────────────────────────── */
.prog-bar{height:6px;background:var(--surface-2);border-radius:20px;overflow:hidden;}
.prog-fill{height:100%;background:var(--sage);border-radius:20px;transition:width .3s;}

/* ── DASHBOARD WIDGETS ──────────────────────────────────── */
.act-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);}
.act-item:last-child{border-bottom:none;}
.act-dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex-shrink:0;margin-top:6px;}
.act-text{font-size:14px;color:var(--text-2);font-weight:500;line-height:1.45;}
.act-time{font-size:12.5px;color:var(--text-3);margin-top:4px;}

/* ── MAP LINK ───────────────────────────────────────────── */
.map-link{font-size:11px;color:var(--text-3);text-decoration:none;display:inline-flex;align-items:center;gap:3px;}
.map-link:hover{color:var(--sage);}

/* ── PHOTO UPLOAD ───────────────────────────────────────── */
.photo-box{
  border:1.5px dashed var(--border-2);border-radius:10px;padding:28px;
  text-align:center;cursor:pointer;transition:all .15s;color:var(--text-3);font-size:13px;
  background:var(--surface-2);
}
.photo-box:hover{border-color:#7A9EC4;background:#e8f0f8;color:#2d4570;}
.photo-box i{font-size:24px;display:block;margin-bottom:8px;color:var(--text-4);}

/* ── SCHEDULE ───────────────────────────────────────────── */
.sched-grid{display:grid;border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;background:var(--surface);}
.sched-head{background:var(--surface-2);font-size:12px;font-weight:600;color:var(--text-3);padding:10px;text-align:center;border-bottom:1px solid var(--border);}
.sched-cell{padding:6px;border-right:1px solid var(--border);min-height:80px;vertical-align:top;transition:background .1s;}
.sched-cell:hover{background:var(--surface-2);}
.sched-today{background:rgba(61,107,79,0.04);}

/* ── SUPPLY PACKS ───────────────────────────────────────── */
.pack-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-xs);}
/* packHeadColor: a flat grey bar above every pack, so a screen full of them
   read as one undifferentiated stack. Give it a soft tinted ground and a
   status-colored left edge, so you can tell at a glance what needs you. */
.pack-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 13px;background:linear-gradient(180deg,#FBFAF8 0%,#F6F4F0 100%);
  border-bottom:1px solid #EDE9E3;border-left:3px solid var(--border-2);}
.pack-head .pack-job{font-family:Georgia,'Times New Roman',serif;font-size:16px;color:#22304A;letter-spacing:-.2px;}
/* status accents — colour the edge, not the whole bar */
.pack-card[data-st="Sent"] .pack-head{border-left-color:#7A9EC4;background:linear-gradient(180deg,#FBFCFE 0%,#F1F5FA 100%);}
.pack-card[data-st="In Use"] .pack-head{border-left-color:#D4845A;background:linear-gradient(180deg,#FEFBF8 0%,#FBF2EA 100%);}
.pack-card[data-st="Completed"] .pack-head{border-left-color:#8FA89B;background:linear-gradient(180deg,#FAFCFB 0%,#F0F5F2 100%);}
.pack-card[data-st="Draft"] .pack-head{border-left-color:#C9C5BD;}
.pack-card{margin-bottom:14px;}
/* packOneCard: header, table and buttons read as separate strips, so it wasn't
   clear they belonged together. The status stripe runs the full card height,
   the table sits inset, and actions live in a clearly separated footer. */
.pack-card{border:1px solid #E4DFD7;border-left:4px solid #C9C5BD;box-shadow:0 1px 3px rgba(30,40,60,.06);margin-bottom:18px;}
.pack-card[data-st="Sent"]{border-left-color:#7A9EC4;}
.pack-card[data-st="In Use"]{border-left-color:#D4845A;}
.pack-card[data-st="Completed"]{border-left-color:#8FA89B;}
.pack-card[data-st="Planning"]{border-left-color:#B8AFA2;border-style:dashed solid dashed solid;border-left-style:solid;}
.pack-card .pack-head,.pack-card[data-st] .pack-head{border-left:none;}
.pack-card[data-st="Planning"] .pack-head{background:linear-gradient(180deg,#FBFAF8 0%,#F5F2EC 100%);}
.pack-body{padding:12px 16px 0;}
.pack-body table{border:1px solid #EFEBE4;border-radius:8px;overflow:hidden;}
.pack-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px -16px 0;padding:10px 16px;border-top:1px solid #EFEBE4;background:#FAF8F5;}
.pack-job{font-size:14px;font-weight:600;color:var(--text);}
.pack-.email-body-pad{padding:14px 16px;}

/* ── SUPPLY ITEMS ───────────────────────────────────────── */
/* usageLegibility: the field team reported the usage rows were hard to read on
   a phone in a driveway. Bigger name text, bigger tap targets, bigger numbers.
   Only affects the supply usage/pack rows, not the rest of the app. */
/* addrDropdown: .addr-suggestions had no CSS anywhere — the list rendered as
   plain block text inside the form, pushing the fields down and getting cut
   off by the modal footer. Make it a real floating dropdown. */
.addr-suggestions{
  position:absolute; left:0; right:0; top:100%; z-index:60;
  background:var(--surface,#fff); border:1px solid var(--border);
  border-radius:10px; margin-top:4px; overflow-y:auto; max-height:230px;
  box-shadow:0 8px 24px rgba(45,69,112,.14);
}
.addr-suggestions.hidden{display:none;}
/* addrAnchor: the dropdown is absolutely positioned, but only the Edit Client
   field's wrapper was position:relative — on New Client (and anywhere else)
   the list floated off to the top of the form or off-screen, so address
   search looked broken. Anchor every wrapper that holds a suggestion list. */
.f-group:has(> .addr-suggestions){position:relative;z-index:6;}
.addr-suggestion{
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--border-2,#f0ede8);
}
.addr-suggestion:last-child{border-bottom:none;}
.addr-suggestion:hover{background:var(--sage-l,#eef3f1);}
.addr-suggestion i{color:var(--sage-d,#5e7a6c); font-size:15px; margin-top:1px; flex-shrink:0;}
.addr-main{font-size:13.5px; color:var(--text); line-height:1.3;}
.addr-sub{font-size:11.5px; color:var(--muted); line-height:1.35; margin-top:1px;}

/* tooltips: native title= takes ~1s to appear and renders as an OS box that
   ignores the app's styling. This shows the same text instantly, in the app's
   own type. Anything with data-tip gets it; title= still works as a fallback
   for screen readers and touch. */
[data-tip]{position:relative;}
[data-tip]::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%) translateY(3px);
  background:#22304A; color:#fff; font-size:11.5px; font-weight:500;
  font-family:'DM Sans',sans-serif; letter-spacing:.1px;
  padding:5px 9px; border-radius:7px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .13s ease, transform .13s ease; z-index:2000;
  box-shadow:0 3px 10px rgba(34,48,74,.22);
}
[data-tip]::before{
  content:""; position:absolute; bottom:calc(100% + 2px); left:50%;
  transform:translateX(-50%); border:5px solid transparent; border-top-color:#22304A;
  opacity:0; transition:opacity .13s ease; pointer-events:none; z-index:2000;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0);}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;}
/* headers and toolbars sit near the top — flip those below the button */
.topbar [data-tip]::after,.t-actions [data-tip]::after{bottom:auto;top:calc(100% + 7px);}
.topbar [data-tip]::before,.t-actions [data-tip]::before{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:#22304A;}
@media (prefers-reduced-motion:reduce){[data-tip]::after,[data-tip]::before{transition:none;}}

/* dashHeadings: every card head was the same neutral bar, so a screen of ten
   cards read as one grey wall and nothing drew the eye. A coloured left edge
   and a tinted title band per card type — palette used as punctuation, the way
   the stat rules and pack headers already do. */
.dash-card{position:relative;overflow:hidden;}
.dash-card > .card-head{
  background:linear-gradient(180deg,#FBFAF8 0%,#F5F2ED 100%);
  border-bottom:1px solid #EDE9E3;
  border-left:3px solid var(--dash-accent,#7A9EC4);
}
.dash-card > .card-head .card-title{
  font-family:Georgia,'Times New Roman',serif;
  font-size:15.5px; font-weight:500; letter-spacing:-.1px;
  color:var(--dash-accent-ink,#22304A);
}
.dash-card[data-key="notifications"]{--dash-accent:#D4845A;--dash-accent-ink:#8a4f24;}
.dash-card[data-key="attention"]    {--dash-accent:#c0392b;--dash-accent-ink:#8f2c21;}
.dash-card[data-key="textqueue"]    {--dash-accent:#8FA89B;--dash-accent-ink:#3f5a4c;}
.dash-card[data-key="pipeline"]     {--dash-accent:#3D5A80;--dash-accent-ink:#22304A;}
.dash-card[data-key="clients"]      {--dash-accent:#7A9EC4;--dash-accent-ink:#2d4570;}
.dash-card[data-key="tasks"]        {--dash-accent:#6b5b8f;--dash-accent-ink:#4c3f68;}
.dash-card[data-key="messages"]     {--dash-accent:#4A6B8A;--dash-accent-ink:#2d4570;}
.dash-card[data-key="newsletter"]   {--dash-accent:#c17d27;--dash-accent-ink:#7d5116;}
.dash-card[data-key="clocked"]      {--dash-accent:#2d6b50;--dash-accent-ink:#1f4a37;}
.dash-card[data-key="inventory"]    {--dash-accent:#8a4f24;--dash-accent-ink:#6b3d1c;}
.dash-card[data-key="birthdays"]    {--dash-accent:#D4845A;--dash-accent-ink:#8a4f24;}
.dash-card .drag-grip{transition:opacity .15s;}
.dash-card:hover .drag-grip{opacity:.7;}

.supply-item-row{display:flex;align-items:center;gap:12px;padding:14px 14px;border-bottom:1px solid var(--border);}
/* usageChecklist-Aug17: rows confirm themselves as the person reviews each item */
.usage-reviewed{background:rgba(122,158,126,.10);}
.usage-reviewed .supply-name::after{content:' ✓';color:var(--sage,#7a9e7e);font-weight:700;}
.supply-item-row:last-child{border-bottom:none;}
.supply-name{flex:1;font-size:15px;line-height:1.35;color:var(--text-2);}
.supply-check{accent-color:var(--sage);width:22px;height:22px;flex-shrink:0;}
.supply-qty-box{display:flex;align-items:center;gap:6px;}
.supply-qty-btn{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--border-2);
  background:var(--surface);cursor:pointer;font-size:19px;display:flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:all .15s;
}
.supply-qty-btn:hover{background:var(--sage-l);border-color:var(--sage-m);color:var(--sage-d);}
.supply-qty-num{min-width:34px;text-align:center;font-size:18px;font-weight:700;padding:2px 0;}

/* ── AUTOMATIONS ────────────────────────────────────────── */
.seq-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow-xs);}
.seq-head{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;transition:background .15s;}
.seq-head:hover{background:var(--surface-2);}
.seq-trig{flex:1;}
.trig-label{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;}
.trig-val{font-size:13px;font-weight:500;color:var(--text);margin-top:1px;}
.timing-badge{background:var(--surface-2);border:1px solid var(--border-2);color:var(--text-3);font-size:11px;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.seq-.email-body-border{padding:16px;border-top:1px solid var(--border);background:var(--surface-2);}
.seq-subj{width:100%;border:1px solid var(--border-2);border-radius:8px;padding:8px 12px;font-size:13px;font-family:inherit;background:var(--surface);margin-bottom:4px;outline:none;}
.seq-subj:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(61,107,79,0.1);}
.seq-ta{width:100%;border:1px solid var(--border-2);border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;min-height:120px;resize:vertical;background:var(--surface);outline:none;line-height:1.6;}
.seq-ta:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(61,107,79,0.1);}
.seq-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
.var-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.var-chip{background:var(--sage-l);color:var(--sage-d);border:1px solid rgba(61,107,79,0.2);border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:monospace;transition:all .15s;}
.var-chip:hover{background:var(--sage);color:#fff;}

/* ── TOGGLE SWITCH ──────────────────────────────────────── */
.toggle{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.tog-sl{position:absolute;inset:0;background:var(--border-2);border-radius:20px;cursor:pointer;transition:.2s;}
.tog-sl:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--shadow-xs);}
.toggle input:checked+.tog-sl{background:#8FA89B;}
.toggle input:checked+.tog-sl:before{transform:translateX(16px);}

/* ── CLIENT PROFILE PANEL ───────────────────────────────── */
.client-profile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:500;display:flex;justify-content:flex-end;backdrop-filter:blur(2px);}
.client-profile-panel{width:100%;max-width:580px;background:var(--surface);height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);animation:slideInRight .2s ease;}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0;}to{transform:none;opacity:1;}}
.cp-header{padding:20px 22px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px;background:var(--surface);}
.cp-name{font-size:20px;font-weight:600;color:var(--text);letter-spacing:-0.3px;}
.cp-meta{font-size:12px;color:var(--text-3);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;}
.cp-close{background:var(--surface-2);border:1px solid var(--border);color:var(--text-3);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.cp-close:hover{background:var(--red-l);color:var(--red);}
.cp-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface);padding:0 22px;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;}
.cp-tabs::-webkit-scrollbar{display:none;}
.cp-tab{padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--text-3);cursor:pointer;border:none;background:none;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;}
.cp-tab.active{color:#3D5A80;border-bottom-color:#3D5A80;}
.cp-tab i{font-size:15px;opacity:.85;}
.cp-tab:hover{color:var(--text);}
.cp-tab-content{display:none;flex-direction:column;}
.cp-tab-content.active{display:flex;}

/* ── EMAIL BUILDER ──────────────────────────────────────── */
/* Email builder sidebar readability */
#email-builder-overlay .eb-block-btn div{font-size:12px!important;}
#email-builder-overlay .eb-block-btn{padding:10px 6px!important;}
#email-builder-overlay #eb-panel-layout > div:first-child,
#email-builder-overlay #eb-panel-vars > div:first-child{font-size:13px!important;}
#email-builder-overlay #eb-template-tiles + div,
#email-builder-overlay [id^="eb-panel"] .s-div{font-size:12px!important;}
#email-builder-overlay #eb-template-tiles > div > div:last-child{font-size:13px!important;padding:9px!important;}
#email-builder-overlay .eb-var-chip{font-size:12.5px!important;padding:8px 10px!important;}
#email-builder-overlay #eb-settings-panel{font-size:13px;}
#email-builder-overlay #eb-settings-panel input,
#email-builder-overlay #eb-settings-panel select{font-size:13px!important;}
.nl-aud-pill{padding:5px 14px;border-radius:20px;border:1.5px solid var(--border2);background:var(--surface);font-size:12px;font-weight:500;cursor:pointer;color:var(--text-3);transition:all .15s;}
.nl-aud-pill.active{background:#3D5A80;color:#fff;border-color:#3D5A80;}
.nl-aud-pill:hover{border-color:#7A9EC4;color:#3D5A80;}
.eb-block-btn{
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;user-select:none;
}
.eb-block-btn:hover{background:var(--sage-l);border-color:rgba(61,107,79,0.3);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.eb-tpl-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;}
.eb-tpl-btn:hover{background:var(--sage-l);border-color:rgba(61,107,79,0.3);}
.eb-var-chip{background:#e8f0f8;color:#2d4570;border:1px solid rgba(61,90,128,0.2);border-radius:6px;padding:5px 8px;font-size:10px;font-weight:600;cursor:pointer;font-family:monospace;}
.eb-var-chip:hover{background:var(--sage);color:#fff;}
.eb-email-block{position:relative;cursor:pointer;border:2px solid transparent;transition:border-color .1s;}
.eb-email-block:hover{border-color:rgba(61,107,79,0.25);}
.eb-email-block.selected{border-color:var(--sage);}
.eb-block-controls{position:absolute;top:0;right:0;display:none;background:var(--sage-d);border-radius:0 0 0 8px;flex-direction:row;z-index:10;}
.eb-email-block:hover .eb-block-controls,.eb-email-block.selected .eb-block-controls{display:flex;}
.eb-block-ctrl-btn{background:none;border:none;color:rgba(255,255,255,.8);padding:5px 8px;cursor:pointer;font-size:13px;display:flex;align-items:center;transition:all .15s;}
.eb-block-ctrl-btn:hover{color:#fff;background:rgba(255,255,255,.1);}
.eb-drop-indicator{height:8px;border-radius:4px;transition:all .15s;margin:2px 0;}
.eb-text-editable:focus{outline:2px solid rgba(61,107,79,0.3);outline-offset:2px;border-radius:4px;}

/* ── STAGE ITEMS (settings) ─────────────────────────────── */
.stage-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);}
.stage-item:last-child{border-bottom:none;}

/* ── TOAST ──────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--text);color:#fff;padding:10px 20px;border-radius:var(--rx);
  font-size:13px;font-weight:500;opacity:0;transition:all .25s;z-index:9999;
  white-space:nowrap;box-shadow:var(--shadow-lg);pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* The undo toast carries a button, so it must accept taps (the plain toast
   stays click-through) and may wrap on a narrow phone. */
#toast-undo{pointer-events:auto;white-space:normal;max-width:calc(100vw - 32px);gap:4px;}

/* ── MOBILE ─────────────────────────────────────────────── */
.mob-view{display:none;}
/* Admin shell (mobileAdminDrawer): desktop keeps the fixed 220px sidebar layout
   that used to live as inline !important styles on #owner-app. */
.admin-shell{display:flex;height:100vh;height:100dvh;overflow:hidden;width:100%;}
.admin-sidebar{height:100vh;height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
.admin-menu-fab{display:none;}
.admin-sidebar-scrim{display:none;}
@media(min-width:769px){
  .admin-shell{flex-direction:row;}
  .admin-sidebar{width:220px;min-width:220px;max-width:220px;flex-shrink:0;}
}
@media(max-width:768px){
  /* Sidebar becomes an off-canvas drawer */
  .admin-shell{flex-direction:row;position:relative;}
  .admin-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1200;width:250px;min-width:250px;max-width:80vw;
    transform:translateX(-105%);transition:transform .22s ease;box-shadow:4px 0 24px rgba(0,0,0,.25);}
  body.admin-sidebar-open .admin-sidebar{transform:translateX(0);}
  .admin-sidebar-scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1100;}
  body.admin-sidebar-open .admin-sidebar-scrim{display:block;}
  .admin-menu-fab{display:flex;align-items:center;justify-content:center;position:fixed;right:14px;bottom:18px;z-index:1300;
    width:52px;height:52px;border-radius:50%;border:none;background:#3D5A80;color:#fff;font-size:22px;cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.3);}
  /* AI help bubble sits above the menu button on phones (they overlapped) */
  #help-bot-bubble{bottom:84px !important;right:14px !important;}
  /* Dashboard: ops strip wraps 2×2 instead of overflowing; main grid stacks */
  .ops-strip{flex-wrap:wrap;}
  .ops-stat{flex:1 1 50%;min-width:50%;border-bottom:1px solid var(--border);}
  .g-main{grid-template-columns:1fr !important;}
  /* Content gets the full width. !important: many views carry inline desktop
     padding (e.g. 24px 28px) which otherwise wins over this rule on phones. */
  .main{width:100%;min-width:0;}
  .content{padding:14px 12px 96px !important;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .g4,.g3,.g2{grid-template-columns:1fr !important;}
  .topbar{flex-wrap:wrap;gap:8px;padding:12px !important;}
  .pg-title{font-size:19px;}
  /* Wide tables scroll instead of clipping */
  .content table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;}
  /* Pipeline columns already scroll horizontally; give them room */
  #o-pipeline .content-col{padding:12px;}
}

/* ── LOGIN ──────────────────────────────────────────────── */
.ob-step{animation:fadeIn .3s ease;}
.note-text{white-space:pre-wrap;font-size:13px;line-height:1.65;word-break:break-word;}
.ob-check-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.ob-check-item:last-child{border-bottom:none;}
.ob-check-item:hover{background:#f7f4ef;}
.ob-check-circle{width:34px;height:34px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted);flex-shrink:0;transition:all .2s;}
.ob-check-circle.done{background:#8FA89B;border-color:#8FA89B;color:#fff;}
.ob-check-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px;}
.ob-check-sub{font-size:12px;color:var(--muted);}
.ob-check-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle;}
.ob-check-badge.done{background:#eef6f2;color:#8FA89B;}
.ob-check-badge.skip{background:#f0ede8;color:var(--muted);}
.ob-chip{padding:8px 14px;border-radius:20px;border:1.5px solid var(--border-2);background:#fff;font-size:13px;cursor:pointer;transition:all .15s;color:var(--text-2);}
.ob-chip:hover{border-color:#3D5A80;color:#3D5A80;background:#edf2f8;}
.chat-tab{transition:all .2s;}
.chat-tab.active{color:#3D5A80 !important;border-bottom-color:#3D5A80 !important;}
.chat-tab:hover{background:var(--surface-2);}
.convo-item{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;}
.convo-item:hover{background:var(--surface-2);}
.convo-item.active{background:#edf2f8;}
.convo-avatar{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:white;flex-shrink:0;}
.convo-name{font-size:13px;font-weight:600;color:var(--text);}
.convo-preview{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.convo-time{font-size:10px;color:var(--text-3);flex-shrink:0;}
.convo-unread{background:#D4845A;color:white;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;flex-shrink:0;}
.msg-bubble{max-width:72%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5;position:relative;}
.msg-mine{background:#3D5A80;color:white;border-radius:14px 14px 4px 14px;margin-left:auto;}
.msg-theirs{background:white;color:var(--text);border-radius:14px 14px 14px 4px;border:1px solid var(--border);}
.msg-system{background:var(--surface-2);color:var(--text-3);border-radius:8px;font-size:11px;text-align:center;padding:6px 12px;margin:0 auto;}
.msg-name{font-size:10px;font-weight:600;color:var(--text-3);margin-bottom:3px;}
.msg-time{font-size:9px;opacity:.6;margin-top:4px;}
.msg-wrap{display:flex;flex-direction:column;}
.msg-wrap.mine{align-items:flex-end;}
.msg-wrap.theirs{align-items:flex-start;}

.ob-chip.selected{border-color:#3D5A80;background:#3D5A80;color:#fff;}

.ob-service-check{display:flex;align-items:center;gap:8px;padding:12px 14px;border:2px solid var(--border2);border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;background:#fff;}
.ob-service-check:hover{border-color:#7A9EC4;background:#f0f7ff;}
.ob-service-check input[type=checkbox]{accent-color:#3D5A80;width:16px;height:16px;flex-shrink:0;}
.ob-service-check:has(input:checked){border-color:#3D5A80;background:#e8f0f8;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:40px;width:100%;max-width:380px;box-shadow:var(--shadow-xl);}
.login-logo{font-family:'Georgia',serif;font-size:28px;font-style:italic;color:var(--sage-d);text-align:center;display:block;margin-bottom:4px;}
.login-sub{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-3);text-align:center;display:block;margin-bottom:32px;}

/* ── MOBILE APP ─────────────────────────────────────────── */
.mob-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-xs);}
.mob-topbar{background:var(--sage-d);color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;}
.mob-nav{display:flex;background:var(--surface);border-top:1px solid var(--border);position:sticky;bottom:0;}
.mob-nav-btn{flex:1;padding:10px 6px;text-align:center;cursor:pointer;border:none;background:none;color:var(--text-3);font-size:10px;font-weight:500;font-family:inherit;transition:color .15s;}
.mob-nav-btn.active{color:var(--sage);}
.mob-nav-btn i{display:block;font-size:20px;margin-bottom:2px;}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--border-3);}

/* Sidebar scrollbar override — must come AFTER the global rule above to win.
   The navy sidebar needs a bright light thumb (the global dark thumb is invisible on navy). */
.sidebar .s-nav::-webkit-scrollbar{width:12px;}
.sidebar .s-nav::-webkit-scrollbar-track{background:rgba(255,255,255,.08);}
.sidebar .s-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.55);border-radius:6px;border:3px solid transparent;background-clip:padding-box;min-height:40px;}
.sidebar .s-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.8);background-clip:padding-box;}
/* Main content + profile panel: visible grey thumb (override the thin global one) */
.content::-webkit-scrollbar{width:10px;}
.content::-webkit-scrollbar-thumb{background:rgba(120,120,120,.4);border-radius:6px;}
.content::-webkit-scrollbar-thumb:hover{background:rgba(120,120,120,.6);}

.sum-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 16px;border-right:1px solid var(--border);flex:1;min-width:80px;}
.sum-cell:last-child{border-right:none;}
.sum-label{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;}
.sum-val{font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:700;color:var(--text);margin-top:2px;}
.sched-member-name{font-size:13px;font-weight:700;color:var(--text);}
.sched-member-role{font-size:11px;color:var(--muted);}

/* ── TEAM FIELD APP ─────────────────────────────────── */
#team-app{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;background:#f0ede8;position:fixed;top:0;left:0;z-index:100;}
.mobile-wrap{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;}
.mob-top{flex-shrink:0;background:#3D5A80;padding:14px 16px;color:#fff;position:relative;overflow:hidden;}
.mob-content{flex:1;overflow-y:auto;padding:16px;}
.mob-view{display:none;flex:1;flex-direction:column;}
.mob-view.active{display:flex;}
.mob-nav{display:flex;border-top:1px solid var(--border);background:#fff;flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:env(safe-area-inset-bottom);}
.mob-nav::-webkit-scrollbar{display:none;}
.mob-nav-item{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 2px;font-size:10.5px;color:var(--muted);cursor:pointer;border:none;background:none;gap:3px;}
.mob-nav-item.active{color:#3D5A80;font-weight:600;}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.tools-grid-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#a8a195;font-weight:700;margin:6px 2px 11px;}
.tool-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid rgba(0,0,0,.04);border-radius:16px;padding:20px 8px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text);box-shadow:0 2px 8px rgba(45,69,112,.05);transition:transform .1s,box-shadow .15s;}
.tool-tile:active{transform:scale(0.97);}
.tool-tile i{font-size:23px;color:#3D5A80;width:48px;height:48px;border-radius:14px;background:#eef2f7;display:flex;align-items:center;justify-content:center;}
.mob-nav-item i{font-size:20px;}
.mob-card{background:#fff;border-radius:16px;padding:18px;margin-bottom:12px;box-shadow:0 2px 10px rgba(45,69,112,0.05);border:1px solid rgba(0,0,0,.04);}

/* Connecteam-style shift card — colored left edge, prominent time, type pill */
.shift-card{position:relative;background:#fff;border-radius:14px;padding:14px 16px 14px 20px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04);overflow:hidden;cursor:pointer;transition:transform .1s,box-shadow .15s;}
.shift-card:active{transform:scale(.99);}
.shift-card.mine{box-shadow:0 2px 8px rgba(61,90,128,.14);}
.shift-edge{position:absolute;left:0;top:0;bottom:0;width:5px;}
.shift-time{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.2px;}
.shift-dur{font-size:12px;font-weight:500;color:var(--muted);margin-left:6px;}
.shift-type-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:20px;}
.shift-client{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-0.2px;margin:6px 0 2px;}
.shift-meta{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-top:4px;}
.shift-addr{display:inline-flex;align-items:center;gap:5px;color:#3D5A80;font-size:13px;font-weight:600;text-decoration:none;margin-top:8px;}
.shift-mine-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#3D5A80;background:#e8f0f8;padding:2px 8px;border-radius:20px;}
.sched-day-head{font-family:'DM Sans',system-ui,sans-serif;font-size:16px;font-weight:500;color:var(--text);letter-spacing:-0.2px;margin:14px 2px 10px;display:flex;align-items:center;gap:8px;}
.sched-day-head::after{content:'';flex:1;height:1px;background:var(--border);}
.sched-day-head.today{color:#3D5A80;}
.sched-day-head.today::before{content:'TODAY';background:#3D5A80;color:#fff;font-size:9px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:20px;}
/* ── Connecteam-style schedule: week strip + month calendar ── */
.wk-bar{display:flex;align-items:center;justify-content:space-between;margin:2px 0 8px;}
.wk-month{display:inline-flex;align-items:center;gap:5px;font-family:'DM Sans',system-ui,sans-serif;font-size:15px;font-weight:600;color:var(--text);background:none;border:none;cursor:pointer;padding:4px 6px;font-family:inherit;}
.wk-month i{font-size:15px;color:var(--muted);transition:transform .15s;}
.wk-month.open i{transform:rotate(180deg);}
.wk-nav{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:6px 10px;line-height:1;}
.wk-ico{background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;padding:6px 8px;}
.wk-ico.active{color:#3D5A80;}
.wk-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px;}
.wk-cell{border:none;background:none;border-radius:12px;padding:7px 0 6px;text-align:center;cursor:pointer;font-family:inherit;position:relative;}
.wk-cell .wk-dow{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:3px;}
.wk-cell .wk-num{font-size:15px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;}
.wk-cell.today .wk-num{color:#3D5A80;font-weight:800;}
.wk-cell.sel .wk-num{background:#3D5A80;color:#fff;}
.wk-dots{display:flex;justify-content:center;gap:3px;margin-top:3px;height:5px;}
.wk-dot{width:5px;height:5px;border-radius:50%;}
.mcal{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:14px;padding:12px 10px;margin-bottom:12px;box-shadow:0 2px 10px rgba(45,69,112,.06);}
.mcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.mcal-dow{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;text-align:center;letter-spacing:.4px;padding-bottom:5px;}
.mcal-cell{border:none;background:none;border-radius:10px;padding:5px 0 4px;text-align:center;cursor:pointer;font-family:inherit;}
.mcal-cell .wk-num{font-size:13px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;}
.mcal-cell.dim .wk-num{color:#c8c4bd;}
.mcal-cell.today .wk-num{color:#3D5A80;font-weight:800;}
.mcal-cell.sel .wk-num{background:#3D5A80;color:#fff;}
.mcal-cell .wk-dots{margin-top:2px;height:4px;}
.mcal-cell .wk-dot{width:4px;height:4px;}
.sched-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border2);border-radius:12px;padding:9px 12px;margin-bottom:12px;}
.sched-search input{flex:1;border:none;outline:none;font-size:14px;font-family:inherit;background:none;color:var(--text);}
.sched-search i{color:var(--muted);font-size:15px;}
.scope-pill{flex:1;padding:9px;border-radius:10px;border:1px solid var(--border2);background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s;}
.scope-pill.active{background:#3D5A80;color:#fff;border-color:#3D5A80;box-shadow:0 2px 6px rgba(61,90,128,.22);}
.ov-stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.ov-stat-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.ov-stat-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:3px;font-weight:600;}
.ov-stat-v{font-family:Georgia,'Times New Roman',serif;font-size:24px;font-weight:700;color:var(--text);letter-spacing:-0.5px;line-height:1.1;}
.ov-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.ov-card-head{padding:14px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.ov-card-title{font-size:12px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:7px;}
.ov-row{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;gap:14px;align-items:center;}
.ov-row-l{font-size:12px;color:var(--muted);min-width:96px;display:flex;align-items:center;gap:8px;font-weight:500;}
.ov-row-l i{font-size:15px;opacity:.55;}
.ov-row-v{font-size:14px;color:var(--text);font-weight:500;}

/* Client profile redesign — editorial header + stats */
.cp-hero{padding:24px 24px 22px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3D5A80 0%,#456592 55%,#587a9c 100%);flex-shrink:0;}
.cp-hero-accent{position:absolute;top:0;right:0;width:180px;height:100%;background:linear-gradient(90deg,transparent,rgba(212,132,90,.13));pointer-events:none;}
.cp-hero-line{height:3px;width:42px;background:#D4845A;border-radius:2px;margin-bottom:12px;}
.cp-hero-eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#A79F93;font-weight:600;margin-bottom:6px;}
.cp-hero-name{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:30px;font-weight:500;color:#fff;letter-spacing:-0.5px;line-height:1.05;}
.cp-pill{font-size:11px;font-weight:600;padding:4px 11px;border-radius:20px;}
.cp-pill-active{background:rgba(143,168,155,.25);color:#cfe0d6;border:1px solid rgba(143,168,155,.42);}
.cp-pill-recurring{background:rgba(212,132,90,.2);color:#f0c4ab;border:1px solid rgba(212,132,90,.36);}
.cp-stat3{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 16px;display:flex;align-items:center;gap:13px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.cp-stat3-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.cp-stat3-v{font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:600;color:var(--text);letter-spacing:-0.3px;line-height:1;}
.cp-stat3-l{font-size:10.5px;color:var(--muted);margin-top:3px;letter-spacing:.3px;}
.cp-next{background:linear-gradient(135deg,#8FA89B 0%,#7a9788 100%);border-radius:14px;padding:17px 19px;}
.cp-next-lab{font-family:'DM Sans',system-ui,sans-serif;font-size:14px;font-weight:600;color:#fff;margin-bottom:4px;}
.cp-next-date{font-family:'DM Sans',system-ui,sans-serif;font-size:23px;font-weight:600;color:#fff;line-height:1.1;}
.cp-next-sub{font-size:12px;color:#e4ece7;margin-top:4px;}
.cp-tabs-real{display:flex;border-bottom:1px solid var(--border);background:var(--surface);padding:0 18px;gap:2px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;flex-shrink:0;}
.cp-tabs-real::-webkit-scrollbar{display:none;}

/* Field app — logo, greeting, stats, sections, buttons */
.mob-logo{font-size:17px;font-weight:700;letter-spacing:-0.3px;color:#fff;}
.mob-greet{font-size:13px;color:rgba(255,255,255,.8);margin-top:4px;}
.mob-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.mob-stat{background:#fff;border-radius:16px;padding:18px 16px;box-shadow:0 2px 10px rgba(45,69,112,0.05);border:1px solid rgba(0,0,0,.04);text-align:center;}
.mob-stat-v{font-family:Georgia,'Times New Roman',serif;font-size:28px;font-weight:500;color:#3D5A80;letter-spacing:-0.3px;line-height:1.05;}
.mob-stat-l{font-size:11px;font-weight:600;color:#8a93a0;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;}
.mob-sec{font-size:12.5px;font-weight:700;color:#7a8597;text-transform:uppercase;letter-spacing:.9px;margin:24px 4px 12px;}
.mob-sec:first-child{margin-top:4px;}
/* Editorial header for field sub-screens (supply order, usage, consult, reimbursement) */
.mob-hero-head{margin:2px 2px 16px;}
.mob-hero-head .mhh-line{height:3px;width:34px;background:#D4845A;border-radius:2px;margin-bottom:9px;}
.mob-hero-head .mhh-eyebrow{font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:#9aa3b2;font-weight:700;margin-bottom:3px;}
.mob-hero-head .mhh-title{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:23px;font-weight:500;color:var(--text);letter-spacing:-0.4px;line-height:1.1;}
.mob-hero-head .mhh-sub{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:7px;}
.mob-sent-banner{background:#eef2ef;border:1px solid #d9e3dd;border-radius:11px;padding:11px 13px;margin-bottom:13px;display:flex;align-items:center;gap:9px;}
.mob-sent-banner i{color:#5d7568;font-size:18px;}
.mob-sent-banner .msb-t{font-size:12.5px;font-weight:600;color:#4a6353;}
.mob-sent-banner .msb-s{font-size:11px;color:#6b8579;}
.mob-btn{width:100%;padding:15px;border-radius:12px;font-size:16px;font-weight:600;border:none;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s,box-shadow .15s;}
.mob-btn:active{transform:scale(.985);}
.mob-btn-clockin{background:#3D5A80;color:#fff;box-shadow:0 2px 8px rgba(61,90,128,.3);}
.mob-btn-clockout{background:#c0392b;color:#fff;box-shadow:0 2px 8px rgba(192,57,43,.25);}
/* Bigger tap targets for field use */
.mob-nav-item{padding:10px 6px;min-height:64px;}
.mob-nav-item i{font-size:24px;}
.mob-nav-item i{font-size:21px;}

/* ── GLOBAL READABILITY PASS ───────────────────────────────
   Desktop gets a gentle 10% scale-up of the entire interface,
   plus floors on the smallest recurring text. Field app (phone)
   keeps its touch-tuned sizes. */
@media (min-width: 901px){
  /* (removed body zoom:1.1 — it scaled the whole UI 10% larger than the layout
     engine measured, which pushed the sidebar profile footer off-screen at normal
     zoom. Base typography was raised in its own pass, so this is no longer needed.) */
}
.pg-sub{font-size:14px;}
.card-title{font-size:16px;}
.f-label{font-size:13.5px;}
.nav-item{font-size:14px;}
.s-div{font-size:12.5px; letter-spacing:.6px;}
.badge{font-size:11px;}
.btn{font-size:14px;}
table td, table th{font-size:14px;}
.card-link{font-size:13px;margin-left:auto;}

/* recurringTimeOff: dur-pill buttons finally get visible states — the .active
   class existed for years with NO styling, so toggles gave zero feedback. */
.dur-pills{display:flex;gap:6px;}
.dur-pill{background:var(--white,#fff);border:1.5px solid var(--border,#ddd);border-radius:18px;padding:6px 13px;font-size:12px;font-weight:600;color:var(--muted,#777);cursor:pointer;font-family:inherit;transition:all .12s;}
.dur-pill:hover{border-color:#3D5A80;color:#3D5A80;}
.dur-pill.active{background:#3D5A80;border-color:#3D5A80;color:#fff;box-shadow:0 2px 6px rgba(61,90,128,.3);}
/* invRoleGate: inventory role — hide every money surface in the desktop app.
   Client files & proposals stay visible; invoices/financials do not. */
body.role-inventory [onclick*="'invoices'"],
body.role-inventory [onclick*="'bizreports'"],
body.role-inventory #dash-financials,
body.role-inventory .cp-stat3:has(#cp-total-spent),
body.role-inventory .cp-stat3:has(#cp-outstanding){display:none !important;}

/* tsPretty: By Day timesheets — organizer-worthy polish */
.tsd-card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 2px 14px rgba(61,90,128,.06);margin-bottom:18px;overflow:hidden;}
.tsd-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 14px;background:linear-gradient(135deg,#f4f8f5 0%,#eef3f7 100%);border-bottom:1px solid var(--border);}
.tsd-day{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;color:#2c3e50;letter-spacing:-.2px;}
.tsd-date{font-size:11.5px;color:var(--muted);margin-top:1px;}
.tsd-pill{background:#2d6b50;color:#fff;font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:20px;box-shadow:0 2px 6px rgba(45,107,80,.25);}
.tsd-group{padding:12px 20px 4px;}
.tsd-gh{display:flex;align-items:center;gap:9px;margin-bottom:6px;}
.tsd-gi{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.tsd-gn{font-size:13.5px;font-weight:700;color:var(--text);}
.tsd-gm{font-size:11px;color:var(--muted);font-weight:500;}
.tsd-row{display:flex;align-items:center;gap:11px;padding:8px 0 8px 37px;border-bottom:1px solid #f4f2ee;transition:background .15s;}
.tsd-row:last-child{border-bottom:none;}
.tsd-row:hover{background:#faf9f6;}
.tsd-av{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0;letter-spacing:.3px;}
.tsd-who{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text);}
.tsd-time{font-size:12px;color:var(--muted);background:#f6f4f0;border-radius:8px;padding:3px 10px;white-space:nowrap;}
.tsd-hrs{font-size:13px;font-weight:700;color:#2c3e50;min-width:56px;text-align:right;}
.tsd-hrs.warn{color:#b5483c;}
.tsd-edit{opacity:.45;transition:opacity .15s;}
.tsd-row:hover .tsd-edit{opacity:1;}
.tsd-stats{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
/* textSize: the crew reported text too small on their phones. Rather than
   chase hundreds of hard-coded sizes, scale the field app as a whole. zoom
   scales layout with the text (so tap targets grow too) and is supported on
   iOS Safari and Chrome; the fallback keeps text alone readable elsewhere. */
#team-app{ zoom: var(--wd-text-scale, 1); }
@supports not (zoom: 1){
  #team-app{ font-size: calc(1rem * var(--wd-text-scale, 1)); }
  #team-app .mob-card, #team-app .btn, #team-app input, #team-app select, #team-app textarea{
    font-size: calc(1em * var(--wd-text-scale, 1));
  }
}
/* qtyTypeIn: quantity numbers can be tapped to type an amount */
.supply-qty-num,.cp-cqty,[id^="cpq-"],[id^="supply-qty-"]{cursor:text;border-bottom:1.5px dashed #c9c1b4;padding:0 3px;border-radius:2px;}
.supply-qty-num:hover,.cp-cqty:hover,[id^="cpq-"]:hover,[id^="supply-qty-"]:hover{background:#f3efe8;}
/* tsdWeekBar: the By Day hours-per-day strip had markup but no styles, so each
   day rendered as stacked plain text. A row of mini bar columns. */
.tsd-week{display:flex;gap:8px;align-items:flex-end;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px 10px;margin:0 0 18px;overflow-x:auto;}
.tsd-wd{flex:1;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.tsd-wd-bar{width:100%;max-width:38px;height:64px;background:var(--warm,#f3efe8);border-radius:7px;display:flex;align-items:flex-end;overflow:hidden;}
.tsd-wd-bar span{display:block;width:100%;background:#8FA89B;border-radius:7px 7px 0 0;min-height:0;}
.tsd-wd-v{font-size:13px;font-weight:600;color:var(--text);line-height:1.1;}
.tsd-wd-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.tsd-wd.is-zero .tsd-wd-v{color:var(--hint);font-weight:400;}
.tsd-stat{flex:1;min-width:130px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:13px 16px;box-shadow:0 1px 8px rgba(61,90,128,.05);}
.tsd-sv{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:600;color:#2c3e50;}
.tsd-sl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-top:2px;}


/* mediaPretty: Media Library — portfolio treatment */
/* mediaPolish: the grid read as heavy tiles — dark scrim across the bottom of
   every image, a lift-and-shadow hover on each one, and a caption fighting the
   photo for attention. Photos should be the loudest thing on a photo page.
   Quiet frame, caption below the image, hover reveals rather than lifts. */
.med-card{border-radius:12px;position:relative;background:transparent;box-shadow:none;transition:none;cursor:pointer;}
.med-card:hover{transform:none;box-shadow:none;}
.med-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s;}
.med-card:hover img{transform:scale(1.045);}
.med-img{aspect-ratio:1;overflow:hidden;border-radius:12px;background:#F2EFEA;
  box-shadow:0 1px 2px rgba(45,69,112,.06);transition:box-shadow .2s;}
.med-card:hover .med-img{box-shadow:0 4px 16px rgba(45,69,112,.14);}
.med-cap{position:static;padding:8px 2px 0;background:none;color:var(--text);font-size:12px;font-weight:500;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none;}
.med-cap .mc-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--text);}
.med-cap .mc-s{font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#5E7A6C;background:#EEF4F1;padding:2px 7px;border-radius:20px;flex-shrink:0;}
.med-chk{position:absolute;top:8px;left:8px;z-index:2;width:22px;height:22px;border-radius:7px;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.55;transition:opacity .15s;background:rgba(255,255,255,.7);}
/* mediaArchive-Aug17: was opacity:0 until hover — undiscoverable, and unreachable on touch screens */
.med-card:hover .med-chk,.med-chk.on{opacity:1;}
.med-chk.on{background:var(--sage);}
.med-ig{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border-radius:9px;background:#E1306C;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s;box-shadow:0 2px 6px rgba(0,0,0,.3);}
.med-card:hover .med-ig{opacity:1;}
.med-sel{outline:3px solid var(--sage);outline-offset:-3px;}
.med-gh{display:flex;align-items:center;gap:10px;margin:22px 0 12px;padding-bottom:9px;border-bottom:1px solid #EDE9E3;}
.med-gi{width:28px;height:28px;border-radius:9px;background:#EEF4F1;display:flex;align-items:center;justify-content:center;font-size:15px;}
.med-gn{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:18px;font-weight:500;color:#22304A;}
.med-gm{font-size:11px;color:#A79F93;font-weight:500;letter-spacing:.3px;}
.ba-card{border-radius:12px;overflow:hidden;background:#fff;border:none;box-shadow:0 1px 2px rgba(45,69,112,.05),0 1px 3px rgba(45,69,112,.04);transition:box-shadow .2s;}
.ba-card:hover{box-shadow:0 4px 18px rgba(45,69,112,.12);}


/* ═══ cohesionPass: app-wide design polish (Aug 13) ═══
   Shared primitives upgraded so every page inherits the same feel:
   unified radii, tactile buttons, breathing tables, editorial titles. */

/* Cards: one radius family with the modals + new pages */
.card{border-radius:12px;box-shadow:0 1px 2px rgba(45,69,112,.05), 0 1px 3px rgba(45,69,112,.04);}

/* Page titles: the serif voice of the editorial pages, everywhere */
.pg-title{font-family:'Fraunces',Georgia,serif;font-size:23px;font-weight:600;letter-spacing:-0.3px;}

/* Buttons: tactile — press-down, lift on primary, visible focus */
.btn{transition:all .16s ease;}
.btn:active{transform:scale(.97);}
.btn:focus-visible{outline:2px solid #8FA89B;outline-offset:2px;}
.btn-p{background:linear-gradient(180deg,#41618a 0%,#3D5A80 100%);box-shadow:0 1px 3px rgba(61,90,128,.35);}
.btn-p:hover{box-shadow:0 4px 12px rgba(61,90,128,.35);transform:translateY(-1px);}
.btn-p:active{transform:scale(.97);}

/* Stats: gentle lift, serif numbers already in place */
.stat:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(30,40,60,.09);}

/* Tables: rows respond */
tbody tr{transition:background .13s;}
tbody tr:hover{background:#faf9f6;}

/* Inputs: calm sage focus ring instead of browser default */
.f-input:focus{border-color:#8FA89B;box-shadow:0 0 0 3px rgba(143,168,155,.16);outline:none;}

/* Toast: soft pill with real presence */
.toast{border-radius:22px;box-shadow:0 8px 24px rgba(15,22,32,.28);padding:11px 22px;}

/* Views: gentle entrance when switching pages */
@keyframes pageIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.view:not(.hidden){animation:pageIn .22s ease;}

/* Scrollbars: slim + warm (WebKit) */
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#d9d4ca;border-radius:8px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:#c4beb2;border:2px solid transparent;background-clip:content-box;}

/* Text selection in brand sage */
::selection{background:rgba(143,168,155,.35);}


/* cohesionPass 2: section headers + login first-impression */
.s-div{position:relative;font-size:11.5px;letter-spacing:1.1px;color:#8a8478;padding:24px 0 10px;display:flex;align-items:center;gap:12px;}
.s-div::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border) 0%,transparent 100%);}

.login-wrap{background:
  radial-gradient(ellipse 60% 50% at 20% 10%, rgba(143,168,155,.14), transparent),
  radial-gradient(ellipse 50% 40% at 85% 90%, rgba(212,132,90,.10), transparent),
  var(--bg);}
.login-card{border-radius:24px;box-shadow:0 12px 48px rgba(30,40,60,.14);border:1px solid rgba(255,255,255,.6);animation:pageIn .35s ease;}
.login-logo{font-family:'Fraunces',Georgia,serif;font-size:27px;font-weight:600;letter-spacing:-.4px;color:#2c3e50;}
.login-tagline{font-size:12px;letter-spacing:.4px;}


/* schedPretty: schedule week/day/month polish */
.sj-chip{border-radius:9px;box-shadow:0 1px 4px rgba(30,40,60,.10);transition:transform .13s,box-shadow .13s;position:relative;overflow:hidden;}
.sj-chip:hover{transform:translateY(-1px) scale(1.015);box-shadow:0 4px 12px rgba(30,40,60,.18);z-index:3;}
.sum-cell{padding:13px 16px;}
.sum-val{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:600;letter-spacing:-.3px;}
.sched-head{letter-spacing:.6px;}
.mcal-grid{gap:5px;}
.mcal-cell{transition:background .13s,transform .13s;}
.mcal-cell:hover{background:var(--surface-2);transform:scale(1.04);}



/* ============================================================================
   WORKDESK FOUNDATION
   Shared vocabulary for the visual refresh. Adding classes only — nothing in
   here restyles an existing element, so this file can ship on its own and
   change nothing until a page opts in by using the classes.

   Why it exists: the app carries ~4,900 inline style attributes and four
   separate one-off page-hero rules (#o-invoices .topbar .pg-title and friends,
   each re-inventing the kicker with its own ::before). Same trap as the
   duplicated revenue maths — fixing one never fixed the rest. Pages get
   converted onto these classes as they're touched.
   ========================================================================= */
:root{
  /* Type. Display carries the personality; body does the work; script is used
     ONCE per page as the hand-written accent and nowhere else. */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-script:'Caveat',cursive;

  /* Type scale (Elements of Typographic Style, ~1.25 minor third off 16px). */
  --t-kicker:11px;
  --t-body:14px;
  --t-lede:16px;
  --t-stat:30px;
  --t-h2:19px;
  --t-h1:40px;

  /* Page furniture. The right-hand column is a fixed rail on every screen
     that has one, so cards line up across pages. */
  --rail-w:308px;
  --gutter:20px;
  --hero-h:150px;
}
/* Hero -------------------------------------------------------------------
   Kicker / serif headline / lede, with room at the right for a photo band or
   an accent card that bleeds to the page edge. */
.ed-hero{position:relative;padding:26px 28px 22px;overflow:hidden;}
.ed-hero-in{position:relative;z-index:2;max-width:min(62%,640px);}
.ed-kicker{font-family:var(--font-body);font-size:var(--t-kicker);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px;}
.ed-h1{font-family:var(--font-display);font-size:var(--t-h1);font-weight:500;
  line-height:1.06;letter-spacing:-.02em;color:var(--text);margin:0;}
.ed-lede{font-family:var(--font-body);font-size:var(--t-lede);color:var(--text-2);
  margin-top:9px;max-width:62ch;}
.ed-hero-meta{font-family:var(--font-body);font-size:13px;color:var(--text-3);margin-top:8px;}
/* The one hand-written moment per page. Deliberately not a heading. */
.ed-script{font-family:var(--font-script);font-size:25px;line-height:1.16;
  color:var(--text-2);transform:rotate(-3deg);}
.ed-script-rule{display:block;width:104px;height:5px;margin-top:5px;border-radius:3px;
  background:var(--wd-peach);opacity:.5;}
/* Accent panel at the hero's right edge (quote card, promo, illustration). */
.ed-hero-accent{position:absolute;right:0;top:0;bottom:0;width:min(46%,560px);
  display:flex;align-items:center;gap:16px;padding:0 26px;background:var(--wd-warm);
  border-radius:var(--rl) 0 0 var(--rl);}
/* Stat card ---------------------------------------------------------------
   Tinted icon disc, label, big number, delta line. */
.ed-stat{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--rl);padding:18px 20px;
  box-shadow:var(--shadow-xs);}
.ed-stat-ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:19px;background:var(--sage-l);color:var(--sage);}
.ed-stat-ic.is-rose{background:#fdecea;color:#c0392b;}
.ed-stat-ic.is-sand{background:#fdf3e3;color:#b8860b;}
.ed-stat-ic.is-sage{background:var(--wd-green-l);color:#4b7f62;}
.ed-stat-l{font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--text-2);}
.ed-stat-v{font-family:var(--font-display);font-size:var(--t-stat);font-weight:600;
  line-height:1.12;color:var(--text);margin-top:1px;letter-spacing:-.01em;}
.ed-stat-sub{font-family:var(--font-body);font-size:12px;color:var(--text-3);margin-top:2px;}
.ed-up{color:#2d7a3a;font-weight:600;}
.ed-down{color:#c0392b;font-weight:600;}
/* Panel ------------------------------------------------------------------- */
.ed-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);
  box-shadow:var(--shadow-xs);padding:18px 20px;}
.ed-panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:14px;}
.ed-panel-title{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-size:var(--t-h2);font-weight:600;color:var(--text);letter-spacing:-.01em;}
.ed-panel-link{font-family:var(--font-body);font-size:12.5px;font-weight:500;
  color:var(--sage);text-decoration:none;white-space:nowrap;}
.ed-panel-link:hover{text-decoration:underline;}
/* Two-column page body with the fixed rail. */
.ed-cols{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);
  gap:var(--gutter);align-items:start;}
.ed-rail{display:flex;flex-direction:column;gap:var(--gutter);}
/* Quick actions: 2-up tiles. */
.ed-qa{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ed-qa-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:16px 8px;background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--rl);font-family:var(--font-body);font-size:12.5px;font-weight:500;
  color:var(--text-2);cursor:pointer;text-align:center;transition:border-color .15s,background .15s;}
.ed-qa-btn:hover{border-color:var(--sage-m);background:var(--sage-l);}
.ed-qa-btn i{font-size:19px;color:var(--sage);}
/* Tip block. Dismissible; never a modal. */
.ed-tip{display:flex;gap:11px;align-items:flex-start;background:var(--wd-green-l);
  border-radius:var(--rl);padding:14px 16px;font-family:var(--font-body);font-size:12.5px;
  color:var(--text-2);line-height:1.5;}
.ed-tip-t{font-weight:600;color:var(--text);display:block;margin-bottom:2px;}
/* Filter bar -------------------------------------------------------------- */
.ed-filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px;}
.ed-filters .ed-spacer{margin-left:auto;}
.ed-select{font-family:var(--font-body);font-size:13px;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border-2);border-radius:9px;
  padding:7px 11px;cursor:pointer;}
/* Stage chevrons ----------------------------------------------------------
   Renders whatever stages the business actually has — pipelines are fully
   customisable, so this must survive three stages or nine. Count is set at
   render time via --n; nothing here hardcodes seven. */
.ed-chevrons{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:5px;}
.ed-chev{position:relative;padding:13px 8px;text-align:center;background:var(--surface-2);
  border-radius:7px;min-width:0;}
.ed-chev-v{font-family:var(--font-display);font-size:23px;font-weight:600;color:var(--text);line-height:1;}
.ed-chev-l{font-family:var(--font-body);font-size:11px;color:var(--text-2);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:1180px){
  .ed-cols{grid-template-columns:minmax(0,1fr);}
  .ed-hero-accent{display:none;}
  .ed-hero-in{max-width:100%;}
  :root{--t-h1:31px;}
  .ed-chevrons{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));}
}
@media (prefers-reduced-motion:reduce){
  .ed-qa-btn{transition:none;}
}
.ed-qa-btn:focus-visible,.ed-select:focus-visible{outline:2px solid var(--sage);outline-offset:2px;}

/* Dashboard adoption ------------------------------------------------------
   Scoped to #o-dashboard so nothing else moves. Card markup is untouched —
   the per-user hide/reorder system keys off data-key and the drag grips, so
   restyling by selector keeps all of that working. */
#o-dashboard .card-title{font-family:var(--font-display);font-size:var(--t-h2);
  font-weight:600;letter-spacing:-.01em;}
#o-dashboard .card{border-radius:var(--rl);box-shadow:var(--shadow-xs);}
#o-dashboard .ops-strip{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);box-shadow:var(--shadow-xs);padding:4px 0;}
#o-dashboard .ops-v{font-family:var(--font-display);font-weight:600;}
#o-dashboard .ops-l{font-family:var(--font-body);}
#o-dashboard .ed-hero{background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 54%,var(--wd-warm) 54%);}

/* cardHeadSpacing: .card-head is a 3-item flex (grip / title / link) relying on
   space-between, which leaves the action link sitting hard against the title
   with nothing to separate them. Let the title take the free space and push the
   link to the right edge, with a real gap and a little breathing room around
   it. Applies to every .card-head in the app, not just the dashboard, so the
   headers stay consistent page to page. */
.card-head{gap:10px;}
.card-head .card-title{flex:1 1 auto;min-width:0;}
.card-head .card-link{
  margin-left:auto;flex:0 0 auto;white-space:nowrap;margin-inline-start:18px;
  font-family:var(--font-body);font-weight:500;color:var(--sage);
  padding:4px 8px;border-radius:7px;cursor:pointer;
  transition:background .15s,color .15s;
}
.card-head .card-link:hover{background:var(--sage-l);color:var(--sage-d);}
@media (prefers-reduced-motion:reduce){ .card-head .card-link{transition:none;} }

/* Page adoption: hero ground + display type, scoped per page. */
#o-supplypacks .ed-hero,#o-bizreports .ed-hero,#o-pipeline .ed-hero,#o-media .ed-hero{
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 54%,var(--wd-warm) 54%);}
.ed-hero-compact{padding:16px 20px 14px;}
.ed-hero-compact .ed-h1{font-size:29px;}
#o-supplypacks .card-title,#o-bizreports .card-title,#o-pipeline .card-title{
  font-family:var(--font-display);font-size:var(--t-h2);font-weight:600;letter-spacing:-.01em;}
#o-bizreports .stat-v,#o-supplypacks .stat-v{font-family:var(--font-display);font-weight:600;}

#o-templates .ed-hero,#o-automations .ed-hero{
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 54%,var(--wd-warm) 54%);}
#o-templates .card-title,#o-automations .card-title{font-family:var(--font-display);
  font-size:var(--t-h2);font-weight:600;letter-spacing:-.01em;}
/* Note panel that sits beside the script line in the Templates hero. */
.ed-hero-note{display:flex;gap:11px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px;max-width:290px;
  font-family:var(--font-body);font-size:12.5px;line-height:1.5;color:var(--text-2);
  box-shadow:var(--shadow-xs);}
.ed-hero-note i{font-size:19px;color:var(--sage);flex:0 0 auto;}
@media (max-width:1320px){ .ed-hero-note{display:none;} }

/* Tab rows: the mockups use quiet text tabs with a single accent underline
   rather than emoji pills. Icons replace the emoji so they inherit colour and
   size. One rule for every tab row in the app. */
.pipe-tab-row{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--border);}
.pipe-tab-row .pipe-tab-btn{background:none;border:none;border-radius:0;
  padding:10px 15px;font-family:var(--font-body);font-size:13.5px;font-weight:500;
  color:var(--text-3);cursor:pointer;border-bottom:2px solid transparent;
  display:inline-flex;align-items:center;gap:7px;}
.pipe-tab-row .pipe-tab-btn i{font-size:16px;opacity:.85;}
.pipe-tab-row .pipe-tab-btn:hover{color:var(--text-2);}
.pipe-tab-row .pipe-tab-btn.active{color:var(--text);font-weight:600;
  border-bottom-color:var(--wd-peach);background:none;}
/* The pipeline's service tabs stay pills — they're filters, not sections. */
#pipeline-service-tabs{border-bottom:none;}
#pipeline-service-tabs .pipe-tab-btn{border-bottom:none;border-radius:8px;padding:7px 15px;}
#pipeline-service-tabs .pipe-tab-btn.active{background:#3D5A80;color:#fff;}

/* Reports: paired panels. Two columns where the content is comparable, full
   width where it isn't (a 12-month trend needs the horizontal room). */
.ed-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media (max-width:1080px){ .ed-report-grid{grid-template-columns:1fr;} }
#o-bizreports .ed-stat-v{color:var(--text);}
#o-bizreports .s-div{font-family:var(--font-display);font-size:var(--t-h2);font-weight:600;}

/* Media group headers: name leads, meta reads as one quiet line, action sits
   at the right edge like every other panel header in the app. */
.med-gh{gap:11px;}
.med-gi{background:var(--sage-l);color:var(--sage);}
.med-gi i{font-size:15px;}
.med-gn{font-family:var(--font-display);font-style:normal;font-size:16px;font-weight:600;color:var(--text);}
.med-gm{font-family:var(--font-body);font-size:12px;color:var(--text-3);font-weight:400;letter-spacing:0;margin-left:7px;}
.med-gh .btn{margin-left:auto;flex:0 0 auto;}
/* Before / after chips on paired sets. */
.ed-ba-chip{position:absolute;bottom:7px;left:7px;background:rgba(255,255,255,.94);
  color:var(--text);font-family:var(--font-body);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:5px;
  box-shadow:var(--shadow-xs);}

/* Dashboard rhythm: cards were 18px apart with a 16px column gap, which reads
   as one dense block rather than distinct widgets. Give them room, and make
   the vertical and horizontal gaps match so the grid feels even. Scoped to the
   dashboard so no other page's spacing shifts. */
#o-dashboard .g-main{gap:22px;align-items:start;}
#o-dashboard #dash-col,#o-dashboard #dash-col-left{display:flex;flex-direction:column;gap:22px;}
#o-dashboard .dash-card,#o-dashboard #dash-col .card,#o-dashboard #dash-col-left .card{margin-bottom:0;}
#o-dashboard .g4{gap:16px;margin-bottom:22px;}
#o-dashboard .ops-strip{margin-bottom:22px;}
#o-dashboard #dash-auto-health:not(:empty){margin-bottom:22px;}
@media (max-width:900px){
  #o-dashboard .g-main{grid-template-columns:1fr;}
}


/* Template cards: icon disc, name, description, tags, actions. */
.ed-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;}
.ed-tpl-card{display:flex;gap:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);box-shadow:var(--shadow-xs);padding:18px;}
.ed-tpl-ic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;font-size:21px;background:var(--sage-l);color:var(--sage);}
.ed-tpl-ic.is-blue{background:var(--sage-l);color:var(--sage);}
.ed-tpl-ic.is-rose{background:#fdecea;color:#c0605a;}
.ed-tpl-ic.is-sage{background:var(--wd-green-l);color:#4b7f62;}
.ed-tpl-ic.is-sand{background:#fdf3e3;color:#b8860b;}
.ed-tpl-ic.is-violet{background:#f1eefc;color:#6b48c8;}
.ed-tpl-name{font-family:var(--font-display);font-size:15.5px;font-weight:600;color:var(--text);letter-spacing:-.01em;}
.ed-tpl-desc{font-family:var(--font-body);font-size:12.5px;color:var(--text-3);
  line-height:1.5;margin-top:4px;}
.ed-tpl-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.ed-tag{font-family:var(--font-body);font-size:10.5px;font-weight:600;padding:3px 9px;
  border-radius:6px;background:var(--surface-2);color:var(--text-2);}
.ed-tag.is-blue{background:var(--sage-l);color:var(--sage);}
.ed-tag.is-sage{background:var(--wd-green-l);color:#4b7f62;}
.ed-tpl-actions{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap;}
.ed-tpl-new{display:flex;align-items:center;gap:14px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--rl);padding:16px 18px;}
.ed-tpl-new-ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--surface);
  border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--text-3);}

/* Dashboard density pass. The clutter wasn't only the gaps — every card wore a
   gradient header with a 3px coloured left bar, so nine cards meant nine
   competing accents stacked down the page. Quiet the chrome, widen the gaps,
   and give the card bodies room to breathe. */
#o-dashboard .g-main{gap:28px;}
#o-dashboard #dash-col,#o-dashboard #dash-col-left{gap:28px;}
#o-dashboard .g4{gap:18px;margin-bottom:28px;}
#o-dashboard .ops-strip{margin-bottom:28px;}
/* Flat header, hairline rule, accent reduced to a small dot of colour on the
   title rather than a bar down the card edge. */
#o-dashboard .dash-card > .card-head{
  background:var(--surface);border-left:none;
  border-bottom:1px solid var(--border);padding:17px 20px;}
#o-dashboard .dash-card > .card-head .card-title{
  color:var(--text);display:inline-flex;align-items:center;gap:9px;}
#o-dashboard .dash-card > .card-head .card-title::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--dash-accent,#7A9EC4);}
/* Room inside the cards. */
#o-dashboard .dash-card > .card-head + div{padding-top:4px;}
#o-dashboard .dash-card table{margin:2px 0;}
#o-dashboard .dash-card table th{padding-top:12px;}
#o-dashboard .act-item{padding:11px 20px;}
/* Stage strip: taller cells, more air between them. */
#o-dashboard .ed-chevrons{gap:8px;padding:18px 20px !important;}
#o-dashboard .ed-chev{padding:16px 10px;}
/* Quick actions tiles were tight against the card edge. */
#o-dashboard .ed-qa{gap:12px;}
#o-dashboard .ed-qa-btn{padding:19px 10px;}

/* Email path flow: stage cards with arrows between them. */
.ed-flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:6px;}
.ed-flow-step{display:flex;align-items:stretch;min-width:0;}
.ed-flow-col{display:flex;flex-direction:column;min-width:236px;width:236px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);
  box-shadow:var(--shadow-xs);overflow:hidden;}
.ed-flow-head{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.ed-flow-head i{font-size:18px;flex:0 0 auto;}
.ed-flow-stage{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--text);}
.ed-flow-count{font-family:var(--font-body);font-size:11.5px;color:var(--text-3);margin-top:1px;}
.ed-flow-body{display:flex;flex-direction:column;gap:8px;padding:12px;flex:1;}
.ed-flow-mail{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:9px;padding:10px 11px;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;}
.ed-flow-mail:hover{border-color:var(--sage-m);box-shadow:var(--shadow-xs);}
.ed-flow-mail.is-off{opacity:.55;}
.ed-flow-mail-ic{font-size:15px;color:var(--sage);flex:0 0 auto;}
.ed-flow-mail-t{font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ed-flow-mail-s{font-family:var(--font-body);font-size:11px;color:var(--text-3);
  margin-top:2px;display:flex;align-items:center;gap:4px;}
.ed-flow-mail-s i{font-size:11px;}
.ed-flow-add{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  background:none;border:1px dashed var(--border-3);border-radius:9px;padding:9px;
  font-family:var(--font-body);font-size:12px;color:var(--text-3);cursor:pointer;}
.ed-flow-add:hover{border-color:var(--sage-m);color:var(--sage);}
.ed-flow-arrow{display:flex;align-items:center;padding:0 9px;flex-shrink:0;}
.ed-flow-arrow i{font-size:17px;color:var(--text-4);}
@media (prefers-reduced-motion:reduce){ .ed-flow-mail{transition:none;} }

/* Data table used by Sent Proposals (and reusable elsewhere). */
.ed-table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:13px;}
.ed-table thead th{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--surface-2);}
.ed-table thead th.ed-sortable{transition:color .12s,background .12s;}
.ed-table thead th.ed-sortable:hover{color:var(--text);background:var(--surface-3,var(--surface-2));}
.ed-table tbody td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
.ed-table tbody tr:last-child td{border-bottom:none;}
.ed-table tbody tr:hover{background:var(--surface-2);}
.ed-avatar{width:30px;height:30px;border-radius:50%;background:var(--sage-l);color:var(--sage);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 auto;}
.ed-pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;}
.ed-pill.is-gray{background:var(--surface-2);color:var(--text-2);}
.ed-pill.is-blue{background:var(--sage-l);color:var(--sage);}
.ed-pill.is-amber{background:#fdf3e3;color:#96770f;}
.ed-pill.is-green{background:var(--wd-green-l);color:#3f6b52;}
.ed-row-actions{display:flex;gap:3px;justify-content:flex-end;align-items:center;}
.ed-ico{background:none;border:none;cursor:pointer;color:var(--text-3);padding:6px;
  border-radius:7px;line-height:0;}
.ed-ico:hover{background:var(--sage-l);color:var(--sage);}
.ed-ico i{font-size:16px;}
.ed-menu-wrap{position:relative;display:inline-block;}
.ed-menu{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--surface);
  border:1px solid var(--border-2);border-radius:10px;box-shadow:0 8px 24px rgba(45,69,112,.16);
  min-width:210px;padding:5px;z-index:40;}
.ed-menu-wrap.open .ed-menu{display:block;}
.ed-menu button{display:block;width:100%;text-align:left;background:none;border:none;
  padding:8px 11px;border-radius:7px;font-family:var(--font-body);font-size:12.5px;
  color:var(--text-2);cursor:pointer;white-space:nowrap;}
.ed-menu button:hover{background:var(--surface-2);}
.ed-table-foot{padding:11px 14px;font-family:var(--font-body);font-size:12px;color:var(--text-3);
  border-top:1px solid var(--border);}

#o-clients .ed-hero,#o-vendors .ed-hero{
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 54%,var(--wd-warm) 54%);}
/* Category chips on Vendors: quiet pills, filled when selected. */
#vendor-cats .btn{border-radius:20px;padding:6px 14px;font-size:12.5px;}
#vendor-cats .btn.btn-p{background:var(--sage);border-color:var(--sage);}

/* Vendor cards */
.ed-vendor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.ed-vendor{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);box-shadow:var(--shadow-xs);padding:18px;}
.ed-vendor-head{display:flex;align-items:flex-start;gap:12px;}
.ed-vendor-name{font-family:var(--font-display);font-size:15.5px;font-weight:600;color:var(--text);
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;}
.ed-vendor-lines{display:flex;flex-direction:column;gap:7px;margin-top:14px;}
.ed-vendor-line{display:flex;align-items:center;gap:9px;font-family:var(--font-body);font-size:12.5px;
  color:var(--sage);text-decoration:none;min-width:0;}
.ed-vendor-line span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ed-vendor-line i{font-size:15px;color:var(--text-3);flex:0 0 auto;}
.ed-vendor-line:hover span{text-decoration:underline;}
.ed-vendor-note{font-family:var(--font-body);font-size:12.5px;color:var(--text-3);line-height:1.5;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--border);}
.ed-vendor-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.ed-vendor-actions .btn{justify-content:center;}

#o-schedule .ed-hero,#o-reports .ed-hero,#o-docs .ed-hero{
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 54%,var(--wd-warm) 54%);}
#o-schedule .ed-hero{padding:20px 24px 16px;}
#o-schedule .ed-h1{font-size:31px;}
#o-reports .s-div,#o-docs .s-div{font-family:var(--font-display);font-size:var(--t-h2);font-weight:600;}

/* CTA colour: the brief puts clay/terracotta on primary actions and keeps navy
   for navigation and brand. Primary buttons were navy, so the main action on
   each page read as chrome. Secondary stays white with a thin border and navy
   text, which keeps one obvious action per area. */
.btn.btn-p,.btn.btn-primary{background:var(--wd-peach);border-color:var(--wd-peach);color:#fff;}
.btn.btn-p:hover,.btn.btn-primary:hover{background:#c3744c;border-color:#c3744c;}
.btn.btn-p:focus-visible{outline:2px solid var(--wd-peach);outline-offset:2px;}
/* Keep navy where it means "selected", not "act": pipeline service pills and
   toggle-style tabs are filters, not calls to action. */
#pipeline-service-tabs .pipe-tab-btn.btn-p,
#pipeline-service-tabs .pipe-tab-btn.active{background:var(--sage);border-color:var(--sage);color:#fff;}
#vendor-cats .btn.btn-p{background:var(--sage);border-color:var(--sage);}
/* Status pills, per the brief's palette. */
.ed-pill.is-lavender{background:#f1eefc;color:#5b46a8;}
.ed-pill.is-rose{background:#fdeeee;color:#a4514a;}
.ed-pill.is-clay{background:var(--wd-peach-l);color:#a05c2b;}

/* Handbooks & SOPs: document cards. */
.ed-doc-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.ed-doc-filters .btn{border-radius:20px;padding:6px 15px;font-size:12.5px;}
.ed-doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;}
.ed-doc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);box-shadow:var(--shadow-xs);padding:18px;}
.ed-doc .ed-tpl-ic{margin-bottom:14px;}
.ed-doc-title{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--text);
  line-height:1.3;letter-spacing:-.01em;}
.ed-doc-meta{font-family:var(--font-body);font-size:11.5px;color:var(--text-3);margin-top:5px;}
/* docCardTidy: four actions and the review line shared one row, so labels
   wrapped ("Make / training") and Open drifted outside the card. Review line
   on its own row; actions on one line that never wraps; Open reads as the
   main action. */
.ed-doc-foot{display:flex;flex-direction:column;align-items:stretch;gap:9px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.ed-doc-actions{display:flex;align-items:center;gap:4px;}
.ed-doc-actions .ed-doc-open{white-space:nowrap;}
.ed-doc-actions .is-main{margin-left:auto;background:var(--sage-l);}
.ed-doc-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.ed-doc-rev{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);
  font-size:11.5px;color:var(--text-3);}
.ed-doc-rev.is-done{color:#3f6b52;}
.ed-doc-rev i{font-size:13px;}
.ed-doc-open{display:inline-flex;align-items:center;gap:4px;background:none;border:none;
  font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--sage);
  cursor:pointer;text-decoration:none;padding:5px 8px;border-radius:7px;}
.ed-doc-open:hover{background:var(--sage-l);}
.ed-doc-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:1px dashed var(--border-3);border-radius:var(--rl);padding:24px 16px;
  cursor:pointer;min-height:170px;}
.ed-doc-add:hover{border-color:var(--sage-m);}
.ed-doc-add-ic{width:44px;height:44px;border-radius:50%;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-3);margin-bottom:5px;}
.ed-doc-add-t{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--text);}

#o-newsletter .ed-hero{background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 54%,var(--wd-warm) 54%);}
#o-newsletter .ed-stat-ic.is-violet{background:#f1eefc;color:#6b48c8;}
#o-newsletter .card-title,#o-newsletter .s-div{font-family:var(--font-display);
  font-size:var(--t-h2);font-weight:600;letter-spacing:-.01em;}

/* Campaign template picker: a horizontal row of equal tiles, quieter than the
   email being designed. Replaces the 3-up grid so the whole set is visible
   without scrolling. */
.ed-camp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;}
#o-newsletter .camp-tpl{border-radius:var(--rl);box-shadow:var(--shadow-xs);padding:18px 14px;
  display:flex;flex-direction:column;align-items:center;text-align:center;}
#o-newsletter .camp-tpl:hover{transform:none;border-color:var(--sage-m);
  box-shadow:0 3px 10px rgba(45,69,112,.08);}
#o-newsletter .camp-tpl-title{font-family:var(--font-display);font-size:14px;font-weight:600;
  letter-spacing:-.01em;margin-bottom:5px;}
#o-newsletter .camp-tpl-sub{font-family:var(--font-body);font-size:11.5px;color:var(--text-3);line-height:1.45;}
#o-newsletter .camp-tpl-icon{border-radius:50%;margin-bottom:11px;}
@media (prefers-reduced-motion:reduce){ #o-newsletter .camp-tpl{transition:none;} }

/* Board columns, shared by Supply Orders' prep queue and any other
   status-column layout. */
.ed-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;}
.ed-board-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);
  box-shadow:var(--shadow-xs);overflow:hidden;display:flex;flex-direction:column;}
.ed-board-head{display:flex;align-items:center;gap:8px;padding:12px 15px;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;}
.ed-board-head i{font-size:16px;}

/* Today's Work: three equal cells, each a link to where you'd act. */
.ed-work{display:grid;grid-template-columns:repeat(3,1fr);}
.ed-work-cell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:18px 20px;background:none;border:none;border-right:1px solid var(--border);
  cursor:pointer;text-align:left;font-family:var(--font-body);}
.ed-work-cell:last-child{border-right:none;}
.ed-work-cell:hover{background:var(--surface-2);}
.ed-work-cell i{font-size:19px;color:var(--sage);margin-bottom:6px;}
.ed-work-n{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--text);line-height:1;}
.ed-work-l{font-size:12.5px;font-weight:600;color:var(--text-2);margin-top:5px;}
.ed-work-s{font-size:11.5px;color:var(--text-3);}
@media (max-width:620px){ .ed-work{grid-template-columns:1fr;}
  .ed-work-cell{border-right:none;border-bottom:1px solid var(--border);} }

/* Cost donut */
.ed-donut-wrap{display:flex;align-items:center;gap:20px;padding:10px 4px;flex-wrap:wrap;}
.ed-donut{width:154px;height:154px;flex:0 0 auto;}
.ed-donut-key{flex:1;min-width:190px;display:flex;flex-direction:column;gap:11px;}
.ed-key-row{display:flex;align-items:center;gap:9px;font-family:var(--font-body);font-size:13px;}
.ed-key-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.ed-key-l{color:var(--text-2);}
.ed-key-v{margin-left:auto;font-weight:600;color:var(--text);}
.ed-key-p{color:var(--text-3);font-size:12px;min-width:38px;text-align:right;}

/* Photos: square tiles cropped wide shots badly, but `contain` on a 4:3 tile
   turned portrait phone photos into slivers — most job photos are portrait.
   Use a portrait 3:4 tile and cover: phone shots fill it almost exactly, and a
   landscape shot loses far less than it did to a square. */
#media-grid img,#media-ba-sets img{object-fit:cover !important;}
#media-grid [style*="aspect-ratio:1"]{aspect-ratio:3/4 !important;}
#media-ba-sets [style*="aspect-ratio:1"]{aspect-ratio:3/4 !important;}
/* Bigger tiles — the brief asks for photos large enough to actually see. */
#media-grid > div > div[style*="grid-template-columns"]{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;}

/* One page header, not two. The app already had a kicker system built from
   .topbar .pg-title::before; every page that now has an .ed-hero was showing
   both. Hiding the title also hides its ::before kicker, which the hero
   replaces. Listed explicitly so a page without a hero keeps its old header. */
#o-dashboard .topbar .pg-title,
#o-inventory .topbar .pg-title,
#o-leadform .topbar .pg-title,
#o-clients .topbar .pg-title,
#o-vendors .topbar .pg-title,
#o-media .topbar .pg-title,
#o-pipeline .topbar .pg-title,
#o-supplypacks .topbar .pg-title,
#o-bizreports .topbar .pg-title,
#o-templates .topbar .pg-title,
#o-automations .topbar .pg-title,
#o-newsletter .topbar .pg-title,
#o-schedule .topbar .pg-title,
#o-reports .topbar .pg-title,
#o-docs .topbar .pg-title,
#o-settings .topbar .pg-title,
#o-reimbursements .topbar .pg-title,
#o-chat .topbar .pg-title{display:none !important;}
/* The sub-line went with it. */
#o-inventory .topbar .pg-sub,#o-dashboard .topbar .pg-sub,
#o-leadform .topbar .pg-sub{display:none !important;}

/* Settings: two-column forms -------------------------------------------------
   The panels themselves already hold the right fields; they just stacked one
   per row, which is what made the page feel long. Lay the form groups out two
   across on wide screens. Done by selector so no form markup moves and every
   existing handler keeps working. */
#o-settings .card{border-radius:var(--rl);box-shadow:var(--shadow-xs);border:1px solid var(--border);}
#o-settings .card-head{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 18px;}
#o-settings .card > div[style*="padding:14px"]{padding:18px !important;}
/* Two across, with the grid gap doing the spacing instead of per-field margin. */
#o-settings .card > div[style*="padding"]:not([style*="display:flex"]) > .f-group,
#o-settings .card > div[style*="padding"]:not([style*="display:flex"]) > .g2{margin-bottom:0;}
/* twoColOptIn: this grid was applied to EVERY padded container inside a
   settings card, including ones that set their own flex layout — which is
   what wrecked Connected Apps, where each integration is a stacked block.
   Skip any container that lays itself out. */
/* listsStayLists: a padded box that is a LIST (id ends in -list) or says
   display:block keeps its normal stacking — the grid squeezed each Service
   Lines row into its own narrow column. */
#o-settings .card > div[style*="padding"]:not([style*="display:flex"]):not([style*="display:grid"]):not([style*="display:block"]):not([id$="-list"]){
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px 20px;align-items:start;}
/* .g2 rows already inside the card shouldn't nest a second grid. */
#o-settings .card > div[style*="padding"]:not([style*="display:flex"]) > .g2{display:contents;}
/* Anything that needs the full width says so. */
#o-settings .card > div[style*="padding"]:not([style*="display:flex"]) > .f-group.full,
#o-settings .card > div[style*="padding"]:not([style*="display:flex"]) > table,
#o-settings .card > div[style*="padding"]:not([style*="display:flex"]) > .s-div{grid-column:1/-1;}
#o-settings .f-label{font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--text-2);}
@media (max-width:760px){
  #o-settings .card > div[style*="padding"]:not([style*="display:flex"]){grid-template-columns:1fr;}
}

/* Revenue as the hero metric: first card larger, the other three quieter. */

/* Next up, under an empty Today. */
.ed-next{padding:12px 16px;border-top:1px solid var(--border);}
.ed-next-l{font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:4px;}
.ed-next-m{font-family:var(--font-body);font-size:13px;color:var(--text);}
.ed-next-s{font-family:var(--font-body);font-size:11.5px;color:var(--text-3);margin-top:2px;}
/* Completed jobs, out of the active pipeline. */
.ed-done-note{padding:0 18px 14px;font-family:var(--font-body);font-size:11.5px;color:var(--text-3);}
/* Quick actions: smaller than they were. */
#o-dashboard .ed-qa-btn{padding:13px 8px;font-size:12px;}
#o-dashboard .ed-qa-btn i{font-size:17px;}
/* The automation-health banner was full width and shouted. */
#dash-auto-health{font-size:12.5px;}
#dash-auto-health > div{padding:12px 15px !important;border-radius:var(--rl) !important;}

/* Business Info tab: two panels side by side. */
.ed-settings-2col{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start;}
.ed-settings-col{min-width:0;}
.ed-settings-col > .card{margin-bottom:16px;}
/* Inside a half-width column, stack the form fields again. */
.ed-settings-col .card > div[style*="padding"]{grid-template-columns:1fr !important;}
@media (max-width:1180px){ .ed-settings-2col{grid-template-columns:1fr;} }

/* Field app home ---------------------------------------------------------- */
.fa-greet{margin:2px 2px 14px;}
.fa-greet-h{font-family:'DM Sans',system-ui,sans-serif;font-size:23px;font-weight:600;
  color:var(--text);letter-spacing:-.3px;line-height:1.15;}
.fa-greet-d{font-size:13px;color:var(--text-3);margin-top:3px;}
.fa-today{padding:0;overflow:hidden;margin-bottom:14px;}
.fa-today-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:13px 15px;border-bottom:1px solid var(--border);}
.fa-today-h span:first-child{font-size:15px;font-weight:600;color:var(--text);}
.fa-today-n{font-size:12px;color:var(--text-3);}
.fa-job{padding:13px 15px;border-left:3px solid var(--sage-m);border-bottom:1px solid var(--border);}
.fa-job:last-child{border-bottom:none;}
.fa-job-c{font-size:16px;font-weight:600;color:var(--text);}
.fa-job-t{font-size:13px;color:var(--text-2);margin:2px 0 7px;}
.fa-job-m{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);margin-top:6px;}
.fa-job-m i{font-size:14px;}
.fa-job-btn{display:block;width:100%;margin-top:12px;padding:11px;border:none;border-radius:10px;
  background:var(--sage);color:#fff;font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;}
.fa-qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.fa-qa-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 4px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  font-family:var(--font-body);font-size:11px;color:var(--text-2);cursor:pointer;text-align:center;}
.fa-qa-btn i{font-size:19px;color:var(--sage);}

/* Field job detail: four primary actions. */
.fa-acts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;}
.fa-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:13px 4px;background:var(--surface);border:1px solid var(--border-2);border-radius:12px;
  font-family:var(--font-body);font-size:11.5px;font-weight:600;color:var(--text-2);
  cursor:pointer;text-decoration:none;text-align:center;}
.fa-act i{font-size:19px;color:var(--sage);}
.fa-act.is-primary{background:var(--wd-green-l);border-color:#cfe5da;color:#3f6b52;}
.fa-act.is-primary i{color:#3f6b52;}

/* Field job report: step index and step screens. */
.fa-rep-job{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid var(--border);}
.fa-rep-ic{width:38px;height:38px;border-radius:11px;background:var(--sage-l);color:var(--sage);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:18px;}
.fa-rep-c{font-size:15px;font-weight:600;color:var(--text);}
.fa-rep-d{font-size:12px;color:var(--text-3);margin-top:2px;}
.fa-rep-step{display:flex;align-items:center;gap:13px;width:100%;padding:14px 15px;background:none;
  border:none;border-bottom:1px solid var(--border);cursor:pointer;text-align:left;font-family:var(--font-body);}
.fa-rep-step:last-child{border-bottom:none;}
.fa-rep-n,.fa-step-n{width:28px;height:28px;border-radius:50%;background:var(--sage);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto;}
.fa-rep-t{display:block;font-size:14.5px;font-weight:600;color:var(--text);}
.fa-rep-s{display:block;font-size:12px;color:var(--text-3);margin-top:2px;}
.fa-rep-step > i{color:var(--text-4);font-size:17px;}
.fa-step-h{display:flex;align-items:center;gap:12px;margin:2px 2px 14px;}
.fa-step-t{font-size:18px;font-weight:600;color:var(--text);}
.fa-step-s{font-size:12.5px;color:var(--text-3);margin-top:2px;}
.fa-step-nav{display:flex;gap:10px;align-items:center;margin-top:6px;}
.fa-step-back{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--border-2);
  border-radius:11px;padding:12px 14px;font-family:var(--font-body);font-size:13px;color:var(--text-2);cursor:pointer;}
.fa-step-next{flex:1;background:var(--sage);color:#fff;border:none;border-radius:11px;padding:13px;
  font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;}

/* Email builder side panel: three-across tiles with a quiet, consistent icon
   treatment, matching the design. The per-tile inline icon colours are
   overridden here so the panel reads as one control surface rather than ten
   competing colours. */
#email-builder-overlay .eb-panel .eb-block-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
#email-builder-overlay .eb-panel .eb-block-btn{
  background:var(--surface);border:1px solid var(--border-2);border-radius:11px;
  padding:15px 6px !important;display:flex;flex-direction:column;align-items:center;gap:7px;}
#email-builder-overlay .eb-panel .eb-block-btn i{
  font-size:21px !important;color:var(--sage) !important;margin:0 !important;}
#email-builder-overlay .eb-panel .eb-block-btn div{
  font-size:11px !important;font-weight:500;color:var(--text-2);line-height:1.2;}
#email-builder-overlay .eb-panel .eb-block-btn:hover{
  border-color:var(--sage-m);background:var(--sage-l);transform:none;box-shadow:none;}
/* Tab bar: underline the active tab rather than filling it. */
#email-builder-overlay .eb-panel > div:first-child button{
  font-family:var(--font-body);font-size:12.5px !important;letter-spacing:0;}

/* Field clock: secondary actions under the primary button. */
.fa-clock-more{display:flex;flex-direction:column;gap:2px;margin-top:12px;}
.fa-clock-more button{display:flex;align-items:center;justify-content:center;gap:7px;
  background:none;border:none;padding:10px;font-family:'DM Sans',system-ui,sans-serif;
  font-size:12.5px;color:#8a8479;cursor:pointer;border-radius:9px;}
.fa-clock-more button:hover{background:var(--surface-2);color:var(--text-2);}
.fa-clock-more i{font-size:15px;}

/* Team member with approved time off on the chosen day. */
.team-check-item.is-off{background:#fdf3f2;border-radius:8px;}
.team-check-item.is-off > div:nth-child(2){opacity:.6;}

@keyframes loadBar{0%{width:0%;margin-left:0}60%{width:100%;margin-left:0}100%{width:0%;margin-left:100%}}

/* Email builder sidebar readability */
#email-builder-overlay .eb-block-btn div{font-size:12px!important;}
#email-builder-overlay .eb-block-btn{padding:10px 6px!important;}
#email-builder-overlay #eb-panel-layout > div:first-child,
#email-builder-overlay #eb-panel-vars > div:first-child{font-size:13px!important;}
#email-builder-overlay #eb-template-tiles + div,
#email-builder-overlay [id^="eb-panel"] .s-div{font-size:12px!important;}
#email-builder-overlay #eb-template-tiles > div > div:last-child{font-size:13px!important;padding:9px!important;}
#email-builder-overlay .eb-var-chip{font-size:12.5px!important;padding:8px 10px!important;}
#email-builder-overlay #eb-settings-panel{font-size:13px;}
#email-builder-overlay #eb-settings-panel input,
#email-builder-overlay #eb-settings-panel select{font-size:13px!important;}
.nl-aud-pill{padding:5px 14px;border-radius:20px;border:1.5px solid var(--border2);background:var(--surface);font-size:12px;font-weight:500;cursor:pointer;color:var(--text-3);transition:all .15s;}
.nl-aud-pill.active{background:#3D5A80;color:#fff;border-color:#3D5A80;}
.nl-aud-pill:hover{border-color:#7A9EC4;color:#3D5A80;}
.eb-block-btn{
  background:var(--warm);border-radius:8px;padding:10px 6px;text-align:center;
  cursor:pointer;border:2px solid transparent;transition:all .15s;user-select:none;
}
.eb-block-btn:hover{background:var(--sage-l);border-color:var(--sage-m);}
.eb-tpl-btn{
  background:var(--warm);border-radius:7px;padding:8px 10px;font-size:12px;font-weight:500;
  cursor:pointer;border:1px solid var(--border);transition:all .15s;
}
.eb-tpl-btn:hover{background:var(--sage-l);border-color:var(--sage-m);}
.eb-var-chip{
  background:#e8f0f8;color:#3D5A80;border-radius:6px;padding:5px 8px;font-size:10px;
  font-weight:600;cursor:pointer;font-family:monospace;border:1px solid #b8cde0;
}
.eb-var-chip:hover{background:#b8cde0;}
.eb-email-block{
  position:relative;cursor:pointer;
  border:2px solid transparent;transition:border-color .1s;
}
.eb-email-block:hover{border-color:#7A9EC433;}
.eb-email-block.selected{border-color:#7A9EC4;}
.eb-block-controls{
  position:absolute;top:-1px;right:-1px;display:none;
  background:#3D5A80;border-radius:0 0 0 6px;
  flex-direction:row;gap:0;z-index:10;
}
.eb-email-block:hover .eb-block-controls,
.eb-email-block.selected .eb-block-controls{display:flex;}
.eb-block-ctrl-btn{
  background:none;border:none;color:#fff;padding:4px 7px;cursor:pointer;font-size:12px;
  display:flex;align-items:center;
}
.eb-block-ctrl-btn:hover{background:rgba(255,255,255,.15);}
.eb-drop-zone{
  height:6px;background:transparent;transition:all .15s;margin:0;
}
.eb-drop-zone.drag-over{height:40px;background:#e8f0f8;border:2px dashed #7A9EC4;border-radius:6px;}

#cp-stage-select option{color:#1c1b18;background:#fff;}
/* submitObvious: the Submit Report button was a normal-sized button sitting
   above a bigger "Back to steps" button, so the obvious tap left the page. */
.login-btn.fa-submit{
  width:100%;min-height:60px;margin-top:14px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#D4845A;color:#fff;border:none;border-radius:14px;
  font-size:18px;font-weight:700;letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(212,132,90,.35);cursor:pointer;
}
.login-btn.fa-submit i{font-size:20px;}
.login-btn.fa-submit:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(212,132,90,.35);}
.login-btn.fa-submit:disabled{opacity:.7;box-shadow:none;}

/* familyStory: list rows on the client questionnaire stack on a phone so each
   box is wide enough to type in. */
@media (max-width:520px){
  .iq-row{grid-template-columns:1fr 30px !important;background:#faf8f4;border:1px solid #eee8de;border-radius:10px;padding:8px;margin-bottom:8px !important;}
  .iq-row input{grid-column:1;}
  .iq-row button{grid-column:2;grid-row:1;}
}

/* phoneBack: bigger, always-visible close on phones, clear of the notch */
@media (max-width:760px){
  .client-profile-panel .cp-header{position:sticky;top:0;z-index:5;padding-top:calc(14px + env(safe-area-inset-top));}
  .cp-close{min-width:40px;min-height:40px;font-size:24px;border-radius:12px;}
}

/* invCards: on phones the invoice table becomes one card per invoice so the
   amount and status aren't cut off the right edge. */
@media (max-width:760px){
  .inv-tbl thead{display:none;}
  .inv-tbl, .inv-tbl tbody{display:block;width:100%;}
  .inv-tbl tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"client amount" "num status" "due actions";gap:4px 12px;padding:14px 16px;border-bottom:1px solid var(--border);}
  .inv-tbl td{display:block;padding:0 !important;border:none !important;}
  .inv-tbl td:nth-child(1){grid-area:num;font-size:12px;}
  .inv-tbl td:nth-child(2){grid-area:client;font-size:15px;}
  .inv-tbl td:nth-child(3){display:none;}
  .inv-tbl td:nth-child(4){grid-area:due;align-self:center;}
  .inv-tbl td:nth-child(4)::before{content:"Due ";}
  .inv-tbl td:nth-child(5){grid-area:amount;text-align:right;font-size:16px !important;}
  .inv-tbl td:nth-child(6){grid-area:status;text-align:right;}
  .inv-tbl td:nth-child(7){grid-area:actions;justify-self:end;}
  .inv-tbl td:nth-child(7) button[title="Sync to QuickBooks"]{display:none;}
}

/* ═══ Crates (cleaned-up layout) ═══ */
.cr-page{background:#F7F4EF;padding:26px 30px 90px!important;}
.cr-page .cr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.cr-kicker{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#8A8378;margin-bottom:4px;}
.cr-title{font-family:'Fraunces',Georgia,serif;font-size:30px;font-weight:600;color:#22304A;letter-spacing:-.4px;margin:0;line-height:1.15;}
.cr-lede{font-size:13.5px;color:#6A6760;margin-top:4px;}
.cr-tabs{display:flex;gap:4px;border-bottom:1px solid #E6E0D6;margin-bottom:18px;}
.cr-tab{background:none;border:none;border-bottom:2px solid transparent;padding:9px 14px;font:inherit;font-size:13.5px;font-weight:500;color:#6A6760;cursor:pointer;margin-bottom:-1px;}
.cr-tab.on{color:#22304A;font-weight:700;border-bottom-color:#22304A;}
.cr-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.cr-subtabs button{background:none;border:1px solid transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;color:#6A6760;cursor:pointer;}
.cr-subtabs button.on{background:#fff;border-color:#E6E0D6;color:#22304A;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.cr-n{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#fdf3e3;color:#9a6b12;font-size:11px;font-weight:700;margin-left:3px;}
.cr-card{background:#fff;border:1px solid #ECE7DF;border-radius:14px;box-shadow:0 1px 3px rgba(34,48,74,.04);}
.cr-pad{padding:18px 20px;margin-bottom:14px;}
.cr-h2{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;color:#22304A;}
.cr-h3{font-family:'Fraunces',Georgia,serif;font-size:16px;font-weight:600;color:#22304A;margin-bottom:12px;}
.cr-sub{font-size:12px;color:#8A8378;}
.cr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
.cr-stat{display:flex;gap:14px;align-items:flex-start;padding:18px;}
.cr-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.cr-num{font-family:'Fraunces',Georgia,serif;font-size:28px;font-weight:600;color:#22304A;line-height:1;}
.cr-stat-l{font-size:13px;font-weight:600;color:#22304A;margin-top:5px;}
.cr-stat-s{font-size:11.5px;color:#8A8378;}
.cr-banner{display:flex;align-items:center;gap:12px;padding:13px 18px;margin-bottom:16px;background:#FFFAF0;border-color:#F0D9A8;font-size:13.5px;}
.cr-banner>i{font-size:22px;color:#9a6b12;}
.cr-act{display:flex;align-items:center;gap:16px;padding:12px 4px;border-top:1px solid #F0ECE6;cursor:pointer;}
.cr-act:first-of-type{border-top:none;}
.cr-act:hover{background:#FBF9F6;}
.cr-date{width:48px;flex-shrink:0;text-align:center;background:#F7F4EF;border-radius:10px;padding:6px 0;}
.cr-date div{font-size:9.5px;font-weight:700;letter-spacing:.8px;color:#8A8378;}
.cr-date b{font-family:'Fraunces',Georgia,serif;font-size:19px;color:#22304A;line-height:1.1;}
.cr-name{font-size:14px;font-weight:700;color:#22304A;}
.cr-addr{font-size:13px;color:#4A5568;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr-addr i{color:#8A8378;margin-right:4px;}
.cr-pill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:10px;vertical-align:1px;margin-left:4px;}
.cr-weeks{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;}
.cr-wk{text-align:center;background:#F7F4EF;border-radius:10px;padding:9px 4px;}
.cr-wk-n{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;}
.cr-search{display:flex;align-items:center;gap:8px;border:1px solid #E6E0D6;border-radius:10px;padding:8px 12px;max-width:420px;}
.cr-search i{color:#8A8378;}
.cr-search input{border:none;outline:none;font:inherit;font-size:13px;flex:1;background:none;}
.cr-table{width:100%;border-collapse:collapse;font-size:13px;}
.cr-table th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#8A8378;padding:10px 14px;background:#FBF9F6;border-bottom:1px solid #ECE7DF;}
.cr-table td{padding:12px 14px;border-bottom:1px solid #F0ECE6;color:#22304A;}
.cr-table tbody tr{cursor:pointer;}
.cr-table tbody tr:hover{background:#FBF9F6;}
.cr-table .cr-pill{margin-left:0;}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.cr-money{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff;}
.cr-money span{padding:0 10px;color:#8A8378;font-size:13px;background:#FBF9F6;align-self:stretch;display:flex;align-items:center;border-right:1px solid var(--border);}
.cr-money input{border:none!important;border-radius:0!important;}
.cr-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid #F0ECE6;}
.cr-kv{text-align:right;min-width:78px;}
.cr-kv b{font-size:14px;color:#22304A;}
.cr-page .cm-card{border:1px solid #ECE7DF;border-radius:14px;box-shadow:none;}
@media (max-width:900px){.cr-stats{grid-template-columns:repeat(2,1fr);}.cr-weeks{grid-template-columns:repeat(4,1fr);}.cr-hide-sm{display:none!important;}}
@media (max-width:640px){.cr-page{padding:16px 14px 90px!important;}.cr-title{font-size:25px;}.cr-page .cr-head{flex-direction:column;}}