/* ============================================================
PracticeApp — forest green + gold design system
============================================================ */
:root{
--green-900:#0b2c22; --green-800:#0f4032; --green-700:#16543f; --green-600:#1c6b4f;
--green-500:#278a66; --green-100:#e7f2ec;
--gold-600:#a9822f; --gold-500:#c9a24b; --gold-300:#e6cf95;
--red-600:#c0392b; --red-500:#d64545; --red-100:#fbe9e7;
--amber-500:#d98a1f;
/* light theme */
--bg:#f2f5f2; --bg-2:#e9efea; --surface:#ffffff; --surface-2:#f7faf8;
--ink:#12261f; --ink-2:#4a5c53; --ink-3:#7b8c83;
--line:#e2e9e4; --line-2:#d3ddd6;
--accent:var(--gold-500); --brand:var(--green-800); --brand-hover:var(--green-700);
--neg:var(--red-500);
--shadow-sm:0 1px 2px rgba(15,64,50,.06);
--shadow:0 6px 24px rgba(15,64,50,.10);
--shadow-lg:0 24px 60px rgba(11,44,34,.20);
--radius:14px; --radius-sm:10px;
--sidebar-w:248px; --sidebar-w-collapsed:74px;
--font-display:'Google Sans','DM Sans','Fraunces',Georgia,sans-serif;
--font-body:'Google Sans','Google Sans Text','DM Sans',Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
[data-theme="dark"]{
--bg:#0a1610; --bg-2:#0e1e17; --surface:#122a20; --surface-2:#0f241b;
--ink:#e8f0ea; --ink-2:#a9bcb1; --ink-3:#7d928a;
--line:#1e3a2d; --line-2:#274a3a;
--brand:#16543f; --brand-hover:#1c6b4f;
--shadow-sm:0 1px 2px rgba(0,0,0,.3);
--shadow:0 6px 24px rgba(0,0,0,.4);
--shadow-lg:0 24px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
font-family:var(--font-body);background:var(--bg);color:var(--ink);
font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;margin:0}
.neg,.text-neg{color:var(--neg)!important;font-variant-numeric:tabular-nums}
.pos{color:var(--green-600)}
.mono-num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
/* ---------- boot spinner ---------- */
.app-loading{display:flex;align-items:center;justify-content:center;height:100vh}
.boot-spinner span{width:38px;height:38px;border:3px solid var(--line-2);border-top-color:var(--gold-500);
border-radius:50%;display:block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* loading feedback: a busy bar across the top for slow requests, and a spinner block for panels that are filling */
#pa-busybar{position:fixed;left:0;right:0;top:0;height:3px;z-index:9999;pointer-events:none;opacity:0;transition:opacity .2s;overflow:hidden}
#pa-busybar.on{opacity:1}
#pa-busybar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);animation:pabar 1.1s ease-in-out infinite}
@keyframes pabar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
body.pa-busy,body.pa-busy *{cursor:progress}
body.pa-busy a,body.pa-busy button{cursor:progress}
.pa-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 20px;color:var(--ink-2);font-size:14px}
.pa-spin{width:30px;height:30px;border:3px solid var(--line-2);border-top-color:var(--gold-500);border-radius:50%;display:block;animation:spin .8s linear infinite}
.mx-card.mx-opening{opacity:.65;pointer-events:none}
/* ============================================================
LOGIN
============================================================ */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-brand{background:
radial-gradient(1200px 600px at 20% 0%, rgba(201,162,75,.16), transparent 55%),
linear-gradient(160deg,var(--green-900),var(--green-800) 60%,var(--green-700));
color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-brand::after{content:"";position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;
background:radial-gradient(circle,rgba(201,162,75,.14),transparent 70%);border-radius:50%}
.auth-logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:24px;font-weight:700}
.auth-logo .mark{width:42px;height:42px}
.auth-tag{max-width:420px}
.auth-tag h2{font-size:34px;line-height:1.15;margin-bottom:14px;color:#fff}
.auth-tag p{color:rgba(255,255,255,.78);font-size:15px;max-width:380px}
.auth-foot{color:rgba(255,255,255,.55);font-size:12.5px}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--surface)}
.auth-card{width:100%;max-width:380px}
.auth-card h1{font-size:26px;color:var(--brand);margin-bottom:4px}
[data-theme="dark"] .auth-card h1{color:var(--gold-500)}
.auth-card .sub{color:var(--ink-2);margin-bottom:26px}
@media(max-width:860px){.auth-wrap{grid-template-columns:1fr}.auth-brand{display:none}}
/* ============================================================
LAYOUT
============================================================ */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,var(--green-900),var(--green-800));
color:#e9f2ec;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;
transition:width .22s ease;overflow:hidden}
.sidebar.collapsed{width:var(--sidebar-w-collapsed)}
.side-head{display:flex;align-items:center;gap:11px;padding:20px 18px 18px;position:relative}
.side-head .mark{width:34px;height:34px;flex:none}
.side-head .brand-name{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;white-space:nowrap}
.sidebar.collapsed .brand-name,.sidebar.collapsed .side-user-meta,.sidebar.collapsed .nav-label,.sidebar.collapsed .side-section{opacity:0;pointer-events:none}
.side-toggle{margin-left:auto;background:rgba(255,255,255,.08);border:0;color:#cfe3d8;width:30px;height:30px;
border-radius:8px;display:grid;place-items:center;flex:none}
.side-toggle:hover{background:rgba(201,162,75,.28);color:#fff}
.side-section{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:rgba(201,162,75,.85);
padding:16px 20px 6px;white-space:nowrap}
.nav{flex:1;padding:4px 12px;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:10px;color:#cfe0d7;
margin-bottom:2px;white-space:nowrap;font-weight:500;font-size:14px;transition:background .15s,color .15s}
.nav a svg{width:19px;height:19px;flex:none;stroke-width:1.9}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.active{background:linear-gradient(90deg,rgba(201,162,75,.22),rgba(201,162,75,.05));color:#fff;
box-shadow:inset 3px 0 0 var(--gold-500)}
.side-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.side-user{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px}
.side-user .avatar{width:34px;height:34px;border-radius:50%;background:var(--gold-500);color:var(--green-900);
display:grid;place-items:center;font-weight:700;flex:none}
.side-user-meta{white-space:nowrap;overflow:hidden}
.side-user-meta .n{font-weight:600;color:#fff;font-size:13.5px}
.side-user-meta .r{font-size:11.5px;color:rgba(255,255,255,.6);text-transform:capitalize}
.theme-toggle{position:absolute;top:22px;right:14px}
.main{flex:1;margin-left:var(--sidebar-w);transition:margin .22s ease;min-width:0}
.main.collapsed{margin-left:var(--sidebar-w-collapsed)}
.topbar{height:64px;display:flex;align-items:center;gap:16px;padding:0 26px;position:sticky;top:0;z-index:60;
background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar h1{font-size:21px;color:var(--ink)}
.topbar .spacer{flex:1}
.icon-btn{background:var(--surface);border:1px solid var(--line);width:38px;height:38px;border-radius:10px;
display:grid;place-items:center;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.icon-btn:hover{color:var(--brand);border-color:var(--line-2)}
.icon-btn svg{width:18px;height:18px}
.content{padding:24px 26px 60px}
@media(max-width:900px){
.sidebar{transform:translateX(-100%);width:var(--sidebar-w)}
.sidebar.mobile-open{transform:translateX(0)}
.main,.main.collapsed{margin-left:0}
.content{padding:18px 20px 60px}
}
/* ============================================================
CARDS / SUMMARY
============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;
box-shadow:var(--shadow-sm);position:relative;cursor:default;transition:transform .12s,box-shadow .12s,border-color .12s;overflow:hidden}
.stat.clickable{cursor:pointer}
.stat.clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--gold-300)}
.stat .label{font-size:12.5px;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:7px}
.stat .val{font-family:var(--font-body);font-size:26px;font-weight:700;margin-top:8px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .val.neg{color:var(--neg)}
.stat .ico{position:absolute;top:15px;right:15px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
background:var(--green-100);color:var(--green-700)}
[data-theme="dark"] .stat .ico{background:rgba(201,162,75,.14);color:var(--gold-500)}
.stat .ico svg{width:17px;height:17px}
.stat.accent .ico{background:rgba(201,162,75,.2);color:var(--gold-600)}
.stat.danger .ico{background:var(--red-100);color:var(--red-600)}
.stat .sub{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.stat.active-card{border:2px solid var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,75,.28), 0 6px 14px rgba(201,162,75,.18);background:linear-gradient(180deg, rgba(201,162,75,.07), transparent 55%);transform:translateY(-1px)}
[data-theme="dark"] .stat.active-card{box-shadow:0 0 0 3px rgba(201,162,75,.35), 0 6px 14px rgba(0,0,0,.4)}
/* ============================================================
PANELS / TABLES
============================================================ */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-head h3{font-size:16px;color:var(--ink)}
.panel-head .spacer{flex:1}
.panel-body{padding:16px 20px}
/* a table sitting straight in a panel keeps running edge to edge (its cells carry their own padding) */
.panel-body>.tbl-wrap,.panel-body>table.data{margin-left:-20px;margin-right:-20px;width:calc(100% + 40px)}
.tbl-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13.3px}
table.data th{text-align:left;font-weight:600;color:var(--ink-2);font-size:11.5px;text-transform:uppercase;
letter-spacing:.04em;padding:12px 14px;white-space:nowrap;border-bottom:1px solid var(--line)}
table.data td{padding:13px 14px;border:0;color:var(--ink);white-space:nowrap}
table.data tbody tr{border-bottom:1px solid var(--surface-2)}
table.data tbody tr:hover{background:var(--surface-2)}
/* Numbers read LEFT-aligned with their headers, app-wide — asked for explicitly after the
Client Group table set the pattern. Tabular figures keep the digits comparable in a column
even without right alignment. */
table.data td.num{text-align:left;font-variant-numeric:tabular-nums}
table.data .link{color:var(--brand);font-weight:600;cursor:pointer}
[data-theme="dark"] table.data .link{color:var(--gold-500)}
.empty{padding:44px 20px;text-align:center;color:var(--ink-3)}
.empty svg{width:40px;height:40px;opacity:.5;margin-bottom:10px}
/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;line-height:1.6}
.pill.pending{background:#fff3e0;color:#b26a00}
.pill.wip{background:#e3f0ff;color:#1a5fb4}
.pill.submitted{background:var(--green-100);color:var(--green-700)}
.pill.invited{background:#f0ecff;color:#5b3fb4}
.pill.accepted{background:var(--green-100);color:var(--green-700)}
.pill.not_interested{background:var(--red-100);color:var(--red-600)}
.pill.one_off{background:#eef1f0;color:#556}
.pill.overdue{background:var(--red-100);color:var(--red-600)}
.pill.high{background:var(--red-100);color:var(--red-600)}
.pill.normal{background:#eef1f0;color:#556}
.pill.low{background:#eef7f1;color:#3a7}
[data-theme="dark"] .pill{filter:brightness(1.05)}
/* inline select in table */
.inline-select{border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:5px 8px;
font-size:12.5px;color:var(--ink);font-weight:600}
.inline-input{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:6px 9px;font-size:12.5px;color:var(--ink);width:100%;min-width:150px}
/* kebab menu */
.kebab{position:relative}
.kebab-btn{background:transparent;border:0;width:30px;height:30px;border-radius:8px;color:var(--ink-2);display:grid;place-items:center}
.kebab-btn:hover{background:var(--surface-2);color:var(--ink)}
.kebab-menu{position:absolute;right:0;top:34px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
box-shadow:var(--shadow-lg);min-width:190px;padding:6px;z-index:60}
.kebab-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border:0;
background:transparent;border-radius:8px;color:var(--ink);font-size:13.5px}
.kebab-menu button:hover{background:var(--surface-2)}
.kebab-menu button svg{width:15px;height:15px;color:var(--ink-2)}
.kebab-menu button.danger{color:var(--red-600)}
.kebab-menu .divider{height:1px;background:var(--line);margin:5px 2px}
/* Task-step option menu (Mandatory / Show in Finished Report). */
.ts-opts-menu{position:absolute;right:0;top:32px;min-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:8px;z-index:80}
.ts-opts-menu .ts-opt{display:flex;align-items:flex-start;gap:9px;padding:8px 9px;border-radius:8px;cursor:pointer;font-size:13px;line-height:1.35}
.ts-opts-menu .ts-opt:hover{background:var(--surface-2)}
.ts-opts-menu .ts-opt input{margin-top:2px}
.ts-opts-menu .ts-opt .muted{display:block;font-size:11.5px}
/* column chooser dropdown */
.col-chooser{position:relative}
.col-panel{position:fixed;background:var(--surface);border:1px solid var(--line);border-radius:12px;
box-shadow:var(--shadow-lg);width:380px;max-width:calc(100vw - 24px);z-index:9500;max-height:70vh;overflow-y:auto}
.col-panel .col-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;cursor:grab;font-size:13px}
.col-panel .col-item:hover{background:var(--surface-2)}
.col-panel .col-item.dragging{opacity:.4}
.col-panel .col-item input{accent-color:var(--green-600)}
.col-panel .col-item .grip{margin-left:auto;color:var(--ink-3);cursor:grab}
/* ============================================================
BUTTONS
============================================================ */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:10px;
padding:9px 16px;font-size:13.5px;font-weight:600;transition:background .14s,box-shadow .14s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-hover)}
.btn-gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:var(--green-900)}
.btn-gold:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
[data-theme="dark"] .btn-ghost:hover{color:var(--gold-500);border-color:var(--gold-500)}
.btn-danger{background:var(--red-600);color:#fff}
.btn-danger:hover{background:var(--red-500)}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.55;cursor:not-allowed}
/* ============================================================
FORMS
============================================================ */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field .req{color:var(--red-500)}
.input,select.input,textarea.input{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;
background:var(--surface);color:var(--ink);font-size:14px;font-family:inherit;transition:border-color .14s,box-shadow .14s}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b8c83' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.input:focus,select.input:focus,textarea.input:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
/* A required field left empty at save: red until it is filled in. */
.input.input-error,select.input.input-error{border-color:var(--red-500);box-shadow:0 0 0 3px rgba(179,38,30,.14)}
textarea.input{resize:vertical;min-height:74px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px}
@media(max-width:900px){.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.input-icon{position:relative}
.input-icon .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);background:0;border:0;padding:0}
.field label.toggle,.toggle{display:inline-flex !important;align-items:center;gap:10px;cursor:pointer;margin-bottom:0}
.toggle .toggle-text{font-size:13.5px;color:var(--ink);font-weight:500;margin-bottom:0}
.toggle input{display:none}
.toggle .track{width:46px;height:26px;background:#c7d0cb;border:1px solid #9aa8a0;border-radius:20px;position:relative;transition:background .18s,border-color .18s;flex:0 0 auto;display:inline-block}
.toggle .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.toggle input:checked + .track{background:var(--gold-500);border-color:var(--gold-600)}
.toggle input:checked + .track::after{transform:translateX(20px)}
[data-theme="dark"] .toggle .track{background:#3a463f;border-color:#4c5a52}
.search{position:relative}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3)}
.search input{padding-left:36px;min-width:240px}
@media(max-width:640px){.search input{min-width:150px}}
/* ============================================================
MODAL
============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(11,28,22,.55);backdrop-filter:blur(3px);z-index:100;
display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:720px;
animation:pop .18s cubic-bezier(.2,.9,.3,1.1);overflow:hidden;border:1px solid var(--line)}
.modal.lg{max-width:940px}
.modal.sm{max-width:460px}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:19px;color:var(--ink)}
.modal-head .x{margin-left:auto;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.modal-head .x:hover{background:var(--red-100);color:var(--red-600)}
.modal-body{padding:22px;max-height:70vh;overflow-y:auto}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--line);background:var(--surface-2)}
/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:11px 15px;border:0;background:0;color:var(--ink-2);font-weight:600;font-size:13.5px;border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--brand);border-bottom-color:var(--gold-500)}
[data-theme="dark"] .tab.active{color:var(--gold-500)}
/* settings sub-nav */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:4px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:0;padding:8px 15px;border-radius:8px;font-weight:600;font-size:13px;color:var(--ink-2)}
/* The active tab is the GOLD one — instantly visible and traceable, every segmented
control in the app: workflow tabs, Ltd/SA switch, Letter & Doc tabs, approval tabs. */
.seg button.active{background:var(--gold-500,#c9a24b);color:#231a08;box-shadow:var(--shadow-sm)}
[data-theme="dark"] .seg button.active{background:#a8863d;color:#181203}
/* toast */
/* Above every modal layer. Stacked modals are given z-index 1000+ at runtime, so a toast
raised from inside one must sit higher or it is hidden behind the window that caused it. */
#toast-root{position:fixed;bottom:24px;right:24px;z-index:9500;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--green-600);
border-radius:12px;padding:13px 16px;box-shadow:var(--shadow-lg);min-width:260px;max-width:380px;
display:flex;gap:11px;align-items:flex-start;animation:slidein .2s ease}
.toast.error{border-left-color:var(--red-500)}
.toast.warn{border-left-color:var(--amber-500)}
.toast .t-msg{font-size:13.5px;color:var(--ink)}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
/* service line editor */
.svc-line{display:grid;grid-template-columns:1.4fr 1fr .9fr .9fr .9fr 1fr auto;gap:8px;align-items:end;
padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--surface-2)}
.svc-line .field{margin:0}
.svc-line .field label{font-size:11px}
.svc-line .rm{background:var(--red-100);color:var(--red-600);border:0;border-radius:8px;width:34px;height:38px;display:grid;place-items:center}
@media(max-width:900px){.svc-line{grid-template-columns:1fr 1fr}}
/* directors chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--green-100);color:var(--green-700);border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:600}
[data-theme="dark"] .chip{background:rgba(201,162,75,.14);color:var(--gold-300)}
/* task chat */
.chat{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow-y:auto;padding:4px 2px}
.chat .msg{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 13px}
.chat .msg .meta{font-size:11.5px;color:var(--ink-3);margin-bottom:4px;display:flex;gap:8px}
.chat .msg .meta b{color:var(--brand)}
[data-theme="dark"] .chat .msg .meta b{color:var(--gold-500)}
.chat-input{display:flex;gap:8px;margin-top:12px}
/* forecast + report tables get borders back for clarity */
table.bordered th,table.bordered td{border:1px solid var(--line)}
/* misc */
.row-flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.badge-count{background:var(--gold-500);color:var(--green-900);border-radius:20px;font-size:11px;font-weight:700;padding:1px 8px;margin-left:auto}
hr.sep{border:0;border-top:1px solid var(--line);margin:18px 0}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-600);font-weight:700;margin:22px 0 10px}
.help-text{font-size:12px;color:var(--ink-3);margin-top:5px}
.dl-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.date-range{display:flex;gap:8px;align-items:center}
.date-range input{padding:8px 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink)}
@media print{
.sidebar,.topbar,.no-print,.btn,.kebab,.col-chooser{display:none!important}
.main{margin:0!important}
.content{padding:0}
.panel{box-shadow:none;border:0}
body{background:#fff}
}
/* ==================== v1.1 additions ==================== */
/* Traffic-light status dropdowns (pending=red, wip=gold, submitted=green) */
.inline-select.status3{font-weight:600}
.inline-select.status3.st-pending{color:var(--red-600);border-color:color-mix(in srgb, var(--red-600) 35%, var(--line-2))}
.inline-select.status3.st-wip{color:var(--gold-600, #a8802f);border-color:color-mix(in srgb, var(--gold-500) 45%, var(--line-2))}
.inline-select.status3.st-submitted{color:var(--green-600);border-color:color-mix(in srgb, var(--green-600) 35%, var(--line-2))}
/* Kebab menu: float above everything, never clipped by table overflow */
.kebab-menu{z-index:60}
/* Overdue tag */
.tag-od{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
background:color-mix(in srgb, var(--red-600) 14%, transparent);color:var(--red-600);
padding:1px 7px;border-radius:20px;margin-left:6px;vertical-align:middle}
/* Profile menu (topbar) */
.profile-wrap{position:relative}
.profile-btn{width:38px;height:38px;border-radius:50%;border:0;background:transparent;cursor:pointer;padding:0;display:grid;place-items:center}
.profile-btn:hover{background:var(--surface-2)}
.avatar.sm{width:32px;height:32px;font-size:12px}
.avatar{display:grid;place-items:center;border-radius:50%;background:var(--gold-500);color:var(--green-900);font-weight:700;font-family:var(--font-display)}
.profile-menu{position:absolute;right:0;top:46px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
box-shadow:0 16px 44px rgba(0,0,0,.2);padding:6px;min-width:230px;z-index:3000}
.profile-menu .pm-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px}
.profile-menu .pm-head .avatar{width:40px;height:40px}
.profile-menu .pm-name{font-weight:700;font-size:14px;color:var(--ink)}
.profile-menu .pm-role{font-size:12px;color:var(--ink-3)}
.profile-menu .divider{height:1px;background:var(--line);margin:4px 2px}
.profile-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border:0;background:transparent;
border-radius:9px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.profile-menu button:hover{background:var(--surface-2)}
.profile-menu button svg{width:15px;height:15px;color:var(--ink-2)}
.profile-menu button.danger{color:var(--red-600)}
.profile-menu button.danger svg{color:var(--red-600)}
/* Companies House flags + tags + locked deadline */
.ch-flags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.ch-flag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.ch-flag.good{color:var(--green-600);border-color:color-mix(in srgb, var(--green-600) 30%, var(--line))}
.ch-flag.bad{color:var(--red-600);border-color:color-mix(in srgb, var(--red-600) 30%, var(--line))}
.ch-flag.unknown{opacity:.7}
.ch-tag{display:inline-block;font-size:10px;font-weight:700;background:var(--gold-500);color:var(--green-900);padding:0 6px;border-radius:20px;margin-left:6px;vertical-align:middle}
.svc-stat.ch-locked{background:color-mix(in srgb, var(--red-600) 8%, var(--surface));color:var(--red-600);border-color:color-mix(in srgb, var(--red-600) 30%, var(--line-2));cursor:not-allowed;font-weight:600}
.data.mini th,.data.mini td{padding:6px 9px;font-size:12.5px}
/* Fuzzy client picker */
.client-picker{position:relative}
.picker-results{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);
border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18);max-height:260px;overflow-y:auto;z-index:3200;padding:5px}
.picker-results .pr-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer}
.picker-results .pr-item:hover{background:var(--surface-2)}
.picker-results .pr-name{font-weight:600;font-size:13.5px;color:var(--ink)}
.picker-results .pr-sub{font-size:12px;color:var(--ink-3)}
.picker-results .pr-empty{padding:11px;color:var(--ink-3);font-size:13px;text-align:center}
/* Credit control inline search */
.cc-search{max-width:300px;flex:0 1 300px}
.panel-head .cc-search .input{height:38px}
/* Read-only Accounts/CS filing badges (derived from CH dates) */
.filing-badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 11px;border-radius:20px;border:1px solid transparent}
.filing-badge.fb-overdue{color:var(--red-600);background:color-mix(in srgb, var(--red-600) 12%, transparent);border-color:color-mix(in srgb, var(--red-600) 30%, transparent)}
.filing-badge.fb-due{color:var(--gold-600, #a8802f);background:color-mix(in srgb, var(--gold-500) 16%, transparent);border-color:color-mix(in srgb, var(--gold-500) 40%, transparent)}
.filing-badge.fb-submitted{color:var(--green-600);background:color-mix(in srgb, var(--green-600) 12%, transparent);border-color:color-mix(in srgb, var(--green-600) 30%, transparent)}
.filing-badge.fb-none{color:var(--ink-3);background:var(--surface-2)}
/* Inline label + small select (e.g. VAT registered Yes/No) */
.field.inline-field{display:flex;align-items:center;gap:14px}
.field.inline-field label{margin:0;white-space:nowrap}
select.input.sm-select{width:96px;min-width:88px;flex:0 0 auto;padding-right:28px}
/* Clickable VAT badge */
.filing-badge.vat-badge{cursor:pointer}
.filing-badge.vat-badge:hover{filter:brightness(0.96);text-decoration:underline}
/* Per-page control + pagination */
.per-page{display:flex;align-items:center;gap:8px;margin-right:10px}
.per-page label{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.per-page select.input{width:78px;height:36px;padding:6px 26px 6px 10px}
.tbl-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px 4px;flex-wrap:wrap}
.tbl-foot-info{font-size:12.5px;color:var(--ink-3)}
.pager{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pager .pg-btn{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
border-radius:9px;font-size:13px;font-weight:600;cursor:pointer}
.pager .pg-btn:hover:not(:disabled):not(.active){background:var(--surface-2)}
.pager .pg-btn.active{background:var(--green-600);border-color:var(--green-600);color:#fff}
.pager .pg-btn:disabled{opacity:.45;cursor:default}
.pager .pg-dots{padding:0 4px;color:var(--ink-3)}
/* Mobile menu: keep toggle usable + backdrop to close */
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(10,20,15,.45);z-index:39}
@media(max-width:900px){
.sidebar{padding-top:64px}
.sb-backdrop.show{display:block}
}
/* ===== Credit Control rebuild ===== */
/* Add-new dropdown */
.addnew-wrap{position:relative}
.addnew-menu{position:absolute;right:0;top:46px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
box-shadow:0 14px 40px rgba(0,0,0,.2);padding:6px;min-width:210px;z-index:3000}
.addnew-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 11px;border:0;background:transparent;
border-radius:9px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.addnew-menu button:hover{background:var(--surface-2)}
.addnew-menu button svg{width:15px;height:15px;color:var(--ink-2)}
/* Contact-method inline checkboxes */
.method-pick{display:flex;flex-direction:column;gap:2px}
.method-pick label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.method-pick input{width:14px;height:14px;accent-color:var(--gold-500)}
/* Borderless clean table (OD follow-up + history) */
.data.borderless th,.data.borderless td{border:0;border-bottom:1px solid var(--line);padding:8px 10px;vertical-align:middle}
.data.borderless thead th{border-bottom:1px solid var(--line-2);color:var(--ink-3);font-weight:600}
.data.borderless .inline-input{min-width:110px}
/* Grand total row */
.data .grand td{border-top:2px solid var(--line-2);background:var(--surface-2);font-weight:700;font-variant-numeric:tabular-nums}
/* Payment status hint */
.pay-status{margin-top:6px;font-size:13px;color:var(--ink-2)}
.pay-status .pill{margin-right:6px}
/* Multi-select dropdown (follow-up method, income services) */
.ms-wrap{position:relative;display:inline-block}
/* When a filter dropdown is open, lift its toolbar above the table area below it so the
menu is never clipped by the table's own scroll container. */
.panel-head.ms-open,.tbl-toolbar.ms-open{position:relative;z-index:1200}
.ms-btn{text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:120px;width:auto}
.ms-menu{position:absolute;left:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:12px;
box-shadow:0 14px 40px rgba(0,0,0,.18);padding:8px;min-width:190px;z-index:3200}
.ms-menu label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap}
.ms-menu label:hover{background:var(--surface-2)}
.ms-menu input{width:15px;height:15px;accent-color:var(--gold-500)}
.ms-menu .ms-div{height:1px;background:var(--line);margin:5px 2px}
/* An open filter menu is positioned against the button in viewport coordinates (see
floatMsMenu), which lifts it out of the toolbar's stacking context so nothing on the panel
below can paint over it. */
.ms-menu.ms-floating{position:fixed;top:0;left:0;overflow-y:auto;z-index:5000}
/* Select all / Clear sit at opposite ends, separated from the options above them. */
.ms-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:6px;padding:7px 8px 1px;border-top:1px solid var(--line)}
/* The filter buttons summarise their selection, but a single long service name can still run
on — cap them so the toolbar keeps its shape. */
#cl-svc-btn,#cl-miss-btn{max-width:250px}
/* Grouped report cards */
.card-group{margin-bottom:16px}
.card-group .cg-title{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:0 2px 8px}
/* Income summary filters + title total */
.inc-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.inc-total{font-family:var(--font-body);font-size:16px;color:var(--brand);margin-left:12px;font-weight:700}
/* Right-align numeric column headers to match right-aligned numbers */
table.data th.num{text-align:left}
/* Constrain stray icons inside table cells (e.g. tasks activity) */
.tbl-ico{width:14px;height:14px;vertical-align:-2px}
/* Multi-line info cards (Credit Control Report top) */
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:20px}
.info-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm,0 1px 2px rgba(0,0,0,.04))}
.info-card .ic-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}
.info-card .ic-head svg{width:17px;height:17px;color:var(--gold-600,#a8802f)}
.info-card .ic-body{display:flex;flex-direction:column;gap:9px}
.info-card .ic-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2)}
.info-card .ic-line b{font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.info-card .ic-line b.neg{color:var(--red-600)}
@media(max-width:640px){.info-cards{grid-template-columns:1fr}}
/* Report/section totals shown on the title line: green in light, gold in dark */
.rep-total,.inc-total{font-family:var(--font-body);font-size:16px;font-weight:700;margin-left:12px;color:var(--green-600);font-variant-numeric:tabular-nums}
[data-theme="dark"] .rep-total,[data-theme="dark"] .inc-total{color:var(--gold-500)}
/* Inactive client reason */
.inactive-tag{display:inline-block;margin-left:8px;font-size:11px;color:var(--red-600);background:rgba(200,50,50,.08);border:1px solid rgba(200,50,50,.25);border-radius:20px;padding:1px 8px;vertical-align:middle;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inactive-banner{display:flex;align-items:center;gap:9px;background:rgba(200,50,50,.08);border:1px solid rgba(200,50,50,.28);color:var(--red-600);border-radius:12px;padding:11px 14px;margin-bottom:16px;font-size:13.5px}
.inactive-banner svg{width:17px;height:17px;flex:0 0 auto}
/* Per-table print (Deadline Reporting PDF button) */
@media print{
body.printing-one .no-print{display:none !important}
body.printing-one .sidebar,body.printing-one .topbar,body.printing-one .sb-backdrop{display:none !important}
body.printing-one .main,body.printing-one .main.collapsed{margin-left:0 !important}
body.printing-one .print-block:not(.print-target){display:none !important}
}
/* Password eye icon sizing + hover */
.input-icon .eye{cursor:pointer;display:flex;align-items:center}
.input-icon .eye svg{width:18px;height:18px;display:block}
.input-icon .eye:hover{color:var(--ink)}
.input-icon .input{padding-right:40px}
/* Keep the dashboard "As of" label on one line */
.date-range{white-space:nowrap;flex-wrap:nowrap}
.date-range span{white-space:nowrap}
/* Standard font for all figures across the app */
.data td.num,.data th.num,.stat .val,.rep-total,.inc-total,.info-card .ic-line b{font-family:var(--font-body);font-variant-numeric:tabular-nums}
/* Exclude-from-value toggle on a client service line */
.svc-line .svc-excl{grid-column:1 / -1;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);cursor:pointer;margin-top:2px}
.svc-line .svc-excl input{width:14px;height:14px;accent-color:var(--gold-500)}
/* Net Amount -> VAT % -> Total Amount, read left to right on their own row. Total is the fee
the client pays and the figure the auto-generated invoice carries. */
.svc-line .svc-money{grid-column:1 / -1;display:grid;grid-template-columns:1fr .9fr 1fr;gap:8px;align-items:end}
.svc-line .svc-money .field{margin:0}
.svc-line .svc-money .svc-charge{font-weight:600}
@media(max-width:900px){.svc-line .svc-money{grid-template-columns:1fr}}
/* Export column picker */
.exp-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;max-height:230px;overflow:auto;padding:4px 2px}
.exp-cols label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap}
.exp-cols input{width:15px;height:15px;accent-color:var(--gold-500)}
/* ===== Global table freeze + sort + synced scrollbar ===== */
.tbl-wrap{max-height:72vh;overflow:auto;position:relative}
.data thead th{position:sticky;top:0;z-index:3;background:var(--surface)}
/* Inside a modal the whole WINDOW scrolls, not each table — a sticky table header there
detaches from its own table and floats over other boxes mid-scroll, which reads as
broken. Headers in modals scroll naturally with their table; the sticky behaviour stays
for full-page tables, where it belongs. Tables with their OWN scroll area inside a modal
(a .tbl-wrap that actually scrolls) keep the sticky header, since there it works. */
.modal-body .data thead th{position:static}
.modal-body .tbl-wrap[style*="max-height"] .data thead th{position:sticky}
.data.borderless thead th{background:var(--surface)}
.data th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.data th.sortable::after{content:"\2195";opacity:.3;margin-left:6px;font-size:10px;font-weight:400}
.data th.sort-asc::after{content:"\2191";opacity:.95}
.data th.sort-desc::after{content:"\2193";opacity:.95}
/* Synced horizontal scrollbar shown above wide tables */
.hscroll-top{overflow-x:auto;overflow-y:hidden;height:13px;margin-bottom:4px}
.hscroll-top .hscroll-inner{height:1px}
/* Modal body scrolls when tall; dropdown menus already scroll */
.modal-body{max-height:74vh;overflow:auto}
/* ===== Column chooser redesign ===== */
.cp-sec{margin-bottom:12px}
.cp-sec:last-child{margin-bottom:0}
.cp-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-bottom:8px}
.cp-checks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cp-check{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink-2);line-height:1.25;min-width:0}
.cp-check.on{border-color:var(--green-500,#3a7d5c);background:rgba(58,125,92,.08);color:var(--ink)}
.cp-check input{width:15px;height:15px;accent-color:var(--green-600,#2f6b4f);flex:0 0 auto}
.cp-order{border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--surface-2);display:flex;flex-direction:column;gap:4px}
.cp-drag{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 8px;background:var(--surface);border:1px solid var(--line);border-radius:7px;cursor:grab;color:var(--ink)}
.cp-drag.dragging{opacity:.5}
.cp-drag .grip{color:var(--ink-3);display:flex}
.cp-drag .grip svg{width:13px;height:13px}
/* Quick add button + menu */
.quick-add-wrap{padding:10px 14px 4px}
.quick-add-btn{width:100%;justify-content:center}
.sidebar.collapsed .quick-add-btn .nav-label{display:none}
.quick-add-menu{display:flex;flex-direction:column;gap:8px}
.qa-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font-size:14px;color:var(--ink);text-align:left;width:100%}
.qa-item:hover{background:var(--surface-2);border-color:var(--gold-400,#c9a24b)}
.qa-item svg{width:18px;height:18px;color:var(--gold-600,#a8802f)}
/* Table toolbar (search + per-page + pagination on one row) */
.tbl-toolbar .tbl-count{font-size:12.5px;white-space:nowrap}
.tbl-toolbar .pager-top .pager{margin:0}
.data .kebab-menu{right:0}
/* ===== Table scroll: top-only horizontal, tidy vertical, data margins ===== */
.tbl-wrap{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}
/* comfortable left/right breathing room so data never sits under the scrollbar or at the edge */
.data th:first-child,.data td:first-child{padding-left:18px}
.data th:last-child,.data td:last-child{padding-right:18px}
.tbl-wrap::-webkit-scrollbar{width:10px;height:10px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:2px solid var(--surface)}
.tbl-wrap::-webkit-scrollbar-track{background:transparent}
/* ===== Column chooser: header with close + scrollable body ===== */
.cp-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:13px;position:sticky;top:0;background:var(--surface);border-radius:12px 12px 0 0}
.cp-x{background:none;border:none;cursor:pointer;color:var(--ink-3);display:flex;padding:2px;border-radius:6px}
.cp-x:hover{color:var(--ink);background:var(--surface-2)}
.cp-x svg{width:16px;height:16px}
/* Ensure dropdown/multiselect menus always show their scrollbar when tall */
.ms-menu::-webkit-scrollbar{width:9px}
.ms-menu::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
/* ===== Fix: make popup bodies actually scroll with a visible scrollbar ===== */
/* Visible scrollbars on every scrollable popup/menu (Firefox + WebKit) */
.cp-body,.ms-menu,.kebab-menu,.profile-menu,.modal-body,.tbl-wrap{scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}
.cp-body::-webkit-scrollbar,.ms-menu::-webkit-scrollbar,.kebab-menu::-webkit-scrollbar,.profile-menu::-webkit-scrollbar,.modal-body::-webkit-scrollbar{width:12px;height:12px}
.cp-body::-webkit-scrollbar-thumb,.ms-menu::-webkit-scrollbar-thumb,.kebab-menu::-webkit-scrollbar-thumb,.profile-menu::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:7px;border:3px solid var(--surface)}
.cp-body::-webkit-scrollbar-track,.ms-menu::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track{background:transparent}
/* ===== Column chooser (single source of truth) =====
Explicit max-height on the scrolling element itself — no flexbox height
resolution involved, so it always scrolls. */
.col-panel{overflow:hidden}
.cp-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:13px;background:var(--surface);border-radius:12px 12px 0 0}
.cp-body{max-height:440px;max-height:min(60vh,440px);overflow-y:auto;overflow-x:hidden;padding:12px}
/* Always-visible scrollbars on scrollable popups (Firefox) */
.cp-body,.ms-menu,.kebab-menu,.profile-menu,.modal-body,.tbl-wrap,.hscroll-top{scrollbar-width:thin;scrollbar-color:var(--ink-3) var(--surface-2)}
/* WebKit/Blink scrollbar: slim premium track + rounded thumb + arrow buttons */
.cp-body::-webkit-scrollbar,.ms-menu::-webkit-scrollbar,.kebab-menu::-webkit-scrollbar,.profile-menu::-webkit-scrollbar,.modal-body::-webkit-scrollbar,.tbl-wrap::-webkit-scrollbar,.hscroll-top::-webkit-scrollbar{width:11px;height:11px}
.cp-body::-webkit-scrollbar-track,.ms-menu::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track,.tbl-wrap::-webkit-scrollbar-track,.hscroll-top::-webkit-scrollbar-track{background:var(--surface-2);border-radius:8px}
.cp-body::-webkit-scrollbar-thumb,.ms-menu::-webkit-scrollbar-thumb,.kebab-menu::-webkit-scrollbar-thumb,.profile-menu::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb,.tbl-wrap::-webkit-scrollbar-thumb,.hscroll-top::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:8px;border:2px solid var(--surface-2);min-height:34px;min-width:40px}
.cp-body::-webkit-scrollbar-thumb:hover,.ms-menu::-webkit-scrollbar-thumb:hover,.tbl-wrap::-webkit-scrollbar-thumb:hover,.hscroll-top::-webkit-scrollbar-thumb:hover{background:var(--ink-2)}
/* Vertical up/down arrow buttons (Chrome / Edge) */
.cp-body::-webkit-scrollbar-button:single-button:vertical:decrement,.tbl-wrap::-webkit-scrollbar-button:single-button:vertical:decrement,.modal-body::-webkit-scrollbar-button:single-button:vertical:decrement{height:14px;background:var(--surface-2) no-repeat center/8px url("data:image/svg+xml;utf8,")}
.cp-body::-webkit-scrollbar-button:single-button:vertical:increment,.tbl-wrap::-webkit-scrollbar-button:single-button:vertical:increment,.modal-body::-webkit-scrollbar-button:single-button:vertical:increment{height:14px;background:var(--surface-2) no-repeat center/8px url("data:image/svg+xml;utf8,")}
/* Horizontal left/right arrow buttons on the top synced scrollbar */
.hscroll-top::-webkit-scrollbar-button:single-button:horizontal:decrement{width:14px;background:var(--surface-2) no-repeat center/8px url("data:image/svg+xml;utf8,")}
.hscroll-top::-webkit-scrollbar-button:single-button:horizontal:increment{width:14px;background:var(--surface-2) no-repeat center/8px url("data:image/svg+xml;utf8,")}
/* ===== Direct Debit UI ===== */
.dd-picker{position:relative}
.dd-results{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto;z-index:80}
.dd-result{padding:9px 12px;cursor:pointer;font-size:13.5px;border-bottom:1px solid var(--line)}
.dd-result:last-child{border-bottom:none}
.dd-result:hover{background:var(--surface-2)}
.dd-amount-box{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px;font-size:14px}
.dd-warn{background:rgba(176,0,32,.06);border:1px solid rgba(176,0,32,.25);color:#b00020;border-radius:10px;padding:12px 14px;margin-bottom:12px;font-size:13px;display:flex;gap:8px;align-items:flex-start}
.dd-warn svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.dd-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
.dd-pill.accepted{background:rgba(58,125,92,.14);color:var(--green-600,#2f6b4f)}
.dd-pill.invited{background:rgba(201,162,75,.16);color:#8a6d1f}
.dd-pill.cancelled{background:rgba(176,0,32,.1);color:#b00020}
.dd-pill.not_interested{background:var(--surface-2);color:var(--ink-3)}
/* Column chooser popup must sit above the table below it */
.tbl-wrap{z-index:1}
/* .col-panel z-index handled by the fixed rule above */
/* Taller DD quick-action modals so ~5 client suggestions are visible */
.dd-modal-body{min-height:360px}
.dd-modal-body .dd-results{max-height:230px}
/* Client view compliance status rows */
.cv-status-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.cv-status-lbl{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);min-width:74px}
.ro-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12.5px;font-weight:600;border:1px solid transparent}
/* ===== Invoice preview + company profile ===== */
.inv-preview{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px;font-size:13px;color:#333;max-height:60vh;overflow:auto}
.inv-preview .inv-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}
.inv-preview .inv-co-name{font-weight:700;font-size:15px;margin-bottom:6px;color:#222}
.inv-preview .inv-co-lines{color:#666;font-size:11px;line-height:1.6}
.inv-preview .inv-meta{display:flex;justify-content:space-between;margin-bottom:22px;font-size:12px}
.inv-preview .inv-label{color:#9a9a9a;font-size:11px;margin-bottom:3px}
.inv-preview .inv-to{color:#c99a3b}
.inv-preview .inv-meta-right{display:grid;grid-template-columns:auto auto;gap:2px 16px;align-content:start;justify-content:start}
.inv-preview .inv-meta-right div{display:contents}
.inv-preview .inv-meta-right span{color:#9a9a9a;text-align:left}
.inv-preview .inv-meta-right b{text-align:left}
.inv-preview .inv-items{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:12px}
.inv-preview .inv-items th{color:#9a9a9a;font-weight:400;text-align:left;border-bottom:1px solid #e5e5e5;padding:7px 6px;font-size:11px}
.inv-preview .inv-items th:nth-child(n+4){text-align:right}
.inv-preview .inv-items td:nth-child(2),.inv-preview .inv-items th:nth-child(2){white-space:nowrap;min-width:150px}
.inv-preview .inv-items td{padding:9px 6px;border-bottom:1px dashed #eee}
.inv-preview .inv-totals{width:270px;margin-left:auto}
.inv-preview .inv-totals>div{display:flex;justify-content:space-between;padding:5px 6px;color:#555}
.inv-preview .inv-totals>div span:first-child{color:#9a9a9a}
.inv-preview .inv-balance{border-top:1px dashed #ccc;margin-top:6px;font-weight:700;color:#222;font-size:15px}
.inv-preview .inv-bank{margin-top:40px;color:#999;font-size:10.5px;line-height:1.7}
.cp-logo-box{border:1px dashed var(--line);border-radius:10px;padding:16px;text-align:center}
/* ===== Professional invoice preview (in modal) ===== */
.inv-preview{background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px;color:#333;font-size:13px}
.inv-preview .inv-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}
.inv-preview .inv-co-name{font-weight:700;font-size:15px;margin-bottom:6px}
.inv-preview .inv-co-lines{color:#555;font-size:11px;line-height:1.6}
.inv-preview .inv-logo img{max-height:74px;max-width:220px}
.inv-preview .inv-meta{display:flex;justify-content:space-between;margin-bottom:22px;font-size:12px}
.inv-preview .inv-label{color:#8a8a8a;font-size:11px;margin-bottom:3px}
.inv-preview .inv-to{color:#c99a3b;font-weight:600}
.inv-preview .inv-meta-right{display:grid;grid-template-columns:auto auto;gap:2px 18px;align-content:start;justify-content:start}
.inv-preview .inv-meta-right div{display:contents}
.inv-preview .inv-meta-right span{color:#8a8a8a;text-align:left}
.inv-preview .inv-meta-right b{text-align:left}
.inv-preview .inv-items{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:12px}
.inv-preview .inv-items th{background:#f2e9dc;color:#b5915a;font-weight:400;text-align:left;border-bottom:none;padding:9px 10px;font-size:11px;letter-spacing:.03em}
.inv-preview .inv-items td{padding:9px 6px;border-bottom:1px dashed #eee}
.inv-preview .inv-totals{width:340px;margin-left:auto;font-size:12px}
.inv-preview .inv-totals>div{display:flex;justify-content:space-between;padding:5px 6px;color:#555}
.inv-preview .inv-balance{border-top:1px dashed #ccc;margin-top:6px;font-weight:700;font-size:15px;color:#222}
.inv-preview .inv-bank{margin-top:44px;color:#999;font-size:10.5px;line-height:1.7}
/* dark theme: keep the invoice paper white for fidelity */
[data-theme="dark"] .inv-preview{background:#fff;color:#333}
/* Company profile settings */
.logo-preview{max-height:64px;max-width:200px;border:1px dashed var(--line);border-radius:8px;padding:6px;background:var(--surface-2)}
/* ===== Premium column-chooser popup: wide, on top, readable labels ===== */
.col-panel{width:320px}
#dds-colpanel{width:340px;box-shadow:0 12px 40px rgba(0,0,0,.22)}
.cp-checks{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cp-check{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;padding:7px 9px;cursor:pointer;font-size:12.5px;min-width:0}
.cp-check span{overflow:hidden;white-space:normal;word-break:break-word}
.cp-check:hover{border-color:var(--green-600)}
.cp-check.on{border-color:var(--green-600);background:rgba(58,125,92,.07)}
/* Payment modal: invoice multi-pick list */
.inv-picklist{border:1px solid var(--line);border-radius:10px;max-height:180px;overflow-y:auto;background:var(--surface)}
.inv-pick{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px}
.inv-pick:last-child{border-bottom:none}
.inv-pick:hover{background:var(--surface-2)}
.inv-pick input{accent-color:var(--green-600)}
.inv-pick .num{margin-left:auto;font-weight:600}
.pill.overdue{background:rgba(176,0,32,.1);color:#b00020}
tr.row-click{cursor:pointer}
tr.row-click:hover td{background:var(--surface-2)}
.dd-pill.not_invited,.dd-pill.one_off{background:var(--surface-2);color:var(--ink-3)}
.ddf-pending{color:#c0392b !important;background:rgba(192,57,43,.08);border-color:rgba(192,57,43,.25)}
/* Date-picker calendar icon: black in light mode (default), white in dark mode */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.85}
input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer}
/* Clickable segment lines in report cards */
.ic-line.ic-click{cursor:pointer;border-radius:8px;padding:5px 8px;margin:0 -8px}
.ic-line.ic-click:hover{background:var(--surface-2)}
.ic-line.ic-active{background:rgba(58,125,92,.1)}
.ic-line.ic-active b{color:var(--green-600)}
tr.seg-active td{background:rgba(58,125,92,.1)}
tr.seg-active td:first-child{font-weight:700;color:var(--green-600)}
/* Report overview grids: clickable cells */
.ov-cell{cursor:pointer;transition:background .12s}
.ov-cell:hover{background:var(--surface-2)}
.ov-active{background:rgba(58,125,92,.14) !important;font-weight:700;color:var(--green-600)}
/* Disengage checklist modal */
.dz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--surface-2);border-radius:11px;margin-bottom:12px;flex-wrap:wrap}
.dz-hname{font-weight:700;font-size:15px}
.dz-hmeta{font-size:12px;color:var(--ink-3);margin-top:2px}
.dz-hfin{display:flex;gap:14px;font-size:12px;flex-wrap:wrap}
.dz-hfin span{white-space:nowrap}
.dz-donebanner{display:flex;align-items:center;gap:8px;background:rgba(58,125,92,.1);color:var(--green-600);border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.dz-form{max-height:56vh;overflow-y:auto;padding-right:6px}
.dz-sec{margin-bottom:14px}
.dz-sectitle{font-weight:700;font-size:13px;color:var(--brand);margin:10px 0 7px;border-bottom:1px solid var(--line);padding-bottom:4px}
[data-theme="dark"] .dz-sectitle{color:var(--gold-500)}
.dz-item{margin-bottom:8px}
.dz-item > label{display:block;font-size:12.5px;margin-bottom:3px;color:var(--ink-2)}
.dz-row{display:grid;grid-template-columns:1fr 220px;gap:10px;align-items:center}
.dz-row > label{margin-bottom:0}
@media (max-width:640px){.dz-row{grid-template-columns:1fr}}
/* Disengage done-banner: keep the check icon small (SVGs default to full width) */
.dz-donebanner{align-items:center}
.dz-donebanner .dz-ico{display:inline-flex;flex:0 0 auto}
.dz-donebanner .dz-ico svg{width:18px;height:18px}
/* Disengage checklist: compact numbered rows */
.dz-num{display:inline-block;min-width:20px;color:var(--ink-3);font-weight:700}
.dz-form .dz-item{margin-bottom:6px}
.dz-form .dz-item > label{font-size:12.5px}
/* Disengage checklist: more line spacing + reason field */
.dz-form .dz-item{margin-bottom:11px}
.dz-form .dz-reason{margin-top:-4px;padding-left:20px}
.dz-form .dz-reason label{font-size:11.5px;color:var(--red-500)}
.dz-form .dz-reason .input{border-color:var(--red-300,#f0b9b9)}
/* Director create prompt */
.dz-dirlist{display:flex;flex-direction:column;gap:8px}
.dz-dircheck{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;cursor:pointer}
.dz-dircheck:hover{background:var(--surface-2)}
/* Kebab menu close row */
.kebab-close-row{display:flex;justify-content:flex-end;padding:2px 2px 0;margin-bottom:2px}
.kebab-menu button.kebab-close{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);width:26px;height:26px;border-radius:7px;display:grid;place-items:center;cursor:pointer;padding:0}
.kebab-menu button.kebab-close:hover{background:var(--red-100);color:var(--red-600)}
.kebab-menu button.kebab-close svg{width:15px;height:15px;color:inherit}
/* Submission modal + docs */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.row-2{grid-template-columns:1fr}}
.doc-list{display:flex;flex-direction:column;gap:8px}
.doc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;flex-wrap:wrap}
.doc-name{display:flex;align-items:center;gap:8px;font-size:13.5px}
.doc-actions{display:flex;gap:6px}
/* Dashboard: 7 compact cards per row; they grow when the sidebar is collapsed. */
.cards-dash{grid-template-columns:repeat(8,1fr);gap:10px}
.cards-dash .stat{padding:12px 13px}
.cards-dash .stat .label{font-size:11px;line-height:1.25;padding-right:26px}
.cards-dash .stat .val{font-size:20px;margin-top:6px}
.cards-dash .stat .ico{width:26px;height:26px;top:10px;right:10px;border-radius:7px}
.cards-dash .stat .ico svg{width:14px;height:14px}
@media (max-width:1200px){.cards-dash{grid-template-columns:repeat(4,1fr)}}
@media (max-width:680px){.cards-dash{grid-template-columns:repeat(2,1fr)}}
/* ============================================================
DAILY PRODUCTIVITY REPORT + PRODUCTIVITY CHECK
============================================================ */
/* Compact grid: headers wrap onto two lines so columns stay narrow. */
table.data.dp-grid th{white-space:normal;line-height:1.25;max-width:96px;min-width:62px;
vertical-align:bottom;font-size:11px;padding:10px 10px}
table.data.dp-grid td{white-space:nowrap;font-size:12.5px;padding:11px 10px}
table.data.dp-grid td:last-child{white-space:normal;min-width:140px}
table.data.dp-grid th:first-child,table.data.dp-grid td:first-child{padding-left:14px}
.dpr-box{border:1px solid var(--line);border-radius:12px;margin-bottom:18px;overflow:hidden;background:var(--surface)}
.dpr-box-head{display:block;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.dpr-bh-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:12.5px;line-height:1.4}
.dpr-bh-row + .dpr-bh-row{margin-top:2px;font-size:12px}
/* Branded print header — never shown on screen, only on the printout. */
.dpr-print-head{display:none}
/* ============================================================
MOBILE RESPONSIVENESS — every table scrolls horizontally
============================================================ */
/* Any container holding a data table becomes a horizontal scroller. */
.tbl-wrap,
div:has(> table.data),
div:has(> table){-webkit-overflow-scrolling:touch}
@media (max-width:900px){
/* Tables: let them keep their natural width and scroll sideways instead of squashing. */
.tbl-wrap{overflow-x:auto !important;overflow-y:auto;max-height:none}
div:has(> table.data),div:has(> table){overflow-x:auto}
table.data{min-width:640px}
/* Toolbars and filter rows wrap instead of overflowing. */
.panel-head{flex-wrap:wrap;gap:8px}
.panel-head .spacer{flex-basis:100%;height:0}
.panel-head .input,.panel-head select.input{max-width:100%}
/* Tab bars scroll sideways rather than wrapping into a tall block. */
.cc-tabs,.cr-tabs,#cc-tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch}
.cc-tabs::-webkit-scrollbar,.cr-tabs::-webkit-scrollbar,#cc-tabs::-webkit-scrollbar{height:0}
/* Cards and grids stack sensibly. */
.cards{grid-template-columns:repeat(2,1fr)}
.grid-2,.grid-3{grid-template-columns:1fr}
.date-range{flex-wrap:wrap}
/* Modals use the full width on a phone. */
.modal{width:calc(100vw - 24px);max-width:none;max-height:88vh}
.modal-body{max-height:66vh}
}
@media (max-width:560px){
.cards{grid-template-columns:1fr}
.content{padding:14px 16px 60px}
.panel-body{padding:14px 14px}
.panel-body>.tbl-wrap,.panel-body>table.data{margin-left:-14px;margin-right:-14px;width:calc(100% + 28px)}
.topbar h1{font-size:17px}
.btn{padding:8px 12px}
}
/* ============================================================
ICON SIZING SAFETY NET
Every icon() SVG has a viewBox but no width/height, so if a container
ever lets it grow (e.g. a wrapping flex row on mobile) it balloons to its
intrinsic size. This element-level default catches any icon that no other
rule sizes; every existing class rule (.btn svg, .empty svg, .mark, …) has
higher specificity and still wins.
============================================================ */
svg{width:16px;height:16px;flex:none}
.date-range svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
/* ============================================================
MOBILE POLISH
============================================================ */
@media (max-width:900px){
/* Date pickers: stay on one line, full-width inputs, never a giant icon. */
.date-range{flex-wrap:nowrap;gap:6px;min-width:0}
.date-range input{min-width:0;flex:1 1 auto;font-size:13px;padding:8px}
.date-range span{flex:none}
/* Filter bars: controls share the row neatly instead of overflowing. */
.panel-head > .input,.panel-head > select.input{flex:1 1 140px;min-width:0}
.panel-head .search{flex:1 1 100%}
.panel-head .search input{width:100%;min-width:0}
.panel-head .btn{flex:0 0 auto}
.per-page{flex:0 0 auto}
/* Segmented tab bars scroll rather than squash. */
.seg{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:0 0 auto}
/* Modals: full width, comfortable inputs (16px stops iOS zooming on focus). */
.modal{width:calc(100vw - 20px);max-width:none}
.modal .input,.modal input,.modal select,.modal textarea{font-size:16px}
/* Toggles and pickers keep their shape. */
.toggle{flex:0 0 auto}
.dd-picker,.dd-results{max-width:100%}
}
@media (max-width:560px){
.panel-head{align-items:stretch}
.panel-head h3{flex:1 1 100%}
.panel-head > .input,.panel-head > select.input,.panel-head .btn{flex:1 1 100%}
.date-range{flex:1 1 100%}
.rep-total{flex:0 0 auto}
.dp-grid td:last-child{min-width:110px}
}
/* ============================================================
DATE / TIME INPUTS — consistent, premium sizing everywhere
The browser's own calendar button scales with the input's font-size, so on
mobile (where inputs go to 16px to stop iOS zooming) it balloons and sits
next to our decorative icon. Pin it to a fixed size instead.
============================================================ */
input[type="date"],input[type="time"],input[type="month"]{
font-size:13.5px;line-height:1.2;min-height:38px;max-width:100%;
font-family:inherit;color:var(--ink);background-color:var(--surface)}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
width:15px;height:15px;padding:0;margin:0 0 0 6px;flex:none;
opacity:.5;cursor:pointer;transition:opacity .15s ease}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator{opacity:.95}
/* Strip the spinner / clear affordances that clutter the field. */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;display:none}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
/* Our decorative calendar glyph never grows. */
.date-range > svg{width:15px;height:15px;flex:0 0 15px;color:var(--ink-3)}
/* ============================================================
MOBILE — touch-friendly, tidy, no oversized controls
============================================================ */
@media (max-width:900px){
/* Inputs: 16px stops iOS zoom-on-focus, but the calendar button stays pinned. */
.input,input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="date"],select,textarea{font-size:16px}
input[type="date"]{min-height:42px;padding:9px 10px}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{width:16px;height:16px;margin-left:8px;opacity:.6}
/* Comfortable tap targets. */
.btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
.btn.btn-sm{min-height:36px}
.icon-btn{min-width:40px;min-height:40px}
/* Dashboard: "As of" picker sits on its own tidy row. */
.cards-dash{gap:8px}
.cards-dash .stat{padding:11px 12px}
/* Productivity Check / report toolbars: controls line up, nothing overflows. */
.panel-head .toggle{flex:0 0 auto;margin-left:0}
.panel-head .rep-total{flex:0 0 auto}
}
@media (max-width:560px){
/* On a phone the native calendar button is enough — drop our decorative glyph. */
.date-range > svg{display:none}
.date-range{flex:1 1 100%;gap:8px}
.date-range input{flex:1 1 0;min-width:0}
.panel-head{gap:10px}
.panel-head h3{font-size:16px}
/* Full-width, evenly spaced controls read as a proper mobile form. */
.panel-head > .btn,.panel-head > .input,.panel-head > select.input{flex:1 1 100%}
.seg{width:100%}
}
/* ---------- Evaluation report ---------- */
/* Comfortable left/right margins: the panel's tables sit flush to the edges otherwise. */
.ev-pad{padding-top:4px;padding-left:22px;padding-right:22px;padding-bottom:22px}
.ev-report{padding-top:4px}
/* Client info as simple label/value lines. */
.ev-info{display:flex;flex-direction:column;gap:7px;margin:2px 0 30px}
.ev-info div{display:flex;gap:8px;align-items:baseline}
.ev-info span{min-width:140px;color:var(--ink-3);font-size:13px}
.ev-info b{font-size:14px;color:var(--ink);font-weight:600}
.ev-h{font-family:'Fraunces',serif;font-size:17px;margin:34px 0 12px;color:var(--ink)}
.ev-h:first-of-type{margin-top:0}
.ev-report .tbl-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ev-total td{border-top:1px solid var(--line-2);background:var(--surface-2)}
@media (max-width:900px){
.ev-pad{padding-left:12px;padding-right:12px;padding-bottom:18px}
.ev-info span{min-width:120px;font-size:12px}
}
@media print{
body.printing-dpr .ev-pad{padding-left:0;padding-right:0;padding-top:0}
body.printing-dpr .ev-info span{color:#4a5a52}
body.printing-dpr .ev-info b{color:#12241b}
body.printing-dpr .ev-h{color:#12241b;margin:22px 0 8px}
body.printing-dpr .ev-report .tbl-wrap{border:1px solid #b9c6bf;border-radius:4px}
body.printing-dpr .ev-total td{background:#f2f5f3;border-top:1px solid #b9c6bf}
body.printing-dpr .field,body.printing-dpr #ev-picker,body.printing-dpr #ev-pickwrap{display:none !important}
}
/* ---------- Daily Productivity: uncategorised task rows ---------- */
.dp-task-row{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:8px;
border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.dp-tr-name{flex:0 0 190px;font-weight:600;font-size:13px;color:var(--ink)}
.dp-task-row .input{flex:1 1 auto;min-width:0}
.dp-task-row .btn{flex:0 0 auto}
@media (max-width:900px){
.dp-task-row{flex-wrap:wrap}
.dp-tr-name{flex:1 1 100%}
}
/* ---------- Daily Productivity grid: readable Note column ---------- */
/* The Note is the only free-text column: give it a sane width and wrap it. */
table.data.dp-grid td.dp-c-notes{white-space:normal;word-break:break-word;
min-width:190px;max-width:250px;line-height:1.45}
table.data.dp-grid th.dp-c-notes{max-width:250px}
table.data.dp-grid td.dp-c-display_name{white-space:normal;min-width:150px;max-width:230px;line-height:1.35}
table.data.dp-grid td.dp-c-type_label{white-space:nowrap}
/* ============================================================
PRINTED REPORTS (Daily Report + Evaluation)
A genuine document: letterhead, clean tables, no app chrome,
no scrollbars, correct on A4 — and readable even in dark mode.
============================================================ */
@media print{
@page{size:A4 landscape;margin:12mm}
/* 1. Strip every trace of the app UI. */
body.printing-dpr .sidebar,
body.printing-dpr .topbar,
body.printing-dpr .seg,
body.printing-dpr .panel-head,
body.printing-dpr .btn,
body.printing-dpr .kebab,
body.printing-dpr .col-chooser,
body.printing-dpr .tbl-foot,
body.printing-dpr .per-page,
body.printing-dpr .hscroll-top,
body.printing-dpr .no-print,
body.printing-dpr .field,
body.printing-dpr #ev-picker,
body.printing-dpr #ev-pickwrap,
body.printing-dpr .dp-rev{display:none !important}
/* 2. No scroll containers anywhere — content flows onto the page. */
body.printing-dpr,
body.printing-dpr .layout,
body.printing-dpr .main,
body.printing-dpr .content,
body.printing-dpr .panel,
body.printing-dpr .cr-pane,
body.printing-dpr .tbl-wrap{overflow:visible !important;max-height:none !important}
body.printing-dpr *::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}
body.printing-dpr *{scrollbar-width:none !important}
/* 3. Page canvas: always light, whatever theme the app is in. */
body.printing-dpr{background:#fff !important;color:#12241b !important;
-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* .layout is min-height:100vh — in print that's the VIEWPORT height, which overflows
the sheet and throws a blank first page. Flatten the whole shell for printing. */
body.printing-dpr .layout{display:block !important;min-height:0 !important;height:auto !important}
body.printing-dpr .main,body.printing-dpr .main.collapsed{margin-left:0 !important;display:block !important;
min-height:0 !important;height:auto !important;width:100% !important}
body.printing-dpr .content{padding:0 !important;min-height:0 !important;height:auto !important}
body.printing-dpr .view,body.printing-dpr #app{min-height:0 !important;height:auto !important}
body.printing-dpr .panel{border:0 !important;box-shadow:none !important;background:#fff !important;padding:0 !important}
body.printing-dpr .muted,body.printing-dpr .rep-total{color:#4a5a52 !important}
/* 4. Letterhead. */
body.printing-dpr .dpr-print-head{display:flex !important;justify-content:space-between;align-items:center;
gap:20px;padding-bottom:8px;margin-bottom:12px;border-bottom:1.5px solid #0f4032}
.dpr-ph-left{display:flex;align-items:center;gap:12px}
.dpr-logo{max-height:38px;max-width:150px;object-fit:contain}
.dpr-co{font-family:'Fraunces',serif;font-size:16px;font-weight:600;color:#12241b;line-height:1.2}
.dpr-co-meta{font-size:9.5px;color:#4a5a52;line-height:1.4}
.dpr-ph-right{text-align:right}
.dpr-doc-title{font-family:'Fraunces',serif;font-size:13px;font-weight:600;color:#12241b;margin-bottom:1px}
/* 5. Staff boxes stay whole; headers repeat if a table spans pages. */
body.printing-dpr .dpr-box{break-inside:avoid;page-break-inside:avoid;border:1px solid #c3cec8 !important;
border-radius:5px;margin-bottom:12px;background:#fff !important;overflow:visible !important}
body.printing-dpr .dpr-box-head{background:#eef2f0 !important;border-bottom:1px solid #c3cec8 !important;
color:#12241b !important;padding:5px 10px}
body.printing-dpr .dpr-box-head b{color:#12241b !important}
body.printing-dpr .dpr-bh-row{font-size:10px;line-height:1.3}
body.printing-dpr .dpr-bh-row + .dpr-bh-row{font-size:9px;margin-top:0}
body.printing-dpr .dpr-box{margin-bottom:10px}
body.printing-dpr thead{display:table-header-group}
body.printing-dpr tr{page-break-inside:avoid}
/* 6. Tables: fixed layout so columns divide the page instead of overflowing. */
body.printing-dpr table.data{width:100% !important;border-collapse:collapse;background:#fff !important}
body.printing-dpr table.data th{background:#eef2f0 !important;color:#12241b !important;
border-bottom:1px solid #c3cec8 !important;text-transform:none;letter-spacing:0;font-size:9.5px}
body.printing-dpr table.data td{color:#1c2b23 !important;border-bottom:1px solid #dfe6e2 !important}
body.printing-dpr .data th.sortable::after{content:"" !important} /* no sort arrows in a document */
body.printing-dpr .data th.sortable{cursor:default}
body.printing-dpr table.data.dp-grid{table-layout:fixed;font-size:9.5px}
body.printing-dpr table.data.dp-grid th,
body.printing-dpr table.data.dp-grid td{padding:5px 6px;max-width:none;min-width:0;
white-space:normal;word-break:break-word;overflow-wrap:anywhere;vertical-align:top}
body.printing-dpr .dp-c-type_label{width:7%}
body.printing-dpr .dp-c-display_name{width:20%}
body.printing-dpr .dp-c-no_banks{width:5%}
body.printing-dpr .dp-c-no_credit_cards{width:6%}
body.printing-dpr .dp-c-no_transactions{width:6%}
body.printing-dpr .dp-c-tran_batch{width:5%}
body.printing-dpr .dp-c-tran_check{width:5%}
body.printing-dpr .dp-c-bank_allocation{width:6%}
body.printing-dpr .dp-c-bill_inv_entry{width:6%}
body.printing-dpr .dp-c-bill_inv_check{width:6%}
body.printing-dpr .dp-c-hours_spent{width:6%}
body.printing-dpr .dp-c-notes{width:22%}
/* 7. Evaluation report. */
body.printing-dpr .ev-pad{padding:0 !important}
body.printing-dpr .ev-info span{color:#4a5a52 !important}
body.printing-dpr .ev-info b{color:#12241b !important}
body.printing-dpr .ev-h{color:#12241b !important;margin:18px 0 8px}
body.printing-dpr .ev-report .tbl-wrap{border:1px solid #c3cec8 !important;border-radius:4px}
body.printing-dpr .ev-total td{background:#eef2f0 !important;border-top:1px solid #c3cec8 !important}
body.printing-dpr .ev-total td b{color:#12241b !important}
body.printing-dpr .empty{color:#4a5a52 !important}
}
/* ---------- Client allocation modal ---------- */
.al-results{margin-top:6px;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--surface)}
.al-results button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:9px 12px;
background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);cursor:pointer;font-size:13px}
.al-results button:last-child{border-bottom:0}
.al-results button:hover{background:var(--surface-2)}
.al-results .muted{font-size:11.5px}
.al-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;padding:8px;border:1px solid var(--line);
border-radius:10px;background:var(--surface-2);align-items:center}
.al-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 6px 4px 10px;border-radius:999px;
background:var(--surface);border:1px solid var(--line-2);font-size:12.5px}
.al-chip button{display:inline-flex;background:none;border:0;color:var(--ink-3);cursor:pointer;padding:2px}
.al-chip button:hover{color:var(--danger)}
.panel-sub{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
/* Export dialog: shows which slice of the directory is being exported */
.exp-scope{display:flex;align-items:center;gap:8px;padding:9px 12px;margin-bottom:14px;border-radius:10px;
background:var(--surface-2);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.exp-scope b{color:var(--ink)}
/* ---------- Daily Productivity: full-width multi-row entry sheet ---------- */
.modal.xl{max-width:min(1500px, calc(100vw - 40px))}
.dp-sheet-top{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:14px;
border-bottom:1px solid var(--line)}
.dp-sheet-head{display:flex;gap:6px;align-items:flex-end;padding:0 4px 6px;
font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600}
.dp-sheet-head span{flex:1 1 74px;min-width:0;line-height:1.25}
.dp-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.dp-row .dp-i{flex:1 1 74px;min-width:0;padding:8px 8px;font-size:12.5px;border-radius:8px}
.dp-row .dp-rm{flex:0 0 34px;padding:6px}
.dp-row select.dp-i{padding:8px 6px}
.dp-pick{position:relative}
.dp-pick .dp-i{width:100%}
.dp-pick-res{position:absolute;z-index:30;top:100%;left:0;right:0;margin-top:2px;background:var(--surface);
border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;max-height:220px;overflow-y:auto}
.dp-pick-res div{padding:8px 10px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--line)}
.dp-pick-res div:last-child{border-bottom:0}
.dp-pick-res div:hover{background:var(--surface-2)}
.dp-pick-res .muted{font-size:11px}
@media (max-width:1100px){
.dp-sheet-head{display:none} /* headers make no sense once rows wrap */
.dp-row{flex-wrap:wrap;padding:10px;border:1px solid var(--line);border-radius:10px;
background:var(--surface-2);margin-bottom:10px}
.dp-row .dp-i{flex:1 1 100px}
.dp-pick{flex:1 1 100% !important}
}
/* ---------- Client Issues ---------- */
.kebab{position:relative;display:inline-block}
.kebab-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:150px;
background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;padding:4px}
.kebab-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;
background:none;border:0;border-radius:7px;color:var(--ink);cursor:pointer;font-size:13px}
.kebab-menu button:hover{background:var(--surface-2)}
.kebab-menu button.danger{color:var(--danger)}
.kebab-menu button svg{width:15px;height:15px;flex:none}
.iss-view-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:12px 0 16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.iss-view-meta .muted{font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.iss-desc-box{padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-size:13.5px;white-space:pre-wrap}
.iss-timeline{max-height:320px;overflow-y:auto;padding:4px 2px;margin-bottom:14px}
.iss-note{padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--surface)}
.iss-note-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.iss-note-head .muted{font-size:11.5px}
.iss-note-body{font-size:13.5px;white-space:pre-wrap;line-height:1.5}
.iss-addnote{display:flex;gap:8px;align-items:flex-end}
.iss-addnote textarea{flex:1 1 auto;resize:vertical}
/* ---------- Deadline report: grouped multi-type view ---------- */
.dl-group{margin-bottom:26px}
.dl-group-head{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--gold-500)}
.dl-group-head h2{font-size:17px;margin:0;color:var(--ink)}
/* ---------- Task module (rebuilt) ---------- */
.tk-tabs{display:flex;gap:6px;margin-bottom:14px}
.tk-tabs button{padding:8px 18px;border:1px solid var(--line-2);background:var(--surface);border-radius:10px 10px 0 0;
color:var(--ink-2);font-weight:600;font-size:14px;cursor:pointer}
.tk-tabs button.active{background:var(--gold-500);color:#3a2e00;border-color:var(--gold-500)}
.tk-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tk-type-btn{padding:22px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);
color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;transition:all .12s}
.tk-type-btn:hover{border-color:var(--gold-500);background:var(--surface-2);transform:translateY(-1px)}
.tk-form{max-height:70vh;overflow-y:auto;padding-right:6px}
.tk-auto{padding:8px 12px;border-radius:8px;background:var(--surface-2);margin-bottom:14px;font-size:13px}
.tk-auto .ok{color:var(--gold-600);display:inline-flex;align-items:center;gap:6px}
.tk-auto .ok svg{width:15px;height:15px}
.ck-tbl{margin:4px 0 8px}
.ck-tbl th{font-size:11.5px}
.ck-tbl td{padding:5px 8px}
.ck-tbl .input{padding:5px 8px;font-size:13px}
.ck-inline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.ck-inline input{width:15px;height:15px;accent-color:var(--gold-500)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tk-step{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;font-size:13.5px;cursor:pointer}
.tk-step input{width:16px;height:16px;accent-color:var(--gold-500)}
.tk-steps-view .tk-step{cursor:default}
.tk-steps-view .tk-step.done{color:var(--gold-600);border-color:var(--gold-300)}
.tk-steps-view .tk-step svg{width:15px;height:15px;color:var(--gold-600)}
.tk-step-o{width:14px;height:14px;border:2px solid var(--line-2);border-radius:50%;display:inline-block}
.wf-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.wf-top .spacer{flex:1}
/* Disengaged list: clickable rows, fixed-width note column.
NB: names are deliberately not .dz-* — .dz-row is the disengagement checklist's grid
layout, and reusing it here collapsed table rows into a two-column grid. */
.data tr.dzlist-row{cursor:pointer}
.data tr.dzlist-row:hover{background:var(--row-hover,rgba(0,0,0,.03))}
.data td.dzlist-note span{display:block;width:15ch;max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Client Value month matrix */
.cv-matrix th.cv-particular, .cv-matrix td.cv-particular{text-align:left;position:sticky;left:0;background:var(--surface);z-index:1;min-width:210px}
.cv-matrix td.cv-particular.b{font-weight:700}
.cv-matrix th.num, .cv-matrix td.num{text-align:left;white-space:nowrap}
.cv-matrix tr.cv-total td{border-top:2px solid var(--line);background:color-mix(in srgb, var(--gold-500) 8%, var(--surface))}
.cv-matrix tr.cv-total td.cv-particular{background:color-mix(in srgb, var(--gold-500) 8%, var(--surface))}
.cv-matrix tr.cv-spacer td{height:10px;border:0;background:transparent}
.cv-matrix .link{cursor:pointer}
.wf-toggle{display:inline-flex;align-items:center;gap:9px;padding:5px 12px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.wf-toggle-lbl{font-size:13px;font-weight:700;color:var(--muted);transition:color .15s}
.wf-toggle-lbl.active{color:var(--brand)}
[data-theme="dark"] .wf-toggle-lbl.ltd.active{color:var(--gold-500)}
.wf-toggle.on .wf-toggle-lbl.sa.active{color:var(--gold-600)}
.wf-switch{position:relative;width:44px;height:24px;border-radius:20px;border:none;cursor:pointer;background:var(--green-700);padding:0;transition:background .18s}
.wf-toggle.on .wf-switch{background:var(--gold-500)}
.wf-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.wf-toggle.on .wf-knob{left:23px}
.tk-step-dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}
/* Editable step rows in the task form */
.tk-step-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px}
.tk-step-row .tk-step-done{width:16px;height:16px;accent-color:var(--gold-500);flex:none}
.tk-step-row input[type=color]{width:30px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer;flex:none}
.tk-step-row .tk-step-lbl{flex:1;font-size:13.5px}
.tk-step-row .tk-step-del{color:var(--red-600);padding:2px 6px}
.tk-view-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:8px}
.tk-view-grid .muted{font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.tk-missing{margin:4px 0 8px;padding-left:18px;font-size:13.5px}
.iss-note-actions{margin-top:5px;display:flex;gap:12px}
.iss-note-actions .lnk{background:none;border:0;color:var(--ink-3);font-size:12px;cursor:pointer;padding:0}
.iss-note-actions .lnk:hover{color:var(--ink)}
.iss-note-actions .lnk.danger:hover{color:var(--danger)}
.ms-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:13px;cursor:pointer}
.ms-opt:hover{background:var(--surface-2)}
.ms-opt input{width:15px;height:15px;accent-color:var(--gold-500)}
/* deadline export dialog report-type list */
.exp-rtypes{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.exp-rtypes .ms-opt{border:1px solid var(--line);border-radius:8px}
/* deadline report status split chips */
.dl-chips{display:inline-flex;gap:6px}
.dl-chip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;white-space:nowrap}
.chip-sub{background:#e5f3ea;color:#1f7a44}
.chip-due{background:#fff4e0;color:#9a6a00}
.chip-od{background:#fdeaea;color:#b00020}
/* forecast detail: truncated notes + clickable rows */
tr.row-click{cursor:pointer}
tr.row-click:hover{background:var(--surface-2)}
/* Keep the Note column compact: cap width and clamp to 2 lines. */
.note-td{max-width:130px;width:130px}
.note-clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
max-width:130px;line-height:1.3;word-break:break-word;font-size:12.5px}
/* ---- Kebab menus: never clipped by scrolling table wrappers ----
JS (placeKebabMenu) switches the open menu to position:fixed and picks
below / above / roomier-side, so it always stays fully on screen. */
/* Lifted out of the table so nothing can clip it, and above every other layer —
including the sticky panel header and the search box that sits in it. */
.kebab-lift{z-index:9000 !important}
.kebab-menu.floating{position:fixed;top:auto;right:auto;left:auto;z-index:9000;
min-width:186px;box-shadow:0 14px 40px rgba(0,0,0,.22)}
/* Give table panels room beneath the last row so a menu opening downward
has space to sit in, even when the table has few (or no) rows. */
.panel > .tbl-wrap{min-height:240px}
@media print{ .panel > .tbl-wrap{min-height:0} }
/* Clickable brand → dashboard */
.brand-link{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;cursor:pointer;border-radius:10px}
.brand-link:hover{opacity:.85}
/* Workflow module — service cards double as the table filter */
/* Breathing room between the Due table and the Overdue table on the Current tab.
Set on the id so the inline display toggle can't clobber it. */
#wf-od-panel{margin-top:18px}
.stat.wf-card.sel{border-color:var(--gold-600);box-shadow:0 0 0 2px var(--gold-500) inset}
.stat.wf-card.sel .val{color:var(--gold-700)}
/* On the SA Overdue tab, the selected card is a warning — red instead of gold. */
.cards-overdue .stat.wf-card.sel{border-color:var(--red-600);box-shadow:0 0 0 2px var(--red-500) inset}
.cards-overdue .stat.wf-card.sel .val{color:var(--red-600)}
/* Uploaded logo, used on the login screen and in the sidebar */
.brand-img{height:32px;width:auto;max-width:170px;object-fit:contain;display:block}
/* The built-in mark is now an image rather than an inline SVG, so it needs the same square
sizing the .mark rules gave the SVG — and rounded corners to match the logo's own shape. */
img.mark{width:34px;height:34px;object-fit:contain;border-radius:8px;display:block;flex:none}
.auth-logo .brand-img{height:38px;max-width:200px}
.side-head .brand-img{height:30px;max-width:150px}
/* Login footer: website link on the left, copyright on the right */
.auth-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.auth-site{color:var(--gold-400);text-decoration:none;font-weight:600}
.auth-site:hover{text-decoration:underline}
/* Sign-in code */
.code-input{text-align:center;font-size:26px;font-weight:700;letter-spacing:10px;
font-family:Menlo,Consolas,monospace;padding:12px}
.trust-row{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13.5px;
color:var(--ink-2);cursor:pointer}
.trust-row input{width:16px;height:16px;flex:none}
/* Credit-control note column: fixed width, never grows the row */
.note-td{max-width:220px;width:220px}
.note-clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
max-width:220px;line-height:1.35;word-break:break-word;cursor:pointer;font-size:13px}
.note-clip:hover{color:var(--gold-700)}
.note-add{color:var(--ink-3);font-size:12.5px;cursor:pointer;border:1px dashed var(--line-2,#cfd8d3);
padding:2px 8px;border-radius:6px}
.note-add:hover{color:var(--gold-700);border-color:var(--gold-400)}
/* Any table cell holding a note keeps a steady height */
td.note-td{vertical-align:middle}
.panel-head{position:relative;z-index:5}
/* Productivity approvals grouped by staff member */
.dp-staff{background:var(--surface);border:1px solid var(--line);border-radius:12px;
margin-bottom:16px;overflow:hidden}
.dp-staff-head{display:flex;align-items:center;gap:12px;padding:12px 16px;
background:var(--surface-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.dp-staff-name{font-family:var(--font-display);font-weight:700;font-size:16px}
.dp-staff-count{font-size:12.5px;color:var(--ink-3)}
.dp-staff-total{font-size:13.5px;color:var(--ink-2)}
.dp-staff-total b{font-family:var(--font-display);font-size:16px;color:var(--ink)}
.dp-trail{font-size:11.5px;color:var(--ink-3);margin-top:3px}
/* Approval summary sits beside the total and takes the slack, so the Approve all
button stays pinned to the right-hand edge of the block. */
/* Inline text-style button used inside help text (e.g. "Clear" on the linked company). */
/* Uncategorised time is flagged in red on the Daily Report, on screen and in print. */
/* Uncategorised rows print and display in red. Uses table.data specificity and also
recolours the client-name link, which otherwise keeps its own colour. */
table.data tr.dpr-uncat td,
table.data tr.dpr-uncat td .link,
table.data tr.dpr-uncat td a{color:var(--red-600,#b42318) !important}
@media print{ table.data tr.dpr-uncat td,
table.data tr.dpr-uncat td .link,
table.data tr.dpr-uncat td a{color:#b42318 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} }
.link-btn{background:none;border:0;padding:0;margin:0;font:inherit;font-size:inherit;
color:var(--gold-600,#8a6d1f);cursor:pointer;text-decoration:underline;
text-underline-offset:2px;line-height:inherit}
.link-btn:hover{color:var(--ink-1);text-decoration:none}
.link-btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;border-radius:3px}
/* Section headings inside the daily-productivity sheet (Client-specific / Uncategorised). */
.dp-sec-title{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink-2);
margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
/* Active state for a clickable stat card (e.g. a selected follow-up filter). */
.stat.stat-active{outline:2px solid var(--gold-500);outline-offset:-1px}
.dp-staff-head .spacer{flex:1}
.dp-staff-approval{flex:1 1 auto;min-width:0;font-size:12px;color:var(--ink-3);line-height:1.5}
.pill.st-ok{background:#e5f3ea;color:#1f7a44}
.pill.st-wait{background:#fff4e0;color:#9a6a00}
.pill.st-stage{background:#eef4f1;color:#17513c;border:1px solid #d3e3da}
/* Workflow step status. --sc is the colour set for the step in Settings; the chip tints from it. */
.step-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:20px;
color:var(--sc,#374151);border:1px solid color-mix(in srgb, var(--sc,#6b7280) 35%, transparent);
background:color-mix(in srgb, var(--sc,#6b7280) 12%, #fff)}
.step-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sc,#6b7280);flex:none}
.step-pill.step-none{color:#6b7280;background:#f3f4f6;border-color:#e5e7eb}
.step-pill.step-none::before{background:#9ca3af}
.step-pill.step-done{color:var(--green-700);background:var(--green-100);border-color:transparent}
.step-pill.step-done::before{background:var(--green-700)}
/* Fallback for browsers without color-mix: still readable via the text/border colour. */
@supports not (background: color-mix(in srgb, red 10%, white)){
.step-pill{background:#f4f6f5}
}
/* Swatch + row controls in the Task Steps settings editor. */
.ts-editor{display:flex;flex-direction:column;gap:22px}
.ts-group{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.ts-group h4{margin:0 0 10px;font-size:14px}
.ts-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ts-row .grip{cursor:grab;color:var(--muted);flex:none}
.ts-row input[type=color]{width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:7px;background:none;cursor:pointer;flex:none}
.ts-row .ts-label{flex:1}
.ts-row .ts-default{font-size:11.5px;white-space:nowrap;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.ts-row.is-default{background:color-mix(in srgb, var(--gold-500,#c9a24b) 10%, transparent);border-radius:8px;padding:6px 8px;margin-left:-8px;margin-right:-8px}
.ts-dragging{opacity:.5}
/* Column chooser in deadline reporting sits under its button */
#dl-colpanel{right:0;left:auto;top:calc(100% + 6px)}
/* ============================================================
Admin sign-in notices (popup)
============================================================ */
.notice-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;
justify-content:center;padding:20px;z-index:10000;animation:fade .15s ease}
.notice-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
width:100%;max-width:440px;padding:24px 24px 20px;position:relative;animation:pop .18s cubic-bezier(.2,.9,.3,1.1)}
.notice-x{position:absolute;top:12px;right:12px;background:var(--surface-2);border:1px solid var(--line);
border-radius:9px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2)}
.notice-x:hover{background:var(--surface-3,#e5e7eb)}
.notice-title{font-size:18px;font-weight:700;color:var(--ink);margin:2px 40px 10px 0}
.notice-body{font-size:14px;line-height:1.55;color:var(--ink-2);max-height:50vh;overflow-y:auto;white-space:normal}
.notice-actions{display:flex;justify-content:flex-end;margin-top:18px}
/* Firm-wide grand total row (Ltd + SA) in Client Value */
.cv-matrix tr.cv-firm-total td{border-top:2px solid var(--gold-500);background:color-mix(in srgb, var(--gold-500) 16%, var(--surface));font-size:14px}
/* Notice acceptance (declaration + name) */
.notice-declaration{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.notice-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer}
.notice-check input{accent-color:var(--green-600);width:16px;height:16px}
.notice-declaration .ntc-name{width:100%}
/* ---- Review Checklist ---- */
/* A full-width sheet: the questions are long sentences, so they need room to wrap rather
than being clipped by the table's nowrap rule. */
.modal.full{max-width:min(1640px,96vw)}
.rv-body{max-height:78vh}
.rv-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rv-stage{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.rv-stage-t{font-weight:600;margin-bottom:4px}
.rv-stage-active{border-color:#0f4032;box-shadow:0 0 0 2px rgba(15,64,50,.12);background:var(--surface)}
.rv-date{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;
border:1px solid var(--line);border-left:3px solid #0891b2;border-radius:10px;background:var(--surface-2)}
.rv-note{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 12px;font-size:12.5px;
border:1px solid var(--line);border-left:3px solid #b45309;border-radius:9px;background:var(--surface-2)}
.rv-note svg{width:15px;height:15px;flex:none;margin-top:1px;color:#b45309}
.rv-hint{font-size:12.5px;margin:14px 0 6px}
.rv-sheet{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rv-sec,.rv-inf,.rv-item{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}
.rv-sheet > *:last-child{border-bottom:0}
.rv-sec,.rv-inf{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2)}
.rv-sec-t{font-weight:650;line-height:1.5}
.rv-inf{font-style:italic;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.rv-n{flex:0 0 34px;font-weight:700;color:var(--ink-3);font-size:12.5px;padding-top:1px}
.rv-q{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px}
/* The whole point: long questions wrap onto as many lines as they need. */
.rv-q-t{line-height:1.55;font-size:13.5px;white-space:normal;word-break:break-word;flex:1}
.rv-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-left:44px}
.rv-col{min-width:0}
.rv-col-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
margin-bottom:4px;font-weight:600}
.rv-col-mine{color:#0f4032}
.rv-ro{font-size:13px;white-space:pre-wrap;word-break:break-word;line-height:1.5;
padding:8px 10px;min-height:38px;border:1px dashed var(--line);border-radius:8px;background:var(--surface-2)}
/* Roomy entry boxes — reviewers write sentences here, not single words. */
textarea.rv-in{width:100%;min-height:84px;resize:vertical;overflow:hidden;line-height:1.5;font-size:13px}
textarea.rv-in-sm{min-height:56px}
.rv-repline{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:12px;padding:10px 0 10px 44px;
border-top:1px dashed var(--line)}
.rv-repline:first-child{border-top:0}
.rv-repname input{width:100%}
@media(max-width:1100px){
.rv-stages{grid-template-columns:1fr}
.rv-cols{grid-template-columns:1fr;padding-left:0}
.rv-repline{grid-template-columns:1fr;padding-left:0}
.rv-q{margin-bottom:6px}
}
/* ---- Sales Pipeline ---- */
/* Notes can be long; keep the row height sane and show the full text on hover. */
td.sp-note{max-width:220px;overflow:hidden;text-overflow:ellipsis}
/* ---- Payroll ---- */
/* Free-text columns need to wrap; the global table rule is nowrap. */
td.pr-wrap{white-space:normal;word-break:break-word;max-width:260px;line-height:1.45}
.data.pr-grid th.pr-mth{text-align:center;min-width:96px}
td.pr-cell{text-align:center;cursor:pointer;font-size:12px;font-weight:600;user-select:none}
td.pr-cell:hover{outline:2px solid var(--gold-600,#a8802f);outline-offset:-2px}
td.pr-cell.pr-yes{color:var(--green-700,#15803d)}
td.pr-cell.pr-no{color:var(--red-600,#b91c1c)}
td.pr-cell.pr-none{color:var(--ink-3)}
/* Rows that open a detail window on click. */
tr.row-click{cursor:pointer}
tr.row-click:hover>td{background:var(--surface-2)}
/* ---- Billing ledger (client view) ---- */
.lg-tbl td{vertical-align:top}
.lg-tbl td.lg-detail{white-space:normal;word-break:break-word;max-width:280px;line-height:1.45}
.lg-kind{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;
padding:2px 8px;border-radius:999px;white-space:nowrap}
.lg-kind.lg-inv{background:rgba(180,83,9,.12);color:#b45309}
.lg-kind.lg-pay{background:rgba(21,128,61,.12);color:#15803d}
.lg-kind.lg-cr{background:rgba(107,114,128,.15);color:#4b5563}
/* Six pipeline cards read better across six columns than the dashboard's eight. */
.cards-dash.sp-cards6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1200px){.cards-dash.sp-cards6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.cards-dash.sp-cards6{grid-template-columns:repeat(2,1fr)}}
/* Eight cards in one row, like the dashboard: the six type cards plus the two Uber ones. */
.cards-dash.sp-cards8{grid-template-columns:repeat(8,1fr)}
@media (max-width:1400px){.cards-dash.sp-cards8{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.cards-dash.sp-cards8{grid-template-columns:repeat(2,1fr)}}
/* Sales-pipeline working-status colours: Manager dealing dark green, Onboarded green,
random queries purple, Not interested red. Classes rather than inline styles, so the
dark theme's pill treatment applies to these like every other pill. */
.pill.sp-mgr{background:#0b3d2e14;color:#0b3d2e;border:1px solid #0b3d2e66}
.pill.sp-onb{background:#16a34a1a;color:#15803d;border:1px solid #16a34a55}
.pill.sp-rand{background:#7c3aed1a;color:#6d28d9;border:1px solid #7c3aed55}
.pill.sp-notint{background:#dc26261a;color:#b91c1c;border:1px solid #dc262655}
[data-theme="dark"] .pill.sp-mgr{background:#0b3d2e55;color:#7fd0b0}
[data-theme="dark"] .pill.sp-onb{background:#16a34a33;color:#6ee7a0}
[data-theme="dark"] .pill.sp-rand{background:#7c3aed33;color:#c4b5fd}
[data-theme="dark"] .pill.sp-notint{background:#dc262633;color:#fca5a5}
/* ---- Task view: step, who updated it, and when ---- */
/* Fixed widths on the two stamp columns so they line up down the list rather than drifting
with the length of each step's label. */
.tk-steps-view .tk-step{align-items:baseline}
.tk-steps-view .tk-step-lbl{flex:1;min-width:0}
.tk-steps-view .tk-step-who{flex:0 0 170px;font-size:12.5px;color:var(--ink-2);font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-steps-view .tk-step-when{flex:0 0 120px;font-size:12.5px;color:var(--ink-3);
font-variant-numeric:tabular-nums;white-space:nowrap}
.tk-step-head{border:0 !important;background:transparent;padding-bottom:2px;margin-bottom:2px}
.tk-step-head span{font-size:10.5px !important;text-transform:uppercase;letter-spacing:.05em;
color:var(--ink-3) !important;font-weight:700 !important}
@media (max-width:820px){
.tk-steps-view .tk-step{flex-wrap:wrap}
.tk-step-head{display:none}
.tk-steps-view .tk-step-who,.tk-steps-view .tk-step-when{flex:0 0 auto;margin-left:24px}
}
/* Activity log details wrap rather than stretching the table. */
td.au-det{white-space:normal;word-break:break-word;max-width:420px;line-height:1.45;font-size:12.5px}
/* The client window carries a wide Billing table, so it uses the full-width modal and a
taller body. Stacked layers each get their own scroll, so scrolling a payments list never
moves the client form behind it. */
.modal-overlay + .modal-overlay{background:rgba(0,0,0,.28)}
/* The kebab column carries no header, so it shouldn't reserve width like a real column. */
table.data th.no-sort:empty{width:44px;padding-left:0;padding-right:8px}
table.data td .kebab{display:inline-block}
/* ---- Full-width windows: presentation ----
The client view and client form carry wide tables. Without extra breathing room the content
runs to the very edge of the window, which reads as cramped rather than considered. */
.modal.full > .modal-body{padding:26px 32px 30px}
.modal.full > .modal-head{padding-left:32px;padding-right:26px}
.modal.full > .modal-foot{padding-left:32px;padding-right:32px}
/* Tables here read as rows, not a spreadsheet: no vertical cell lines anywhere, a single
rule under the header, and a quiet header band to separate it from the data.
(A radius on the table itself is not applied — border-collapse:collapse won't round the
corners, so the wrapper carries it instead.) */
.modal.full .tbl-wrap,
.modal.full table.data{border:1px solid var(--line);border-radius:12px}
.modal.full .tbl-wrap > table.data{border:0;border-radius:0}
.modal.full table.data th{background:var(--surface-2);border-right:0;
border-bottom:1px solid var(--line);padding-top:11px;padding-bottom:11px}
.modal.full table.data th:first-child{border-top-left-radius:12px}
.modal.full table.data th:last-child{border-top-right-radius:12px}
.modal.full table.data td{border-right:0}
.modal.full table.data tbody tr:last-child{border-bottom:0}
.modal.full .section-title{margin-top:26px}
@media (max-width:820px){
.modal.full > .modal-body{padding:18px 16px 22px}
.modal.full > .modal-head,.modal.full > .modal-foot{padding-left:16px;padding-right:16px}
}
/* Task list Notes column: one line in the row, full text on hover, timeline in the task window. */
/* The text is already cut to 15 characters in the cell, so the column just needs to stop
stretching — no extra width cap is required. */
td .tk-note{display:inline-block;white-space:nowrap;vertical-align:bottom;cursor:help}
/* ---- Billing module ---- */
/* The customer window is a working surface, so it gets the full-width treatment and its own
scroll rather than pushing the page around. */
.cw-window .modal-body{max-height:76vh}
.cw-window .kebab-btn.btn{width:auto;height:auto;border-radius:10px}
#bl-cards .stat .val{font-size:20px}
/* ---- Billing customer window header ----
Client details on the left, the two money figures as a compact pair on the right, so the
transaction table keeps the height instead of the summary taking it. */
.cw-top{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.cw-details{flex:1 1 420px;min-width:0}
.cw-figs{flex:0 0 auto;display:flex;gap:10px;margin-left:auto}
.cw-fig{border:1px solid var(--line);border-radius:11px;padding:10px 14px;background:var(--surface-2);
display:flex;flex-direction:column;gap:1px;min-width:150px}
.cw-fig b{font-size:19px;font-variant-numeric:tabular-nums;line-height:1.25}
.cw-fig .muted{font-size:11px}
.cw-fig-l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600}
.cw-fig-od b{color:var(--red-600)}
/* The DD status select sits in the overview grid, so it is sized to its longest option
("Not interested") rather than to the narrow inline-select width. */
/* Sized by padding like every other select in the app — a fixed height fought the inherited
line-height and clipped the text. line-height pinned so no ancestor can reopen the fight. */
.cw-dd{width:auto;max-width:100%;min-width:160px;padding:7px 30px 7px 10px;font-size:13px;
line-height:1.25;margin-top:2px}
.cw-top,.cw-details{overflow:visible}
.cw-details{padding-bottom:20px}
.cw-details > div{min-width:0}
@media (max-width:820px){ .cw-figs{margin-left:0;width:100%} .cw-fig{flex:1} }
/* ---- Billing: Cash Flow ----
Two stacked tables need clear separation, or the detail header reads as another row of the
overview. Each block gets its own caption and panel. */
.cf-block{margin:0 20px 22px}
.cf-block:first-of-type{margin-top:4px}
.cf-cap{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
color:var(--gold-600,#a8802f);margin:0 0 9px}
.cf-cap .muted{text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;margin-left:6px}
.cf-tbl{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cf-tbl table.data th{background:var(--surface-2);border-bottom:1px solid var(--line);
padding-top:11px;padding-bottom:11px}
.cf-tbl table.data th:first-child{border-top-left-radius:12px}
.cf-tbl table.data th:last-child{border-top-right-radius:12px}
.cf-tbl table.data tbody tr:last-child{border-bottom:0}
/* A typed signature reads as a signature, not as another data cell. */
.na-sig{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:14.5px;color:var(--ink)}
/* ---- Invoice document: template-driven parts ---- */
/* The document IS an A4 page: the box keeps A4 proportions (growing only if content
overruns), and the bank details pin to the page's BOTTOM-LEFT corner — the reserved
bottom padding keeps long invoices from ever running into them. The PDF renderer
captures the whole box, so the download matches what the screen shows. */
.inv-doc{--inv-accent:var(--brand,#0f4032);position:relative;aspect-ratio:210/297;padding-bottom:150px}
.inv-doc .inv-bank{position:absolute;left:0;bottom:0;margin:0;padding:0 0 6px 2px}
.inv-intro{margin:14px 0 6px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.inv-terms{margin:14px 0 4px;font-size:12.5px;line-height:1.55;color:var(--ink-2);
border-top:1px solid var(--line);padding-top:10px}
.inv-doc .inv-items thead th{border-bottom:2px solid var(--inv-accent)}
.inv-doc .inv-balance{color:var(--inv-accent)}
/* Approval queue header: title and count grouped, search pushed right. */
.apv-head .apv-head-l{display:flex;align-items:center;gap:9px}
.apv-head .apv-head-l h3{margin:0}
#apv-cards .stat .label{min-height:28px}
#apv-cards .stat .val{font-size:19px}
/* ---- VAT control: amount, rate, VAT, total on one line ---- */
.vat-row{display:grid;grid-template-columns:1.1fr 1.3fr .9fr .9fr;gap:12px;align-items:end}
.vat-row .field{margin:0}
.vat-row input[disabled]{background:var(--surface-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.vat-row .vat-total{font-weight:700;color:var(--ink)}
@media (max-width:760px){ .vat-row{grid-template-columns:1fr 1fr} }
/* ---- Invoice form: totals summary ---- */
.inv-sum{margin:18px 0 4px;margin-left:auto;width:100%;max-width:340px;
border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.inv-sum-row{display:flex;justify-content:space-between;gap:16px;padding:9px 14px;font-size:13.5px;
color:var(--ink-2);border-bottom:1px solid var(--line)}
.inv-sum-row b{font-variant-numeric:tabular-nums;color:var(--ink)}
.inv-sum-row:last-child{border-bottom:0}
.inv-sum-row.inv-sum-tot{background:var(--surface);font-weight:700;color:var(--ink)}
.inv-sum-row.inv-sum-tot b{font-size:15.5px}
.inv-sum-row.inv-sum-due b{font-size:16px;color:var(--brand)}
/* The service line needs room for six controls before it wraps. */
.svc-line{gap:10px}
@media (max-width:1100px){ .svc-line{grid-template-columns:1fr 1fr !important} }
/* Document totals: the grand total reads as the grand total. */
.inv-doc .inv-totals .inv-grand{font-weight:700;border-top:1px solid #ddd;padding-top:6px}
/* Column panel head: title, Default view, close. */
.cp-head{display:flex;align-items:center;gap:8px}
.cp-head > span:first-child{flex:1}
.cp-head .btn{white-space:nowrap}
/* An overdue month must read differently from one simply not yet recorded. */
td.pr-cell.pr-od{color:var(--red-600,#b91c1c);font-weight:700;background:rgba(185,28,28,.07)}
td.pr-cell.pr-no{color:var(--amber-600,#b45309)}
/* Provenance line above a not-yet-approved invoice. */
.inv-prov{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;padding:10px 13px;
border:1px solid var(--line);border-left:3px solid var(--gold-500,#c9a24b);border-radius:9px;
background:var(--surface-2);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.inv-prov svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--gold-600,#a8802f)}
/* Recipient contact details under the name on an invoice. */
.inv-doc .inv-to-meta{margin-top:5px;font-size:12px;line-height:1.55;color:#555}
.inv-doc .inv-to-meta div{margin:0}
/* ---- Document windows (invoice / receipt / credit note) ----
A whole page should be readable at once, so these use the full height available and the
page itself sits at a comfortable reading width inside it rather than stretching. */
/* Width stays as it was (the lg modal); doc-modal only buys extra height, so a page is
readable without a cramped scroll box and without stretching across the screen. */
/* ---- Tall windows: fit the viewport, never run off it ----
The overlay pads top and bottom, so the window is capped at that much less than the screen.
Head and footer are pinned and the body scrolls between them — previously the whole overlay
scrolled, which pushed Save and Cancel below the fold and behind the taskbar. dvh is used
where supported so mobile browser chrome is accounted for too. */
.modal.full, .modal.doc-modal{ max-height:calc(100vh - 80px); display:flex; flex-direction:column }
@supports (height: 100dvh){
.modal.full, .modal.doc-modal{ max-height:calc(100dvh - 80px) }
}
.modal.full > .modal-head, .modal.doc-modal > .modal-head,
.modal.full > .modal-foot, .modal.doc-modal > .modal-foot{ flex:0 0 auto }
.modal.full > .modal-body, .modal.doc-modal > .modal-body{
flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto;
}
@media (max-width:820px){
.modal-overlay{ padding:16px 10px }
.modal.full, .modal.doc-modal{ max-height:calc(100vh - 32px) }
}
/* Payroll tables: how many rows the current filters are showing. */
/* The row count sits on the filter row, next to the controls that produced it. Aligned to the
inputs rather than the top of the row, and given no width of its own so it never pushes the
buttons out of line when it grows from "9 clients" to "1,490 clients". */
.pr-count{display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.pr-count:empty{display:none}
/* ---- Estimate lines: one row per invoice this estimate expects to collect ---- */
.est-line{display:grid;grid-template-columns:1fr 130px 150px 34px;gap:10px;align-items:end;
padding:10px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.est-line .field{margin:0}
.est-empty{padding:14px;text-align:center;color:var(--ink-3);font-size:13px;
border:1px dashed var(--line);border-radius:10px;margin-bottom:8px}
/* The total is derived from the lines, never typed, so it is shown rather than edited. */
.est-total{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:11px 14px;margin:4px 0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.est-total b{font-size:18px;font-variant-numeric:tabular-nums}
.btn-icon-del{height:38px;width:34px;border:1px solid var(--line);border-radius:9px;cursor:pointer;
background:var(--surface);color:var(--red-600);display:flex;align-items:center;justify-content:center}
.btn-icon-del:hover{background:var(--red-50,rgba(220,38,38,.08))}
@media (max-width:720px){ .est-line{grid-template-columns:1fr 1fr;} .est-line .est-del{grid-column:2} }
/* ---- CC Notes: a client's credit-control history as a timeline ---- */
.ccn-cell{cursor:pointer;display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;vertical-align:middle;border-bottom:1px dashed var(--line)}
.ccn-cell:hover{color:var(--gold-700,var(--ink));border-bottom-style:solid}
.ccn-add{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.ccn-input{flex:1;resize:vertical;min-height:56px}
.ccn-add .btn{flex:0 0 auto;margin-top:2px}
.ccn-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--surface-2)}
.ccn-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.ccn-head b{font-size:13px}
.ccn-head .muted{font-size:11.5px}
.ccn-body{font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ccn-acts{display:flex;gap:12px;margin-top:6px}
.ccn-acts .ccn-del{color:var(--red-600)}
.ccn-empty{padding:20px;text-align:center;color:var(--ink-3);font-size:13px}
/* The client window shows only the newest note; the whole timeline is one click away. */
.ccn-latest{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px;
background:var(--surface-2);cursor:pointer}
.ccn-latest:hover{border-color:var(--ink-3)}
.ccn-latest-empty{color:var(--ink-3);font-size:13px;text-align:center}
/* The DD detail block in the customer window: the same per-status questions the onboarding
form asks, laid out beneath the overview grid. */
.cw-dd-fields{grid-column:1 / -1}
.cw-dd-fields .grid-2,.cw-dd-fields .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.cw-dd-fields .field{margin:6px 0}
.cw-dd-save{grid-column:1 / -1;margin-top:2px}
/* DD details in the customer window sit on ONE row. ddBillingFields renders a grid block for
the inputs and a separate block for the notes; display:contents dissolves both wrappers so
every field — dates, amount, notes — becomes a sibling on a single flex line, notes taking
whatever width is left. Wraps only when the window genuinely runs out of room. */
.cw-dd-fields{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.cw-dd-fields .grid-2,.cw-dd-fields .grid-3{display:contents}
.cw-dd-fields .field{flex:0 1 auto;min-width:120px;margin:0}
.cw-dd-fields .field:has(textarea){flex:1 1 240px}
.cw-dd-fields input[type="date"]{width:148px}
.cw-dd-fields input[type="number"]{width:110px}
.cw-dd-fields textarea.input{width:100%;min-width:220px;min-height:38px;height:38px;resize:vertical}
/* ---- Morning report: form day blocks and the report cards ---- */
.mp-day{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;background:var(--surface-2)}
.mp-sec-head{display:flex;align-items:center;gap:8px;margin:8px 0 6px}
.mp-row{display:grid;grid-template-columns:1fr 175px 130px 34px;gap:10px;align-items:center;
padding:8px 10px;margin-bottom:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.mp-day-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mp-cols{display:grid;grid-template-columns:1fr 175px 130px 34px;gap:10px;padding:0 10px 4px;
font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3)}
.mp-row .field{margin:0}
/* Clear air between the date filter and the first report card. */
#cr-pane-morning .tbl-toolbar{margin-bottom:18px}
.mr-card{border:1px solid var(--line);border-radius:12px;padding:0 14px 12px;margin-bottom:16px;background:var(--surface);overflow:hidden}
/* The card header wears the Daily Report's band: shaded, bled to the card edges. */
.mr-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:13.5px;
background:var(--surface-2);margin:0 -14px 12px;padding:10px 16px;border-bottom:1px solid var(--line)}
/* No column header row: each day band IS the header — day and per-type counts on the left,
"Paid Amount" sitting over the money column on the right. */
.mr-table .mr-size td{padding:0;border:0;height:0}
.mr-table .mr-band td{background:var(--surface-2);font-weight:600;font-size:13.5px;border-bottom:1px solid var(--line);padding-top:12px}
.mr-table .mr-band .pill{margin-left:8px;font-weight:600}
.mr-table .mr-band-amt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);vertical-align:bottom}
.mr-table .mr-note-row td{font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.mr-head .muted{font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin-right:4px}
.mr-day{margin-bottom:10px}
.mr-day-title{font-weight:600;font-size:13.5px;margin:6px 0;display:flex;align-items:center;gap:8px}
.mr-note{margin:6px 0 2px;font-size:13px;white-space:pre-wrap}
/* Morning popup settings: employee names four to a line rather than one endless row — the
full list is a click away in the editor, this cell only needs to be scannable. */
.mps-emps{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:2px 14px;max-width:760px;font-size:13px}
.mps-emps span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A locked modal: no close button, no backdrop escape — the popup must be signed. */
.modal.modal-locked .modal-x{display:none}
/* ---- Cash-flow overview ----
The app's normal table dress, light or dark: every colour is a theme variable, because the
first pass hard-coded a light hover and a dark header and both turned invisible in dark
mode. Selection keeps the shared .ov-active look (tinted, bold) plus a gold ring. */
#cfo-table table.data thead th{background:var(--surface-2);color:var(--ink-2);border-bottom:1px solid var(--line);
font-size:12px;text-transform:uppercase;letter-spacing:.04em}
#cfo-table .cfo-bold td{font-weight:700;border-top:2px solid var(--line);
background:color-mix(in srgb, var(--gold-500) 8%, var(--surface))}
#cfo-table td.ov-cell{cursor:pointer}
#cfo-table td.ov-cell:hover{background:var(--line)}
#cfo-table td.ov-active{outline:2px solid var(--gold-500);outline-offset:-2px;border-radius:6px}
/* The workflow cards' "Current N, Overdue N" line: full-strength ink so the split is readable
at a glance — near-black in light mode, white in dark. */
.stat .sub{color:var(--ink);font-weight:600;opacity:.92}
[data-theme="dark"] .stat .sub{color:#fff}
/* ---- Review checklist "Download PDF": print only the checklist ---- */
@media print{
body.printing-rv #app-shell,body.printing-rv #content,body.printing-rv .sidebar,
body.printing-rv #modal-root,body.printing-rv #toast-root{display:none !important}
body.printing-rv .rv-host{position:static !important;display:block !important;background:#fff !important;padding:0 !important}
body.printing-rv .rv-host .modal{box-shadow:none !important;max-width:none !important;width:100% !important;max-height:none !important;border-radius:0}
body.printing-rv .rv-host .modal-body{max-height:none !important;overflow:visible !important}
body.printing-rv .rv-host .modal-foot,body.printing-rv .rv-host [data-rvpdf],body.printing-rv .rv-host .x{display:none !important}
}
/* Client Group report: selected overview numbers wear the gold ring; the two panels breathe. */
.cg-num{display:inline-block;min-width:26px;text-align:center;padding:3px 8px;border-radius:8px}
.cg-num.cg-sel{outline:2px solid var(--gold-500);outline-offset:-1px;background:color-mix(in srgb, var(--gold-500) 12%, var(--surface));font-weight:700}
/* The DD overview's picked cell wears the same gold ring in every mode. */
.ov-cell.cg-sel{outline:2px solid var(--gold-500);outline-offset:-2px;border-radius:8px;background:color-mix(in srgb, var(--gold-500) 14%, var(--surface));font-weight:700;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold-500) 45%, transparent)}
/* Settings → Client Groups: the intro text and the table get suitable air. */
#set-body .tbl-wrap{margin-top:6px}
/* The Ungrouped remainder row: shaded and ruled off from the groups above it. */
.cg-ungrouped td{background:var(--surface-2);border-top:2px solid var(--line)}
/* Morning popup: the six-column row (client / service / period / outstanding / status / x). */
.mp-cols-6,.mp-row-6{display:grid;grid-template-columns:1.5fr 1.15fr 1.15fr .9fr .85fr 32px;gap:10px;align-items:center;margin-bottom:6px}
.mp-cols-6 span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.mp-row-6 .input[disabled]{opacity:.85}
/* The DD Summary header's "N clients · £X" line: green by day, gold by night. */
#dds-count.dds-total{color:var(--green-600,#1c7a4d);font-weight:700}
[data-theme="dark"] #dds-count.dds-total{color:var(--gold-500)}
/* The client window's top information, three balanced columns: identity and contact,
company and money, compliance and Direct Debit. Collapses to two then one on narrow
screens. */
.cv-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 28px}
@media (max-width:1100px){.cv-grid3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.cv-grid3{grid-template-columns:1fr}}
/* The dividing line where the Ltd half of the pipeline table ends and the SA half begins.
Doubled up as border + inset shadow so it survives whatever the base table's collapsed
borders decide, in both themes. */
table.data tr.sp-sa-break td{border-top:2px solid var(--gold-500,#c9a24b) !important;box-shadow:inset 0 2px 0 var(--gold-500,#c9a24b)}
[data-theme="dark"] table.data tr.sp-sa-break td{border-top-color:#a8863d !important;box-shadow:inset 0 2px 0 #a8863d}
/* Billing Overview cards: air between the label text and the icon. */
.stat .stat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stat .stat-top .stat-ico{margin-left:8px;flex:0 0 auto}
/* Engagement letter — the document view: the letter's own pages as white A4 sheets on a grey
backdrop, full height, like a printed document laid on the desk. */
.eng-doc-stage{background:#e4e6ea;border-radius:8px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:60vh}
.eng-doc-page{display:block;max-width:100%;height:auto;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.18);border-radius:2px}
/* ---------------- Proof of submission (tasks) ---------------- */
.pf-pick{margin-top:6px}
.pf-drop{display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px dashed var(--line-2);border-radius:12px;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s;outline:none}
.pf-drop svg{width:26px;height:26px;color:var(--gold-600);flex:none}
.pf-drop:hover,.pf-drop:focus,.pf-drop.over{border-color:var(--gold-500);background:rgba(207,148,48,.08)}
.pf-drop .muted{font-size:12.5px;margin-top:2px;line-height:1.45}
.pf-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pf-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.pf-thumb{width:52px;height:52px;object-fit:cover;border-radius:7px;border:1px solid var(--line);flex:none;background:#fff}
.pf-ficon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--surface-2);flex:none}
.pf-ficon svg,.pf-cicon svg{width:24px;height:24px;color:var(--ink-3)}
.pf-meta{min-width:0;flex:1}
.pf-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;color:inherit;text-decoration:none}
a.pf-name:hover{text-decoration:underline}
.pf-x{margin-left:auto}
.pf-noproof{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;cursor:pointer}
.pf-title{display:flex;align-items:center;gap:12px}
.pf-title .btn{margin-left:auto;text-transform:none;letter-spacing:0}
.pf-none{margin:0 0 4px;font-size:13px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.pf-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0}
.pf-open{flex:none;display:block}
.pf-cthumb{width:64px;height:64px;object-fit:cover;border-radius:7px;border:1px solid var(--line);background:#fff;display:block}
.pf-cicon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--surface-2)}
.pf-acts{display:flex;gap:4px;flex:none}
.pf-acts .btn{padding:5px 7px}
.pf-count{display:inline-flex;align-items:center;gap:4px;font-weight:600;white-space:nowrap}
.pf-count svg{width:14px;height:14px}
[data-theme="dark"] .pf-thumb,[data-theme="dark"] .pf-cthumb{background:var(--surface-2)}
.pf-item .x{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;cursor:pointer;flex:none}
.pf-item .x svg{width:14px;height:14px}
/* ---------------- SIC code picker (Ltd nature of business) ---------------- */
.sic-pick{position:relative}
.sic-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:20px}
.sic-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:4px 6px 4px 10px;font-size:12.5px;max-width:100%}
.sic-chip b{font-weight:700;color:var(--brand)}
[data-theme="dark"] .sic-chip b{color:var(--gold-500)}
.sic-x{background:transparent;border:0;cursor:pointer;color:var(--ink-3);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;padding:0}
.sic-x:hover{background:var(--line);color:var(--ink)}
.sic-x svg{width:12px;height:12px}
.sic-menu{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.14);max-height:280px;overflow-y:auto;margin-top:4px}
.sic-opt{display:block;width:100%;text-align:left;background:transparent;border:0;padding:8px 12px;font-size:13px;cursor:pointer;color:inherit;border-bottom:1px solid var(--line)}
.sic-opt:last-child{border-bottom:0}
.sic-opt b{display:inline-block;min-width:52px;color:var(--brand)}
[data-theme="dark"] .sic-opt b{color:var(--gold-500)}
.sic-opt:hover,.sic-opt.hi{background:var(--surface-2)}
/* ---------------- Duplicate warnings on the client form ---------------- */
.dup-warn{margin-top:6px;border-radius:9px;padding:8px 10px;font-size:12.5px;line-height:1.45;display:flex;flex-direction:column;gap:6px}
.dup-warn>div{display:flex;align-items:flex-start;gap:8px}
.dup-warn svg{width:15px;height:15px;flex:none;margin-top:1px}
.dup-warn .lnk{margin-left:auto;background:none;border:0;color:inherit;font-weight:700;cursor:pointer;text-decoration:underline;padding:0;white-space:nowrap}
.dup-warn.hard{background:var(--red-100);color:var(--red-600);border:1px solid rgba(220,38,38,.25)}
.dup-warn.soft{background:rgba(207,148,48,.12);color:var(--gold-600);border:1px solid rgba(207,148,48,.35)}
[data-theme="dark"] .dup-warn.hard{background:rgba(220,38,38,.18);color:#fca5a5}
[data-theme="dark"] .dup-warn.soft{background:rgba(207,148,48,.16);color:var(--gold-300)}
/* ---------------- The × that clears a search box ---------------- */
input.has-clear{padding-right:34px !important;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 9px center;background-size:18px 18px}
[data-theme="dark"] input.has-clear{background-image:url("data:image/svg+xml;utf8,")}
/* ---- Engagement letter rich boxes: the list style shown while editing ----
Every line is a ; the box's rt-number / rt-bullet class draws the marker the letter
will print (a blank line never carries one). rt-plain shows the lines exactly as typed. */
.rt-box.rt-number,.rt-box.rt-bullet{counter-reset:rtli}
.rt-box.rt-number>div,.rt-box.rt-bullet>div{position:relative;padding-left:28px}
.rt-box.rt-number>div{counter-increment:rtli}
.rt-box.rt-number>div::before{content:counter(rtli) ".";position:absolute;left:4px;color:var(--muted,#6b7280)}
.rt-box.rt-bullet>div::before{content:"\2022";position:absolute;left:10px;color:var(--muted,#6b7280)}
.rt-box.rt-number>div:has(>br:only-child){counter-increment:none}
.rt-box.rt-number>div:has(>br:only-child)::before,.rt-box.rt-bullet>div:has(>br:only-child)::before{content:none}
.rt-list-btn.rt-on{background:var(--gold-500,#c9a24b);color:#231a08;border-color:var(--gold-500,#c9a24b)}
[data-theme="dark"] .rt-list-btn.rt-on{background:#a8863d;color:#181203}
/* ==================== Printing a table (Print / PDF) ====================
A cell can carry a screen reading and a print reading — the Nature of Business column shows
the codes on screen and the code with its description on paper / PDF. And a table prints
WHOLE: no scroll box, every row, cells and headings wrapping so every column fits the page
instead of running off its right edge. Last in the file, so it outranks the screen rules. */
.print-only{display:none}
@media print{
.print-only{display:inline}
.screen-only{display:none!important}
/* (The Daily Report and Review documents print by their own rules — left untouched.) */
body:not(.printing-dpr):not(.printing-rv) .tbl-wrap{max-height:none!important;overflow:visible!important}
body:not(.printing-dpr):not(.printing-rv) table.data{width:100%;table-layout:auto}
body:not(.printing-dpr):not(.printing-rv) table.data td,
body:not(.printing-dpr):not(.printing-rv) table.data th,
body:not(.printing-dpr):not(.printing-rv) .data th.sortable{white-space:normal!important;overflow-wrap:break-word;padding:6px 8px!important;font-size:12px}
body:not(.printing-dpr):not(.printing-rv) .data th.sortable::after{content:""!important} /* no sort arrows on paper */
/* The full reading takes a generous column, never the whole page. */
table.data td:has(> .print-only){min-width:150px;max-width:300px}
}
/* ==================== GoCardless (Approval → GoCardless) ==================== */
table.data tr.gc-payout-head td{background:var(--surface-2);font-size:12.5px;padding:8px 14px;border-top:1px solid var(--line)}
table.data tr.gc-payout-head td .badge-count{margin-left:4px}
#gc-views .badge-count{margin-left:6px;font-size:11px}
/* Email Management */
.mx-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:14px 0}
@media(max-width:1500px){.mx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1200px){.mx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.mx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mx-grid{grid-template-columns:1fr}}
.mx-card{background:var(--card,#fff);border:1px solid var(--line,#e6e3d8);border-radius:14px;padding:14px;min-width:0;cursor:pointer;transition:box-shadow .15s,transform .15s}
.mx-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-1px)}
.mx-nums{display:flex;gap:14px;margin:10px 0}
.mx-nums b{display:block;font-size:26px;line-height:1.1}
.mx-nums span{font-size:12px;opacity:.7}
.mx-foot{display:flex;gap:6px;flex-wrap:wrap;font-size:12px}
.mx-table td{vertical-align:top}
.mx-unread td{font-weight:600}
.mx-thread{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto;margin-bottom:12px}
.mx-msg{border:1px solid var(--line,#e6e3d8);border-radius:10px;padding:10px 12px;background:var(--card,#fff)}
.mx-msg.mx-out{background:rgba(120,160,120,.10)}
.mx-msg.mx-current{border-color:#c9a227}
.mx-msg-h{font-size:12px;opacity:.75;margin-bottom:6px}
.mx-msg-b{white-space:pre-wrap;font-size:13px}
.mx-gold{color:#b8860b !important}
.mx-red{color:#c0392b !important}
.mx-sub{font-size:12px;opacity:.8;margin-top:6px;line-height:1.5}
.mx-sub b{font-weight:700}
.mx-tags{display:flex;gap:6px;flex-wrap:nowrap;margin-top:2px}
.mx-tag{flex:1 1 0;min-width:0;white-space:nowrap;text-align:center;font-size:10.5px;padding:5px 2px;border-radius:999px;background:rgba(0,0,0,.05);color:inherit;opacity:.75;overflow:hidden;text-overflow:ellipsis}
.mx-tag b{font-size:13px}
.mx-tag.on{background:rgba(192,57,43,.12);color:#c0392b;opacity:1}
/* ---- Rich text editor (email templates, replies) ---- */
.re-wrap{border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);overflow:visible}
.re-bar{display:flex;flex-wrap:wrap;gap:3px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--line);background:var(--bg-soft,#f6f7f6);border-radius:10px 10px 0 0;position:relative}
.re-bar button{border:1px solid transparent;background:transparent;border-radius:6px;min-width:28px;height:28px;padding:0 6px;cursor:pointer;font-size:13px;color:var(--ink,#222);display:inline-flex;align-items:center;justify-content:center}
.re-bar button:hover{background:rgba(0,0,0,.07)}
.re-bar button svg{width:15px;height:15px}
.re-bar select{border:1px solid var(--line);border-radius:6px;height:28px;font-size:12.5px;background:#fff;padding:0 4px;max-width:150px}
.re-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.re-pop{position:relative;display:inline-block}
.re-menu{display:none;position:absolute;top:32px;left:0;z-index:30;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.15);width:150px;gap:6px;flex-wrap:wrap}
.re-menu.on{display:flex}
.re-menu i{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.2);cursor:pointer;display:inline-block}
.re-menu label{cursor:pointer;font-size:15px;line-height:20px;width:20px;text-align:center}
.re-body{padding:12px 14px;outline:none;font:14px/1.5 Arial,Helvetica,sans-serif;max-height:60vh;overflow:auto;background:#fff;color:#222;border-radius:0 0 10px 10px}
.re-body a{color:#1a56c5}
.re-body[contenteditable=false]{background:#fafafa}
/* Auto Reminders: search box with a clear (×) button that shows a pointer hand, rule warnings */
.ar-search{position:relative}
.ar-search .input{padding-right:34px}
.ar-search .ar-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;line-height:20px;text-align:center;border:0;border-radius:50%;background:rgba(0,0,0,.08);color:inherit;font-size:16px;padding:0;cursor:pointer}
.ar-search .ar-x:hover{background:rgba(0,0,0,.18)}
.ar-warn{color:#b26a00}
[data-theme="dark"] .ar-warn{color:#e6a23c}
/* ===== Email Management — premium finish (5.9.578) ===== */
.modal.xl{max-width:none;width:calc(100vw - 48px);margin:0 auto}
.modal-overlay:has(.modal.xl){padding:24px 24px;align-items:flex-start}
.modal.xl .modal-body{max-height:calc(100vh - 210px);padding:24px 28px}
.modal.xl .modal-head{padding:20px 28px}
.modal.xl .modal-foot{padding:16px 28px;flex-wrap:wrap}
.modal.xl .mx-thread{max-height:none;overflow:visible}
@media(max-width:700px){.modal.xl{width:calc(100vw - 20px)}.modal.xl .modal-body{padding:16px}}
#mx-root{padding:2px 0 24px}
.mx-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 20px}
.mx-head h2{margin:0;font-size:22px;letter-spacing:-.01em}
.mx-head-sub{font-size:13px;color:var(--ink-3);margin-top:2px}
.mx-head-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#f6ecc8,#e8d38a);color:#7a5c05;box-shadow:0 2px 8px rgba(176,138,20,.25)}
.mx-head-ico svg{width:21px;height:21px}
.mx-grid{gap:16px;margin:6px 0 18px}
.mx-card{position:relative;border:1px solid var(--line);border-radius:16px;padding:18px 18px 14px;background:var(--surface);overflow:hidden;box-shadow:0 1px 2px rgba(11,28,22,.04)}
.mx-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#c9a227,#e8d38a)}
.mx-card:hover{box-shadow:0 10px 28px rgba(11,28,22,.10);transform:translateY(-2px);border-color:#d9c887}
.mx-card .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.mx-nums{gap:0;margin:14px 0 12px;background:var(--surface-2);border-radius:12px;padding:10px 4px}
.mx-nums>div{flex:1;text-align:center;border-right:1px solid var(--line)}
.mx-nums>div:last-child{border-right:0}
.mx-nums b{font-size:24px;font-weight:700}
.mx-nums span{display:block;margin-top:2px;font-size:11.5px;letter-spacing:.02em}
.mx-tag{border-radius:10px;padding:6px 2px;background:var(--surface-2);opacity:.9}
.mx-foot{align-items:center}
.mx-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:linear-gradient(135deg,#eaf1ec,#d5e3da);color:#2f5d46;border:1px solid #cfdcd3}
.mx-av.out{background:linear-gradient(135deg,#f6ecc8,#ead894);color:#7a5c05;border-color:#e3d28a}
.mx-sender{display:flex;align-items:center;gap:11px;min-width:0}
.mx-table{border-collapse:separate;border-spacing:0}
.mx-table tbody tr{transition:background .12s}
.mx-table tbody tr:hover{background:var(--surface-2)}
.mx-table td{padding-top:12px;padding-bottom:12px;vertical-align:middle}
.mx-unread td:first-child{box-shadow:inset 3px 0 0 #c9a227}
.mx-thread{gap:14px}
.mx-msg{border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px rgba(11,28,22,.04)}
.mx-msg.mx-out{background:#f8f5e8;border-color:#e8dcab}
.mx-msg.mx-current{border-color:#c9a227;box-shadow:0 0 0 3px rgba(201,162,39,.14)}
.mx-msg-h{display:flex;align-items:center;gap:11px;margin-bottom:12px;opacity:1}
.mx-msg-who{display:flex;flex-direction:column;line-height:1.35}
.mx-msg-who b{font-size:14px}.mx-msg-who span{font-size:12px}
.mx-msg-b{font-size:14px;line-height:1.6}
#mx-root .panel{border-radius:16px}
#mx-root .seg{flex-wrap:wrap}
[data-theme="dark"] .mx-msg.mx-out{background:rgba(201,162,39,.10);border-color:rgba(201,162,39,.3)}
[data-theme="dark"] .mx-av{background:#27382f;color:#bfe0cb;border-color:#35493d}
[data-theme="dark"] .mx-head-ico{background:rgba(201,162,39,.18);color:#e8d38a;box-shadow:none}
/* ===== Sign-in — website glass theme (5.9.578) ===== */
.auth-wrap{position:relative;isolation:isolate;background:linear-gradient(160deg,#eaf1ee,#f6f1e6);grid-template-columns:1.15fr 1fr}
.auth-wrap::before,.auth-wrap::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none}
.auth-wrap::before{width:560px;height:560px;left:-120px;top:-100px;background:rgba(31,163,122,.30)}
.auth-wrap::after{width:520px;height:520px;right:-120px;bottom:-120px;background:rgba(180,137,58,.28)}
.auth-brand{background:transparent;color:var(--ink);padding:56px 64px}
.auth-brand::after{display:none}
.auth-logo{color:var(--green-800)}
.auth-eyebrow{display:inline-flex;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#946f2a;margin-bottom:18px;padding:6px 13px;border-radius:99px;background:rgba(180,137,58,.14);border:1px solid rgba(16,32,26,.10)}
.auth-tag{max-width:520px}
.auth-tag h2{color:var(--ink);font-size:clamp(32px,3.4vw,46px);letter-spacing:-.025em}
.auth-tag h2 em{font-style:normal;background:linear-gradient(120deg,#b4893a,#1fa37a);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-tag p{color:var(--ink-2);max-width:470px}
.auth-feats{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.auth-feats li{display:flex;gap:14px;align-items:center;padding:13px 16px;border-radius:16px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 32px rgba(15,61,46,.08);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%)}
.auth-feats .af-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(31,163,122,.16),rgba(180,137,58,.18));color:#17513c}
.auth-feats .af-ico svg{width:20px;height:20px}
.auth-feats b{display:block;font-size:14.5px;color:var(--ink)}
.auth-feats span:not(.af-ico){display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4;margin-top:1px}
.auth-foot{color:var(--ink-3)}
.auth-site{color:#946f2a}
.auth-panel{background:transparent;padding:40px}
.auth-card{max-width:420px;padding:38px 36px;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);box-shadow:0 30px 70px rgba(15,61,46,.18),0 1px 0 rgba(255,255,255,.9) inset;backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%)}
.auth-card h1{font-size:28px;letter-spacing:-.02em}
.auth-card .input{background:rgba(255,255,255,.8);border-radius:12px;padding-top:12px;padding-bottom:12px}
.auth-card .btn-primary{border-radius:12px;padding:13px 18px;font-size:15px;background:linear-gradient(135deg,#17513c,#0f3d2e);box-shadow:0 8px 22px rgba(15,61,46,.28)}
.auth-card .btn-primary:hover{transform:translateY(-1px)}
@media(max-width:860px){.auth-wrap{grid-template-columns:1fr}.auth-brand{display:none}.auth-panel{padding:20px}.auth-card{padding:30px 22px}}
[data-theme="dark"] .auth-wrap{background:linear-gradient(160deg,#06100c,#0b1612)}
[data-theme="dark"] .auth-wrap::before{background:rgba(31,163,122,.34)}
[data-theme="dark"] .auth-wrap::after{background:rgba(217,173,92,.22)}
[data-theme="dark"] .auth-logo{color:#eaf3ee}
[data-theme="dark"] .auth-eyebrow{color:#e8c27a;background:rgba(217,173,92,.14);border-color:rgba(255,255,255,.10)}
[data-theme="dark"] .auth-feats li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:0 10px 40px rgba(0,0,0,.4)}
[data-theme="dark"] .auth-feats .af-ico{color:#7fe0b8}
[data-theme="dark"] .auth-card{background:rgba(13,26,21,.72);border-color:rgba(255,255,255,.12);box-shadow:0 34px 80px rgba(0,0,0,.6)}
[data-theme="dark"] .auth-card .input{background:rgba(255,255,255,.06)}
[data-theme="dark"] .auth-card h1{color:#eaf3ee}
/* The website demo note */
#pa-demo{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:2500;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px);padding:9px 14px;border-radius:999px;background:#0b3d2e;color:#fff;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.28)}
#pa-demo b{color:#e8c25a}
#pa-demo .pa-demo-trial{background:#e8c25a;color:#1b1b1b;border-radius:999px;padding:5px 12px;font-weight:600;text-decoration:none}
#pa-demo button{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:999px;padding:4px 11px;cursor:pointer;font:inherit}
@media (max-width:560px){#pa-demo{border-radius:14px;bottom:8px;font-size:12px}}
/* ============================== Learning Hub ============================== */
.lh{max-width:1280px;margin:0 auto}
.lh-hero{display:flex;gap:28px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding:30px 32px;border-radius:20px;color:#fff;margin-bottom:18px;
background:radial-gradient(900px 300px at 90% -20%,rgba(201,162,75,.28),transparent 60%),linear-gradient(135deg,var(--green-900),var(--green-700));box-shadow:var(--shadow)}
.lh-hero-txt{flex:1 1 420px;min-width:260px}
.lh-eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);margin-bottom:10px}
.lh-eyebrow svg{width:16px;height:16px}
.lh-hero h1{margin:0 0 6px;font-family:var(--font-display);font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.lh-hero p{margin:0 0 18px;color:rgba(255,255,255,.78);font-size:14.5px}
.lh-progress{max-width:420px}
.lh-prog-top{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.75);margin-bottom:6px}
.lh-prog-top b{color:#fff}
.lh-prog-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.lh-prog-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));transition:width .5s ease}
.lh-hero-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lh-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.96);color:var(--ink);border-radius:12px;padding:0 14px;height:44px;min-width:300px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.lh-search svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.lh-search input{border:0;outline:0;background:transparent;font:inherit;flex:1;color:var(--ink);min-width:0}
.lh-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:6px 0 20px}
.lh-tabs{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;gap:2px}
.lh-tabs button{border:0;background:transparent;padding:8px 18px;border-radius:9px;font:inherit;font-weight:600;color:var(--ink-2);cursor:pointer}
.lh-tabs button.active{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.lh-filters{display:flex;gap:8px;flex-wrap:wrap}
.lh-filters .input{width:auto;min-width:150px}
.lh-sec{margin-bottom:32px}
.lh-sec h2{font-family:var(--font-display);font-size:19px;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.lh-count{font-size:12px;font-weight:600;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:1px 9px}
.lh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.lh-grid.lh-feat{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.lh-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;outline:none}
.lh-card:hover,.lh-card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.lh-card.draft{opacity:.78;border-style:dashed}
.lh-cover{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;color:rgba(255,255,255,.9)}
.lh-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lh-cover-ico svg{width:34px;height:34px;opacity:.9}
.lh-cover img + .lh-cover-ico{display:none}
.lh-play{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.lh-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.lh-done-badge{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--green-600);color:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.lh-done-badge svg{width:15px;height:15px;stroke-width:3}
.lh-card-body{padding:14px 16px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.lh-card-body h3{margin:0;font-size:15.5px;line-height:1.3;font-weight:650}
.lh-card-body p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lh-meta{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
.lh-meta.big{font-size:13px;margin-bottom:10px}
.lh-kind{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;padding:2px 8px;border-radius:99px;background:hsl(var(--h) 60% 94%);color:hsl(var(--h) 55% 28%)}
[data-theme="dark"] .lh-kind{background:hsl(var(--h) 35% 20%);color:hsl(var(--h) 60% 80%)}
.lh-dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.lh-card-foot{margin-top:auto;padding-top:8px;display:flex;gap:10px;align-items:center;font-size:12px;color:var(--ink-3)}
.lh-fileflag{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.lh-fileflag + .lh-fileflag{margin-left:0}
.lh-fileflag svg{width:13px;height:13px}
.lh-edit{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:9px;border:0;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.lh-edit svg{width:15px;height:15px}
.lh-card:hover .lh-edit,.lh-edit:focus{opacity:1}
.lh-sub{color:var(--ink-2);font-size:13.5px}
/* quick links */
.lh-quick{display:grid;gap:10px}
.lh-qrow{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;position:relative}
.lh-qrow:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.lh-qico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:hsl(var(--h) 60% 94%);color:hsl(var(--h) 55% 28%)}
[data-theme="dark"] .lh-qico{background:hsl(var(--h) 35% 20%);color:hsl(var(--h) 60% 80%)}
.lh-qico svg{width:20px;height:20px}
.lh-qtxt{flex:1;min-width:0;display:flex;flex-direction:column}
.lh-qtxt b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh-qtxt span{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* reader */
.lh-back{margin-bottom:14px}
.lh-reader{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.lh-main-col{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 34px}
.lh-title{font-family:var(--font-display);font-size:30px;line-height:1.2;margin:0 0 10px;letter-spacing:-.01em}
.lh-lead{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:0 0 20px}
.lh-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin:0 0 20px;box-shadow:var(--shadow)}
.lh-video iframe,.lh-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.lh-pdf{margin:0 0 20px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2)}
.lh-pdf iframe{display:block;width:100%;height:78vh;min-height:520px;border:0}
.lh-img{max-width:100%;border-radius:12px;margin:0 0 20px}
.lh-linkcard{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:14px 18px;margin:0 0 18px}
.lh-linkcard > svg{width:26px;height:26px;color:var(--green-600);flex:none}
.lh-linkcard > div{flex:1;min-width:0;display:flex;flex-direction:column}
.lh-linkcard span{font-size:12.5px;color:var(--ink-3)}
.lh-prose{font-size:16px;line-height:1.75;color:var(--ink);max-width:72ch}
.lh-prose h1,.lh-prose h2,.lh-prose h3{font-family:var(--font-display);line-height:1.25;margin:1.6em 0 .5em}
.lh-prose p,.lh-prose div{margin:0 0 .9em}
.lh-prose ul,.lh-prose ol{padding-left:1.4em;margin:0 0 1em}
.lh-prose a{color:var(--green-600);text-decoration:underline}
.lh-prose blockquote{margin:1.2em 0;padding:.4em 1.1em;border-left:3px solid var(--gold-500);color:var(--ink-2);background:var(--surface-2);border-radius:0 10px 10px 0}
.lh-tags{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 0}
.lh-tags span{font-size:12px;padding:3px 10px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.lh-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.lh-side{display:grid;gap:16px;position:sticky;top:12px}
.lh-side-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.lh-side-card h4{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lh-side-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13.5px}
.lh-side-card dt{color:var(--ink-3)} .lh-side-card dd{margin:0;text-align:right;font-weight:600}
.lh-next{display:flex;gap:10px;align-items:center;padding:8px 0;cursor:pointer;border-top:1px solid var(--line)}
.lh-next:first-of-type{border-top:0}
.lh-next .lh-cover{width:84px;flex:none;border-radius:8px}
.lh-next .lh-cover-ico svg{width:18px;height:18px}
.lh-next .lh-play{width:28px;height:28px}.lh-next .lh-play svg{width:12px;height:12px}
.lh-next b{display:block;font-size:13px;line-height:1.3}.lh-next i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
@media (max-width:980px){.lh-reader{grid-template-columns:1fr}.lh-side{position:static}.lh-main-col{padding:20px 18px}.lh-hero{padding:22px 18px}.lh-search{min-width:0;width:100%}.lh-hero-act{width:100%}}
/* Clear / Clear all filter buttons: a distinct red so they stand out from the other filter controls */
.btn.btn-clearall{background:var(--red-100,#fee2e2);color:var(--red-600,#dc2626);border:1px solid var(--red-600,#dc2626);font-weight:600}
.btn.btn-clearall:hover{background:var(--red-600,#dc2626);color:#fff}
.btn.btn-clearall svg{color:inherit}
/* ---- AML window (one place for checklist, documents, ID verification, risk) ---- */
.aml-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;justify-content:space-between;margin-bottom:14px}
.aml-head .aml-meta{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.aml-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.aml-tile{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface);display:flex;gap:10px;align-items:flex-start;cursor:pointer;text-align:left;font:inherit;color:inherit}
.aml-tile:hover{border-color:var(--gold-500)}
.aml-tile .dot{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--line);color:var(--ink-2)}
.aml-tile.ok .dot{background:var(--green-100);color:var(--green-700)}
.aml-tile.bad .dot{background:var(--red-100);color:var(--red-600)}
.aml-tile b{display:block;font-size:13px}
.aml-tile span.d{font-size:12px;color:var(--ink-3)}
.aml-q{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(150px,260px);gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.aml-q:last-child{border-bottom:0}
.aml-q .qt{font-size:13.5px}
.aml-q .qh{font-size:12px;color:var(--ink-3);margin-top:2px}
.aml-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.aml-seg button{border:0;background:var(--surface);padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;border-right:1px solid var(--line)}
.aml-seg button:last-child{border-right:0}
.aml-seg button.on.y{background:var(--green-100);color:var(--green-700)}
.aml-seg button.on.n{background:var(--red-100);color:var(--red-600)}
.aml-seg button.on.na{background:var(--bg-2);color:var(--ink)}
.aml-q.unans .qt::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber-500);margin-right:7px;vertical-align:middle}
.aml-savebar{position:sticky;bottom:-1px;background:var(--surface);border-top:1px solid var(--line);padding:10px 0 2px;margin-top:8px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.aml-doc-type{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:8px;flex-wrap:wrap}
.aml-doc-type.missing{border-color:var(--amber-500);background:rgba(245,166,35,.06)}
.aml-docfile{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:6px 0 6px 14px;border-top:1px dashed var(--line);flex-wrap:wrap;width:100%}
@media(max-width:760px){.aml-q{grid-template-columns:1fr}}