*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Real fallback color for text sitting on var(--accent). applyTheme() in
     ui.js overwrites this at runtime per-workspace using actual contrast
     math, so this value only matters for the first instant before that
     JS runs. */
  --accent-fg:#181113;
  --brand:#5C1523; --brand2:#8A2436; --accent:#C9A227; --bg:#F5F1EE; --card:#fff; --ink:#211A1C;
  --muted:#7a6a6d; --line:#e9e2dd; --soft:#faf6f3;
  --not:#a23030; --not-bg:#f6dada;
  --prog:#1f4e79; --prog-bg:#d7e5f3;
  --up:#9a6b00; --up-bg:#fbeecb;
  --rev:#6b3fa0; --rev-bg:#e8ddf5;
  --done:#1e7a3d; --done-bg:#def0e2;
  --comp:#ffffff; --comp-bg:#14532d;
  --daily:#6b3fa0; --daily-bg:#e8ddf5;
  --hi:#c0392b; --md:#b9770e; --lo:#4b5563;
  --ip:#9a6b00; --arch:#6b3fa0; /* attendance grid: H (half-day) + S (sick) colors */
  --pub:#ffffff; --pub-bg:#14532d; --work:#9a6b00; --work-bg:#fbeecb;
  --sched:#1f4e79; --sched-bg:#d7e5f3; --canc:#5a5a5a; --canc-bg:#e4e4e4; --redo:#b03060; --redo-bg:#f7dae5;
  --shadow:0 1px 3px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04);
  --shadow-l:0 8px 26px rgba(16,24,40,.13);
  scroll-behavior: smooth;
}
body.dark{
  --bg:#0E0B0E; --card:#191317; --ink:#F0E9EB; --muted:#a99ea1; --line:#2e2529; --soft:#1f181b;
  --shadow:0 1px 3px rgba(0,0,0,.5); --shadow-l:0 10px 34px rgba(0,0,0,.62);
  --not-bg:#371a1a; --prog-bg:#152537; --up-bg:#352a10; --rev-bg:#251a38; --done-bg:#16301f;
  --comp:#ffffff; --comp-bg:#14532d;
  --pub:#ffffff; --pub-bg:#14532d; --work-bg:#352a10; --sched-bg:#152537; --canc-bg:#2a2a2a; --redo-bg:#3a1524;
}
body{font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.app{display:flex;min-height:100vh;width:100vw}

/* --- LOGIN OVERLAY --- */
#loginOverlay { position:fixed; inset:0; background:var(--brand); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; transition:0.3s; }
#loginOverlay:not(.show) { opacity:0; pointer-events:none; visibility:hidden; }
.login-card { background:var(--card); border-radius:16px; padding:40px 30px; width:100%; max-width:400px; box-shadow:var(--shadow-l); text-align:center; }
.login-card h2 { font-size:22px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.login-card p { font-size:13px; color:var(--muted); margin-bottom:24px; line-height:1.5; }
#googleBtnDiv { display:flex; justify-content:center; margin-top:20px; min-height:44px; }

/* --- SIDEBAR & NAV --- */
.sidebar{width:240px;flex-shrink:0;background:linear-gradient(180deg,var(--brand),var(--brand2));color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:.3s ease;z-index:50}
.brand{display:flex;align-items:center;gap:11px;padding:18px 16px 12px}
.logo{width:42px;height:42px;border-radius:11px;background:var(--accent);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;overflow:hidden}
.bname{font-size:13px;font-weight:700;line-height:1.25;flex:1;min-width:0}
.bname b{display:block;font-size:14px}
.bname small{display:block;font-size:10px;font-weight:500;opacity:.78;margin-top:2px}
.ws-switch{padding:0 12px 10px}
.ws-switch label{font-size:9px;font-weight:800;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.6px;display:block;margin:0 4px 5px}
.ws-select{width:100%;padding:9px 11px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:9px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;outline:none}
.ws-select option{color:#000}
.side-nav{flex:1;padding:6px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.nav-i{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;color:#d6dbf0;font-size:13px;font-weight:600;border:none;background:none;width:100%;text-align:left;transition:.12s}
.nav-i:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-i.active{background:rgba(255,255,255,.18);color:#fff}
.nav-i .ico{width:18px;text-align:center;font-size:14px}
.nav-i .ct{margin-left:auto;background:rgba(255,255,255,.2);font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px}
.side-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.13);display:flex;flex-direction:column;gap:8px}
.toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;font-weight:600;color:#d6dbf0}
.sw{width:38px;height:21px;background:rgba(255,255,255,.22);border-radius:11px;position:relative;transition:.2s}
.sw::after{content:"";position:absolute;width:15px;height:15px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.2s}
body.dark .sw{background:var(--accent)}
body.dark .sw::after{left:20px}
.main{flex:1;min-width:0;display:flex;flex-direction:column;width:100%}

/* --- TOPBAR & SEARCH --- */
.topbar{display:flex;align-items:center;gap:12px;padding:14px 22px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.topbar h1{font-size:18px;font-weight:800;letter-spacing:-.2px}
.topbar .ws-chip{padding:3px 9px;border-radius:14px;background:var(--soft);border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--brand2);white-space:nowrap}
.sync-dot{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:14px;background:var(--soft);border:1px solid var(--line);font-size:10px;font-weight:700;color:var(--muted);white-space:nowrap;cursor:pointer;transition:.15s}
.sync-dot:hover{background:var(--line)}
.sync-dot .sd-pip{width:8px;height:8px;border-radius:50%;background:var(--muted);transition:.2s}
.sync-dot.ok .sd-pip{background:var(--done);box-shadow:0 0 6px var(--done)}
.sync-dot.syncing .sd-pip{background:var(--accent);animation:pulse 1s infinite}
.sync-dot.off .sd-pip{background:var(--not)}
@keyframes pulse{50%{opacity:.4}}
.spacer{flex:1;min-width:20px}
.search{display:flex;align-items:center;gap:7px;background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:7px 11px;min-width:200px;flex:1;max-width:340px;position:relative}
.search input{border:none;background:none;outline:none;color:var(--ink);font-size:13px;width:100%;font-family:inherit}
.search .clear-x{cursor:pointer;color:var(--muted);font-weight:800;padding:0 4px;display:none;background:none;border:none;font-family:inherit;font-size:14px}
.search.has-text .clear-x{display:inline}

/* --- BUTTONS --- */
.btn{border:none;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;transition:.13s;font-family:inherit;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.btn-accent{background:var(--accent);color:#241a00}
.btn-accent:hover{filter:brightness(1.06)}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand2)}
.btn-line{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn-line:hover{background:var(--soft)}
.btn-danger{background:var(--not-bg);color:var(--not)}
.btn-sm{padding:6px 11px;font-size:12px}
.hamburger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink)}

/* --- UI ELEMENTS --- */
.qa-wrap{position:relative}
.qa-menu{display:none;position:absolute;right:0;top:42px;background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-l);padding:6px;min-width:240px;z-index:40;max-height:75vh;overflow-y:auto}
.qa-menu.show{display:block}
.qa-i{padding:9px 11px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600;display:flex;gap:9px;align-items:center}
.qa-i:hover{background:var(--soft)}
.qa-i .qt{font-size:10px;color:var(--muted);font-weight:600}
.qhdr{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;padding:8px 11px 4px;letter-spacing:.6px}
.content{padding:22px 22px 60px;max-width:1320px;width:100%;margin:0 auto}
.view{display:none}
.view.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* --- DASHBOARD PANELS & KPIS --- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:16px}
.kpi{background:var(--card);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.kpi .kt{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.kpi .kv{font-size:30px;font-weight:800;margin-top:5px;letter-spacing:-.5px}
.kpi .kd{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600}
.kpi .kd b{color:var(--done)}
.panel{background:var(--card);border-radius:14px;padding:18px;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:16px;overflow:hidden}
.panel h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:14px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.ring-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ring{width:128px;height:128px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ring .ri{width:94px;height:94px;background:var(--card);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .rp{font-size:26px;font-weight:800}
.ring .rc{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.5px}
.leg{font-size:12px;line-height:2}
.dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:middle}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bar-row .bn{width:128px;font-size:12px;font-weight:600;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-tr{flex:1;background:var(--soft);border-radius:6px;height:22px;overflow:hidden}
.bar-fl{height:100%;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:11px;font-weight:800;min-width:24px}

/* --- BADGES & STATUSES --- */
.pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:800;white-space:nowrap}
.s-Notstarted{background:var(--not-bg);color:var(--not)}
.s-InProgress{background:var(--prog-bg);color:var(--prog)}
.s-NeedtoUpload{background:var(--up-bg);color:var(--up)}
.s-Review{background:var(--rev-bg);color:var(--rev)}
.s-Done{background:var(--done-bg);color:var(--done)}
.s-Published{background:var(--pub-bg);color:var(--pub-txt, #fff)}
.s-Completed{background:var(--comp-bg);color:var(--comp-txt, #fff)}
.s-Workingonit{background:var(--work-bg);color:var(--work)}
.s-Scheduled{background:var(--sched-bg);color:var(--sched)}
.s-NotyetStarted{background:var(--not-bg);color:var(--not)}
.s-Cancelled{background:var(--canc-bg);color:var(--canc)}
.s-Redo{background:var(--redo-bg);color:var(--redo)}
.s-Archived{background:var(--canc-bg);color:var(--canc)}

/* ===================================================================
   CANONICAL STATUS PALETTE — exact colors as specified, so this always
   wins over the legacy var(--xxx) rules above regardless of which
   stacked theme block last touched those variables. Same hex in light
   and dark mode; only the background tint strength changes so the pill
   still reads clearly on a dark card. */
.pill{display:inline-flex;align-items:center;gap:5px;}
.s-NotyetStarted,.s-Notstarted{background:color-mix(in srgb,#6B7280 16%,var(--card))!important;color:#6B7280!important;}
.s-NotyetStarted::before,.s-Notstarted::before{content:"\25CB";}
.s-Workingonit,.s-InProgress{background:color-mix(in srgb,#3B82F6 16%,var(--card))!important;color:#3B82F6!important;}
.s-Workingonit::before,.s-InProgress::before{content:"\25D0";}
.s-InReview,.s-Review{background:color-mix(in srgb,#F59E0B 16%,var(--card))!important;color:#F59E0B!important;}
.s-InReview::before,.s-Review::before{content:"\25CC";}
.s-Redo{background:color-mix(in srgb,#F97316 16%,var(--card))!important;color:#F97316!important;}
.s-Redo::before{content:"\21BB";}
.s-Approved,.s-Done,.s-Completed{background:color-mix(in srgb,#22C55E 16%,var(--card))!important;color:#22C55E!important;}
.s-Approved::before,.s-Done::before,.s-Completed::before{content:"\2713";}
.s-Scheduled{background:color-mix(in srgb,#8B5CF6 16%,var(--card))!important;color:#8B5CF6!important;}
.s-Scheduled::before{content:"\25F7";}
.s-Published{background:color-mix(in srgb,#14B8A6 16%,var(--card))!important;color:#14B8A6!important;}
.s-Published::before{content:"\2197";}
.s-Cancelled,.s-Archived{background:color-mix(in srgb,#EF4444 16%,var(--card))!important;color:#EF4444!important;}
.s-Cancelled::before,.s-Archived::before{content:"\00D7";}
body.dark .s-NotyetStarted,body.dark .s-Notstarted{background:color-mix(in srgb,#6B7280 32%,var(--card))!important;}
body.dark .s-Workingonit,body.dark .s-InProgress{background:color-mix(in srgb,#3B82F6 30%,var(--card))!important;}
body.dark .s-InReview,body.dark .s-Review{background:color-mix(in srgb,#F59E0B 30%,var(--card))!important;}
body.dark .s-Redo{background:color-mix(in srgb,#F97316 30%,var(--card))!important;}
body.dark .s-Approved,body.dark .s-Done,body.dark .s-Completed{background:color-mix(in srgb,#22C55E 30%,var(--card))!important;}
body.dark .s-Scheduled{background:color-mix(in srgb,#8B5CF6 30%,var(--card))!important;}
body.dark .s-Published{background:color-mix(in srgb,#14B8A6 30%,var(--card))!important;}
body.dark .s-Cancelled,body.dark .s-Archived{background:color-mix(in srgb,#EF4444 32%,var(--card))!important;}
.pr{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.pr-High{background:rgba(192,57,43,.14);color:var(--hi)}
.pr-Medium{background:rgba(185,119,14,.16);color:var(--md)}
.pr-Low{background:rgba(75,85,99,.14);color:var(--lo)}
.ttype{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;background:var(--daily-bg);color:var(--daily);white-space:nowrap}
.plat-tag{display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:800;background:rgba(154,68,68,.12);color:var(--brand2);margin-right:3px;white-space:nowrap;margin-bottom:2px}
.mini-list{display:flex;flex-direction:column;gap:8px}
.mini-i{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--soft);border-radius:9px;cursor:pointer;flex-wrap:wrap}
.mini-i:hover{background:var(--line)}
.mini-i .md{font-size:11px;font-weight:800;color:var(--brand2);width:50px;flex-shrink:0;text-align:center}
.mini-i .mh{font-size:12.5px;font-weight:600;flex:1;overflow:visible;white-space:normal;word-wrap:break-word;min-width:120px}
.empty{text-align:center;color:var(--muted);padding:30px;font-size:13px}

/* --- CALENDAR --- */
.cal-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.cal-bar h2{font-size:18px;font-weight:800;letter-spacing:-0.3px;color:var(--ink);min-width:140px;}
.seg{display:flex;background:var(--soft);border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:var(--shadow);}
.seg button{border:none;background:none;padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted);font-family:inherit;transition:.15s;}
.seg button.active{background:var(--brand);color:#fff}
.cal-grid-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:8px;min-width:800px;padding:4px;}
.cal-year{display:flex;flex-direction:column;gap:22px;}
.cal-year .year-month{scroll-margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 20px rgba(47,53,102,.09);overflow:hidden;}
body.dark .cal-year .year-month{background:rgba(24,27,36,.75);border-color:rgba(255,255,255,.08);box-shadow:0 6px 20px rgba(0,0,0,.35);}
.cal-year .year-month.cur{border-color:var(--brand2);box-shadow:0 8px 26px rgba(75,82,153,.24);}
.cal-year .year-mh{margin:0;padding:14px 20px;font-size:16px;font-weight:800;color:#fff;letter-spacing:-0.2px;background:linear-gradient(120deg,var(--brand),var(--brand2) 70%,var(--accent));display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cal-year .year-mh .ym-count{font-size:11px;font-weight:800;background:rgba(255,255,255,.24);color:#fff;padding:4px 12px;border-radius:30px;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.cal-year .year-month>.cal-grid-wrapper{background:none;padding:10px 16px 16px;}
.cal-year .year-month>.cal-grid-wrapper::before{display:none;}
.cal-grid-wrapper.year-scroll{background:none;padding:0;}
.cal-grid-wrapper.year-scroll::before{display:none;}
.dow{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;text-align:center;padding:8px 0;letter-spacing:1px;}
.day{background:var(--card);border:1px solid var(--line);border-radius:12px;min-height:130px;padding:10px;transition:.2s ease;display:flex;flex-direction:column;gap:6px;}
.day:hover{box-shadow:var(--shadow);border-color:#d1d5db;}
body.dark .day:hover{border-color:#4b5563;}
.day.empty{background:transparent;border:none;box-shadow:none;}
.day.today{border-color:var(--brand2);background:rgba(75,82,153,0.03);}
.day.today .dn span:first-child{background:var(--brand2);color:#fff;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;box-shadow:0 2px 4px rgba(75,82,153,0.3);}
.day-weekend{background:var(--soft);}
.day .dn{font-size:12px;font-weight:700;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.day .dadd{cursor:pointer;color:var(--brand2);font-weight:800;opacity:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--soft);transition:.2s;text-decoration:none;}
.day:hover .dadd{opacity:1;}
.day .dadd:hover{background:var(--brand2);color:#fff;}

/* --- MODERN CALENDAR EVENT CARDS --- */
.ev{font-size:11px;border-radius:8px;padding:8px;cursor:grab;border-left:4px solid;white-space:normal;display:flex;flex-direction:column;gap:5px;box-shadow:0 1px 2px rgba(0,0,0,0.05);transition:transform 0.15s, box-shadow 0.15s;}
.ev:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1);filter:brightness(0.98);}
body.dark .ev:hover{filter:brightness(1.1);}
.ev:active{cursor:grabbing;}
.ev.dragging{opacity:.4;transform:scale(0.95);}
.ev-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px;}
.ev-top b{font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:0.3px;}
.ev-title{font-weight:600;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ev-bot{display:flex;justify-content:space-between;font-size:9px;opacity:0.85;font-weight:700;}
/* When the event card has a dark background (Published / Completed), force the
   inner text to high-contrast accent yellow so the description stays readable. */
.ev.dark-evt{color:#fff !important;}
.ev.dark-evt .ev-title{color:var(--accent) !important;text-shadow:0 1px 2px rgba(0,0,0,.25);}
.ev.dark-evt .ev-top b,.ev.dark-evt .ev-bot,.ev.dark-evt .ev-bot span{color:#fff !important;opacity:.95;}

/* --- KANBAN BOARD --- */
.board-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px}
.board{display:grid;gap:12px;align-items:start;min-width:1400px}
.col{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:200px;transition:.12s}
.col.drop-hl{background:var(--line);border-color:var(--brand2)}
.col-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:2px 4px}
.col-h .cl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.col-h .cc{font-size:10px;font-weight:800;background:var(--card);border:1px solid var(--line);padding:1px 7px;border-radius:10px}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;cursor:grab;box-shadow:var(--shadow)}
.kcard:active{cursor:grabbing}
.kcard.dragging{opacity:.4}
.kcard .kr{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.kcard .kid,.kcard .kd{font-size:10px;font-weight:800;color:var(--brand2)}
.kcard .kh{font-size:12px;font-weight:600;line-height:1.38;white-space:normal;word-wrap:break-word}
.kcard .kf,.kcard .kp{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:10px;color:var(--muted)}
.kcard .kt-sub{font-size:9px;font-weight:800;color:var(--muted);text-transform:uppercase;margin-top:3px}

/* --- TABLES & LISTS --- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:var(--card);min-width:800px}
th{background:var(--soft);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:11px 10px;text-align:left;font-weight:800;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--soft)}
.td-id,.td-d{font-weight:800;color:var(--brand2);white-space:nowrap}
.td-h{font-weight:600;max-width:300px;white-space:normal;word-wrap:break-word}
.td-m{color:var(--muted);font-size:11px}
.ck{width:15px;height:15px;cursor:pointer;accent-color:var(--brand)}
.bulkbar{display:none;position:sticky;bottom:14px;margin-top:14px;background:var(--brand);color:#fff;border-radius:12px;padding:11px 16px;align-items:center;gap:10px;box-shadow:var(--shadow-l);flex-wrap:wrap;z-index:30}
.bulkbar.show{display:flex}
.bulkbar select{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:6px 9px;border-radius:7px;font-size:12px;font-weight:700;font-family:inherit}
.bulkbar select option{color:#000}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.idea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.idea{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.idea .it{font-size:13px;font-weight:700;margin-bottom:8px;line-height:1.4}

/* --- MODALS --- */
.overlay{display:none;position:fixed;inset:0;background:rgba(12,16,24,.6);z-index:250;align-items:flex-start;justify-content:center;padding:34px 14px;overflow:auto;backdrop-filter:blur(2px)}
.overlay.show{display:flex}
.modal{background:var(--card);border-radius:16px;width:640px;max-width:100%;box-shadow:var(--shadow-l);border:1px solid var(--line);margin-bottom:40px}
.modal-h{background:var(--brand);color:#fff;border-radius:16px 16px 0 0;padding:15px 20px;display:flex;align-items:center;justify-content:space-between}
.modal-h h2{font-size:15px;font-weight:800}
.modal-h .x{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1;padding:0 4px}
.mbody{padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:13px}
.mbody .full{grid-column:1/-1}
label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:5px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-family:inherit;background:var(--soft);color:var(--ink)}
textarea{resize:vertical;min-height:64px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand2);outline-offset:-1px}
input[type=color]{padding:3px;height:38px;cursor:pointer}
.mfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;padding:11px 22px;border-radius:10px;font-size:13px;font-weight:700;opacity:0;transition:.3s;z-index:99;pointer-events:none;box-shadow:var(--shadow-l);white-space:nowrap}
.toast.show{opacity:1}

/* --- Attendance Table Enhancements --- */
.att-wrap{overflow-x:auto;overflow-y:hidden;border:none;border-radius:0;-webkit-overflow-scrolling:touch}
.att-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:760px}
.att-table th{background:var(--soft);color:var(--muted);font-weight:800;padding:6px 1px;font-size:10px;border-bottom:2px solid var(--line);border-top:none;border-left:none;border-right:none;position:sticky;top:0;z-index:2;text-align:center;}
.att-table td{padding:4px 1px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle;}
.att-name{text-align:left!important;font-weight:700;padding:10px 14px!important;white-space:nowrap;position:sticky;left:0;background:var(--card);z-index:3;box-shadow:2px 0 5px rgba(0,0,0,0.05);width:160px;overflow:hidden;text-overflow:ellipsis;}
.att-table th.att-name{z-index:4;}
.att-cell{width:22px;height:22px;cursor:pointer;border-radius:6px;font-weight:800;font-size:10.5px;transition:transform .15s, box-shadow .15s;margin:0 auto;display:flex;align-items:center;justify-content:center;user-select:none;}
.att-cell:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.att-d-weekend{background-color:rgba(0,0,0,0.02);}
body.dark .att-d-weekend{background-color:rgba(255,255,255,0.02);}
.a-P{background:var(--done-bg);color:var(--done);border:1px solid rgba(30,122,61,0.2);}
.a-H{background:var(--up-bg);color:var(--up);border:1px solid rgba(154,107,0,0.2);}
.a-L{background:var(--daily-bg);color:var(--daily);border:1px solid rgba(107,63,160,0.2);}
.a-S{background:var(--prog-bg);color:var(--prog);border:1px solid rgba(31,78,121,0.2);}
.a-A{background:var(--not-bg);color:var(--not);border:1px solid rgba(162,48,48,0.2);}
.a-empty{background:transparent;color:transparent;border:1px dashed var(--line);}

/* --- Payroll / Salary --- */
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.pay-card{background:linear-gradient(135deg,var(--card) 0%,var(--soft) 100%);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);transition:.18s ease;position:relative;overflow:hidden}
.pay-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-l);border-color:var(--brand2)}
.pay-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--accent))}
.pay-card .pc-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pay-card .pc-av{width:38px;height:38px;border-radius:10px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.pay-card .pc-name{font-size:14px;font-weight:800;color:var(--ink);line-height:1.2}
.pay-card .pc-role{font-size:10px;font-weight:700;color:var(--brand2);text-transform:uppercase;letter-spacing:.4px}
.pay-card .pc-rows{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:11.5px;margin-bottom:12px}
.pay-card .pc-rows .lab{color:var(--muted);font-weight:600}
.pay-card .pc-rows .val{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.pay-card .pc-net{background:var(--brand);color:#fff;padding:10px 12px;border-radius:9px;display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.pay-card .pc-net .nl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;opacity:.85}
.pay-card .pc-net .nv{font-size:18px;font-weight:800;letter-spacing:-.3px}
.pay-card .pc-btns{display:flex;gap:6px;margin-top:10px}
.pay-card .pc-btns button{flex:1;font-size:11px;padding:7px 9px}
.pay-cfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;background:linear-gradient(135deg,var(--soft) 0%,var(--card) 100%);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.pay-cfg .cfg-i{display:flex;flex-direction:column;gap:4px}
.pay-cfg label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pay-cfg .cfg-v{font-size:20px;font-weight:800;color:var(--brand2);font-variant-numeric:tabular-nums}
.pay-cfg input{font-size:13px;padding:7px 9px}

/* Stat blocks for monthly summary */
.kpi.compact{padding:14px 16px;border-top:3px solid var(--brand2)}
.kpi.compact:hover{border-top-color:var(--accent)}

/* --- Timer Styles --- */
.t-wrap { display:inline-flex; align-items:center; gap:6px; background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:2px 6px; }
.t-btn { background:none; border:none; cursor:pointer; font-size:12px; color:var(--brand2); font-weight:800; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:4px; transition:0.15s;}
.t-btn:hover { background:var(--line); }
.t-btn.active { color:var(--not); }
.t-val { font-size:11px; font-weight:700; font-variant-numeric: tabular-nums; width:52px; text-align:center; }

/* --- MULTI-SELECT --- */
.ms-wrap{position:relative;width:100%}
.ms-trigger{width:100%;min-height:40px;padding:6px 11px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--ink);cursor:pointer;text-align:left;display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-family:inherit;font-size:13px}
.ms-trigger:focus-within{outline:2px solid var(--brand2);outline-offset:-1px}
.ms-ph{color:var(--muted);font-size:13px}
.ms-arr{margin-left:auto;color:var(--muted);font-size:11px;flex-shrink:0;padding-left:6px}
.ms-tag{background:var(--prog-bg);color:var(--prog);padding:2px 8px;border-radius:5px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ms-dd{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-l);z-index:80;overflow:hidden;max-height:200px;overflow-y:auto}
.ms-dd.open{display:block}
.ms-opt{display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:500}
.ms-opt:hover{background:var(--soft)}
.ms-opt input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}

/* --- ADMIN PANEL --- */
.adm-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.adm-panel{background:var(--card);border-radius:14px;padding:18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.adm-panel h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.adm-list{min-height:60px;max-height:320px;overflow-y:auto}
.adm-item{display:flex;align-items:center;padding:9px 12px;background:var(--soft);border-radius:9px;margin-bottom:6px;font-size:13px;font-weight:600;gap:8px}
.adm-item .ai-name{flex:1;word-break:break-word}
.adm-item .ai-sub{font-size:10px;color:var(--muted);font-weight:600;margin-top:1px;word-break:break-all}
.adm-item .ai-btns{display:flex;gap:3px;flex-shrink:0}
.adm-item .ai-btns button{background:none;border:none;cursor:pointer;padding:4px 7px;border-radius:5px;color:var(--muted);font-size:12px;font-family:inherit;line-height:1}
.adm-item .ai-btns button:hover{background:var(--line);color:var(--ink)}

.cli-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.cli-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);cursor:pointer;transition:.15s;position:relative}
.cli-card:hover{transform:translateY(-2px);border-color:var(--brand2)}
.cli-card .cli-logo{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;margin-bottom:10px}
.cli-card .cli-n{font-size:14px;font-weight:800}
.cli-card .cli-s{font-size:11px;color:var(--muted);margin-top:2px;font-weight:600}
.cli-card .cli-st{display:flex;gap:8px;margin-top:10px;font-size:10px;font-weight:700;color:var(--muted);flex-wrap:wrap}
.cli-card .cli-edit{position:absolute;top:10px;right:10px;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer;font-weight:700;color:var(--muted)}

@media(max-width:860px){
  .sidebar{position:fixed;left:-260px;z-index:210;transition:.3s}
  .sidebar.open{left:0;box-shadow:0 0 15px rgba(0,0,0,.5)}
  .hamburger{display:block}
  .search{min-width:0;flex:1}
  .topbar{padding:14px 16px}
  .content{padding:16px 16px 60px}
}
@media(max-width:768px){
  .mbody{grid-template-columns:1fr}
}
@media(max-width:600px){
  .kpi .kv{font-size:24px}
  .panel{padding:14px}
  .btn{padding:8px 12px;font-size:12px}
}
/* ===================================================================
   3D ANALYTICS & VISUAL DEPTH ENHANCEMENTS
   =================================================================== */

/* --- KPI card depth + top accent bar --- */
.kpi { position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s; }
.kpi:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(47,53,102,.13); }
.kpi::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),var(--accent)); border-radius:2px 2px 0 0; pointer-events:none; }

/* --- KPI count-up animation --- */
@keyframes kpiIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.kv-anim { display:inline-block; animation:kpiIn .55s cubic-bezier(.4,0,.2,1) both; }

/* --- 3D Bar fill --- */
.bar-fill-3d {
  height:28px; border-radius:5px;
  background:var(--bc, var(--brand2));
  position:relative; display:flex; align-items:center;
  justify-content:flex-end; padding-right:10px;
  color:#fff; font-size:11px; font-weight:800; min-width:20px;
  transition:width .9s cubic-bezier(.4,0,.2,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,0,0,.13),
    2px 3px 0 rgba(0,0,0,.13),
    0 5px 14px rgba(0,0,0,.07);
}
.bar-fill-3d::after {
  content:''; position:absolute;
  right:-3px; top:3px;
  width:3px; height:100%;
  background:rgba(0,0,0,.16);
  border-radius:0 2px 2px 0;
}
body.dark .bar-fill-3d {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.32),
    2px 3px 0 rgba(0,0,0,.42),
    0 5px 14px rgba(0,0,0,.22);
}

/* --- SVG Donut chart --- */
.donut-svg { overflow:visible; filter:drop-shadow(0 8px 22px rgba(47,53,102,.18)); }
.donut-svg .d-prog { transition:stroke-dasharray 1.4s cubic-bezier(.4,0,.2,1); }
.donut-wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }

/* --- 3D Stat card (Analytics / CAnalytics headers) --- */
.stat-3d {
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  color:#fff; border-radius:16px; padding:20px 22px;
  position:relative; overflow:hidden;
  box-shadow:0 8px 24px rgba(47,53,102,.22), inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform .2s, box-shadow .2s; cursor:default;
}
.stat-3d:hover {
  transform:translateY(-4px) perspective(500px) rotateX(3deg);
  box-shadow:0 18px 40px rgba(47,53,102,.3), inset 0 1px 0 rgba(255,255,255,.18);
}
.stat-3d::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.07); pointer-events:none;
}
.stat-3d::after {
  content:''; position:absolute; bottom:-25px; left:-15px;
  width:90px; height:90px; border-radius:50%;
  background:rgba(232,176,75,.13); pointer-events:none;
}
.stat-3d .s3-icon { font-size:30px; position:absolute; right:18px; top:50%; transform:translateY(-50%); opacity:.2; pointer-events:none; }
.stat-3d .s3-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; opacity:.78; position:relative; z-index:1; }
.stat-3d .s3-val { font-size:34px; font-weight:800; letter-spacing:-.5px; line-height:1.1; margin:5px 0 3px; position:relative; z-index:1; }
.stat-3d .s3-sub { font-size:11.5px; opacity:.76; position:relative; z-index:1; }

/* --- Panel hover depth --- */
.panel { transition:box-shadow .2s; }
.row2 .panel:hover { box-shadow:0 8px 28px rgba(47,53,102,.1); }

/* --- Kanban card hover depth --- */
.kcard { transition:transform .15s, box-shadow .15s; }
.kcard:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(47,53,102,.13); }

/* --- Sidebar brand logo glow --- */
.logo { box-shadow:0 4px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2); transition:transform .2s; }
.logo:hover { transform:scale(1.07); }

/* --- Button depth --- */
.btn-brand { box-shadow:0 3px 10px rgba(47,53,102,.25); }
.btn-brand:hover { box-shadow:0 6px 18px rgba(47,53,102,.3); transform:translateY(-1px); }
.btn-accent { box-shadow:0 3px 10px rgba(232,176,75,.3); }
.btn-accent:hover { box-shadow:0 6px 18px rgba(232,176,75,.35); transform:translateY(-1px); }

/* --- Legend dot depth --- */
.dot { box-shadow:1px 1px 3px rgba(0,0,0,.15); }

/* --- Sync dot pulse glow --- */
.sync-dot.ok .sd-pip { box-shadow:0 0 8px var(--done), 0 0 16px rgba(30,122,61,.3); }
.sync-dot.syncing .sd-pip { box-shadow:0 0 8px var(--accent); }

/* ===================================================================
   GLASS CALENDAR & LIST FILTER STYLES
   =================================================================== */

/* --- Glass day cells --- */
.day {
  background: rgba(255,255,255,0.62) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: 0 2px 10px rgba(47,53,102,.07), inset 0 1px 0 rgba(255,255,255,.85) !important;
  transition: transform .18s, box-shadow .18s, background .18s !important;
}
.day:hover:not(.empty) {
  background: rgba(255,255,255,.88) !important;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 10px 28px rgba(47,53,102,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.95) !important;
  z-index: 2;
}
.day.today {
  background: rgba(75,82,153,.09) !important;
  border-color: rgba(75,82,153,.45) !important;
  box-shadow: 0 4px 18px rgba(75,82,153,.18), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.day.empty {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
.day-weekend:not(.empty) {
  background: rgba(238,240,246,.45) !important;
}
body.dark .day:not(.empty) {
  background: rgba(24,27,36,.55) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.dark .day:hover:not(.empty) {
  background: rgba(30,34,46,.82) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.dark .day-weekend:not(.empty) {
  background: rgba(15,17,23,.38) !important;
}
body.dark .day.today {
  background: rgba(75,82,153,.18) !important;
  border-color: rgba(75,82,153,.38) !important;
}

/* Glass calendar grid wrapper */
.cal-grid-wrapper {
  background: linear-gradient(135deg, rgba(47,53,102,.04) 0%, rgba(75,82,153,.07) 100%);
  border-radius: 14px;
  padding: 10px;
  position: relative;
}
.cal-grid-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}
body.dark .cal-grid-wrapper {
  background: linear-gradient(135deg, rgba(47,53,102,.15) 0%, rgba(15,17,23,.3) 100%);
}
body.dark .cal-grid-wrapper::before {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 60%);
}

/* Calendar panel glass background */
#view-cal .panel, #view-ccal .panel {
  background: linear-gradient(160deg, rgba(238,240,246,.85) 0%, rgba(255,255,255,.95) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.dark #view-cal .panel, body.dark #view-ccal .panel {
  background: linear-gradient(160deg, rgba(15,17,23,.7) 0%, rgba(24,27,36,.9) 100%);
}

/* Event cards glass overlay */
.ev {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-left-width: 3px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.ev:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.45) !important;
  transform: translateY(-2px) !important;
}

/* --- List filter segment --- */
.seg button { transition: background .15s, color .15s; }

/* ===================================================================
   COMPREHENSIVE AESTHETIC OVERHAUL v3
   =================================================================== */

/* --- Custom scrollbars --- */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--soft); border-radius:3px; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; transition:.2s; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* --- Topbar glass elevation --- */
.topbar {
  box-shadow: 0 1px 0 var(--line), 0 4px 20px rgba(47,53,102,.06);
  background: rgba(var(--card-rgb,255,255,255),.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.dark .topbar { background: rgba(24,27,36,.96); }

/* --- Sidebar polish --- */
.sidebar { box-shadow: 4px 0 24px rgba(0,0,0,.15); }
.nav-i.active {
  background: rgba(255,255,255,.2) !important;
  box-shadow: inset 3px 0 0 var(--accent);
  color: #fff !important;
}
.nav-i { border-radius: 10px; }
.side-nav { padding: 4px 8px; }

/* --- Modal entrance animation --- */
@keyframes modalIn {
  from { opacity:0; transform:scale(.96) translateY(-10px); }
  to   { opacity:1; transform:none; }
}
.overlay.show .modal { animation: modalIn .22s cubic-bezier(.4,0,.2,1); }

/* --- Brand logo pulse on hover --- */
.brand:hover .logo { transform: scale(1.08) rotate(-3deg); }

/* ===== BOARD PAGE ===== */
.board-wrapper { padding: 4px 2px 16px; }
.col {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 4px 18px rgba(47,53,102,.07) !important;
  transition: box-shadow .2s !important;
}
.col:hover { box-shadow: 0 8px 28px rgba(47,53,102,.12) !important; }
.col.drop-hl { background: var(--soft) !important; box-shadow: 0 0 0 2px var(--brand2) inset !important; }
.col-h {
  border-radius: 12px 12px 0 0;
  padding: 12px 14px 10px !important;
  margin-bottom: 12px !important;
  background: var(--soft);
}
/* Status-color top bar on each column */
.col[data-st="Not started"] .col-h   { border-top: 4px solid var(--not); background: var(--not-bg); }
.col[data-st="In Progress"] .col-h   { border-top: 4px solid var(--prog); background: var(--prog-bg); }
.col[data-st="Need to Upload"] .col-h{ border-top: 4px solid var(--up); background: var(--up-bg); }
.col[data-st="Review"] .col-h        { border-top: 4px solid var(--rev); background: var(--rev-bg); }
.col[data-st="Done"] .col-h          { border-top: 4px solid var(--done); background: var(--done-bg); }
.col[data-st="Completed"] .col-h     { border-top: 4px solid var(--done); background: var(--done-bg); }
/* Content board statuses */
.col[data-st="Not yet Started"] .col-h  { border-top: 4px solid var(--not); background: var(--not-bg); }
.col[data-st="Working on it"] .col-h    { border-top: 4px solid var(--up); background: var(--up-bg); }
.col[data-st="Scheduled"] .col-h        { border-top: 4px solid var(--sched); background: var(--sched-bg); }
.col[data-st="Redo"] .col-h             { border-top: 4px solid var(--redo); background: var(--redo-bg); }
.col[data-st="Published"] .col-h        { border-top: 4px solid var(--done); background: var(--done-bg); }
.col[data-st="Cancelled"] .col-h        { border-top: 4px solid var(--canc); background: var(--canc-bg); }

.kcard {
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  padding: 12px !important;
  position: relative;
  overflow: hidden;
}
.kcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--kcard-accent, var(--brand2));
  border-radius: 3px 0 0 3px;
}
.kcard[data-pr="High"]::before   { --kcard-accent: var(--hi); }
.kcard[data-pr="Medium"]::before { --kcard-accent: var(--md); }
.kcard[data-pr="Low"]::before    { --kcard-accent: var(--lo); }

/* ===== ADMIN PAGE ===== */
.cli-card {
  border-radius: 16px !important;
  padding: 18px 16px !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
  border: 1px solid var(--line) !important;
  overflow: hidden;
  position: relative;
}
.cli-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity: 0;
  transition: opacity .2s;
}
.cli-card:hover::after { opacity: 1; }
.cli-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(47,53,102,.14) !important; border-color: var(--brand2) !important; }
.cli-logo { box-shadow: 0 4px 12px rgba(0,0,0,.18) !important; }

.adm-panel {
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(47,53,102,.07) !important;
  transition: box-shadow .2s !important;
  border: 1px solid var(--line) !important;
}
.adm-panel:hover { box-shadow: 0 6px 24px rgba(47,53,102,.11) !important; }
.adm-panel h3 { border-bottom: 2px solid var(--line); padding-bottom: 12px !important; margin-bottom: 14px; }

.adm-item {
  border-radius: 10px !important;
  transition: transform .14s, box-shadow .14s !important;
  border-left: 3px solid transparent;
}
.adm-item:hover {
  transform: translateX(4px) !important;
  border-left-color: var(--accent) !important;
  box-shadow: -3px 0 0 var(--accent) !important;
}

/* Staff avatar colors */
.adm-av {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Cloud sync panel */
.panel.cloud-panel {
  border-left: 4px solid var(--brand2);
  background: linear-gradient(135deg, var(--soft) 0%, var(--card) 100%);
}

/* ===== GLOBAL TABLE POLISH ===== */
tbody tr:nth-child(even) td { background: rgba(0,0,0,.015); }
body.dark tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }
th { letter-spacing: .7px; }
tbody tr { transition: background .1s; }

/* ===== PILL & BADGE DEPTH ===== */
.pill {
  box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
  letter-spacing: .2px !important;
}
.pr { box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; }

/* ===== MINI ITEMS ===== */
.mini-i {
  transition: transform .14s, box-shadow .14s !important;
  border-left: 3px solid transparent !important;
}
.mini-i:hover {
  transform: translateX(4px) !important;
  border-left-color: var(--accent) !important;
  background: var(--soft) !important;
}

/* ===== CONTENT CALENDAR IMPROVED ===== */
.idea { transition: transform .15s, box-shadow .15s; border-left: 3px solid var(--accent); }
.idea:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(47,53,102,.1); }

/* ===== PENDING WORKS TABLE ===== */
.t-wrap { border-radius: 8px !important; }
.t-btn { border-radius: 6px !important; transition: all .15s !important; }
.t-btn:hover { background: var(--brand2) !important; color: #fff !important; }
.t-btn.active { background: var(--not-bg) !important; color: var(--not) !important; }
.t-btn.active:hover { background: var(--not) !important; color: #fff !important; }

/* ===== PAY CARD ENHANCED ===== */
.pay-card:hover { transform: translateY(-4px) !important; }
.pay-card .pc-av {
  box-shadow: 0 4px 14px rgba(47,53,102,.25) !important;
  font-size: 16px !important;
}

/* ===== RESPONSIVE SMOOTHING ===== */
@media(max-width:860px){
  .col { border-radius: 10px !important; }
  .kcard { border-radius: 10px !important; }
  .adm-panel { border-radius: 12px !important; }
}

/* ===================================================================
   NEW STATUS BADGES + COLUMN HEADERS (board flow update)
   =================================================================== */
.s-InReview{background:var(--rev-bg);color:var(--rev)}
.s-Approved{background:var(--done-bg);color:var(--done)}
.col[data-st="In Review"] .col-h { border-top: 4px solid var(--rev); background: var(--rev-bg); }
.col[data-st="Approved"] .col-h  { border-top: 4px solid var(--done); background: var(--done-bg); }

/* ===================================================================
   BOARD: fit all columns to the width — no horizontal scrollbar
   =================================================================== */
.board-wrapper{ overflow-x: hidden !important; padding-bottom: 4px !important; }
.board{ min-width: 0 !important; }
.col{ min-width: 0; }
.col-h .cl{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard{ min-width: 0; }
.kcard .kh, .kcard .kt-sub, .kcard .kid, .kcard .kd{ overflow-wrap: anywhere; }

/* ================================================================
   RESPONSIVE OVERHAUL — 34" Desktop · Laptop · Tablet · Mobile
   ================================================================ */

/* ── Ultra-wide / 34" Desktop (≥ 1800px) ── */
@media(min-width:1800px){
  .sidebar{ width:270px; }
  .brand{ padding:20px 18px 14px; }
  .content{ max-width:1900px; padding:30px 44px 80px; }
  .topbar{ padding:14px 30px; }
  .kpis{ grid-template-columns:repeat(4,1fr); }
  .row2{ grid-template-columns:1fr 1fr; }
  .adm-cols{ grid-template-columns:repeat(4,minmax(260px,1fr)); }
  .pay-grid{ grid-template-columns:repeat(4,minmax(260px,1fr)); }
  .cli-grid{ grid-template-columns:repeat(5,minmax(200px,1fr)); }
  .stat-grid{ grid-template-columns:repeat(5,minmax(180px,1fr)); }
  .idea-grid{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
}

/* ── Large Laptop (1400px – 1799px) ── */
@media(max-width:1799px) and (min-width:1401px){
  .content{ max-width:1500px; }
  .kpis{ grid-template-columns:repeat(4,1fr); }
  .adm-cols{ grid-template-columns:repeat(3,minmax(260px,1fr)); }
}

/* ── Small Laptop / Tablet Landscape (1024px – 1280px) ── */
@media(max-width:1280px) and (min-width:861px){
  .content{ padding:16px 16px 60px; }
  .topbar{ padding:12px 16px; gap:10px; }
  .search{ max-width:230px; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .adm-cols{ grid-template-columns:repeat(2,minmax(260px,1fr)); }
}

/* ── Tablet / Mobile breakpoint (≤ 860px) — sidebar becomes a drawer ── */
@media(max-width:860px){
  /* ── Sidebar: proper scroll — footer always pinned ── */
  .sidebar{
    height:100svh !important;        /* respects iOS browser chrome */
    height:100vh !important;         /* fallback for older browsers */
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  .side-nav{
    flex:1 1 auto !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    min-height:0 !important;
    padding-bottom:6px !important;
  }
  .side-foot{
    flex-shrink:0 !important;
  }

  /* ── Topbar ── */
  .ws-chip{ display:none !important; }
  .topbar{ gap:8px; padding:10px 14px; }

  /* ── Content ── */
  .content{ padding:14px 14px 60px; }
  .kpis{ grid-template-columns:1fr 1fr; gap:10px; }
  .row2{ grid-template-columns:1fr; gap:12px; }
  .adm-cols{ grid-template-columns:1fr 1fr; }
  .pay-grid{ grid-template-columns:1fr 1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
}

/* ── Mobile (≤ 600px) — single-row topbar, compact layout ── */
@media(max-width:600px){
  /* TOPBAR: force single row — no wrapping */
  .topbar{
    flex-wrap:nowrap !important;
    padding:8px 12px !important;
    gap:6px !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  .topbar h1{
    font-size:14px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100px !important;
    flex-shrink:1 !important;
  }
  .topbar .spacer{ flex:1 !important; min-width:0 !important; }

  /* Hide non-essential topbar items */
  .sync-dot{ display:none !important; }
  #admin-staff-clock{ display:none !important; }
  #searchWrap{ display:none !important; }
  .qa-wrap{ display:none !important; }
  #clientTaskBtn{ display:none !important; }
  #addBtn{
    flex-shrink:0 !important;
    padding:7px 11px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }

  /* Clock widget: compact but readable */
  #clock-widget{ flex-shrink:0; }
  .clk-since,
  .clk-total-done,
  .clk-offline-msg,
  .clk-break-tag{ display:none !important; }
  .clk-wrap{
    padding:5px 8px !important;
    gap:5px !important;
    border-radius:10px !important;
  }
  .clk-live{ font-size:12px !important; }
  .clk-status-dot{ width:7px !important; height:7px !important; }
  .clk-btn-in,
  .clk-btn-break,
  .clk-btn-out{
    padding:5px 9px !important;
    font-size:10px !important;
    border-radius:7px !important;
  }

  /* Content area */
  .content{ padding:12px 10px 70px; }
  .kpis{ grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
  .kpi{ padding:14px; }
  .kpi .kv{ font-size:22px; }
  .panel{ padding:12px; }
  .row2{ grid-template-columns:1fr; gap:10px; }
  .adm-cols{ grid-template-columns:1fr; }
  .pay-grid{ grid-template-columns:1fr; }
  .cli-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .idea-grid{ grid-template-columns:1fr 1fr; }

  /* Sidebar items */
  .nav-i{ padding:10px 12px; font-size:13px; }
  .brand{ padding:14px 14px 10px; }
  .side-foot{ padding:10px 14px !important; }

  /* Modals */
  .overlay{ padding:10px 8px; align-items:flex-start; }
  .modal{ border-radius:12px; }
  .mfoot{ flex-wrap:wrap; gap:6px; padding:12px 14px; }
}

/* ── Small Mobile (≤ 420px) ── */
@media(max-width:420px){
  .topbar h1{ font-size:13px !important; max-width:80px !important; }
  #addBtn{ padding:6px 8px !important; font-size:10px !important; }
  .clk-live{ font-size:11px !important; }
  .clk-btn-in,
  .clk-btn-break,
  .clk-btn-out{ padding:4px 7px !important; font-size:9px !important; }
  .kpi .kv{ font-size:20px; }
  .kpi .kt{ font-size:10px; }
  .kpi{ padding:12px; }
  .nav-i{ font-size:12.5px; padding:9px 10px; }
  .logo{ width:36px !important; height:36px !important; font-size:12px !important; }
  .bname b{ font-size:13px; }
  .bname small{ font-size:9px; }
  .overlay{ padding:6px; }
  .mbody{ gap:10px; padding:14px; }
  .mfoot{ padding:10px 14px; }
  .btn-sm{ padding:6px 9px; font-size:11px; }
  .kpis{ gap:6px; }
  .bar-row .bn{ width:90px; font-size:11px; }
}

/* ── Very Small Mobile (≤ 360px) ── */
@media(max-width:360px){
  .topbar h1{ display:none !important; }
  .clk-status-dot{ display:none !important; }
  .kpis{ grid-template-columns:1fr; }
  .kpi .kv{ font-size:24px; }
  .nav-i{ font-size:12px; padding:8px 10px; }
  .brand{ padding:12px !important; }
  .logo{ width:32px !important; height:32px !important; }
  .bname small{ display:none; }
  .cli-grid{ grid-template-columns:1fr; }
  .idea-grid{ grid-template-columns:1fr; }
}
/* ── End Responsive Overhaul ── */

/* ================================================================
   BOARD — touch-friendly responsive kanban (phone / iPad / tablet)
   Desktop (> 1024px) keeps the fit-to-width grid. On smaller / touch
   screens the columns become a smooth horizontal swipe with snap, each
   column a comfortable width instead of being squished or clipped.
   Applies to both the task Board and the client Content board.
   ================================================================ */
@media(max-width:1024px){
  .board-wrapper{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scroll-padding:0 10px;
    padding-bottom:10px !important;
  }
  .board{
    display:flex !important;          /* override the desktop grid */
    min-width:0 !important;
    gap:12px !important;
  }
  .board > .col{
    flex:0 0 72%;                     /* ~1.4 columns visible — clearly swipeable */
    min-width:240px;
    max-width:360px;
    scroll-snap-align:start;
  }
}
@media(max-width:600px){
  .board > .col{
    flex:0 0 86%;                     /* about one column per screen, peek of the next */
    min-width:0;
    max-width:none;
  }
  /* Bigger, easier-to-tap cards on phones */
  .kcard{ padding:14px !important; }
  .kcard .kh{ font-size:13px !important; line-height:1.45 !important; }
  .kcard .kf, .kcard .kp{ font-size:11px !important; }
  .col-h .cl{ font-size:12px !important; }
}

/* ================================================================
   BBMM Hub — Glassmorphism Design System
   Works in both Dark & Light mode
   ================================================================ */

/* ── Animated water blobs (background ambience) ── */
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-60px,50px) scale(1.12)}66%{transform:translate(50px,-60px) scale(0.88)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,-40px) scale(1.18)}66%{transform:translate(-50px,70px) scale(0.9)}}
@keyframes blobC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,40px) scale(1.08)}}
@keyframes waterFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shimmerSlide{0%{transform:translateX(-100%) skewX(-15deg)}100%{transform:translateX(350%) skewX(-15deg)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}50%{box-shadow:0 0 0 6px transparent;opacity:.7}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.main::before,.main::after{content:'';position:fixed;border-radius:50%;pointer-events:none;z-index:0}
.main::before{width:520px;height:520px;background:radial-gradient(circle,rgba(47,53,102,.18) 0%,transparent 70%);top:-180px;right:-80px;animation:blobA 22s ease-in-out infinite}
.main::after{width:420px;height:420px;background:radial-gradient(circle,rgba(232,176,75,.1) 0%,transparent 70%);bottom:-100px;left:25%;animation:blobB 28s ease-in-out infinite}
/* third blob */
.content::before{content:'';position:fixed;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(75,82,153,.12) 0%,transparent 70%);top:40%;right:10%;animation:blobC 18s ease-in-out infinite;pointer-events:none;z-index:0}
.content>*{position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════
   SOCIAL MEDIA FLOATING TOPBAR — visible to ALL members
   ══════════════════════════════════════════════════════════ */

.topbar{
  position:sticky!important;top:0!important;z-index:200!important;
  background:linear-gradient(135deg,
    rgba(12,8,40,.96) 0%,
    rgba(25,15,65,.93) 35%,
    rgba(18,12,55,.94) 65%,
    rgba(10,18,50,.96) 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 4px 32px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.07) inset!important;
}
.topbar>*:not(.sm-scene){position:relative!important;z-index:2!important}

/* Social media floating icons scene */
.sm-scene{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}

@keyframes smFloat{
  0%  {transform:translateY(110%) scale(.7) rotate(-8deg);opacity:0}
  8%  {opacity:.3}
  92% {opacity:.22}
  100%{transform:translateY(-120%) scale(.95) rotate(8deg);opacity:0}
}

.sm-icon{
  position:absolute;bottom:0;left:var(--l);
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  animation:smFloat var(--t,10s) ease-in-out infinite;
  animation-delay:var(--d,0s);
}
.sm-icon svg{width:15px;height:15px;display:block;flex-shrink:0}
.sm-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.sm-fb{background:#1877f2}
.sm-yt{background:#ff0000}
.sm-li{background:#0077b5}
.sm-wa{background:#25d366}
.sm-tt{background:linear-gradient(135deg,#010101 50%,#69c9d0 50%)}
.sm-pi{background:#e60023}
.sm-tw{background:#1a1a1a}

body:not(.dark) .topbar{
  background:linear-gradient(135deg,
    rgba(12,8,40,.97) 0%,
    rgba(25,15,65,.94) 35%,
    rgba(18,12,55,.95) 65%,
    rgba(10,18,50,.97) 100%) !important;
}
/* Ensure clock text is ALWAYS visible regardless of mode or override */
#clock-widget .clk-live,
#clock-widget .clk-since,
#clock-widget .clk-break-tag,
#clock-widget .clk-total-done,
#clock-widget .clk-offline-tag,
#clock-widget .clk-offline-msg,
#clock-widget .clk-btn-in,
#clock-widget .clk-btn-break,
#clock-widget .clk-btn-out{
  color:#fff!important;
}
#clock-widget .clk-live{
  font-size:15px!important;font-weight:800!important;
  text-shadow:0 0 16px rgba(0,220,255,.8),0 1px 4px rgba(0,0,0,.95)!important;
}
#clock-widget .clk-since{
  color:rgba(255,255,255,.82)!important;
  text-shadow:0 1px 3px rgba(0,0,0,.9)!important;
}
/* Clock wrap always has a dark glass base so it's readable on any bg */
#clock-widget .clk-wrap{
  box-shadow:0 0 0 1px rgba(255,255,255,.15),0 4px 20px rgba(0,0,0,.4)!important;
}
/* Admin panel text always white */
.asp-trigger,.asp-name,.asp-time,.asp-label{color:#fff!important}
.asp-trigger b{color:#fff!important}

/* ── Glass panels & KPI cards ── */
.panel{
  background:rgba(255,255,255,.04)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.07) inset!important;
}
.kpi,.kpi.compact{
  background:linear-gradient(135deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.04) 100%)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.1) inset!important;
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s!important;
}
.kpi:hover,.kpi.compact:hover{
  transform:translateY(-2px) scale(1.01)!important;
  box-shadow:0 16px 48px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.14) inset!important;
}
/* ── Glass tables ── */
.table-wrapper,.att-wrap{
  background:rgba(255,255,255,.025)!important;
  backdrop-filter:blur(8px)!important;
  border-radius:14px!important;border:1px solid rgba(255,255,255,.07)!important;
}
table thead tr{background:rgba(255,255,255,.055)!important;backdrop-filter:blur(6px)!important}
/* ── Glass modals ── */
.modal{
  background:rgba(12,12,40,.88)!important;
  backdrop-filter:blur(32px) saturate(160%)!important;-webkit-backdrop-filter:blur(32px) saturate(160%)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 32px 80px rgba(0,0,0,.5)!important;
}
/* ── Sidebar glass ── */
.sidebar{
  backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
}
/* ── Login card glass ──
   The card floats on the purple --brand backdrop in BOTH themes, but its text
   inherited --ink / --muted, which are near-black in light mode. The heading
   and description were therefore dark-on-purple and effectively invisible
   (measured 1.7:1 and 2.6:1). Pinned to white here for 8.9:1 / 6.6:1. */
.login-card h2{color:#fff!important;}
.login-card p{color:rgba(255,255,255,.88)!important;}
.login-card{
  background:rgba(255,255,255,.08)!important;
  backdrop-filter:blur(40px) saturate(180%)!important;-webkit-backdrop-filter:blur(40px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 32px 80px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.15) inset!important;
}
/* ── Buttons glass polish ── */
.btn{backdrop-filter:blur(4px);transition:all .18s cubic-bezier(.4,0,.2,1)!important}
.btn:hover{transform:translateY(-1px)!important}
.btn:active{transform:translateY(0) scale(.97)!important}

/* ── Light mode overrides ── */
body:not(.dark) .panel,body:not(.dark) .kpi,body:not(.dark) .kpi.compact{
  background:rgba(255,255,255,.65)!important;
  border:1px solid rgba(0,0,0,.07)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.08)!important;
}
body:not(.dark) .topbar{
  background:rgba(255,255,255,.82)!important;
  border-bottom:1px solid rgba(0,0,0,.07)!important;
  box-shadow:0 4px 24px rgba(0,0,0,.1)!important;
}
body:not(.dark) .modal{background:rgba(255,255,255,.9)!important}

/* ================================================================
   CLOCK IN / OUT WIDGET — Glass Water Design
   ================================================================ */

.clk-wrap{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:16px;font-size:12px;
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  animation:fadeIn .3s ease;
}
/* shimmer sweep */
.clk-wrap::after{
  content:'';position:absolute;top:0;left:0;width:35%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  animation:shimmerSlide 3.5s ease-in-out infinite;pointer-events:none;
}

/* ── Clocked IN — cyan/teal water ── */
.clk-in{
  background:linear-gradient(-45deg,rgba(0,201,167,.55),rgba(0,184,212,.5),rgba(34,211,238,.52),rgba(6,182,212,.55));
  background-size:400% 400%;animation:waterFlow 5s ease infinite,fadeIn .3s ease;
  border:1px solid rgba(34,211,238,.4);
  box-shadow:0 0 24px rgba(34,211,238,.28),0 4px 20px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.22) inset;
}
/* ── On BREAK — amber/golden water ── */
.clk-break{
  background:linear-gradient(-45deg,rgba(251,146,60,.55),rgba(251,191,36,.5),rgba(245,158,11,.52),rgba(234,179,8,.55));
  background-size:400% 400%;animation:waterFlow 5s ease infinite,fadeIn .3s ease;
  border:1px solid rgba(251,191,36,.4);
  box-shadow:0 0 24px rgba(251,191,36,.28),0 4px 20px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.22) inset;
}
/* ── Clocked OUT / ready — indigo water ── */
.clk-out{
  background:linear-gradient(-45deg,rgba(79,70,229,.5),rgba(124,58,237,.48),rgba(99,102,241,.5),rgba(67,56,202,.52));
  background-size:400% 400%;animation:waterFlow 5s ease infinite,fadeIn .3s ease;
  border:1px solid rgba(99,102,241,.35);
  box-shadow:0 0 18px rgba(99,102,241,.22),0 4px 20px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.18) inset;
}
/* ── OFFLINE — red water ── */
.clk-offline{
  background:linear-gradient(-45deg,rgba(239,68,68,.5),rgba(220,38,38,.45),rgba(248,113,113,.5),rgba(185,28,28,.5));
  background-size:400% 400%;animation:waterFlow 5s ease infinite;
  border:1px solid rgba(239,68,68,.35);
  box-shadow:0 0 18px rgba(239,68,68,.2),0 4px 20px rgba(0,0,0,.18);
}

/* ── Status dot ── */
.clk-status-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 6px currentColor;
}
.clk-dot-in{background:#fff;color:rgba(255,255,255,.6);animation:pulseDot 2s ease-in-out infinite}
.clk-dot-break{background:rgba(255,255,255,.8);color:rgba(255,255,255,.4)}
.clk-dot-out{background:rgba(255,255,255,.55);color:rgba(255,255,255,.2)}
.clk-dot-offline{background:rgba(255,255,255,.7);color:rgba(255,255,255,.3)}

/* ── Time display ── */
.clk-time-wrap{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;margin-right:2px}
.clk-live{
  font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.05em;
  color:#fff;text-shadow:0 0 14px rgba(255,255,255,.55),0 1px 3px rgba(0,0,0,.3);
}
.clk-paused{color:rgba(255,255,255,.8);text-shadow:0 0 8px rgba(255,255,255,.3)}
.clk-since{font-size:9px;color:rgba(255,255,255,.72);font-weight:500;letter-spacing:.04em}
.clk-break-tag{
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#fff;background:rgba(255,255,255,.22);padding:2px 7px;border-radius:8px;
  backdrop-filter:blur(4px);margin-bottom:2px;
}
.clk-total-done{
  font-size:12px;font-weight:700;color:rgba(255,255,255,.88);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.clk-offline-tag{font-size:11px;font-weight:800;color:#fff;letter-spacing:.02em}
.clk-offline-msg{font-size:10px;color:rgba(255,255,255,.7)}

/* ── Buttons ── */
.clk-btn-in,.clk-btn-break,.clk-btn-out{
  border:none;font-size:11px;font-weight:700;padding:6px 13px;
  border-radius:9px;cursor:pointer;letter-spacing:.02em;
  backdrop-filter:blur(8px);transition:all .18s ease;white-space:nowrap;
}
.clk-btn-in{background:rgba(255,255,255,.28);color:#fff;border:1px solid rgba(255,255,255,.38)}
.clk-btn-in:hover{background:rgba(255,255,255,.44);transform:scale(1.04)}
.clk-btn-break{background:rgba(255,255,255,.15);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.25)}
.clk-btn-break:hover{background:rgba(255,255,255,.28)}
.clk-btn-out{background:rgba(239,68,68,.32);color:#fff;border:1px solid rgba(239,68,68,.5)}
.clk-btn-out:hover{background:rgba(239,68,68,.52);transform:scale(1.04)}

@media(max-width:700px){
  .clk-since,.clk-total-done,.clk-offline-msg{display:none}
  .clk-wrap{padding:5px 8px;gap:5px}
  .clk-live{font-size:13px}
}

/* ── Admin Staff Clock Panel ── */
.asp-wrap{
  position:relative;cursor:pointer;
  backdrop-filter:blur(12px);border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.12);
  padding:5px 12px;transition:all .2s ease;
  user-select:none;
}
.asp-wrap:hover{background:rgba(255,255,255,.2)}
.asp-trigger{
  font-size:11px;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.asp-caret{font-size:9px;opacity:.7;transition:transform .2s}
.asp-expanded .asp-caret{transform:rotate(180deg)}
.asp-panel{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  min-width:200px;background:rgba(0,20,60,.92);
  backdrop-filter:blur(20px);border-radius:12px;
  border:1px solid rgba(0,200,255,.25);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  padding:8px;z-index:300;
  animation:fadeIn .2s ease;
}
.asp-expanded .asp-panel{display:block}
.asp-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:8px;
  transition:background .15s;font-size:11px;
}
.asp-row:hover{background:rgba(255,255,255,.08)}
.asp-dot{font-size:10px}
.asp-name{font-weight:700;color:#fff;flex:1}
.asp-time{font-variant-numeric:tabular-nums;font-weight:600;color:rgba(255,255,255,.8);font-size:10px}
.asp-label{font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;text-transform:uppercase;letter-spacing:.06em}
.asp-in .asp-label{background:rgba(0,200,150,.2);color:#4ade80}
.asp-break .asp-label{background:rgba(251,191,36,.2);color:#fbbf24}
.asp-out .asp-label{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
@media(max-width:700px){#admin-staff-clock{display:none}}

/* ================================================================
   LIGHT-MODE CONTRAST FIXES
   Scoped to body:not(.dark) so DARK mode is never affected.
   ================================================================ */

body:not(.dark) .clk-in{
  background:linear-gradient(-45deg,#06b6d4,#0891b2,#22d3ee,#0e7490)!important;
  background-size:400% 400%!important;
  border-color:rgba(255,255,255,.35)!important;
}
body:not(.dark) .clk-break{
  background:linear-gradient(-45deg,#d97706,#b45309,#f59e0b,#92400e)!important;
  background-size:400% 400%!important;
  border-color:rgba(255,255,255,.35)!important;
}
body:not(.dark) .clk-out{
  background:linear-gradient(-45deg,#4f46e5,#4338ca,#6366f1,#3730a3)!important;
  background-size:400% 400%!important;
  border-color:rgba(255,255,255,.32)!important;
}
body:not(.dark) .clk-offline{
  background:linear-gradient(-45deg,#dc2626,#b91c1c,#ef4444,#991b1b)!important;
  background-size:400% 400%!important;
  border-color:rgba(255,255,255,.3)!important;
}
body:not(.dark) #clock-widget .clk-wrap{
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.18)!important;
}

body:not(.dark) .asp-wrap{
  background:rgba(20,16,60,.92)!important;
  border-color:rgba(255,255,255,.18)!important;
}
body:not(.dark) .asp-wrap:hover{background:rgba(28,22,78,.96)!important}

body:not(.dark) table thead tr{background:rgba(47,53,102,.07)!important}
body:not(.dark) .table-wrapper,
body:not(.dark) .att-wrap{
  background:rgba(255,255,255,.55)!important;
  border:1px solid rgba(0,0,0,.06)!important;
}

/* ================================================================
   DARK TOP BAR (both themes) + light text for its contents
   ================================================================ */
.topbar,
body:not(.dark) .topbar{
  background:linear-gradient(120deg,rgba(8,10,30,.97) 0%,rgba(22,16,58,.95) 50%,rgba(8,14,40,.97) 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 6px 28px rgba(0,0,0,.38)!important;
}
.topbar h1{ color:#fff!important; }
.topbar .ws-chip{ background:rgba(255,255,255,.12)!important; color:#fff!important; border-color:rgba(255,255,255,.18)!important; }
.topbar .sync-dot{ background:rgba(255,255,255,.1)!important; color:#e8ecff!important; border-color:rgba(255,255,255,.18)!important; }
.topbar .search{ background:rgba(255,255,255,.12)!important; border-color:rgba(255,255,255,.2)!important; }
.topbar .search input{ color:#fff!important; }
.topbar .search input::placeholder{ color:rgba(255,255,255,.6)!important; }
.topbar .hamburger{ color:#fff!important; }
.topbar .btn-line{ background:rgba(255,255,255,.12)!important; color:#fff!important; border-color:rgba(255,255,255,.22)!important; }
.topbar .btn-line:hover{ background:rgba(255,255,255,.2)!important; }

/* ================================================================
   FULL-PAGE WATER / GLASS BACKGROUND with drifting app logos
   ================================================================ */
body{ background:#e7f1f9!important; }
body.dark{ background:#0E0B0E!important; }
.app{ background:transparent!important; }
.content{ background:transparent!important; }

#water-bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  perspective:800px;
  background:
    radial-gradient(120% 80% at 18% 8%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(120% 90% at 82% 26%, rgba(129,140,248,.18), transparent 55%),
    linear-gradient(180deg,#eaf4fb 0%,#d8ebf3 45%,#cfe6ef 100%);
}
body.dark #water-bg{
  background:
    radial-gradient(120% 80% at 18% 8%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(120% 90% at 82% 26%, rgba(99,102,241,.13), transparent 55%),
    linear-gradient(180deg,#0b2238 0%,#0a2c3e 42%,#071d33 100%);
}
.wb-caustic{
  position:absolute; inset:-25%;
  background:
    radial-gradient(38% 28% at 30% 40%, rgba(56,189,248,.22), transparent 70%),
    radial-gradient(34% 24% at 70% 58%, rgba(45,212,191,.20), transparent 70%),
    radial-gradient(30% 30% at 50% 82%, rgba(99,102,241,.18), transparent 70%);
  filter:blur(24px);
  animation:wbFlow 20s ease-in-out infinite alternate;
}
body.dark .wb-caustic{
  background:
    radial-gradient(38% 28% at 30% 40%, rgba(56,189,248,.18), transparent 70%),
    radial-gradient(34% 24% at 70% 58%, rgba(45,212,191,.15), transparent 70%),
    radial-gradient(30% 30% at 50% 82%, rgba(99,102,241,.14), transparent 70%);
}
.wb-tint{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 34%);
}
@keyframes wbFlow{
  0%  { transform:translate3d(-3%,-2%,0) scale(1.05); }
  100%{ transform:translate3d(4%,3%,0) scale(1.16); }
}
.wb-icon{
  position:absolute; bottom:-12%;
  width:var(--size,28px); height:var(--size,28px); opacity:0;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.4)) blur(var(--blur,0px));
  animation:wbFloat var(--dur,18s) linear var(--delay,0s) infinite;
  will-change:transform,opacity;
}
@keyframes wbFloat{
  0%  { transform:translateY(0) translateX(0) rotateY(0deg) rotate(-8deg) scale(.85); opacity:0; }
  12% { opacity:var(--op,.4); }
  50% { transform:translateY(-55vh) translateX(var(--drift,20px)) rotateY(180deg) rotate(7deg) scale(1.06); opacity:var(--op,.4); }
  88% { opacity:var(--op,.4); }
  100%{ transform:translateY(-112vh) translateX(calc(var(--drift,20px) * -0.6)) rotateY(360deg) rotate(-5deg) scale(.85); opacity:0; }
}
@media(prefers-reduced-motion:reduce){
  .wb-icon,.wb-caustic{ animation:none!important; }
  .wb-icon{ opacity:var(--op,.35); }
}
/* ================================================================ */

/* ── Reduce heavy animations on mobile to save battery & GPU ── */
@media(max-width:700px){
  .main::before,.main::after,.content::before{ animation:none!important; opacity:.5; }
  .clk-wrap::after{ animation:none!important; }
  .wb-caustic{ animation:none!important; }
  .wb-icon{ animation-duration:30s!important; }
  .sm-icon{ animation-duration:16s!important; }
}

/* ===================================================================
   CALENDAR COLOR REFRESH v4 — vivid chips, branded weekday pills
   =================================================================== */
/* Branded weekday header pills (month, week & year grids) */
.dow{color:#fff !important;background:linear-gradient(135deg,var(--brand),var(--brand2));border-radius:9px;padding:9px 0;box-shadow:0 2px 6px rgba(47,53,102,.16);}
body.dark .dow{box-shadow:0 2px 8px rgba(0,0,0,.4);}

/* Vivid, glossy event chips */
.ev{border-left-width:5px !important;border-radius:10px !important;position:relative;overflow:hidden;box-shadow:0 2px 7px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.4) !important;}
.ev::after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.30),rgba(255,255,255,0) 55%);pointer-events:none;}
.ev:hover{box-shadow:0 8px 20px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.5) !important;transform:translateY(-2px) scale(1.02) !important;filter:saturate(1.12);}
.ev .ev-top{position:relative;z-index:1;}
.ev-title{font-weight:700;position:relative;z-index:1;}
.ev-bot{position:relative;z-index:1;}

/* Warmer weekend tint + stronger "today" cell */
.day-weekend:not(.empty){background:rgba(232,176,75,.10) !important;}
body.dark .day-weekend:not(.empty){background:rgba(232,176,75,.07) !important;}
.day.today{box-shadow:0 6px 20px rgba(75,82,153,.22), inset 0 0 0 1.5px var(--brand2) !important;}

/* Add-day (+) button pops with brand gradient */
.day .dadd{background:linear-gradient(135deg,var(--brand),var(--brand2)) !important;color:#fff !important;}
.day:hover .dadd{opacity:.92;}

/* ===================================================================
   EVENT CHIP READABILITY v5 — solid vivid fills, always-white text
   (fixes low-contrast chips in dark mode; consistent in both themes)
   =================================================================== */
.ev{border:none !important;color:#fff !important;padding:8px 10px !important;
    box-shadow:0 2px 9px rgba(0,0,0,.22) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.ev .ev-top b{color:#fff !important;opacity:.96;}
.ev .ev-title{color:#fff !important;text-shadow:0 1px 2px rgba(0,0,0,.38);opacity:1;}
.ev .ev-bot,.ev .ev-bot span{color:rgba(255,255,255,.9) !important;}
.ev.dark-evt .ev-title{color:#fff !important;}
.ev:hover{box-shadow:0 8px 20px rgba(0,0,0,.30) !important;transform:translateY(-2px) scale(1.02) !important;filter:saturate(1.06) brightness(1.05);}

.ev-not{background:linear-gradient(135deg,#c0453d,#8f2a24) !important;}
.ev-prog{background:linear-gradient(135deg,#3a7bc0,#245187) !important;}
.ev-done{background:linear-gradient(135deg,#2ba15c,#1a7a41) !important;}
.ev-rev{background:linear-gradient(135deg,#8a5cc8,#6335a0) !important;}
.ev-comp{background:linear-gradient(135deg,#16a34a,#166534) !important;}
.ev-work{background:linear-gradient(135deg,#c8912f,#946200) !important;}
.ev-redo{background:linear-gradient(135deg,#cc5a86,#a3285f) !important;}
.ev-sched{background:linear-gradient(135deg,#3d6fb8,#1f4e79) !important;}
.ev-pub{background:linear-gradient(135deg,#1f8a46,#14532d) !important;}
.ev-canc{background:linear-gradient(135deg,#6b7280,#474d57) !important;}
.ev-up{background:linear-gradient(135deg,#c8802f,#945a00) !important;}

/* ===================================================================
   FLAT CALENDAR v6 — remove glass/blur/sheen, keep solid colours
   =================================================================== */
/* Solid day cells: no blur, no translucency, no glossy shading */
.day:not(.empty){
  background:var(--card) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
.day:hover:not(.empty){
  background:var(--card) !important;
  box-shadow:0 3px 10px rgba(47,53,102,.10) !important;
  transform:none !important;
  border-color:var(--brand2) !important;
}
.day.today{
  background:rgba(75,82,153,.06) !important;
  border-color:var(--brand2) !important;
  box-shadow:inset 0 0 0 1.5px var(--brand2) !important;
}
.day-weekend:not(.empty){ background:var(--soft) !important; }
body.dark .day:not(.empty){ background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.08) !important; }
body.dark .day:hover:not(.empty){ box-shadow:0 3px 10px rgba(0,0,0,.4) !important; }
body.dark .day-weekend:not(.empty){ background:rgba(255,255,255,.05) !important; }
body.dark .day.today{ background:rgba(75,82,153,.18) !important; }

/* Flat calendar container: no gradient wash / sheen overlay */
.cal-grid-wrapper{ background:none !important; }
.cal-grid-wrapper::before{ display:none !important; }
#view-cal .panel, #view-ccal .panel{
  background:var(--card) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
body.dark #view-cal .panel, body.dark #view-ccal .panel{ background:var(--card) !important; }

/* Flat chips: drop the glossy sheen overlay, keep the solid colour */
.ev::after{ display:none !important; }
.ev{ backdrop-filter:none !important;-webkit-backdrop-filter:none !important; }

/* ===================================================================
   TASK SECTION POLISH v7 — reference link field + pro touches
   =================================================================== */
/* Link field in task modal */
.link-row{display:flex;gap:8px;align-items:center;}
.link-row input{flex:1;min-width:0;}
#t-link-open{white-space:nowrap;flex:0 0 auto;}

/* Small "open link" icon shown on task cards & rows */
.tlink{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:6px;
  background:var(--soft);color:var(--brand2);font-size:11px;text-decoration:none;vertical-align:middle;
  transition:background .15s, color .15s, transform .15s;margin-left:5px;}
.tlink:hover{background:var(--brand2);color:#fff;transform:translateY(-1px);}
.kcard .tlink{background:rgba(255,255,255,.14);color:#fff;}
.kcard .tlink:hover{background:rgba(255,255,255,.28);}

/* Pro polish — task board cards */
#view-board .kcard{border-radius:13px;transition:transform .16s, box-shadow .16s, border-color .16s;}
#view-board .kcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(47,53,102,.16);}
body.dark #view-board .kcard:hover{box-shadow:0 10px 24px rgba(0,0,0,.45);}

/* Pro polish — task tables (Pending & All Tasks) */
#view-pending table thead th, #view-list table thead th{
  text-transform:uppercase;font-size:10.5px;letter-spacing:.6px;color:var(--muted);}
#view-pending table tbody tr, #view-list table tbody tr{transition:background .12s;}
#view-pending table tbody tr:hover td, #view-list table tbody tr:hover td{background:rgba(75,82,153,.06);}
body.dark #view-pending table tbody tr:hover td, body.dark #view-list table tbody tr:hover td{background:rgba(255,255,255,.04);}

/* Pro polish — task modal inputs focus ring */
#taskOverlay input:focus, #taskOverlay select:focus, #taskOverlay textarea:focus{
  outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(75,82,153,.18);}

/* ===================================================================
   LINKED POST v8 — post-number chip on tasks + picker in task modal
   =================================================================== */
.post-chip{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 8px;border-radius:20px;
  background:linear-gradient(135deg,#8a5cc8,#6335a0);color:#fff !important;font-size:10.5px;font-weight:800;
  text-decoration:none;vertical-align:middle;margin-left:5px;cursor:pointer;letter-spacing:.2px;
  box-shadow:0 1px 4px rgba(99,53,160,.4);transition:transform .15s, box-shadow .15s;}
.post-chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(99,53,160,.55);}
.kcard .post-chip{box-shadow:none;}
/* the Linked Post picker sits in the same row-style as the Reference Link */
.link-row select{flex:1;min-width:0;}
#t-post-open{white-space:nowrap;flex:0 0 auto;}

/* ===================================================================
   RECURRING TASKS v9 — done-today button, 14-day history strip, streak
   =================================================================== */
.rc-btn{border:none;cursor:pointer;font-family:inherit;font-size:11px;font-weight:800;border-radius:8px;
  padding:7px 14px;white-space:nowrap;background:var(--soft);color:var(--muted);
  border:1px solid var(--line);transition:.16s;}
.rc-btn:hover{background:var(--brand2);color:#fff;border-color:var(--brand2);}
.rc-btn.done{background:linear-gradient(135deg,#2ba15c,#1a7a41);color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(43,161,92,.35);}
.rc-btn.done:hover{filter:brightness(1.08);}

.rc-strip{display:inline-flex;gap:3px;align-items:center;}
.rc-day{width:11px;height:19px;border-radius:3px;display:inline-block;background:var(--line);opacity:.55;}
.rc-day.ok{background:linear-gradient(180deg,#3ec46f,#1f8a46);opacity:1;}
.rc-day.miss{background:linear-gradient(180deg,#e06a62,#b5352c);opacity:.75;}
.rc-day.today{outline:2px solid var(--brand2);outline-offset:1px;}

.rc-streak{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 9px;
  border-radius:20px;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#e8a13c,#c8770f);
  box-shadow:0 2px 6px rgba(200,119,15,.35);}
.rc-streak.zero{background:var(--soft);color:var(--muted);box-shadow:none;}
#view-recurring table td{vertical-align:middle;}

/* ===================================================================
   BBMM HUB top button v10 — agency workspace shortcut in the topbar
   =================================================================== */
.hub-btn{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.4px;padding:8px 15px;border-radius:10px;
  color:#fff;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 2px 8px rgba(47,53,102,.3);transition:transform .15s, box-shadow .15s, filter .15s;}
.hub-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(47,53,102,.42);filter:brightness(1.08);}
.hub-btn:active{transform:translateY(0);}
/* already in the agency workspace → show it as the current one */
.hub-btn.active{background:linear-gradient(135deg,var(--accent),#c8770f);color:#2a1e05;
  border-color:rgba(0,0,0,.12);box-shadow:0 2px 10px rgba(200,119,15,.4);}
@media(max-width:700px){ .hub-btn{padding:7px 10px;font-size:10.5px;} }

/* ===================================================================
   BBMM HUB button v11 — moved into the sidebar, above the brand
   =================================================================== */
.hub-btn-wrap{padding:12px 12px 8px;}
.sidebar .hub-btn{width:100%;justify-content:center;padding:11px 14px;font-size:12px;border-radius:11px;
  background:linear-gradient(135deg,var(--accent),#c8770f);color:#2a1e05;border:1px solid rgba(0,0,0,.14);
  box-shadow:0 3px 12px rgba(200,119,15,.35);}
.sidebar .hub-btn:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(200,119,15,.5);}
/* when already inside the agency workspace, calm it down so it reads as "current" */
.sidebar .hub-btn.active{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.sidebar .hub-btn.active:hover{background:rgba(255,255,255,.2);filter:none;}
.sidebar .brand{padding-top:4px;}

/* ===================================================================
   TASK ⇄ POST two-way link v12 — task-number chips shown on posts
   =================================================================== */
.task-chip{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 9px;border-radius:20px;
  background:linear-gradient(135deg,#3a7bc0,#245187);color:#fff !important;font-size:10.5px;font-weight:800;
  text-decoration:none;vertical-align:middle;margin-left:5px;cursor:pointer;letter-spacing:.2px;white-space:nowrap;
  box-shadow:0 1px 4px rgba(36,81,135,.42);transition:transform .15s, box-shadow .15s;}
.task-chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(36,81,135,.6);}
.task-chip.big{height:24px;font-size:11.5px;padding:0 12px;margin-left:0;}
.kcard .task-chip,.ev .task-chip{box-shadow:none;background:rgba(255,255,255,.22);}
.kcard .task-chip:hover,.ev .task-chip:hover{background:rgba(255,255,255,.34);}

/* Linked-tasks block inside the post modal */
.linked-tasks-box{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 10px;
  display:flex;flex-direction:column;gap:7px;max-height:150px;overflow:auto;}
.lt-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lt-title{font-size:12px;font-weight:600;color:var(--ink);}

/* ===================================================================
   SIDEBAR GROUPING v13 — headings + tighter rows so a longer menu
   reads cleanly without dropping any section
   =================================================================== */
.side-nav{gap:0;}
.nav-group{display:flex;flex-direction:column;gap:2px;padding-bottom:9px;margin-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.07);}
.nav-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.nav-group-h{font-size:9px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:rgba(255,255,255,.38);padding:7px 12px 4px;user-select:none;}
.side-nav .nav-i{padding:8px 12px;font-size:12.5px;}
.side-nav .nav-i .ico{opacity:.9;}
@media(max-height:760px){
  .side-nav .nav-i{padding:6.5px 12px;font-size:12px;}
  .nav-group-h{padding:5px 12px 3px;}
  .nav-group{padding-bottom:6px;margin-bottom:5px;}
}

/* ===================================================================
   MINIMAL BOARD CARDS v14 — identifiers only, roomy columns
   (full task description is in the card's tooltip)
   =================================================================== */
.kcard-min{padding:8px 10px;margin-bottom:6px;border-radius:9px;}
.kcard-min .kr{margin-bottom:4px;gap:6px;}
.kcard-min .kid{font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;}
.kcard-min .kf{margin-top:4px;font-size:9.5px;gap:8px;}
.kcard-min .kf span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* single-letter priority pill keeps the row short */
.kcard-min .pr{min-width:18px;text-align:center;padding:2px 6px;font-size:9.5px;flex:0 0 auto;}
.kcard-min .post-chip{height:18px;padding:0 7px;font-size:9.5px;margin-left:3px;}
.kcard-min .tlink{width:18px;height:18px;font-size:10px;margin-left:3px;}
/* more breathing room between board columns now that cards are short */
.board{gap:12px;}
.col{padding-bottom:6px;}

/* Linked-task chips on content calendar cards */
.ev-tasks{display:inline-flex;gap:3px;align-items:center;flex-wrap:wrap;}
.ev .ev-bot{gap:6px;flex-wrap:wrap;}

/* required-field marker */
.req{color:#e0574d;font-weight:800;margin-left:2px;}

/* ===================================================================
   BBMM HUB — THEME v15  "Indigo / Teal"
   A single professional palette for a digital-marketing agency.
   Indigo = trust & structure · Teal = creativity & growth · Slate neutrals.
   Every status colour has a LIGHT and a DARK variant so text stays
   readable in both modes (the old theme reused dark text on dark chips).
   =================================================================== */
:root{
  /* brand — BBMM burgundy + gold (matches the brand assets & website base) */
  --brand:#5C1523;
  --brand2:#8A2436;
  --accent:#C9A227;
  /* surfaces + text — warm neutrals to sit under burgundy/gold */
  --bg:#F5F1EE; --card:#FFFFFF; --ink:#211A1C; --muted:#7a6a6d;
  --line:#e9e2dd; --soft:#faf6f3;
  /* status: text / chip background */
  --not:#B91C1C;  --not-bg:#FEE2E2;      /* not started      */
  --prog:#1D4ED8; --prog-bg:#DBEAFE;     /* in progress      */
  --done:#15803D; --done-bg:#DCFCE7;     /* done             */
  --rev:#7E22CE;  --rev-bg:#F3E8FF;      /* in review        */
  --comp:#FFFFFF; --comp-bg:#166534;     /* completed        */
  --work:#B45309; --work-bg:#FEF3C7;     /* working on it    */
  --redo:#BE185D; --redo-bg:#FCE7F3;     /* redo             */
  --sched:#4338CA;--sched-bg:#E0E7FF;    /* scheduled        */
  --pub:#FFFFFF;  --pub-bg:#115E59;      /* published (teal) */
  --canc:#475569; --canc-bg:#E2E8F0;     /* cancelled        */
  --up:#B45309;   --up-bg:#FEF3C7;       /* need to upload   */
  --daily:#7E22CE;--daily-bg:#F3E8FF;    /* recurring        */
  /* priority */
  --hi:#DC2626; --md:#D97706; --lo:#64748B;
  --ip:#B45309; --arch:#7E22CE;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --shadow-l:0 10px 30px rgba(15,23,42,.12);
}
body.dark{
  --brand:#8A2436; --brand2:#A83048; --accent:#D8B23A;
  --bg:#0E0B0E; --card:#191317; --ink:#F0E9EB; --muted:#a99ea1;
  --line:#2e2529; --soft:#1f181b;
  /* light text on deep chips — this is what makes dark mode legible */
  --not:#FCA5A5;  --not-bg:#3B1519;
  --prog:#93C5FD; --prog-bg:#12233F;
  --done:#86EFAC; --done-bg:#0F2E1D;
  --rev:#D8B4FE;  --rev-bg:#2A1840;
  --comp:#FFFFFF; --comp-bg:#166534;
  --work:#FCD34D; --work-bg:#332508;
  --redo:#F9A8D4; --redo-bg:#3A1226;
  --sched:#A5B4FC;--sched-bg:#1C2048;
  --pub:#FFFFFF;  --pub-bg:#115E59;
  --canc:#CBD5E1; --canc-bg:#242B39;
  --up:#FCD34D;   --up-bg:#332508;
  --daily:#D8B4FE;--daily-bg:#2A1840;
  --hi:#F87171; --md:#FBBF24; --lo:#94A3B8;
  --ip:#FCD34D; --arch:#D8B4FE;
  --shadow:0 1px 3px rgba(0,0,0,.45); --shadow-l:0 12px 34px rgba(0,0,0,.6);
}
/* page backdrop */
body{background:var(--bg)!important;}
body.dark{background:#0E0B0E!important;}
#water-bg{background:
  radial-gradient(120% 80% at 18% 8%, rgba(138,36,54,.10), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, rgba(201,162,39,.10), transparent 55%),
  linear-gradient(180deg,#F8F4F1 0%,#F2ECE8 50%,#EDE5E0 100%)!important;}
body.dark #water-bg{background:
  radial-gradient(120% 80% at 18% 8%, rgba(168,48,72,.16), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, rgba(216,178,58,.10), transparent 55%),
  linear-gradient(180deg,#140F13 0%,#0E0B0E 100%)!important;}

/* readable event chips in the new hues */
.ev-not{background:linear-gradient(135deg,#DC2626,#991B1B)!important;}
.ev-prog{background:linear-gradient(135deg,#2563EB,#1E40AF)!important;}
.ev-done{background:linear-gradient(135deg,#16A34A,#15803D)!important;}
.ev-rev{background:linear-gradient(135deg,#9333EA,#6B21A8)!important;}
.ev-comp{background:linear-gradient(135deg,#16A34A,#14532D)!important;}
.ev-work{background:linear-gradient(135deg,#D97706,#92400E)!important;}
.ev-redo{background:linear-gradient(135deg,#DB2777,#9D174D)!important;}
.ev-sched{background:linear-gradient(135deg,#4F46E5,#3730A3)!important;}
.ev-pub{background:linear-gradient(135deg,#0F766E,#115E59)!important;}
.ev-canc{background:linear-gradient(135deg,#64748B,#475569)!important;}
.ev-up{background:linear-gradient(135deg,#D97706,#92400E)!important;}

/* linking chips match the palette: post = teal, task = indigo */
.post-chip{background:linear-gradient(135deg,#0F766E,#115E59)!important;box-shadow:0 1px 4px rgba(13,148,136,.4)!important;}
.post-chip:hover{box-shadow:0 4px 10px rgba(13,148,136,.55)!important;}
.task-chip{background:linear-gradient(135deg,#4F46E5,#3730A3)!important;box-shadow:0 1px 4px rgba(79,70,229,.42)!important;}
.task-chip:hover{box-shadow:0 4px 10px rgba(79,70,229,.6)!important;}
/* recurring tab */
.rc-btn.done{background:linear-gradient(135deg,#16A34A,#15803D)!important;box-shadow:0 2px 8px rgba(22,163,74,.35)!important;}
.rc-day.ok{background:linear-gradient(180deg,#22C55E,#16A34A)!important;}
.rc-day.miss{background:linear-gradient(180deg,#F87171,#DC2626)!important;}
.rc-streak{background:linear-gradient(135deg,#0F766E,#115E59)!important;box-shadow:0 2px 6px rgba(13,148,136,.35)!important;}
/* sidebar hub button */
.sidebar .hub-btn{background:linear-gradient(135deg,#0F766E,#115E59)!important;color:#fff!important;
  border-color:rgba(255,255,255,.16)!important;box-shadow:0 3px 12px rgba(13,148,136,.4)!important;}
.sidebar .hub-btn.active{background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:none!important;}
.logo{color:#fff!important;}

/* guarantee readable body text everywhere */
.panel,.kpi,.card,table,.table-wrapper{color:var(--ink);}
td,th{color:var(--ink);}
th{color:var(--muted);}
.hint,.empty,.muted{color:var(--muted);}
.pill,.pr,.ttype{border:1px solid rgba(0,0,0,.06);}
body.dark .pill,body.dark .pr,body.dark .ttype{border-color:rgba(255,255,255,.10);}

/* teal used as TEXT on light surfaces -> darker for contrast */
:root{ --accent-txt:#8A6A00; }
body.dark{ --accent-txt:#E6C767; }
.kpi .kd b,.see-all,a{color:var(--accent-txt);}
body.dark .logo{color:#1a1400!important;}
/* sidebar footer bits on the new indigo gradient */
#navUserInitial{background:var(--accent)!important;color:#052E2B!important;}
#buildBadge{color:rgba(255,255,255,.72)!important;background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.16)!important;}
/* Cancel-task button (admin only) */
.btn-warn{background:linear-gradient(135deg,#D97706,#B45309);color:#fff;border:none;}
.btn-warn:hover{filter:brightness(1.08);}

/* ===================================================================
   BBMM HUB — THEME v16  "Violet"  (purple-led, light + dark)
   Purple carries the brand; statuses keep distinct hues so they stay
   readable and never blend into the brand colour.
   "In Review" moved purple -> cyan so it can't be confused with brand.
   =================================================================== */
:root{
  --brand:#5C1523;        /* BBMM burgundy */
  --brand2:#8A2436;
  --accent:#C9A227;       /* BBMM gold — white text 4.7:1 */
  --accent-txt:#8A6A00;   /* gold as text on light */
  --rev:#0E7490;  --rev-bg:#CFFAFE;     /* in review -> cyan  */
  --daily:#6D28D9;--daily-bg:#F3E8FF;
  --arch:#6D28D9;
}
body.dark{
  --brand:#8A2436; --brand2:#A83048; --accent:#D8B23A;
  --accent-txt:#E6C767;
  --rev:#67E8F9;  --rev-bg:#0B2F38;
  --daily:#D8B23A;--daily-bg:#3a2f10;
  --arch:#D8B23A;
}
/* backdrop tinted violet */
#water-bg{background:
  radial-gradient(120% 80% at 18% 8%, rgba(138,36,54,.11), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, rgba(201,162,39,.10), transparent 55%),
  linear-gradient(180deg,#F8F4F1 0%,#F2ECE8 50%,#EDE5E0 100%)!important;}
body.dark #water-bg{background:
  radial-gradient(120% 80% at 18% 8%, rgba(168,48,72,.17), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, rgba(216,178,58,.10), transparent 55%),
  linear-gradient(180deg,#140F13 0%,#0E0B0E 100%)!important;}
body.dark{background:#0E0B0E!important;}

/* purple-led chips + controls */
.ev-rev{background:linear-gradient(135deg,#0891B2,#0E7490)!important;}   /* review = cyan  */
.ev-sched{background:linear-gradient(135deg,#2563EB,#1E40AF)!important;} /* scheduled = blue */
.post-chip{background:linear-gradient(135deg,var(--accent),#a07d16)!important;color:#1a1400!important;box-shadow:0 1px 4px rgba(201,162,39,.42)!important;}
.post-chip:hover{box-shadow:0 4px 10px rgba(126,34,206,.6)!important;}
.task-chip{background:linear-gradient(135deg,#2563EB,#1E40AF)!important;box-shadow:0 1px 4px rgba(37,99,235,.42)!important;}
.task-chip:hover{box-shadow:0 4px 10px rgba(37,99,235,.6)!important;}
.rc-streak{background:linear-gradient(135deg,var(--accent),#a07d16)!important;color:#1a1400!important;box-shadow:0 2px 6px rgba(201,162,39,.35)!important;}
.sidebar .hub-btn{background:linear-gradient(135deg,var(--brand2),var(--brand))!important;color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;box-shadow:0 3px 12px rgba(126,34,206,.45)!important;}
.sidebar .hub-btn.active{background:rgba(255,255,255,.15)!important;box-shadow:none!important;}
#navUserInitial{background:var(--accent)!important;color:var(--accent-fg)!important;}
body.dark #navUserInitial{color:#2A0F45!important;}
.logo{color:#fff!important;}
body.dark .logo{color:#2A0F45!important;}

/* ===================================================================
   RECURRENCE v17 — day pickers, schedule-aware history, stop control
   =================================================================== */
.day-pills{display:flex;gap:6px;flex-wrap:wrap;}
.day-pills label{position:relative;cursor:pointer;}
.day-pills input{position:absolute;opacity:0;width:0;height:0;}
.day-pills span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  background:var(--soft);border:1px solid var(--line);color:var(--muted);font-weight:800;font-size:12.5px;
  transition:.15s;user-select:none;}
.day-pills label:hover span{border-color:var(--brand2);color:var(--ink);}
.day-pills input:checked + span{background:linear-gradient(135deg,var(--brand2),var(--brand));
  color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(91,33,182,.4);}
#t-recur-box{background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:12px 14px;}

/* repeats badge */
.rc-freq{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:800;
  background:var(--daily-bg);color:var(--daily);white-space:nowrap;}
/* day not scheduled */
.rc-day.off{background:var(--line);opacity:.28;}
/* stop / resume */
.rc-stop{border:1px solid var(--line);background:var(--soft);color:var(--muted);font-family:inherit;
  font-size:10.5px;font-weight:800;border-radius:8px;padding:6px 12px;cursor:pointer;transition:.15s;white-space:nowrap;}
.rc-stop:hover{background:#DC2626;color:#fff;border-color:transparent;}
.rc-stop.on{background:linear-gradient(135deg,#16A34A,#15803D);color:#fff;border-color:transparent;}
.rc-stop.on:hover{filter:brightness(1.08);background:linear-gradient(135deg,#16A34A,#15803D);}
.rc-btn.off{background:transparent;border:1px dashed var(--line);color:var(--muted);cursor:default;}
tr.rc-stopped{opacity:.55;}
tr.rc-stopped .rc-freq{background:var(--canc-bg);color:var(--canc);}

/* ===================================================================
   BBMM HUB BUTTON v18 — unmistakably a button
   raised surface, pressable depth, icon + chevron
   =================================================================== */
.hub-btn-wrap{padding:14px 12px 10px;}
.sidebar .hub-btn{
  width:100%; display:flex; align-items:center; gap:9px;
  justify-content:flex-start; text-align:left;
  padding:13px 14px; font-size:12.5px; font-weight:800; letter-spacing:.5px;
  border-radius:12px; cursor:pointer; position:relative; overflow:hidden;
  color:#fff !important;
  background:linear-gradient(160deg,var(--brand2) 0%,var(--brand) 100%) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  /* raised: highlight on top, solid base below = reads as pressable */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 3px 0 #4C1D95,
    0 6px 16px rgba(76,29,149,.55) !important;
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.sidebar .hub-btn:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 5px 0 #4C1D95,
    0 10px 22px rgba(76,29,149,.6) !important;
}
.sidebar .hub-btn:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.28),
    0 1px 0 #4C1D95 !important;
}
/* chevron on the right so it reads "go somewhere" */
.sidebar .hub-btn::after{
  content:"›"; margin-left:auto; font-size:19px; font-weight:800;
  opacity:.85; line-height:1; transform:translateY(-1px);
}
/* current workspace → quiet "you are here" state, still clearly a control */
.sidebar .hub-btn.active{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 rgba(0,0,0,.22) !important;
  color:rgba(255,255,255,.95) !important;
}
.sidebar .hub-btn.active::after{content:"●"; font-size:11px; opacity:.75;}
.sidebar .hub-btn.active:hover{background:rgba(255,255,255,.2) !important;transform:translateY(-1px);}

/* ===================================================================
   RECURRING v19 — one card per task, tick the actual DATE you did it
   =================================================================== */
.rc-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:16px;}
.rc-head-l{font-size:14px;color:var(--ink);} .rc-head-l b{color:var(--brand2);font-size:16px;}
.rc-head-r{font-size:12px;color:var(--muted);}

.rc-sect-h{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--brand2);margin:22px 0 10px;}
.rc-sect-h.muted{color:var(--muted);}
.rc-sect-h span{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:1px 9px;font-size:11px;}

.rc-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;
  box-shadow:var(--shadow);transition:box-shadow .15s,border-color .15s;}
.rc-card:hover{box-shadow:var(--shadow-l);border-color:var(--brand2);}
.rc-card.stopped{opacity:.62;}
.rc-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.rc-card-id{display:flex;align-items:center;gap:9px;flex-wrap:wrap;cursor:pointer;min-width:0;}
.rc-title{font-size:14px;font-weight:700;color:var(--ink);}
.rc-card-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto;}
.rc-card-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px;
  font-size:11.5px;color:var(--muted);font-weight:600;}
.rc-flag{padding:2px 10px;border-radius:20px;font-weight:800;font-size:10.5px;
  background:var(--soft);border:1px solid var(--line);}
.rc-flag.due{background:var(--not-bg);color:var(--not);border-color:transparent;}
.rc-flag.ok{background:var(--done-bg);color:var(--done);border-color:transparent;}

/* the date row — this is the thing you actually click */
.dchips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
.dchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:54px;padding:7px 4px 6px;border-radius:11px;cursor:pointer;font-family:inherit;
  background:var(--soft);border:1.5px solid var(--line);color:var(--muted);transition:.14s;}
.dchip:hover:not(:disabled){border-color:var(--brand2);color:var(--ink);}
.dc-dow{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;opacity:.85;}
.dc-num{font-size:15px;font-weight:800;line-height:1.05;}
.dc-mark{font-size:11px;font-weight:800;height:13px;line-height:13px;}
.dchip.done{background:linear-gradient(180deg,#22C55E,#16A34A);border-color:transparent;color:#fff;
  box-shadow:0 2px 8px rgba(22,163,74,.4);}
.dchip.done:hover:not(:disabled){filter:brightness(1.07);color:#fff;}
.dchip.today{border-color:var(--brand2);border-width:2px;}
.dchip.today .dc-dow{color:var(--brand2);}
.dchip.done.today .dc-dow{color:#fff;}
.dchip.na{opacity:.3;cursor:not-allowed;background:transparent;border-style:dashed;}
.dchip:disabled{cursor:not-allowed;}
@media(max-width:700px){ .dchip{width:46px;} .rc-head-r{display:none;} }

/* ===================================================================
   ATTENDANCE v20 — readable in light mode, hours edited by hand
   (task timers were removed, so hours are typed in / from Clock In-Out)
   =================================================================== */
/* status cells: solid fills + strong text so they read clearly on white */
.a-P,.a-H,.a-L,.a-S,.a-A{
  font-weight:800 !important; font-size:12px !important; letter-spacing:.3px;
  border-radius:6px !important; text-align:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.a-P{background:#DCFCE7 !important;color:#14532D !important;border:1px solid #86EFAC !important;}
.a-H{background:#FEF3C7 !important;color:#78350F !important;border:1px solid #FCD34D !important;}
.a-L{background:#EDE9FE !important;color:#4C1D95 !important;border:1px solid #C4B5FD !important;}
.a-S{background:#DBEAFE !important;color:#1E3A8A !important;border:1px solid #93C5FD !important;}
.a-A{background:#FEE2E2 !important;color:#7F1D1D !important;border:1px solid #FCA5A5 !important;}
body.dark .a-P{background:#0F2E1D !important;color:#86EFAC !important;border-color:#166534 !important;}
body.dark .a-H{background:#332508 !important;color:#FCD34D !important;border-color:#78350F !important;}
body.dark .a-L{background:#2A1840 !important;color:#D8B4FE !important;border-color:#5B21B6 !important;}
body.dark .a-S{background:#12233F !important;color:#93C5FD !important;border-color:#1E40AF !important;}
body.dark .a-A{background:#3B1519 !important;color:#FCA5A5 !important;border-color:#991B1B !important;}

/* empty cells shouldn't disappear */
#view-attend td, #view-attend th{color:var(--ink);}
#view-attend table td:empty::after{content:"·";color:var(--muted);opacity:.5;}
#view-attend th{color:var(--muted) !important;font-weight:800;font-size:10px;letter-spacing:.5px;}
#view-attend table{border-collapse:separate;border-spacing:2px;}
#view-attend td{background:var(--soft);border-radius:6px;}
body.dark #view-attend td{background:rgba(255,255,255,.03);}

/* HOURS grid — this is now where you set hours by hand */
.hrs-cell{cursor:pointer;font-weight:700;font-variant-numeric:tabular-nums;border-radius:6px;
  transition:background .12s,box-shadow .12s;}
.hrs-cell:hover{background:var(--brand2) !important;color:#fff !important;
  box-shadow:0 2px 8px rgba(124,58,237,.4);}
.hrs-hint{display:inline-flex;align-items:center;gap:6px;background:var(--daily-bg);color:var(--daily);
  border-radius:8px;padding:5px 11px;font-size:11px;font-weight:700;margin-bottom:8px;}

/* ===================================================================
   ATTACHMENTS v21 — attach files/images, stored on your own hosting
   =================================================================== */
.att-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.att-status{font-size:11.5px;font-weight:700;color:var(--muted);}
.att-status.busy{color:var(--brand2);}
.att-status.ok{color:var(--done);}
.att-status.err{color:var(--not);}
.att-list{display:flex;flex-direction:column;gap:6px;margin-top:9px;}
.att-item{display:flex;align-items:center;gap:9px;background:var(--soft);border:1px solid var(--line);
  border-radius:9px;padding:6px 10px;}
.att-thumb{width:34px;height:34px;object-fit:cover;border-radius:6px;flex:0 0 auto;border:1px solid var(--line);background:var(--card);}
.att-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:6px;font-size:16px;}
.att-name{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--accent-txt);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-name:hover{text-decoration:underline;}
.att-size{font-size:10.5px;color:var(--muted);font-weight:700;flex:0 0 auto;}
.att-x,.att-dl{
  border:none;background:transparent;color:var(--muted);line-height:1;cursor:pointer;
  border-radius:6px;flex:0 0 auto;text-decoration:none;
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;box-sizing:border-box;
}
.att-x{font-size:18px;}
.att-dl{font-size:13px;}
.att-x:hover{color:#fff;background:#DC2626;}
.att-dl:hover{color:#fff;background:var(--accent);}

/* ===================================================================
   FILE CHIPS v22 — open attachments straight from any list
   (visible to every signed-in user; no role restriction)
   =================================================================== */
.fchips{display:inline-flex;gap:5px;flex-wrap:wrap;vertical-align:middle;margin-left:5px;}
.fchip{display:inline-flex;align-items:center;gap:4px;max-width:150px;
  padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;text-decoration:none;
  background:var(--soft);border:1px solid var(--line);color:var(--accent-txt);
  transition:.14s;white-space:nowrap;}
.fchip span{overflow:hidden;text-overflow:ellipsis;}
.fchip:hover{background:var(--brand2);border-color:transparent;color:#fff;transform:translateY(-1px);}
.fchip.more{background:transparent;color:var(--muted);cursor:default;}
.fchip.more:hover{transform:none;background:transparent;color:var(--muted);}
.kcard .fchip,.ev .fchip{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.22);}

/* ===================================================================
   DAILY OUTPUT GRAPH v25
   One bar per calendar day covering BOTH tasks and posts. Bars are
   coloured by outcome/status (default) or by person. Clicking a day
   opens the list of what happened on it. Taller and placed directly
   under the KPI row so it is the first thing seen on the dashboard.
   =================================================================== */
.pf-panel{margin:0 0 18px;}
.pf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.pf-head h3{font-size:16px;}
.pf-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pf-month{font-weight:800;min-width:150px;}

/* Status / Person segmented switch */
.pf-seg-btns{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-right:4px;}
.pf-seg-btns button{background:var(--card);border:none;color:var(--muted);font:inherit;font-size:12px;
  font-weight:700;padding:6px 13px;cursor:pointer;transition:background .15s,color .15s;}
.pf-seg-btns button+button{border-left:1px solid var(--line);}
.pf-seg-btns button:hover{color:var(--ink);}
.pf-seg-btns button.on{background:var(--accent);color:var(--accent-fg);}

/* ---- headline numbers ---- */
.pf-stats{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px;}
.pf-stat{flex:1 1 118px;background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:10px 13px;display:flex;flex-direction:column;gap:1px;}
.pf-stat b{font-size:22px;font-weight:800;line-height:1.1;color:var(--ink);}
.pf-stat span{font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.35;}
/* Theme-aware: the vivid bar colours are too light on white and too dark on
   the dark card. Measured — light mode now 4.8-7.6:1, dark mode 6.3-10.4:1. */
.pf-stat.ok   b{color:#15803D;}
.pf-stat.warn b{color:#B45309;}
.pf-stat.bad  b{color:#DC2626;}
.pf-stat.acc  b{color:var(--accent);}
body.dark .pf-stat.ok   b{color:#4ADE80;}
body.dark .pf-stat.warn b{color:#FBBF24;}
body.dark .pf-stat.bad  b{color:#F87171;}
body.dark .pf-stat     b{color:var(--ink);}
body.dark .pf-stat.acc  b{color:var(--accent);}
.pf-stat.sep{flex:2 1 250px;}
.pf-stat .pf-dlt{display:block;margin-top:4px;font-size:9.5px;font-weight:800;line-height:1.2;letter-spacing:.2px;}
.pf-stat .pf-dlt.up{color:#15803D;} .pf-stat .pf-dlt.down{color:#B45309;} .pf-stat .pf-dlt.flat{color:var(--muted);opacity:.8;}
body.dark .pf-stat .pf-dlt.up{color:#4ADE80;} body.dark .pf-stat .pf-dlt.down{color:#FBBF24;}
.pf-range{margin-left:2px;}
@media(max-width:700px){ .pf-nav{flex-wrap:wrap;gap:6px;} .pf-range{margin-left:0;} }

/* ---- staff filter chips (multi-select) ---- */
.pf-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
.pf-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;font-size:12px;
  font-weight:700;color:var(--muted);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;transition:background .15s,color .15s,border-color .15s,transform .12s;}
.pf-chip i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.pf-chip b{font-size:11px;font-weight:800;opacity:.75;background:rgba(125,125,160,.16);border-radius:6px;padding:1px 6px;}
.pf-chip:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--ink);}
.pf-chip.on{background:var(--c,var(--accent));border-color:var(--c,var(--accent));color:var(--accent-fg);}
.pf-chip.on i{background:rgba(255,255,255,.9)!important;}
.pf-chip.on b{background:rgba(255,255,255,.25);opacity:1;color:#fff;}

/* ---- plot ---- */
.pf-plot{display:flex;gap:9px;align-items:stretch;}
.pf-axis{position:relative;width:34px;flex:0 0 34px;height:560px;}
.pf-axis-lbl{position:absolute;right:0;transform:translateY(-50%);font-size:11.5px;font-weight:700;color:var(--muted);}
.pf-canvas{position:relative;flex:1;min-width:0;height:560px;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);}
.pf-grid-line{position:absolute;left:0;right:0;height:1px;background:var(--line);opacity:.5;}
/* Average-per-active-day reference line: days below it are the light days. */
.pf-avg-line{position:absolute;left:0;right:0;height:0;border-top:2px dashed var(--accent);opacity:.85;z-index:3;pointer-events:none;}
.pf-avg-lbl{position:absolute;right:2px;transform:translateY(-100%);font-size:10px;font-weight:800;
  color:var(--accent-fg);background:var(--accent);border-radius:5px 5px 0 0;padding:1px 6px;white-space:nowrap;z-index:4;pointer-events:none;}
.pf-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:3px;padding:0 4px;
  overflow-x:auto;overflow-y:hidden;}

.pf-col{flex:1 1 0;min-width:26px;display:flex;flex-direction:column;align-items:center;height:100%;
  border-radius:6px 6px 0 0;cursor:pointer;transition:background .15s;}
.pf-col:hover{background:rgba(124,58,237,.10);}
.pf-col.we .pf-day{color:#DB2777;}
.pf-col.today{background:rgba(124,58,237,.13);}
.pf-col.today .pf-day{color:var(--accent);font-weight:900;}
.pf-col.sel{background:rgba(124,58,237,.20);box-shadow:inset 0 0 0 1px var(--accent);}

.pf-bar-area{flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;position:relative;min-height:0;}
.pf-val{font-size:12px;font-weight:800;color:var(--ink);line-height:1;margin-bottom:3px;}
.pf-bar-stack{width:82%;max-width:44px;min-height:4px;display:flex;flex-direction:column-reverse;
  border-radius:5px 5px 0 0;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:height .25s ease;}
.pf-seg{width:100%;min-height:3px;}
.pf-seg.pf-post{opacity:.92;border-top:1px dashed rgba(255,255,255,.55);}
.pf-col:hover .pf-bar-stack{filter:brightness(1.15);}

.pf-day{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.3;padding-top:5px;}
.pf-dow{font-size:9px;font-weight:600;color:var(--muted);opacity:.6;line-height:1;padding-bottom:4px;}

/* ---- legend + hint ---- */
.pf-legend{display:flex;flex-wrap:wrap;gap:6px 15px;margin-top:12px;padding-left:39px;
  font-size:11px;font-weight:600;color:var(--muted);}
.pf-legend span{display:inline-flex;align-items:center;gap:5px;}
.pf-legend i{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.pf-legend i.sq{border-radius:3px;}
.pf-lg-sep{width:1px;height:13px;background:var(--line);margin:0 2px;}
.pf-hint{margin-top:8px;padding-left:39px;font-size:11px;font-weight:600;color:var(--muted);opacity:.85;}

/* ---- day detail (opens on click) ---- */
.pf-detail{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);}
.pf-detail-h{display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:13px;color:var(--muted);
  background:rgba(124,58,237,.08);border-bottom:1px solid var(--line);}
.pf-detail-h b{color:var(--ink);font-weight:800;}
.pf-x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:19px;line-height:1;
  cursor:pointer;padding:0 3px;}
.pf-x:hover{color:var(--ink);}
.pf-grp{padding:9px 14px 5px;font-size:10.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);}
.pf-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line);
  font-size:12.5px;cursor:pointer;transition:background .13s;}
.pf-item:hover{background:rgba(124,58,237,.07);}
.pf-oc{flex:0 0 auto;font-size:10px;font-weight:800;color:#fff;border-radius:7px;padding:3px 8px;white-space:nowrap;}
.pf-it{flex:1;min-width:0;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-tag{font-size:9.5px;font-weight:800;color:var(--accent);background:rgba(124,58,237,.14);
  border-radius:6px;padding:1px 6px;}
.pf-who{flex:0 0 auto;font-size:11px;color:var(--muted);font-weight:600;max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-due{flex:0 0 auto;font-size:11px;color:var(--muted);font-weight:600;min-width:62px;text-align:right;}

@media(max-width:820px){
  .pf-axis,.pf-canvas{height:380px;}
  .pf-col{min-width:20px;}
  .pf-dow{display:none;}
  .pf-month{min-width:0;}
  .pf-legend,.pf-hint{padding-left:0;}
  .pf-stat b{font-size:19px;}
  .pf-who,.pf-due{display:none;}
}

/* ===================================================================
   ATTENDANCE & HOURS — single combined grid (v124)

   This used to be two tables. Even with identical colgroups they drifted,
   because `min-width:100%` with `table-layout:fixed` makes the browser
   share leftover width across columns — and the hours table had one extra
   column, so it shared that width differently. Now every person occupies
   two rows of ONE table (Status above Hours) under one set of date
   headers, so the columns cannot come apart.

   Colours: the old scheme painted chips with TEXT variables. --comp is
   #FFFFFF in both themes, so "Present" was white-on-white and invisible.
   Solid fills with white text now, all measured 5:1 or better.
   =================================================================== */
.att-title{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;}
.att-hint{font-size:11px;color:var(--muted);margin-bottom:8px;padding:7px 11px;
  background:rgba(124,58,237,.09);border-left:3px solid var(--accent);border-radius:6px;}
.att-hint b{color:var(--ink);}

.att-wrap{padding:10px 0;overflow-x:auto;margin-bottom:16px;}
/* width:max-content — NOT min-width:100%. That is what kept the columns
   from honouring the colgroup exactly. */
.att-table.combined{border-collapse:separate;border-spacing:2px;table-layout:fixed;width:max-content;}

.att-name-h{text-align:left;padding:6px 10px;font-size:11px;position:sticky;left:0;
  background:var(--card);z-index:3;color:var(--muted);font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;}
.att-name{padding:5px 10px;font-size:13px;font-weight:700;position:sticky;left:0;
  background:var(--card);z-index:2;white-space:nowrap;color:var(--ink);
  border-right:2px solid var(--line);vertical-align:middle;}
.att-rowh{background:var(--card);position:sticky;left:150px;z-index:3;}
.att-rowlbl{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);text-align:right;padding-right:8px;white-space:nowrap;
  position:sticky;left:150px;background:var(--card);z-index:2;}

.att-dh{text-align:center;font-size:9px;padding:3px 1px;color:var(--muted);font-weight:700;line-height:1.25;}
.att-dh.we{opacity:.7;}
.att-dh.today{color:var(--accent);font-weight:900;}
.att-dh.tot{font-size:9px;color:var(--accent);font-weight:800;}

/* the two rows of one person read as a single block */
.att-r1 td{border-top:2px solid var(--line);}
.att-r1 .att-name{border-top:2px solid var(--line);}

.att-c{text-align:center;cursor:pointer;font-size:11px;font-weight:900;border-radius:5px;
  padding:5px 0;user-select:none;background:var(--soft);color:var(--muted);
  transition:transform .1s,filter .12s;}
.att-c:hover{transform:scale(1.14);filter:brightness(1.12);}
.att-c.s-P{background:#15803D;color:#fff;}   /* 5.02:1 */
.att-c.s-H{background:#B45309;color:#fff;}   /* 5.02:1 */
.att-c.s-L{background:#0E7490;color:#fff;}   /* 5.36:1 */
.att-c.s-S{background:#6D28D9;color:#fff;}   /* 7.10:1 */
.att-c.s-A{background:#B91C1C;color:#fff;}   /* 6.47:1 */
/* Weekends tint the EMPTY cell only — a marked weekend keeps full contrast
   and is flagged with a ring instead of being faded out. */
.att-c.we{background:rgba(125,125,160,.10);}
.att-c.s-P.we,.att-c.s-H.we,.att-c.s-L.we,.att-c.s-S.we,.att-c.s-A.we{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);}
.att-c.today,.hrs-cell.today{outline:2px solid var(--accent);outline-offset:-2px;}
body.dark .att-c{background:rgba(255,255,255,.05);}
body.dark .att-c.we{background:rgba(255,255,255,.03);}

.att-key{display:inline-flex;align-items:center;gap:6px;font-size:11px;margin-right:14px;
  color:var(--ink);font-weight:600;}
.att-key .att-c{cursor:default;padding:2px 7px;min-width:20px;}
.att-key .att-c:hover{transform:none;filter:none;}

.hrs-cell{text-align:center;font-size:10px;padding:5px 0;color:var(--muted);cursor:pointer;
  border-radius:5px;transition:background .12s;}
.hrs-cell.has{color:var(--ink);font-weight:700;}
.hrs-cell.we{background:rgba(125,125,160,.07);}
.hrs-cell:hover{background:rgba(124,58,237,.16);color:var(--ink);}
body.dark .hrs-cell.we{background:rgba(255,255,255,.03);}
.att-tot{text-align:center;font-size:12px;font-weight:800;color:var(--accent);padding:4px 6px;}
.att-tot.days{font-size:11px;color:#15803D;}
body.dark .att-tot.days{color:#4ADE80;}

/* ===================================================================
   RESTORED + CORRECTED STYLES (v125)

   Two bugs fixed here.

   1) #view-attend td{background:var(--soft)} on line ~2003 is an ID
      selector (specificity 1,0,1). It outranked .att-c.s-P (0,2,0), so
      every attendance cell rendered pale no matter what status it held
      — the colours were correct in the markup and simply never won.
      The status rules are scoped under #view-attend below so they do.

   2) A cleanup pass of mine deleted from the old attendance block to the
      END of the file, taking the chart, timer-button and admin-tab
      styles with it. They are restored here.
   =================================================================== */

/* ── 1. Attendance status fills, now specific enough to win ─────────── */
#view-attend .att-c{background:var(--soft);color:var(--muted);border-radius:5px;
  text-align:center;cursor:pointer;font-size:12px;font-weight:900;padding:6px 0;
  user-select:none;transition:transform .1s,filter .12s;}
#view-attend .att-c:hover{transform:scale(1.15);filter:brightness(1.12);z-index:5;position:relative;}
#view-attend .att-c.s-P{background:#15803D;color:#fff;}
#view-attend .att-c.s-H{background:#B45309;color:#fff;}
#view-attend .att-c.s-L{background:#0E7490;color:#fff;}
#view-attend .att-c.s-S{background:#6D28D9;color:#fff;}
#view-attend .att-c.s-A{background:#B91C1C;color:#fff;}
/* weekends tint only the EMPTY cell; a marked weekend keeps its colour */
#view-attend .att-c.we{background:rgba(125,125,160,.13);}
#view-attend .att-c.s-P.we{background:#15803D;}
#view-attend .att-c.s-H.we{background:#B45309;}
#view-attend .att-c.s-L.we{background:#0E7490;}
#view-attend .att-c.s-S.we{background:#6D28D9;}
#view-attend .att-c.s-A.we{background:#B91C1C;}
#view-attend .att-c.s-P.we,#view-attend .att-c.s-H.we,#view-attend .att-c.s-L.we,
#view-attend .att-c.s-S.we,#view-attend .att-c.s-A.we{opacity:.82;}
body.dark #view-attend .att-c{background:rgba(255,255,255,.06);}
body.dark #view-attend .att-c.we{background:rgba(255,255,255,.03);}
#view-attend .att-key .att-c{cursor:default;padding:3px 8px;min-width:22px;}
#view-attend .att-key .att-c:hover{transform:none;filter:none;}

/* ── each person reads as one block ─────────────────────────────────── */
/* the generic zebra striping fights the two-row grouping — switch it off here */
#view-attend tbody tr:nth-child(even) td{background:inherit;}
#view-attend .att-r1 td,#view-attend .att-r2 td{background:transparent;}
#view-attend .att-r1 > td{border-top:2px solid var(--accent);}
#view-attend tbody tr.att-r1:nth-of-type(4n+1) .att-name,
#view-attend tbody tr.att-r2:nth-of-type(4n+2) .att-rowlbl{background:var(--card);}
/* alternate a faint band per PERSON (two rows) so neighbours don't merge */
#view-attend .att-band td{background:rgba(124,58,237,.045);}
body.dark #view-attend .att-band td{background:rgba(255,255,255,.028);}
#view-attend .att-band .att-c{background:var(--soft);}
body.dark #view-attend .att-band .att-c{background:rgba(255,255,255,.06);}
#view-attend .att-band .att-c.s-P{background:#15803D;}
#view-attend .att-band .att-c.s-H{background:#B45309;}
#view-attend .att-band .att-c.s-L{background:#0E7490;}
#view-attend .att-band .att-c.s-S{background:#6D28D9;}
#view-attend .att-band .att-c.s-A{background:#B91C1C;}
#view-attend .att-name{font-size:14px;font-weight:800;}
#view-attend .att-rowlbl{font-size:9px;font-weight:800;letter-spacing:.5px;}
#view-attend .hrs-cell{background:transparent;font-size:11px;}
#view-attend .hrs-cell.has{color:var(--ink);font-weight:800;background:rgba(124,58,237,.10);}
body.dark #view-attend .hrs-cell.has{background:rgba(192,132,252,.16);}
#view-attend .hrs-cell:hover{background:rgba(124,58,237,.22);}
#view-attend .att-c.today,#view-attend .hrs-cell.today{outline:2px solid var(--accent);outline-offset:-2px;}

/* ── 2. Average time by task type ───────────────────────────────────── */
.avt-sub{font-size:12px;color:var(--muted);line-height:1.5;margin:-4px 0 12px;}
.avt-head{display:grid;grid-template-columns:130px 1fr 62px 46px;gap:10px;align-items:center;
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.avt-head span:nth-child(3),.avt-head span:nth-child(4){text-align:right;}
.avt-row{display:grid;grid-template-columns:130px 1fr 62px 46px;gap:10px;align-items:center;padding:7px 0;}
.avt-lbl{font-size:12.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.avt-track{background:var(--soft);border-radius:999px;height:18px;overflow:hidden;}
.avt-fill{height:100%;border-radius:999px;transition:width .3s ease;}
.avt-val{font-size:13px;font-weight:800;color:var(--ink);text-align:right;}
.avt-n{font-size:11px;font-weight:700;color:var(--muted);text-align:right;}
.avt-n.thin{color:#B45309;}
body.dark .avt-n.thin{color:#FBBF24;}
.avt-note{font-size:11px;color:var(--muted);margin-top:10px;padding-top:9px;border-top:1px solid var(--line);}
body.dark .avt-track{background:rgba(255,255,255,.07);}

/* ── 3. Dashboard bars ──────────────────────────────────────────────── */
.bv{font-size:11px;font-weight:800;color:#fff;line-height:1;}
.bv.out{color:var(--ink);margin-left:8px;}

/* ── 4. Admin tabs ──────────────────────────────────────────────────── */
.adm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;border-bottom:1px solid var(--line);padding-bottom:10px;}
.adm-tab{background:var(--card);border:1px solid var(--line);color:var(--muted);font:inherit;
  font-size:13px;font-weight:700;padding:9px 16px;border-radius:10px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .1s;}
.adm-tab:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-1px);}
.adm-tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);}
.adm-sub{font-size:12px;color:var(--muted);margin:10px 0 14px;font-weight:600;}

/* ── Task timer, made visible (v125) ───────────────────────────────────
   The old control was a pair of plain glyphs; a running timer looked no
   different from a stopped one and the figure never appeared to move.
   Now: solid amber while running, a ticking H:MM:SS clock, a tinted row,
   and a floating bar so the running clock follows you across screens. */
.td-timer{white-space:nowrap;}
.tctl{display:inline-flex;align-items:center;gap:6px;padding:3px 5px;border-radius:9px;
  transition:background .18s;}
.tctl.on{background:rgba(180,83,9,.14);box-shadow:inset 0 0 0 1px rgba(180,83,9,.35);}
body.dark .tctl.on{background:rgba(251,191,36,.15);box-shadow:inset 0 0 0 1px rgba(251,191,36,.35);}

.tbtn{border:1px solid var(--line);background:var(--card);color:var(--muted);font:inherit;
  font-size:12px;font-weight:800;border-radius:8px;padding:5px 10px;cursor:pointer;line-height:1;
  transition:background .13s,color .13s,border-color .13s,transform .1s;}
.tbtn:hover{transform:translateY(-1px);}
.tbtn.start{color:#15803D;border-color:rgba(21,128,61,.4);}
.tbtn.start:hover{background:#15803D;color:#fff;border-color:#15803D;}
.tbtn.start.off{opacity:.45;}                    /* not clocked in */
.tbtn.stop{background:#B45309;color:#fff;border-color:#B45309;animation:tPulse 2s ease-in-out infinite;}
.tbtn.stop:hover{filter:brightness(1.12);}
.tbtn.done{color:#15803D;border-color:rgba(21,128,61,.4);}
.tbtn.done:hover{background:#15803D;color:#fff;border-color:#15803D;}

.tclock{font-size:13px;font-weight:800;color:#B45309;font-variant-numeric:tabular-nums;
  letter-spacing:.3px;min-width:52px;}
body.dark .tclock{color:#FBBF24;}
.tspent{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.tdone{font-size:12px;font-weight:800;color:#15803D;}
body.dark .tdone{color:#4ADE80;}

@keyframes tPulse{0%,100%{box-shadow:0 0 0 0 rgba(180,83,9,.5)}50%{box-shadow:0 0 0 5px rgba(180,83,9,0)}}

/* the row being timed */
#view-pending tbody tr.row-running td{background:rgba(180,83,9,.075)!important;}
body.dark #view-pending tbody tr.row-running td{background:rgba(251,191,36,.09)!important;}
#view-pending tbody tr.row-running td:first-child{box-shadow:inset 3px 0 0 #B45309;}

/* floating "currently timing" bar */
.run-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:2147482500;
  display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:999px;
  background:linear-gradient(135deg,#B45309,#92400E);color:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.34);font-size:13px;font-weight:700;
  animation:rbIn .22s ease-out;max-width:calc(100vw - 32px);}
@keyframes rbIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.rb-pulse{width:9px;height:9px;border-radius:50%;background:#4ADE80;flex:0 0 auto;
  animation:rbBlink 1.2s ease-in-out infinite;}
@keyframes rbBlink{0%,100%{opacity:1}50%{opacity:.25}}
.rb-lbl{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;opacity:.85;}
.rb-task{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;}
.rb-clock{font-variant-numeric:tabular-nums;font-size:15px;font-weight:800;letter-spacing:.5px;
  background:rgba(255,255,255,.2);border-radius:8px;padding:3px 9px;}
.rb-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.32);color:#fff;
  font:inherit;font-size:11.5px;font-weight:800;border-radius:8px;padding:5px 11px;cursor:pointer;
  transition:background .14s;}
.rb-btn:hover{background:rgba(255,255,255,.34);}
.rb-btn.done{background:#15803D;border-color:#15803D;}
.rb-btn.done:hover{background:#166534;}
@media(max-width:640px){ .rb-lbl,.rb-task{display:none;} }

/* ── Needs attention now (v126) ────────────────────────────────────── */
.due-sub{font-size:12px;color:var(--muted);margin:-4px 0 12px;}
.due-badge{font-size:10px;font-weight:800;color:#fff;background:#B91C1C;border-radius:999px;padding:3px 9px;}
.due-h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);padding:12px 0 6px;border-bottom:1px solid var(--line);margin-bottom:2px;}
.due-h.bad{color:#B91C1C;}
body.dark .due-h.bad{color:#F87171;}
.due-i{display:grid;grid-template-columns:96px 1fr 130px 110px 78px;gap:10px;align-items:center;
  padding:9px 6px;border-bottom:1px solid var(--line);cursor:pointer;font-size:12.5px;
  border-radius:7px;transition:background .13s;}
.due-i:hover{background:rgba(124,58,237,.08);}
.due-flag{font-size:10px;font-weight:800;color:#fff;background:#B45309;border-radius:7px;
  padding:3px 8px;text-align:center;white-space:nowrap;}
.due-flag.late{background:#B91C1C;}
.due-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600;}
.due-t b{color:var(--accent-txt,var(--accent));}
.due-w,.due-c{font-size:11px;color:var(--muted);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.due-p{text-align:right;}
@media(max-width:820px){
  .due-i{grid-template-columns:88px 1fr;}
  .due-w,.due-c,.due-p{display:none;}
}

/* ===================================================================
   ATTENDANCE — DARK MODE FIX (v128)

   `body.dark #view-attend .att-c` and `#view-attend .att-c.s-P` both
   compute to specificity (1,2,0). Ties are broken by SOURCE ORDER, and
   the dark base rule came later — so in dark mode it repainted every
   cell with the same translucent grey and all five status colours
   vanished. Light mode was unaffected, which is why it only looked
   broken at night.

   These rules carry `body.dark` AND the status class, so they outrank
   the base by specificity rather than relying on order. Empty cells are
   also pushed darker so the filled ones read as chips, and every fill
   gets a hairline edge for definition against the dark card.
   =================================================================== */
body.dark #view-attend .att-c{background:rgba(255,255,255,.045);color:#8C97AC;}
body.dark #view-attend .att-c.we{background:rgba(255,255,255,.02);}

body.dark #view-attend .att-c.s-P,
body.dark #view-attend .att-band .att-c.s-P{background:#15803D;color:#fff;}
body.dark #view-attend .att-c.s-H,
body.dark #view-attend .att-band .att-c.s-H{background:#B45309;color:#fff;}
body.dark #view-attend .att-c.s-L,
body.dark #view-attend .att-band .att-c.s-L{background:#0E7490;color:#fff;}
body.dark #view-attend .att-c.s-S,
body.dark #view-attend .att-band .att-c.s-S{background:#6D28D9;color:#fff;}
body.dark #view-attend .att-c.s-A,
body.dark #view-attend .att-band .att-c.s-A{background:#B91C1C;color:#fff;}

/* a marked weekend keeps its colour, just slightly muted */
body.dark #view-attend .att-c.s-P.we,body.dark #view-attend .att-c.s-H.we,
body.dark #view-attend .att-c.s-L.we,body.dark #view-attend .att-c.s-S.we,
body.dark #view-attend .att-c.s-A.we{opacity:.85;}

/* hairline edge so a filled chip separates from the dark card */
body.dark #view-attend .att-c.s-P,body.dark #view-attend .att-c.s-H,
body.dark #view-attend .att-c.s-L,body.dark #view-attend .att-c.s-S,
body.dark #view-attend .att-c.s-A{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);}

/* hours: filled days glow faintly, blanks recede */
body.dark #view-attend .hrs-cell{color:#7C879B;}
body.dark #view-attend .hrs-cell.has{color:#E9EDF5;background:rgba(192,132,252,.14);}
body.dark #view-attend .hrs-cell:hover{background:rgba(192,132,252,.26);color:#fff;}

/* person banding: a touch of light, never enough to fight the chips */
body.dark #view-attend .att-band td{background:rgba(255,255,255,.022);}
body.dark #view-attend .att-r1 > td{border-top:2px solid rgba(192,132,252,.35);}
body.dark #view-attend .att-name{color:#E9EDF5;}
body.dark #view-attend .att-rowlbl{color:#7C879B;}
body.dark #view-attend .att-dh{color:#8C97AC;}
body.dark #view-attend .att-dh.today{color:#C084FC;}

/* today's column: a clear ring rather than a heavy outline on every cell */
body.dark #view-attend .att-c.today,body.dark #view-attend .hrs-cell.today{
  outline:2px solid #C084FC;outline-offset:-2px;}

/* ── Needs-attention person picker (v128) ──────────────────────────── */
.due-sel{background:var(--card);border:1px solid var(--line);color:var(--ink);font:inherit;
  font-size:12px;font-weight:700;border-radius:9px;padding:6px 11px;cursor:pointer;outline:none;
  transition:border-color .14s;}
.due-sel:hover,.due-sel:focus{border-color:var(--accent);}
body.dark .due-sel{background:rgba(255,255,255,.06);}
body.dark .due-sel option{color:#0F172A;}

/* ===================================================================
   TODAY MARKER (v129)
   The current day was tinted with --brand2, a violet that sits almost
   on top of the purple theme — technically applied, visually invisible.
   Amber is used instead: it is the one hue not otherwise in the palette,
   so "today" reads instantly in both themes. Declared last, and with
   !important, because several earlier .day.today rules already use it.
   =================================================================== */
.day.today{
  border-color:#B45309 !important;
  background:rgba(180,83,9,.10) !important;
  box-shadow:0 0 0 2px rgba(180,83,9,.45) inset, 0 4px 14px rgba(180,83,9,.18) !important;
}
.day.today .dn span:first-child{
  background:#B45309 !important; color:#fff !important;
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:12px;font-weight:800;
  box-shadow:0 2px 6px rgba(180,83,9,.45) !important;
}
.day.today::after{
  content:"TODAY";position:absolute;top:4px;right:6px;
  font-size:8px;font-weight:800;letter-spacing:.6px;color:#B45309;opacity:.85;
}
.day.today{position:relative;}
body.dark .day.today{
  border-color:#FBBF24 !important;
  background:rgba(251,191,36,.13) !important;
  box-shadow:0 0 0 2px rgba(251,191,36,.5) inset, 0 4px 16px rgba(251,191,36,.16) !important;
}
body.dark .day.today .dn span:first-child{background:#B45309 !important;color:#fff !important;}
body.dark .day.today::after{color:#FBBF24;}
/* year view: make the current month obvious too */
.year-month.cur{box-shadow:0 0 0 2px #B45309 inset !important;}
body.dark .year-month.cur{box-shadow:0 0 0 2px #FBBF24 inset !important;}

/* ===================================================================
   STICKY CALENDAR BAR (v131)
   Today / ← → / the month label / Month-Week-Year used to scroll away,
   so changing view from halfway down December meant scrolling back to
   the top first. The bar now pins directly beneath the topbar. It sits
   at --topbar-h rather than a fixed number because the topbar wraps on
   narrow screens and its height genuinely changes.
   =================================================================== */
.cal-bar{
  position:sticky;
  top:calc(var(--topbar-h, 64px) - 1px);
  z-index:18;
  margin:-14px -22px 16px;
  padding:14px 22px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px -12px rgba(0,0,0,.35);
}
body.dark .cal-bar{background:var(--bg);box-shadow:0 6px 20px -12px rgba(0,0,0,.7);}
/* NOTE: the weekday header row is deliberately NOT sticky.
   Making .dow sticky detached each pill from its column and left them
   floating in the middle of the day cells — badly wrong in Week view,
   where the grid is only two rows tall. A sticky grid ITEM scrolls
   independently of its row, which is not what a header row should do.
   The bar above is sticky; that is the part that matters. */
@media(max-width:900px){
  .cal-bar{margin:-14px -16px 14px;padding:12px 16px;}
}

/* ===================================================================
   WORLD CLOCK STRIP (v131)
   Sits at the very top of the dashboard, so it is the first thing seen.
   Horizontal and compact rather than two tall cards: the point is a
   glance, not a study. Each side carries a working-hours pill, which is
   the actually useful bit — whether the client can be reached right now
   without anyone doing the time arithmetic themselves.
   =================================================================== */
.wc-panel{--wc-dial:#F8FAFC;--wc-ring:#E3E8F0;--wc-tick:#64748B;--wc-hand:#1E293B;
  padding:18px 20px;margin-bottom:18px;}
body.dark .wc-panel{--wc-dial:#0F1524;--wc-ring:#2A3346;--wc-tick:#8C97AC;--wc-hand:#E9EDF5;}

.wc-strip{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;}

.wc-card{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:18px;
  border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden;
  transition:background .6s ease;}
.wc-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;}
.wc-card.morning::before{background:linear-gradient(90deg,#FBBF24,#FDE68A);}
.wc-card.afternoon::before{background:linear-gradient(90deg,#F59E0B,#FBBF24);}
.wc-card.evening::before{background:linear-gradient(90deg,#FB923C,#C084FC);}
.wc-card.night::before{background:linear-gradient(90deg,#4338CA,#312E81);}
.wc-card.morning{background:linear-gradient(120deg,rgba(251,191,36,.10),transparent 60%);}
.wc-card.afternoon{background:linear-gradient(120deg,rgba(245,158,11,.10),transparent 60%);}
.wc-card.evening{background:linear-gradient(120deg,rgba(251,146,60,.12),transparent 60%);}
.wc-card.night{background:linear-gradient(120deg,rgba(67,56,202,.16),transparent 60%);}

.wc-dial{width:118px;height:118px;flex:0 0 118px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.16));}
.wc-dial line{transition:transform .18s cubic-bezier(.4,2,.55,.44);transform-origin:0 0;transform-box:view-box;}
.wc-info{flex:1;min-width:0;}
.wc-head{display:flex;align-items:center;gap:8px;}
.wc-city{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.2px;}
.wc-zone{font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--accent-fg);background:var(--accent);
  border-radius:999px;padding:3px 9px;box-shadow:0 2px 8px rgba(124,58,237,.35);}
.wc-digital{display:flex;align-items:baseline;gap:6px;margin-top:1px;}
.wc-digital > span:first-child{font-size:40px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.05;}
.wc-digital small{font-size:17px;opacity:.45;font-weight:700;}
.wc-ap{font-size:17px;font-weight:800;color:var(--accent);letter-spacing:.5px;}
.wc-date{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12.5px;
  color:var(--muted);font-weight:700;}
.wc-part{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  border-radius:999px;padding:3px 9px;background:rgba(125,125,160,.18);color:var(--ink);}
.wc-sub{font-size:10px;color:var(--muted);margin-top:3px;font-weight:600;opacity:.75;}

/* the useful bit: can this person be reached right now */
.wc-work{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;
  font-weight:800;border-radius:999px;padding:5px 13px;}
.wc-work i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.wc-work.on{background:rgba(21,128,61,.14);color:#15803D;}
.wc-work.on i{background:#15803D;animation:wcBlink 1.6s ease-in-out infinite;}
.wc-work.soon{background:rgba(180,83,9,.14);color:#B45309;}
.wc-work.soon i{background:#B45309;}
.wc-work.off{background:rgba(125,125,160,.16);color:var(--muted);}
.wc-work.off i{background:var(--muted);}
body.dark .wc-work.on{background:rgba(74,222,128,.15);color:#4ADE80;}
body.dark .wc-work.on i{background:#4ADE80;}
body.dark .wc-work.soon{background:rgba(251,191,36,.15);color:#FBBF24;}
body.dark .wc-work.soon i{background:#FBBF24;}
@keyframes wcBlink{0%,100%{opacity:1}50%{opacity:.3}}

.wc-mid{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:150px;}
.wc-gap{font-size:12.5px;color:var(--muted);text-align:center;font-weight:600;line-height:1.5;}
.wc-gap b{color:var(--ink);font-size:16px;display:block;margin-bottom:1px;}
.wc-dst{display:block;font-size:9.5px;opacity:.75;margin-top:1px;}
.wc-open{background:var(--soft);border:1px solid var(--line);color:var(--ink);font:inherit;
  font-size:11.5px;font-weight:800;border-radius:9px;padding:7px 13px;cursor:pointer;
  white-space:nowrap;transition:background .14s,border-color .14s,transform .1s;}
.wc-open:hover{border-color:var(--accent);transform:translateY(-1px);}
.wc-open.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);}
body.dark .wc-open{background:rgba(255,255,255,.06);}

.wc-conv{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
.wc-conv-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.wc-from,.wc-to{font-size:12px;font-weight:800;color:var(--ink);background:var(--soft);
  border-radius:8px;padding:7px 11px;white-space:nowrap;}
body.dark .wc-from,body.dark .wc-to{background:rgba(255,255,255,.07);}
.wc-conv-row input,.wc-conv-row select{background:var(--card);border:1px solid var(--line);
  color:var(--ink);font:inherit;font-size:13px;font-weight:700;border-radius:8px;padding:7px 9px;outline:none;}
.wc-conv-row input:focus,.wc-conv-row select:focus{border-color:var(--accent);}
body.dark .wc-conv-row input,body.dark .wc-conv-row select{background:rgba(255,255,255,.07);color-scheme:dark;}
body.dark .wc-conv-row select option{color:#0F172A;}
.wc-colon{font-weight:800;color:var(--muted);margin:0 -4px;}
.wc-swap{background:var(--accent);border:none;color:var(--accent-fg);font-size:15px;font-weight:800;
  border-radius:9px;padding:6px 13px;cursor:pointer;line-height:1;transition:filter .14s,transform .12s;}
.wc-swap:hover{filter:brightness(1.12);transform:scale(1.06);}
.wc-out{margin-top:12px;background:var(--soft);border-radius:11px;padding:13px 15px;}
body.dark .wc-out{background:rgba(255,255,255,.05);}
.wc-o-hint{font-size:12.5px;color:var(--muted);}
.wc-o-city{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
.wc-o-tz{color:var(--accent);}
.wc-o-time{font-size:30px;font-weight:800;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums;}
.wc-o-time span{font-size:16px;color:var(--accent);}
.wc-o-time.night{color:#6366F1;} body.dark .wc-o-time.night{color:#A5B4FC;}
.wc-o-date{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px;}
.wc-o-date b{color:#B45309;} body.dark .wc-o-date b{color:#FBBF24;}
.wc-o-note{font-size:11.5px;color:var(--muted);margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}

@media(max-width:900px){
  .wc-strip{grid-template-columns:1fr;}
  .wc-mid{flex-direction:row;justify-content:center;min-width:0;flex-wrap:wrap;}
}

/* ── World clock: presence (v132) ──────────────────────────────────────
   Bigger dial, bigger numerals, and a soft glow behind each card that
   picks up the local part of day — so the strip reads as the headline of
   the dashboard rather than a footnote. */
.wc-card{box-shadow:0 10px 28px -18px rgba(0,0,0,.55);}
.wc-card::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;pointer-events:none;opacity:.5;filter:blur(28px);}
.wc-card.morning::after{background:#FBBF24;}
.wc-card.afternoon::after{background:#F59E0B;}
.wc-card.evening::after{background:#FB923C;}
.wc-card.night::after{background:#4338CA;}
.wc-info{position:relative;z-index:1;}
.wc-dial{position:relative;z-index:1;}
/* second hand sweeps rather than jerks */
.wc-dial line[id$="-s"]{transition:transform .12s cubic-bezier(.34,1.7,.5,1);}
@media(max-width:900px){
  .wc-dial{width:96px;height:96px;flex:0 0 96px;}
  .wc-digital > span:first-child{font-size:34px;}
}

/* ── Recurrence controls: stop the form jumping (v134) ─────────────────
   display:none toggling made the modal lurch every time you ticked
   Recurring, and lurch again when you picked Custom. The block now
   animates open on grid-template-rows (which CAN be transitioned,
   unlike height:auto), and the day pills stay put once open — greyed
   out rather than removed — so switching frequency never moves anything. */
/* grid-template-rows 0fr -> 1fr is the one reliable way to animate a
   collapse to "auto" height. It needs a SINGLE child to clip, hence
   .recur-inner — with three children the browser only sizes the first
   row and the collapse silently fails. */
.recur-box{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .24s ease, opacity .18s ease, margin-top .24s ease;
  margin-top:0;}
.recur-box > .recur-inner{overflow:hidden;min-height:0;}
.recur-box.is-open{grid-template-rows:1fr;opacity:1;margin-top:10px;}

.recur-days{transition:opacity .18s ease;}
.recur-days:not(.is-active){opacity:.42;}
.recur-days:not(.is-active) .day-pills label{cursor:not-allowed;}
.recur-days:not(.is-active) .day-pills input:disabled + span{opacity:.7;}

/* ── Recurring: month view (v137) ──────────────────────────────────────
   The 10-day chip strip could not answer "did they keep it up all
   month?". This lays a real calendar under each task: done, missed,
   not scheduled, or still to come. */
.rc-head-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.rc-hint{font-size:11.5px;color:var(--muted);}
.rc-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;}
.rc-seg button{background:var(--card);border:none;color:var(--muted);font:inherit;font-size:11.5px;
  font-weight:700;padding:7px 13px;cursor:pointer;transition:background .15s,color .15s;}
.rc-seg button+button{border-left:1px solid var(--line);}
.rc-seg button:hover{color:var(--ink);}
.rc-seg button.on{background:var(--accent);color:var(--accent-fg);}
.rc-nav{display:inline-flex;align-items:center;gap:5px;}
.rc-mlbl{min-width:132px;font-weight:800;}
.rc-rec{border-color:rgba(180,83,9,.5);color:#B45309;}
.rc-rec:hover{background:#B45309;color:#fff;}
body.dark .rc-rec{color:#FBBF24;border-color:rgba(251,191,36,.45);}

.rcm-wrap{margin-top:10px;}
.rcm-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px;}
.rcm-s{font-size:11px;font-weight:700;color:var(--muted);background:var(--soft);
  border-radius:999px;padding:4px 11px;}
.rcm-s b{color:var(--ink);font-size:12.5px;}
.rcm-s.ok b{color:#15803D;} body.dark .rcm-s.ok b{color:#4ADE80;}
.rcm-s.bad b{color:#B91C1C;} body.dark .rcm-s.bad b{color:#F87171;}
.rcm-s.rate{background:rgba(124,58,237,.13);} .rcm-s.rate b{color:var(--accent);}
body.dark .rcm-s{background:rgba(255,255,255,.06);}

.rcm-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;max-width:340px;}
.rcm-dow span{text-align:center;font-size:9px;font-weight:800;letter-spacing:.4px;color:var(--muted);}
.rcm-dow span.we{color:#DB2777;}
.rcm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:340px;}
.rcm-cell{position:relative;aspect-ratio:1;border-radius:7px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:10px;background:var(--soft);
  border:1px solid transparent;transition:transform .1s,filter .12s;}
body.dark .rcm-cell{background:rgba(255,255,255,.05);}
.rcm-cell.empty{background:none;}
.rcm-n{font-weight:700;color:var(--muted);line-height:1;}
.rcm-cell.off{opacity:.35;}
.rcm-cell.done{background:#15803D;cursor:pointer;}
.rcm-cell.done .rcm-n{color:#fff;}
.rcm-cell.missed{background:rgba(185,28,28,.16);border-color:rgba(185,28,28,.45);cursor:pointer;}
.rcm-cell.missed .rcm-n{color:#B91C1C;}
body.dark .rcm-cell.missed .rcm-n{color:#F87171;}
.rcm-cell.today-open{background:rgba(180,83,9,.18);border-color:#B45309;cursor:pointer;}
.rcm-cell.today-open .rcm-n{color:#B45309;font-weight:800;}
body.dark .rcm-cell.today-open .rcm-n{color:#FBBF24;}
.rcm-cell.soon{opacity:.6;}
.rcm-cell.today{box-shadow:0 0 0 2px var(--accent);}
.rcm-cell.done:hover,.rcm-cell.missed:hover,.rcm-cell.today-open:hover{transform:scale(1.09);filter:brightness(1.1);}
.rcm-t{position:absolute;bottom:2px;font-size:9px;color:#fff;line-height:1;}
.rcm-x{position:absolute;bottom:2px;font-size:10px;color:#B91C1C;line-height:1;}
body.dark .rcm-x{color:#F87171;}

/* ── Complete-both button (v138) ───────────────────────────────────── */
.btn-both{background:#15803D;border:1px solid #15803D;color:#fff;font-weight:800;}
.btn-both:hover{background:#166534;border-color:#166534;}
body.dark .btn-both{background:#16A34A;border-color:#16A34A;}

/* ===================================================================
   CLOCK SHEET (v142) — rebuilt for legibility

   The first version repeated "At work / On tasks / Not booked" on every
   person AND in the table header, floated the status badge far from its
   task, and left ragged columns. Now: the header labels the task columns
   once, each person gets a single summary strip, and the five task
   columns are fixed-width so every row lines up.
   =================================================================== */
.clk-bar-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  position:sticky;top:calc(var(--topbar-h,64px) - 1px);z-index:18;background:var(--bg);
  padding:14px 22px;margin:-14px -22px 16px;border-bottom:1px solid var(--line);}
.clk-bar-top h2{font-size:17px;font-weight:800;color:var(--ink);margin:0;}
.clk-date{background:var(--card);border:1px solid var(--line);color:var(--ink);font:inherit;
  font-size:12.5px;font-weight:700;border-radius:8px;padding:6px 9px;outline:none;}
body.dark .clk-date{background:rgba(255,255,255,.07);color-scheme:dark;}

.clk-tot{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.clk-t{flex:1 1 130px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 15px;}
.clk-t b{display:block;font-size:22px;font-weight:800;color:var(--ink);line-height:1.15;}
.clk-t span{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.clk-t.acc b{color:var(--accent);}
.clk-t.ok b{color:#15803D;}  body.dark .clk-t.ok b{color:#4ADE80;}
.clk-t.rev b{color:#B45309;} body.dark .clk-t.rev b{color:#FBBF24;}
.clk-t.wip b{color:#2563EB;} body.dark .clk-t.wip b{color:#93C5FD;}

.clk-panel{padding:0;overflow:hidden;}
.clk-table{max-width:100%;}
.clk-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.clk-table thead th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);padding:10px 14px;background:var(--soft);
  border-bottom:1px solid var(--line);}
.clk-table th.ta-r{text-align:right;}
body.dark .clk-table thead th{background:rgba(255,255,255,.04);}

/* ── person strip: one full-width block, never clipped ──────────────
   Previously these figures lived in table cells governed by the task
   colgroup, so on a narrow panel the right-hand column was cut off
   mid-word ("NOT B…"). A single colspan=5 cell with its own flex
   layout wraps instead of overflowing. */
.clk-person + .clk-person{border-top:3px solid var(--line);}
.clk-hdr > td{padding:13px 14px 11px;background:rgba(124,58,237,.06);}
body.dark .clk-hdr > td{background:rgba(255,255,255,.04);}
.who-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.who-id b{font-size:15px;font-weight:800;color:var(--ink);}
.who-id span{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:1px;}
.who-figs{display:flex;gap:10px;flex-wrap:wrap;}
.who-figs .fig{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:7px 13px;min-width:104px;}
body.dark .who-figs .fig{background:rgba(255,255,255,.05);}
.who-figs .fig i{display:block;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px;white-space:nowrap;}
.who-figs .fig b{font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap;}
.who-figs .fig b.acc{color:var(--accent);}
.who-figs .fig b.warn{color:#B45309;}  body.dark .who-figs .fig b.warn{color:#FBBF24;}
.who-figs .fig b.over{color:#15803D;}  body.dark .who-figs .fig b.over{color:#4ADE80;}
.who-figs .fig b.dim{font-size:12px;font-weight:700;color:var(--muted);}
.who-meta{margin-top:9px;font-size:11.5px;color:var(--muted);display:flex;align-items:center;
  flex-wrap:wrap;gap:2px;}
.who-meta b{font-weight:800;}
.who-meta b.ok{color:#15803D;}  body.dark .who-meta b.ok{color:#4ADE80;}
.who-meta b.rev{color:#B45309;} body.dark .who-meta b.rev{color:#FBBF24;}
.who-meta b.wip{color:#2563EB;} body.dark .who-meta b.wip{color:#93C5FD;}
.who-meta .sep{margin:0 7px;opacity:.5;}
.clk-bar{display:inline-block;width:88px;height:6px;border-radius:999px;background:var(--line);
  overflow:hidden;vertical-align:middle;margin-right:7px;}
.clk-bar i{display:block;height:100%;background:var(--accent);border-radius:999px;}
.clk-pct{font-weight:800;color:var(--ink);}
.clk-t.diff b{color:#B45309;} body.dark .clk-t.diff b{color:#FBBF24;}

/* ── task rows: fixed columns, everything aligned ── */
.clk-row td{padding:9px 14px;border-top:1px solid var(--line);font-size:12.5px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clk-row:hover td{background:rgba(124,58,237,.07);}
.c-id{font-weight:800;color:var(--accent);}
.c-title{color:var(--ink);}
.c-time{text-align:right;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.c-time.est{color:var(--muted);font-weight:700;}
.clk-st{display:inline-block;font-size:10px;font-weight:800;border-radius:7px;padding:3px 9px;
  color:#fff;background:#64748B;}
.clk-st.ok{background:#15803D;} .clk-st.rev{background:#B45309;} .clk-st.wip{background:#2563EB;}
.clk-none td{padding:11px 14px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);
  white-space:normal;}
.clk-warn{background:rgba(180,83,9,.12);border-left:4px solid #B45309;border-radius:10px;
  padding:12px 15px;font-size:12.5px;line-height:1.6;color:var(--ink);margin-bottom:14px;}
body.dark .clk-warn{background:rgba(251,191,36,.11);}
@media(max-width:820px){
  .c-figs .fig{margin-left:12px;}
  .c-figs .fig b{font-size:13px;}
  .clk-bar{display:none;}
}
@media(max-width:760px){
  .who-figs{width:100%;}
  .who-figs .fig{flex:1 1 96px;min-width:0;}
  .c-post{display:none;}
}

/* ── Nudge confirmation (v144) ─────────────────────────────────────── */
.ng-task{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f2f4f9;
  border-left:4px solid #B45309;border-radius:9px;padding:11px 13px;}
.ng-id{font-size:12px;font-weight:800;color:var(--brand);}
.ng-post{font-size:10.5px;font-weight:800;color:#fff;background:var(--brand2);border-radius:999px;padding:2px 8px;}
.ng-title{flex:1;min-width:140px;font-size:13.5px;font-weight:700;color:#1f2333;}
.ng-due{font-size:10.5px;font-weight:800;color:#fff;background:#B45309;border-radius:999px;padding:3px 9px;}
.ng-due.late{background:#B91C1C;}
.pn-sub{background:#f2f4f9;color:#6b7280;font-size:11px;font-weight:700;padding:7px 20px;
  border-bottom:1px solid #e6e9f0;letter-spacing:.2px;}

/* ── Client colour swatch (v148) ───────────────────────────────────── */
.cli-swatch{height:38px;border-radius:10px;border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}

/* ── Client filter + clickable client-card counts (v148) ───────────── */
.cl-filter{background:var(--card);border:1px solid var(--line);color:var(--ink);font:inherit;
  font-size:12.5px;font-weight:700;border-radius:9px;padding:7px 11px;cursor:pointer;outline:none;
  transition:border-color .14s;}
.cl-filter:hover,.cl-filter:focus{border-color:var(--accent);}
body.dark .cl-filter{background:rgba(255,255,255,.07);}
body.dark .cl-filter option{color:#0F172A;}
.cl-clear{background:none;border:none;color:var(--accent);font-size:16px;font-weight:800;
  cursor:pointer;padding:2px 7px;line-height:1;}
.cl-clear:hover{color:var(--ink);}
.cli-cnt{background:var(--soft);padding:3px 9px;border-radius:8px;cursor:pointer;
  transition:background .13s,color .13s,transform .1s;}
.cli-cnt:hover{background:var(--accent);color:var(--accent-fg);transform:translateY(-1px);}
body.dark .cli-cnt{background:rgba(255,255,255,.08);}

/* ===================================================================
   BBMM HUB — THEME v20  "Brave Bloom" (indigo/violet + gold accent)
   Brave Bloom M Media brand: deep indigo/violet carries trust & depth,
   warm gold marks highlights, wins and the primary accent — echoing the
   BBMM wordmark's blue-to-gold sweep. Overrides brand/accent only; the
   v15/v16 status colours (done/progress/review/etc.) stay untouched so
   task-board meaning stays consistent and readable.
   =================================================================== */
:root{
  /* Default palette = BBMM burgundy + brand gold. applyTheme() overwrites
     these three at runtime with the ACTIVE workspace's colours, so every
     rule below that uses var(--brand)/var(--brand2)/var(--accent) re-themes
     itself automatically when you switch client. Never hardcode brand hexes
     below this point — that was the bug that made all workspaces look alike. */
  --brand:#5C1523;
  --brand2:#8A2436;
  --accent:#C9A227;
  --accent-txt:#8A6A00;
}
body.dark{
  --accent-txt:#E6C767;
}
/* backdrop picks up whatever the active brand is, via colour-mix */
#water-bg{background:
  radial-gradient(120% 80% at 18% 8%, color-mix(in srgb, var(--brand2) 14%, transparent), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
  linear-gradient(180deg,#F8F7F8 0%,#F2EFF1 50%,#EDE8EA 100%)!important;}
body.dark #water-bg{background:
  radial-gradient(120% 80% at 18% 8%, color-mix(in srgb, var(--brand2) 22%, transparent), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
  linear-gradient(180deg,#141014 0%,#0E0B0E 100%)!important;}
body.dark{background:#0E0B0E!important;}

/* sidebar hub button + logo follow the active brand */
.sidebar .hub-btn{background:linear-gradient(135deg,var(--brand2),var(--brand))!important;color:#fff!important;
  border-color:var(--accent)!important;
  box-shadow:0 3px 12px rgba(0,0,0,.35)!important;
  border-color:color-mix(in srgb, var(--accent) 38%, transparent)!important;
  box-shadow:0 3px 12px color-mix(in srgb, var(--brand) 50%, transparent)!important;}
.sidebar .hub-btn.active{background:rgba(255,255,255,.14)!important;box-shadow:none!important;}
#navUserInitial{background:var(--accent)!important;color:#1a1400!important;}

/* post/task chips: post = accent, task = brand — distinct at a glance,
   and both re-tint per workspace */
.post-chip{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000))!important;
  color:#1a1400!important;box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 42%,transparent)!important;}
.post-chip:hover{filter:brightness(1.1);}
.task-chip{background:linear-gradient(135deg,var(--brand2),var(--brand))!important;
  box-shadow:0 1px 4px color-mix(in srgb,var(--brand) 42%,transparent)!important;}
.task-chip:hover{filter:brightness(1.15);}
.rc-streak{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000))!important;
  color:#1a1400!important;}

/* day-pill picker + primary buttons pick up the active brand gradient */
.day-pills input:checked + span{background:linear-gradient(135deg,var(--brand2),var(--brand))!important;}
.hub-btn-wrap ~ * .btn-primary, .btn-primary{background:linear-gradient(135deg,var(--brand2),var(--brand));}

/* login card: accent divider */
.login-card{border-top:4px solid var(--accent)!important;}
.login-card h2{color:#fff!important;}

/* ===================================================================
   BBMM HUB — THEME v21  "Futuristic Login & Chrome"
   Cinematic login backdrop (your "Growth is Accessible" brand visual)
   plus a subtle circuit-line motif echoing the BBMM logo, used sparingly
   so the working app underneath stays calm and legible. CSS/visual only —
   no markup or logic changed.
   =================================================================== */

/* Cinematic login backdrop: your brand hero image, darkened + tinted so
   the glass login card (already built above) stays readable on top. */
#loginOverlay{
  background:
    linear-gradient(120deg, rgba(10,8,10,.88) 0%, color-mix(in srgb, var(--brand) 62%, transparent) 45%, rgba(10,8,10,.82) 100%),
    url('../icons/login-hero.jpg?v=055') center 30%/cover no-repeat,
    var(--brand);
}
/* Subtle slow zoom on the backdrop only — never on the card itself,
   so the sign-in button stays perfectly stable and clickable. */
#loginOverlay::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 50% at 80% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  pointer-events:none;
}
.login-card{
  animation:bbmmCardIn .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes bbmmCardIn{
  from{opacity:0;transform:translateY(14px) scale(.98);}
  to{opacity:1;transform:none;}
}
.login-card small,
.login-card p[style]{color:rgba(255,255,255,.82)!important;}

/* Faint circuit-line watermark behind the sidebar — a quiet nod to the
   BBMM mark, low-contrast so it never competes with the nav labels. */
/* overflow-only \u2014 position/top/height are already set once, in the base
   .sidebar rule near the top of this file. Repeating them here used to win
   the cascade (same selector, later in the file) and silently cancel out
   the mobile @media(max-width:860px) rule that moves the sidebar off-screen
   via position:fixed. That's what caused the sidebar to stay fully visible
   next to the content on phones instead of collapsing behind the hamburger
   menu, squeezing everything down to an unreadably small size. */
.sidebar{overflow-y:auto;overflow-x:hidden;}
.sidebar::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
}
.sidebar > *{position:relative;z-index:1;}

/* Gentle breathing glow on the primary Hub button — draws the eye without
   being distracting; pauses politely on hover so it never fights a click. */
.sidebar .hub-btn{animation:bbmmGlow 3.6s ease-in-out infinite;}
.sidebar .hub-btn:hover{animation-play-state:paused;}
@keyframes bbmmGlow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 6px 16px color-mix(in srgb, var(--brand) 55%, transparent);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 8px 26px color-mix(in srgb, var(--accent) 38%, transparent);}
}

/* KPI / panel cards: slightly more lift on hover for a premium feel */
.kpi,.panel{transition:transform .18s ease, box-shadow .18s ease;}
.kpi:hover{transform:translateY(-2px);}

/* Reduced motion: honour it fully — no glow pulse, no card entrance animation */
@media (prefers-reduced-motion: reduce){
  .login-card{animation:none;}
  .sidebar .hub-btn{animation:none;}
  .kpi:hover{transform:none;}
}

/* ===================================================================
   BBMM HUB — THEME v22  "Brand imagery throughout"
   Cinematic hero strips on Dashboard and Admin Panel, built from your
   own brand visuals. Pure decoration — sits above the existing panels,
   nothing underneath it was touched.
   =================================================================== */
.bbmm-hero{
  position:relative;width:100%;height:180px;border-radius:16px;overflow:hidden;
  margin-bottom:16px;box-shadow:var(--shadow-l);
}
.bbmm-hero-sm{height:120px;}
.bbmm-hero img{
  width:100%;height:100%;object-fit:cover;object-position:75% 65%;display:block;
}
.bbmm-hero-fade{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(10,8,10,.88) 0%, rgba(10,8,10,.45) 45%, rgba(10,8,10,.15) 100%);
  background:linear-gradient(100deg, rgba(10,8,10,.88) 0%, color-mix(in srgb, var(--brand) 60%, transparent) 45%, rgba(10,8,10,.15) 100%);
}
.bbmm-hero-tag{
  position:absolute;left:22px;bottom:16px;color:#fff;font-weight:800;
  font-size:17px;letter-spacing:.2px;text-shadow:0 2px 10px rgba(0,0,0,.5);
  max-width:70%;
}
.bbmm-hero-logo{
  position:absolute!important;top:16px!important;right:18px!important;
  width:44px!important;height:44px!important;border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);
  object-fit:contain!important;
}
.bbmm-hero-sm .bbmm-hero-tag{font-size:14px;bottom:12px;left:18px;}
@media (max-width:640px){
  .bbmm-hero{height:130px;}
  .bbmm-hero-tag{font-size:14px;max-width:85%;}
  .bbmm-hero-logo{width:34px!important;height:34px!important;top:12px!important;right:12px!important;}
  .bbmm-hero-sm{height:96px;}
  .bbmm-hero-sm .bbmm-hero-tag{font-size:12px;}
}

/* ── One-time cinematic splash (BBMM gold-logo reveal) ──────────────
   Shown once ever per device, before the login card, then never again
   (localStorage flag). Skippable at any time by clicking/tapping. */
#bbmmSplash{
  position:fixed;inset:0;z-index:10000;background:#050310;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease;cursor:pointer;
}
#bbmmSplash video{width:100%;height:100%;object-fit:cover;}
#bbmmSplash .bbmm-splash-skip{
  position:absolute;right:18px;bottom:18px;color:rgba(255,255,255,.75);
  font-size:12px;font-weight:700;letter-spacing:.4px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  border-radius:20px;padding:8px 16px;backdrop-filter:blur(6px);
}
#bbmmSplash.hide{opacity:0;pointer-events:none;}

/* ===================================================================
   BBMM HUB — THEME v23  "App-wide polish"
   The topbar sits above EVERY screen, so re-branding it once lifts the
   whole app. Plus small, cheap touches (button gradients, row hover,
   snappier transitions) applied broadly rather than per-page images —
   keeps things fast while still feeling considered everywhere.
   =================================================================== */

/* Topbar: brand indigo/gold instead of generic purple, + a thin gold
   glow line at the bottom edge, + the same faint circuit watermark
   used on the sidebar for a cohesive shell. */
.topbar{
  background:var(--brand) !important;                       /* fallback */
  background:linear-gradient(120deg,
    rgba(11,10,26,.97) 0%,
    color-mix(in srgb, var(--brand) 96%, transparent) 45%,
    rgba(11,10,26,.97) 100%) !important;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 28%, transparent)!important;
  box-shadow:0 1px 0 color-mix(in srgb, var(--accent) 38%, transparent), 0 4px 28px rgba(0,0,0,.35)!important;
  position:relative;
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:3;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent), transparent);
}

/* Primary action buttons pick up the brand gradient wherever they appear
   (New Task, New Post, Save, etc — anything using .btn-primary or the
   accent-styled add button). */
#addBtn,.btn-primary,.btn-accent{
  background:linear-gradient(135deg,var(--brand2),var(--brand))!important;color:#fff!important;
  box-shadow:0 3px 12px color-mix(in srgb, var(--brand) 45%, transparent)!important;border:none!important;
}
#addBtn:hover,.btn-primary:hover,.btn-accent:hover{filter:brightness(1.12);}

/* Table rows: soft highlight + slight lift on hover instead of a flat
   background swap — reads as an interactive, modern surface. */
table tbody tr{transition:background-color .12s ease, box-shadow .12s ease;}
table tbody tr:hover{
  background:var(--soft)!important;
  box-shadow:inset 3px 0 0 var(--accent);
}

/* View transitions: a touch more motion than the original 4px fade,
   still fast enough to never feel laggy. */
@keyframes fade{
  from{opacity:0;transform:translateY(8px) scale(.995);}
  to{opacity:1;transform:none;}
}

/* Scrollbar tinted to match the brand instead of generic gray */
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand2),var(--brand));}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--accent),var(--brand2));}

@media (prefers-reduced-motion: reduce){
  @keyframes fade{from{opacity:1;}to{opacity:1;}}
}

/* ===================================================================
   BBMM HUB — Post "Links" picker (replaces the old fixed Instagram /
   Facebook / LinkedIn rows with one compact, expandable control)
   =================================================================== */
.link-chip-list{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;
}
.link-chip-list:empty{margin-bottom:0;}
.link-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--soft);border:1px solid var(--line);border-radius:20px;
  padding:5px 6px 5px 10px;font-size:12px;font-weight:700;color:var(--ink);
}
.plt-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:16px;height:16px;border-radius:50%;overflow:hidden;
}
.plt-badge svg{width:9px;height:9px;display:block;}
.link-chip-plat{white-space:nowrap;}
.link-chip-url{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--ink);text-decoration:none;font-weight:700;padding:0 2px;
}
.link-chip-url:hover{color:var(--brand2);text-decoration:underline;}
.link-chip-x{
  border:none;background:rgba(0,0,0,.08);color:var(--muted);cursor:pointer;
  width:18px;height:18px;border-radius:50%;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.link-chip-x:hover{background:var(--canc-bg);color:var(--canc);}
.link-add-row{display:flex;gap:8px;flex-wrap:wrap;}
.link-add-row select{
  flex:0 0 auto;min-width:150px;padding:8px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-size:12.5px;font-weight:700;
}
.link-add-row input[type="text"]{
  flex:1 1 200px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:12.5px;
}
body.dark .link-chip{background:rgba(255,255,255,.06);}
body.dark .link-chip-x{background:rgba(255,255,255,.10);}

/* ===================================================================
   BBMM HUB — Attachment previews (video thumbnails + click-to-preview)
   =================================================================== */
.att-thumb-video{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;cursor:pointer;
}
.att-thumb-video video{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.att-thumb-video .att-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;background:rgba(0,0,0,.35);
}
img.att-thumb{cursor:pointer;}
.att-preview-overlay{
  position:fixed;inset:0;z-index:20000;background:rgba(5,3,16,.92);
  display:flex;align-items:center;justify-content:center;
  animation:fade .15s ease;
}
.att-preview-close{
  position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);
}
.att-preview-close:hover{background:rgba(255,255,255,.22);}

/* ── Dashboard hero: video variant ──────────────────────────────────
   object-fit:cover was cropping this to ~29% of the actual frame (1100x618
   footage forced into a 260px-tall wide strip only shows a thin horizontal
   slice). Switched to contain so the full clip is always visible, letterboxed
   on a dark fill that matches the rest of the hero rather than cropped. */
.bbmm-hero-video{
  height:260px;
  background:#0E0B0E;
}
.bbmm-hero-video video{
  width:100%;height:100%;object-fit:contain;object-position:center center;display:block;
}
@media (max-width:900px){ .bbmm-hero-video{height:210px;} }
@media (max-width:640px){ .bbmm-hero-video{height:170px;} }
/* Respect reduced-motion: freeze on the poster frame instead of looping. */
@media (prefers-reduced-motion: reduce){
  .bbmm-hero-video video{display:none;}
  .bbmm-hero-video{
    background:#0E0B0E url('../icons/dash-hero-poster.jpg?v=055') center center/contain no-repeat;
  }
}

/* ===================================================================
   BBMM HUB — Drag & drop attachments
   The whole attachment row is a drop target. Styling only appears while
   a file is actually being dragged over it, so the form stays clean.
   =================================================================== */
.att-box{
  position:relative;padding:10px 12px;border-radius:10px;
  border:1.5px dashed transparent;transition:border-color .15s ease, background-color .15s ease;
}
.att-drop-hint{
  font-size:11.5px;font-weight:600;color:var(--muted);opacity:.75;user-select:none;
}
.att-box.dragover{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  background:rgba(201,162,39,.10);            /* fallback first */
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.att-box.dragover .att-drop-hint{
  color:var(--accent-txt);opacity:1;font-weight:800;
}
/* Suppress the hint on narrow screens — there's no drag-and-drop on phones,
   so the words would just be noise taking up room. */
@media (max-width:640px){ .att-drop-hint{display:none;} }

/* ── Admin → Client logo upload + preview ──────────────────────────── */
.cli-logo-row{display:flex;gap:14px;align-items:flex-start;}
.cli-logo-preview{
  width:64px;height:64px;flex:0 0 auto;border-radius:12px;overflow:hidden;
  border:1.5px dashed var(--line);background:#0E0B0E;
  display:flex;align-items:center;justify-content:center;
}
.cli-logo-preview img{width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box;}
.cli-logo-preview.empty::after{content:"logo";font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.5px;}
.cli-logo-preview.broken::after{content:"✕";font-size:18px;color:var(--canc);}
.cli-logo-preview.broken img{display:none;}
.cli-logo-controls{flex:1 1 auto;display:flex;flex-direction:column;gap:7px;min-width:0;}
.cli-logo-controls input[type="text"]{width:100%;box-sizing:border-box;}

/* ── World-clock: clickable city + timezone picker ─────────────────── */
.wc-city-btn{
  background:none;border:none;padding:0;font:inherit;cursor:pointer;color:inherit;
  display:inline-flex;align-items:center;gap:5px;font-weight:800;letter-spacing:-.2px;
}
.wc-city-btn:hover{color:var(--accent-txt);}
.wc-city-caret{font-size:9px;opacity:.55;font-style:normal;}
.wc-card{position:relative;}
.wc-picker{
  position:absolute;z-index:40;top:12px;left:12px;right:12px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-l);overflow:hidden;display:flex;flex-direction:column;
  max-height:260px;animation:fade .14s ease;
}
.wc-picker-hd{display:flex;gap:6px;padding:9px;border-bottom:1px solid var(--line);}
.wc-picker-hd input{
  flex:1;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;
  background:var(--soft);color:var(--ink);
}
.wc-picker-x{
  border:none;background:var(--soft);color:var(--muted);width:34px;border-radius:9px;
  font-size:20px;line-height:1;cursor:pointer;flex:0 0 auto;
}
.wc-picker-x:hover{background:var(--canc-bg);color:var(--canc);}
.wc-picker-list{overflow-y:auto;padding:6px;}
.wc-zopt{
  width:100%;text-align:left;border:none;background:none;cursor:pointer;
  padding:8px 10px;border-radius:9px;display:flex;flex-direction:column;gap:1px;color:var(--ink);
}
.wc-zopt:hover{background:var(--soft);}
.wc-zopt.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);}
.wc-zopt.sel{background:rgba(201,162,39,.16);}
.wc-zopt.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);}
.wc-zopt b{font-size:13px;font-weight:700;}
.wc-zopt span{font-size:11px;color:var(--muted);}
.wc-zopt-mine{
  border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border:1px dashed rgba(201,162,39,.45);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  background:rgba(201,162,39,.08);
  margin-bottom:6px;
}
.wc-zopt-mine b{color:var(--accent-txt);}

/* ===================================================================
   CANONICAL STATUS PALETTE — CALENDAR CARDS (.ev-*)
   Three older, mutually-inconsistent copies of these .ev-* rules exist
   earlier in this file from previous theme iterations. This final block
   wins the cascade (last + !important) and ties every calendar card to
   the SAME 8 hex values used for the status pills, so the color for a
   given status is identical whether it's a pill, a calendar card, or
   anywhere else. Each is a deep-toned gradient of the canonical hue
   (not the flat bright swatch) so the existing white overlay text
   (title/meta/badges) stays comfortably readable — verified >=4:1
   contrast on every stop. */
.ev-not  {background:linear-gradient(135deg,color-mix(in srgb,#6B7280 72%,black),color-mix(in srgb,#6B7280 42%,black))!important;}
.ev-work {background:linear-gradient(135deg,color-mix(in srgb,#3B82F6 72%,black),color-mix(in srgb,#3B82F6 42%,black))!important;}
.ev-rev  {background:linear-gradient(135deg,color-mix(in srgb,#F59E0B 72%,black),color-mix(in srgb,#F59E0B 42%,black))!important;}
.ev-redo {background:linear-gradient(135deg,color-mix(in srgb,#F97316 72%,black),color-mix(in srgb,#F97316 42%,black))!important;}
.ev-done {background:linear-gradient(135deg,color-mix(in srgb,#22C55E 72%,black),color-mix(in srgb,#22C55E 42%,black))!important;}
.ev-sched{background:linear-gradient(135deg,color-mix(in srgb,#8B5CF6 72%,black),color-mix(in srgb,#8B5CF6 42%,black))!important;}
.ev-pub  {background:linear-gradient(135deg,color-mix(in srgb,#14B8A6 72%,black),color-mix(in srgb,#14B8A6 42%,black))!important;}
.ev-canc {background:linear-gradient(135deg,color-mix(in srgb,#EF4444 72%,black),color-mix(in srgb,#EF4444 42%,black))!important;}

/* ===================================================================
   DIGITAL SPACE (hub) button \u2014 moved from the top of the sidebar down
   to the bottom, right above Admin Panel, and given its own distinct
   color so it doesn't blend into the brand-colored sidebar background
   the way it used to. This is the final, decisive rule (several older
   stacked copies of .sidebar .hub-btn exist earlier in this file from
   past theme iterations \u2014 this one wins via !important + last-in-file). */
.hub-btn-wrap{padding:0 0 10px;margin:0;}
.sidebar .hub-btn{
  background:linear-gradient(135deg,#6366F1,#4338CA)!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 2px 10px rgba(67,56,202,.45)!important;
}
.sidebar .hub-btn:hover{filter:brightness(1.1)!important;box-shadow:0 4px 14px rgba(67,56,202,.55)!important;}
.sidebar .hub-btn.active{background:rgba(255,255,255,.16)!important;color:#fff!important;box-shadow:none!important;}

/* Theme picker \u2014 5 color swatches replacing the old single dark-mode toggle */
.theme-picker{display:flex;align-items:center;gap:8px;padding:2px 0;}
.theme-swatch{
  width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
  cursor:pointer;padding:0;flex:none;transition:.15s;box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.theme-swatch:hover{transform:translateY(-2px) scale(1.08);}
.theme-swatch.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 1px 6px rgba(0,0,0,.4);}

/* Bold, heavy display headings to match the reference palette style
   (Apple/Ocean/Sunset/Earthy/Midnight cards use a very heavy, tight
   black-weight sans for their titles). */
#pageTitle,.modal-h h2,.cli-n,h1,h2,h3{font-weight:900!important;letter-spacing:-.01em;}

/* ===================================================================
   CRM PIPELINE (v041) — sidebar button, board, list and lead modal.
   Uses the active theme's variables, so it follows all 5 themes.
   =================================================================== */
.crm-btn-wrap{padding:0 0 10px;margin:0;}
.sidebar .crm-btn{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;border-radius:11px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.4px;
  color:#fff;background:linear-gradient(135deg,#10B981,#047857);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 10px rgba(4,120,87,.45);transition:filter .15s,transform .15s,box-shadow .15s;position:relative;}
.sidebar .crm-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 14px rgba(4,120,87,.55);}
.sidebar .crm-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.sidebar .crm-btn.active{background:rgba(255,255,255,.16);box-shadow:none;}
.crm-btn-i{font-size:15px;line-height:1;}
.crm-badge{display:none;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-left:4px;
  border-radius:10px;background:#fff;color:#047857;font-size:10.5px;font-weight:900;}
.sidebar .crm-btn.active .crm-badge{background:#10B981;color:#fff;}

.crm-wrap{display:flex;flex-direction:column;gap:14px;min-width:0;}
.crm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.crm-kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-align:left;
  display:flex;flex-direction:column;gap:3px;color:var(--ink);font-family:inherit;box-shadow:var(--shadow);}
.crm-kpi small{font-size:12px;color:var(--muted);font-weight:700;}
.crm-kpi b{font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1.15;}
.crm-kpi em{font-style:normal;font-size:11.5px;color:var(--muted);}
.crm-kpi.won b{color:#059669;}
button.crm-kpi{cursor:pointer;transition:border-color .15s,transform .15s;}
button.crm-kpi:hover{transform:translateY(-1px);}
.crm-kpi.due.hot{border-color:#F59E0B;}
.crm-kpi.due.hot b{color:#D97706;}
.crm-kpi.due.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset;}

.crm-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.crm-search{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:0 10px;min-width:220px;flex:1 1 220px;max-width:340px;}
.crm-search span{opacity:.6;font-size:13px;}
.crm-search input{border:none!important;background:transparent!important;outline:none;padding:9px 0!important;width:100%;
  color:var(--ink);font-family:inherit;font-size:13px;box-shadow:none!important;}
.crm-sel{width:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;
  font-family:inherit;font-size:12.5px;font-weight:600;max-width:180px;}
.crm-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);}
.crm-seg button{border:none;background:transparent;color:var(--muted);padding:8px 13px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;}
.crm-seg button.on{background:var(--brand);color:#fff;}
.crm-spacer{flex:1 1 auto;}
.crm-add{padding:9px 16px;}
.crm-warn{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;border-radius:10px;padding:9px 12px;font-size:12.5px;}

.crm-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;align-items:flex-start;}
.crm-col{--sc:#64748B;flex:0 0 268px;scroll-snap-align:start;background:var(--soft);border:1px solid var(--line);
  border-top:3px solid var(--sc);border-radius:12px;display:flex;flex-direction:column;max-height:calc(100vh - 290px);min-height:160px;
  transition:background .15s,box-shadow .15s;}
.crm-col.over{box-shadow:0 0 0 2px var(--sc) inset;background:var(--card);}
.crm-col-h{display:flex;align-items:center;gap:7px;padding:11px 12px 9px;font-size:13px;color:var(--ink);}
.crm-dot{width:8px;height:8px;border-radius:50%;background:var(--sc);flex:none;}
.crm-ct{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:0 7px;font-size:11px;font-weight:800;color:var(--muted);}
.crm-tot{margin-left:auto;font-size:12px;font-weight:800;color:var(--sc);}
.crm-col-b{padding:0 9px 10px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:60px;}
.crm-drop{border:1.5px dashed var(--line);border-radius:10px;padding:18px 10px;text-align:center;color:var(--muted);font-size:12px;}

.crm-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 11px;cursor:pointer;color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.06);transition:box-shadow .15s,transform .15s;}
.crm-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);}
.crm-card:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.crm-card.dragging{opacity:.45;}
.crm-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.crm-card-top b{font-size:13.5px;font-weight:800;line-height:1.3;word-break:break-word;}
.crm-val{font-size:12.5px;font-weight:900;color:#059669;white-space:nowrap;}
.crm-biz{font-size:12px;color:var(--muted);margin-top:2px;}
.crm-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;}
.crm-chip{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:7px;background:var(--soft);border:1px solid var(--line);color:var(--ink);}
.crm-chip.more{color:var(--muted);}
.crm-lostr{font-size:11.5px;color:#B91C1C;margin-top:6px;}
.crm-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:6px;}
.crm-fu{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap;}
.crm-fu.today{color:#D97706;}
.crm-fu.soon{color:#2563EB;}
.crm-fu.over{color:#DC2626;}
.crm-acts{display:flex;align-items:center;gap:5px;}
.crm-ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;
  border:1px solid var(--line);background:var(--card);text-decoration:none;font-size:12px;}
.crm-ico:hover{background:var(--soft);}
.crm-av{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:9.5px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;}

.crm-table{width:100%;border-collapse:collapse;font-size:13px;}
.crm-table th{text-align:left;font-size:11.5px;font-weight:800;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;}
.crm-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.crm-table tbody tr{cursor:pointer;}
.crm-table tbody tr:hover td{background:var(--soft);}
.crm-table small{color:var(--muted);}
.crm-pill{--sc:#64748B;display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;
  color:var(--sc);background:color-mix(in srgb,var(--sc) 13%,transparent);border:1px solid color-mix(in srgb,var(--sc) 35%,transparent);}

.crm-empty,.crm-setup{text-align:center;padding:40px 22px;}
.crm-empty h3,.crm-setup h3{font-size:18px;margin-bottom:8px;color:var(--ink);}
.crm-empty p,.crm-setup p{color:var(--muted);max-width:52ch;margin:0 auto 16px;font-size:13.5px;line-height:1.55;}
.crm-setup ol{text-align:left;max-width:56ch;margin:0 auto 18px;padding-left:20px;font-size:13.5px;line-height:1.7;color:var(--ink);}
.crm-fine{font-size:11.5px!important;color:var(--muted);margin-top:12px!important;}

.crm-modal{width:760px;}
.crm-track{display:flex;flex-wrap:wrap;gap:4px;}
.crm-step{--sc:#64748B;flex:1 1 auto;border:1px solid var(--line);background:var(--card);color:var(--muted);font-family:inherit;
  font-size:11.5px;font-weight:800;padding:8px 10px;cursor:pointer;border-radius:8px;transition:.15s;}
.crm-step:hover{border-color:var(--sc);color:var(--sc);}
.crm-step.past{background:color-mix(in srgb,var(--sc) 12%,transparent);color:var(--sc);border-color:color-mix(in srgb,var(--sc) 30%,transparent);}
.crm-step.cur{background:var(--sc);color:#fff;border-color:var(--sc);box-shadow:0 2px 8px color-mix(in srgb,var(--sc) 45%,transparent);}
.crm-togs{display:flex;flex-wrap:wrap;gap:6px;}
.crm-tog{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.crm-tog.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.crm-quick{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.crm-quick button{border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:7px;padding:3px 8px;
  font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;}
.crm-quick button:hover{border-color:var(--brand);}
.crm-log-add{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.crm-log-add input{flex:1 1 240px;}
.crm-acts-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;}
.crm-act{display:flex;gap:10px;font-size:13px;color:var(--ink);padding:8px 10px;border-radius:9px;background:var(--soft);border:1px solid var(--line);}
.crm-act small{color:var(--muted);font-size:11px;}
.crm-act-i{flex:none;width:20px;text-align:center;}
.crm-act.stage .crm-act-i{color:#7C3AED;}

@media(max-width:900px){ .crm-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:600px){
  .crm-kpi b{font-size:18px;}
  .crm-search{max-width:none;flex-basis:100%;}
  .crm-sel{flex:1 1 40%;max-width:none;}
  .crm-spacer{display:none;}
  .crm-add{flex:1 1 100%;}
  .crm-col{flex-basis:84vw;max-height:none;}
  .crm-step{flex:1 1 30%;}
}
@media(prefers-reduced-motion:reduce){ .crm-card,.crm-kpi,.sidebar .crm-btn,.crm-step{transition:none;} }

/* v042 — services grouped by category in the lead form */
.crm-svc-g{margin-bottom:10px;}
.crm-svc-g:last-child{margin-bottom:0;}
.crm-svc-g small{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin:0 0 5px 2px;}
.crm-sel{max-width:210px;}

/* ===================================================================
   CRM v043 — asked-for / upsell sections, quote builder, pricing settings
   =================================================================== */
.crm-sec{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;}
.crm-sec h4{font-size:14px;font-weight:900;color:var(--ink);margin:0;}
.crm-sec h4 span{font-weight:600;color:var(--muted);font-size:12.5px;}
.crm-auto{display:inline-block;font-size:10px;font-weight:800;text-transform:none;letter-spacing:0;padding:1px 7px;border-radius:7px;
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);margin-left:4px;}
body.dark .crm-auto{color:var(--accent);}
.crm-tog.up.on{background:#059669;border-color:#059669;}
.crm-tog.dis{opacity:.35;cursor:not-allowed;}

.crm-q-empty{padding:16px;border:1.5px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13px;text-align:center;}
.crm-quote{display:flex;flex-direction:column;gap:12px;}
.crm-pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.crm-pkg{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;transition:border-color .15s;}
.crm-pkg:hover{border-color:var(--brand);}
.crm-pkg small{font-size:12px;font-weight:800;}
.crm-pkg small em{font-style:normal;font-weight:600;color:var(--muted);}
.crm-pkg b{font-size:18px;font-weight:900;letter-spacing:-.02em;}
.crm-pkg span{font-size:11px;color:var(--muted);}
.crm-fit{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;}
.crm-fit.ok{background:#D1FAE5;color:#065F46;}
.crm-fit.near{background:#FEF3C7;color:#92400E;}
.crm-fit.over{background:#FEE2E2;color:#991B1B;}
.crm-q-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.crm-q-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;}
.crm-q-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:620px;}
.crm-q-table th{text-align:left;font-size:11px;font-weight:800;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
.crm-q-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink);}
.crm-q-table tr:last-child td{border-bottom:none;}
.crm-q-table td small{display:block;color:var(--muted);font-size:11px;margin-top:2px;}
.crm-q-table select{width:auto;min-width:100px;padding:6px 8px;}
.crm-q-table input{width:110px;padding:6px 8px;}
.crm-q-cp{font-weight:900;white-space:nowrap;}
.crm-q-up{border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:7px;padding:4px 8px;font-family:inherit;
  font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
.crm-q-up:hover{border-color:#059669;color:#059669;}
.crm-q-opts{display:flex;flex-wrap:wrap;gap:8px 18px;}
.crm-inl{display:inline-flex!important;align-items:center;gap:6px;text-transform:none!important;letter-spacing:0!important;
  font-size:12.5px!important;font-weight:700!important;color:var(--ink)!important;margin:0!important;}
.crm-inl input[type=number]{width:70px;padding:6px 8px;}
.crm-inl input[type=checkbox]{width:16px;height:16px;padding:0;}
.crm-q-sum{display:flex;flex-wrap:wrap;gap:8px;}
.crm-q-sum>div{flex:1 1 120px;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:9px 12px;display:flex;flex-direction:column;gap:2px;}
.crm-q-sum small{font-size:11.5px;color:var(--muted);font-weight:700;}
.crm-q-sum b{font-size:16px;font-weight:900;color:var(--ink);}
.crm-q-sum .big{border-color:var(--brand);}
.crm-q-sum .big b{font-size:19px;}
.crm-q-sum .earn{background:color-mix(in srgb,#059669 9%,transparent);border-color:color-mix(in srgb,#059669 35%,transparent);flex-basis:200px;}
.crm-q-sum .earn b{color:#059669;}
.crm-q-sum .earn em{font-style:normal;font-size:11px;color:var(--muted);}
.crm-bud{border:1px solid var(--line);border-radius:11px;padding:10px 12px;}
.crm-bud-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink);margin-bottom:7px;}
.crm-bud-track{height:8px;border-radius:5px;background:var(--soft);overflow:hidden;}
.crm-bud-track i{display:block;height:100%;border-radius:5px;}
.crm-bud.ok b{color:#059669;} .crm-bud.ok i{background:#10B981;}
.crm-bud.near b{color:#D97706;} .crm-bud.near i{background:#F59E0B;}
.crm-bud.over b{color:#DC2626;} .crm-bud.over i{background:#EF4444;}

.crm-uptop{font-size:13px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.crm-uptop b{color:#059669;}
.crm-uplist{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.crm-uprow{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink);}
.crm-uphead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;cursor:pointer;}
.crm-uphead b{font-size:14px;}
.crm-uphead>span:not(.crm-pill){color:var(--muted);font-size:12.5px;}
.crm-uphead small{flex-basis:100%;color:var(--muted);font-size:11.5px;}
.crm-upchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.crm-upc{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 4px 4px 10px;border-radius:999px;
  background:color-mix(in srgb,#059669 10%,transparent);border:1px solid color-mix(in srgb,#059669 30%,transparent);}
.crm-upc em{font-style:normal;color:#059669;font-weight:800;}
.crm-upc button{border:none;background:#059669;color:#fff;border-radius:999px;padding:3px 9px;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;}
.crm-upnote{font-size:12.5px;color:var(--muted);margin-top:8px;}

.crm-setup-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.crm-pmodal{width:880px;}
.crm-pwrap{padding:16px 20px;display:flex;flex-direction:column;gap:14px;}
.crm-pintro{font-size:13px;color:var(--muted);line-height:1.55;margin:0;max-width:80ch;}
.crm-pintro b{color:var(--ink);}
.crm-ptools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.crm-padd{display:flex;gap:8px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px;}
.crm-padd input{flex:2 1 220px;} .crm-padd select{flex:1 1 130px;width:auto;}
.crm-pg h4{font-size:14px;font-weight:900;color:var(--ink);margin:6px 0 8px;}
.crm-pitem{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--card);}
.crm-pitem-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.crm-pitem-h b{font-size:13.5px;color:var(--ink);}
.crm-pitem-h select{width:auto;margin-left:auto;padding:5px 8px;font-size:12px;}
.crm-p-del{border:none;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;}
.crm-p-del:hover{color:#DC2626;}
.crm-ptable{width:100%;border-collapse:collapse;font-size:12.5px;}
.crm-ptable th{text-align:left;font-size:10.5px;font-weight:800;color:var(--muted);padding:4px 6px;white-space:nowrap;}
.crm-ptable td{padding:4px 6px;color:var(--ink);}
.crm-ptable td:first-child{font-weight:800;width:72px;}
.crm-ptable input{padding:6px 8px;}
.crm-ptable input[type=number]{width:110px;}
.crm-p-tot{font-weight:900;white-space:nowrap;width:100px;}
@media(max-width:700px){
  .crm-pkgs{grid-template-columns:1fr;}
  .crm-ptable thead{display:none;}
  .crm-ptable tr{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px 0;border-bottom:1px solid var(--line);}
  .crm-ptable td:first-child,.crm-ptable td:last-child{grid-column:1/-1;width:auto;}
  .crm-ptable input[type=number]{width:100%;}
}

/* ===================================================================
   CRM v044 — branded quote preview & quote branding settings
   =================================================================== */
.crm-qmodal{width:900px;}
.crm-qtools{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);}
.crm-qstage{background:#3C3C3C;padding:18px 12px;border-radius:0 0 16px 16px;display:flex;justify-content:center;max-height:calc(100vh - 210px);overflow:auto;}
.crm-qpage{box-shadow:0 10px 40px rgba(0,0,0,.45);background:#fff;flex:none;overflow:hidden;}
.crm-bmodal{width:720px;}
.crm-blogo{display:flex;gap:16px;align-items:center;}
.crm-blogo-prev{width:200px;height:96px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(115deg,#141414 55%,#501010);padding:12px;}
.crm-blogo-prev img{max-width:100%;max-height:100%;object-fit:contain;}
.crm-blogo-prev span{color:#C8C8B4;font-size:12px;}
.crm-bsw{display:flex;flex-wrap:wrap;gap:8px;}
.crm-bsw span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 4px;background:var(--card);}
.crm-bsw i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.12);}
.crm-bsw em{font-style:normal;color:var(--muted);font-weight:600;font-size:11px;}
@media(max-width:600px){ .crm-blogo{flex-direction:column;align-items:flex-start;} .crm-qstage{max-height:none;} }

/* ===================================================================
   CRM v046 — WhatsApp bar, phone/A4 switch, add-ons, new pricing screen
   =================================================================== */
.crm-qwa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,#25D366 8%,transparent);}
.crm-qwa-l{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--ink);margin-right:auto;}
.crm-wab{border:1px solid #25D366;background:var(--card);color:#128C7E;border-radius:999px;padding:7px 14px;font-family:inherit;
  font-size:12.5px;font-weight:800;cursor:pointer;transition:filter .15s;}
.crm-wab.main{background:#25D366;color:#fff;}
.crm-wab:hover{filter:brightness(1.05);}
.crm-wab:disabled{opacity:.45;cursor:not-allowed;}
.crm-wa-btn{border-color:#25D366!important;}
.crm-qpage iframe{display:block;}
.crm-pkg-fee{font-size:11px;font-weight:800;color:#059669;}
.crm-q-table tr.addon td{background:color-mix(in srgb,var(--brand) 4%,transparent);}
.crm-dash{color:var(--muted);}
.crm-qty{display:inline-flex!important;align-items:center;gap:6px;font-size:12px!important;text-transform:none!important;letter-spacing:0!important;margin:0!important;color:var(--ink)!important;}
.crm-qty input{width:64px!important;}
.crm-q-addon{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.crm-q-addon select{flex:1 1 260px;width:auto;}
.crm-q-addon input{width:72px;}
.crm-pg h4 .crm-fine{font-size:12px!important;}
details.crm-pitem{padding:0;}
details.crm-pitem>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:11px 12px;cursor:pointer;}
details.crm-pitem>summary::-webkit-details-marker{display:none;}
details.crm-pitem>summary b{font-size:13.5px;color:var(--ink);}
.crm-psum{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;}
.crm-pchev{color:var(--muted);transition:transform .15s;}
details[open].crm-pitem .crm-pchev{transform:rotate(180deg);}
.crm-pinner{padding:0 12px 12px;border-top:1px solid var(--line);}
.crm-pmeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;padding:12px 0;}
.crm-pmeta label,.crm-ptier label{display:flex!important;flex-direction:column;gap:4px;}
.crm-pmeta .w2{grid-column:span 3;}
.crm-pmeta .crm-pchk{flex-direction:row!important;align-items:center;gap:6px;align-self:end;padding-bottom:8px;}
.crm-pchk input{width:16px;height:16px;padding:0;}
.crm-ptiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.crm-ptier{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--soft);display:flex;flex-direction:column;gap:8px;}
.crm-ptier-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
.crm-ptier-h b{font-size:13px;color:var(--ink);}
.crm-ptier .crm-p-tot{font-size:11.5px;font-weight:800;color:#059669;width:auto;}
.crm-pmoney{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:6px;}
.crm-pmoney input{padding:6px 8px;}
.crm-ptier textarea{min-height:96px;font-size:12px;}
.crm-ptier label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;}
.crm-prm{text-align:right;margin-top:10px;}
.crm-p-del-btn{border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.crm-p-del-btn:hover{color:#DC2626;}
.crm-atable{width:100%;border-collapse:collapse;font-size:12.5px;min-width:760px;}
.crm-atable th{text-align:left;font-size:10.5px;font-weight:800;color:var(--muted);padding:8px 6px;white-space:nowrap;}
.crm-atable td{padding:4px 6px;}
.crm-atable input,.crm-atable select{padding:6px 8px;}
.crm-atable .crm-a-rate{width:90px;} .crm-atable .crm-a-unit{width:90px;}
@media(max-width:760px){
  .crm-ptiers,.crm-pmeta{grid-template-columns:1fr;}
  .crm-pmeta .w2{grid-column:auto;}
  .crm-psum{display:none;}
  .crm-qwa-l{flex-basis:100%;}
}

/* ===================================================================
   CRM v047 — box-style service picker (categories → services)
   =================================================================== */
.svp{display:flex;flex-direction:column;gap:12px;}
.svp-hint{font-size:12.5px;color:var(--muted);padding:2px 2px 0;}
.svp-sel{border:1px solid var(--brand);border-radius:12px;padding:10px 12px;background:color-mix(in srgb,var(--brand) 5%,var(--card));}
.svp-sel-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.svp-sel-h b{font-size:13px;color:var(--ink);}
.svp-sel-h span{font-size:12px;color:var(--muted);font-weight:700;}
.svp-chips{display:flex;flex-wrap:wrap;gap:6px;}
.svp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:4px 4px 4px 11px;font-size:12px;font-weight:700;color:var(--ink);}
.svp-chip em{font-style:normal;font-weight:600;font-size:10.5px;color:var(--muted);}
.svp-chip button{border:none;background:var(--soft);color:var(--muted);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;}
.svp-chip button:hover{background:#FEE2E2;color:#B91C1C;}
.svp-search{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--card);}
.svp-search span{opacity:.6;font-size:13px;}
.svp-search input{border:none!important;background:transparent!important;box-shadow:none!important;padding:9px 0!important;outline:none;}
.svp-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.svp-cat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s;}
.svp-cat:hover{border-color:var(--brand);transform:translateY(-1px);}
.svp-cat:focus-visible,.svp-svc:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.svp-cat.open{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--card));box-shadow:0 2px 10px color-mix(in srgb,var(--brand) 18%,transparent);}
.svp-ico{font-size:20px;line-height:1;margin-bottom:4px;}
.svp-cat b{font-size:13px;font-weight:800;line-height:1.25;}
.svp-cat small{font-size:11px;color:var(--muted);font-weight:600;}
.svp-n{position:absolute;top:8px;right:8px;min-width:20px;height:20px;border-radius:10px;background:var(--brand);color:#fff;
  font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 6px;}
.svp-panel{border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:12px;animation:svpIn .18s ease;}
@keyframes svpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.svp-panel-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;}
.svp-panel-h b{font-size:13.5px;color:var(--ink);}
.svp-close{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;}
.svp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;}
.svp-svc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 40px 12px 12px;color:var(--ink);transition:border-color .15s,box-shadow .15s;}
.svp-svc:hover{border-color:var(--brand);}
.svp-svc.on{border-color:#059669;background:color-mix(in srgb,#059669 7%,var(--card));box-shadow:0 0 0 1px #059669 inset;}
.svp-check{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:var(--muted);background:var(--card);}
.svp-svc.on .svp-check{background:#059669;border-color:#059669;color:#fff;}
.svp-svc b{font-size:13px;font-weight:800;line-height:1.3;}
.svp-price{font-size:14px;font-weight:900;color:var(--ink);letter-spacing:-.01em;}
.svp-price em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);}
.svp-bill{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;}
.svp-bill.mon{background:#DBEAFE;color:#1E40AF;}
.svp-bill.one{background:#FEF3C7;color:#92400E;}
.svp-svc small{font-size:11px;color:var(--muted);line-height:1.4;}
.svp-svc small.svp-ad{color:#B45309;font-weight:700;}
@media(max-width:760px){ .svp-cats{grid-template-columns:repeat(2,minmax(0,1fr));} .svp-grid{grid-template-columns:1fr;} }
@media(prefers-reduced-motion:reduce){ .svp-panel{animation:none;} .svp-cat{transition:none;} }
/* v047 — let lead-form grid cells shrink on phones (wide quote table scrolls inside its own box) */
.crm-modal .mbody{min-width:0;}
.crm-modal .mbody>*{min-width:0;max-width:100%;}
.crm-modal .crm-q-wrap{max-width:100%;}
@media(max-width:600px){ .crm-modal .mbody{grid-template-columns:minmax(0,1fr)!important;} .crm-modal .mbody>*{grid-column:1/-1;} .crm-pkgs{grid-template-columns:1fr;} }

/* v048 — editable plan names, plan delete/add, discount balance */
.crm-ptier-h{gap:6px!important;}
.crm-p-name{font-weight:800;font-size:13px;padding:6px 8px;flex:1;min-width:0;}
.crm-p-rmplan{border:1px solid var(--line);background:var(--card);color:var(--muted);width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:16px;flex:none;}
.crm-p-rmplan:hover{color:#DC2626;border-color:#DC2626;}
.crm-pbal{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:6px 8px;}
.crm-pbal b{color:var(--ink);}
.crm-p-addplan{border:1.5px dashed var(--line);background:transparent;color:var(--muted);border-radius:10px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;min-height:80px;}
.crm-p-addplan:hover{border-color:var(--brand);color:var(--brand);}
.crm-q-table .crm-q-dis{width:90px;}
.svp-svc small.svp-plans{font-weight:700;color:var(--ink);opacity:.6;}
/* v051 — yearly / custom billing tags */
.svp-bill.yr{background:#EDE9FE;color:#5B21B6;}
.svp-bill.cus{background:#DCFCE7;color:#166534;}

/* ===================================================================
   CRM v052 — Client Discovery Call
   =================================================================== */
.crm-disc-btn{border-color:var(--brand)!important;color:var(--brand)!important;font-weight:800;}
body.dark .crm-disc-btn{color:var(--accent)!important;border-color:var(--accent)!important;}
.crm-dbadge{font-size:11px;margin-left:2px;}
.crm-drow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--soft);
  border:1px dashed var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--ink);}
.crm-dmodal{width:860px;}
.crm-dmodal #crmDBody{max-height:calc(100vh - 170px);overflow-y:auto;}
.dwrap{padding:16px 20px;display:flex;flex-direction:column;gap:18px;}
.dhow{font-size:12.5px;color:var(--muted);margin:0;font-style:italic;}
.dsec h3{font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:0 0 10px;
  padding-bottom:6px;border-bottom:2px solid var(--brand);display:inline-block;}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
.dgrid label{display:flex!important;flex-direction:column;gap:5px;}
.dgrid .w2{grid-column:1/-1;}
.dqs{display:flex;flex-direction:column;gap:10px;}
.dq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.dq-h{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.dq-n{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:11.5px;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none;}
.dq-s{font-size:11px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;}
body.dark .dq-s{color:var(--accent);}
.dq-q{font-size:14px;font-weight:700;color:var(--ink);margin:2px 0 8px;line-height:1.45;}
.dq-o{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.dq-o.wrap{margin:6px 0 12px;}
.dq-chip{border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:999px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.dq-chip:hover{border-color:var(--brand);}
.dq-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.dq-chip.svc.sug:not(.on){border-color:#D97706;background:#FEF3C7;color:#92400E;}
.dq-chip.svc.on{background:#059669;border-color:#059669;}
.dq-bud{display:flex;align-items:center;gap:6px;margin-bottom:8px;max-width:320px;}
.dq-bud span{font-weight:900;color:var(--ink);}
.dq-bud em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;}
.dq-a{min-height:52px;}
.dq-t{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:6px;}
.dsug{background:color-mix(in srgb,#F59E0B 10%,var(--card));border:1px solid color-mix(in srgb,#F59E0B 40%,transparent);border-radius:10px;
  padding:10px 12px;font-size:12.5px;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;}
.dsug span{color:var(--muted);}
.dlab{margin-top:4px;}
.dhint{font-size:11.5px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600;}
.dlink{border:none;background:none;color:var(--brand);font-weight:800;cursor:pointer;font-family:inherit;font-size:11.5px;text-decoration:underline;padding:0 2px;}
@media(max-width:640px){ .dgrid{grid-template-columns:minmax(0,1fr);} .dwrap{padding:14px;} .crm-drow{flex-direction:column;align-items:stretch;} }
/* v053 — quote section appears only when the quote has services / add-ons */
.crm-qbox.empty{display:none!important;}
.crm-qhead{margin-bottom:12px;}
/* v054 — discount fields only when used */
.crm-linkbtn{border:none;background:none;color:var(--brand);font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;padding:4px 2px;text-decoration:underline;}
body.dark .crm-linkbtn{color:var(--accent);}
.crm-pkgs.two{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ===== WhatsApp quick add (v056) ===== */
.waq-fab{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:240;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;
  background:#25D366;color:#fff;box-shadow:0 8px 22px rgba(18,140,74,.38),0 2px 6px rgba(0,0,0,.18);
  -webkit-tap-highlight-color:transparent;transition:transform .15s ease}
.waq-fab:active{transform:scale(.92)}
.waq-fab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.waq-plus{position:absolute;top:-2px;right:-2px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
  font:800 16px/22px system-ui,sans-serif;text-align:center;border:2px solid #fff}
.waq-modal{width:420px}
.waq-h{background:#128C4A}
#waqBody{padding:18px 20px 20px}
.waq-lab{display:block;font-size:12px;font-weight:700;color:var(--muted,#6b6466);margin:4px 0 6px}
.waq-in{width:100%;font-size:17px;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.waq-in:focus{outline:none;border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.waq-row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.waq-row .btn{padding:11px 18px}
.waq-go{background:#128C4A;color:#fff;font-weight:800}
.waq-msg{background:#FFF6E5;color:#7a4b00;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.waq-ok{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.waq-ok b{display:block;font-size:15px}
.waq-ok small,.waq-dupe small{display:block;font-size:12.5px;color:var(--muted,#6b6466);margin-top:2px}
.waq-tick{flex:0 0 34px;height:34px;border-radius:50%;background:#25D366;color:#fff;font-weight:900;font-size:18px;
  display:flex;align-items:center;justify-content:center}
.waq-dupe{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin-top:8px}
.waq-how{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted,#6b6466)}
.waq-how ol{margin:6px 0 0 18px;padding:0}
.waq-how li{margin:3px 0}
.crm-wa-btn{background:#128C4A!important;color:#fff!important;border-color:#128C4A!important;font-weight:800}
body.dark .waq-msg{background:#3a2c10;color:#ffd48a}
@media print{.waq-fab{display:none!important}}
@media (prefers-reduced-motion:reduce){.waq-fab{transition:none}}

/* ===== CRM voice notes (v057) ===== */
.crm-au{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--soft)}
.crm-au-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crm-au-rec{background:var(--brand);color:#fff;font-weight:800;padding:10px 16px}
.crm-au-stop{background:#DC2626;color:#fff;font-weight:800;padding:10px 16px;display:inline-flex;align-items:center;gap:8px}
.crm-au-stop b{font-variant-numeric:tabular-nums;font-weight:800}
.crm-au-dot{width:10px;height:10px;border-radius:50%;background:#fff;animation:crmAuPulse 1s ease-in-out infinite}
@keyframes crmAuPulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.crm-au-dot{animation:none}}
.crm-au-file{cursor:pointer;margin:0}
.crm-au-status{font-size:12.5px;font-weight:700;color:var(--muted)}
.crm-au-status.ok{color:#059669}.crm-au-status.err{color:#DC2626}.crm-au-status.busy{color:var(--brand)}
body.dark .crm-au-status.busy{color:var(--accent)}
.crm-au-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.crm-au-item{display:grid;grid-template-columns:minmax(0,260px) 1fr auto;gap:10px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.crm-au-item audio{width:100%;height:36px}
.crm-au-meta{min-width:0}
.crm-au-lab{width:100%;border:1px solid transparent;background:transparent;font-weight:700;font-size:13.5px;padding:4px 6px;border-radius:7px;color:var(--ink)}
.crm-au-lab:hover,.crm-au-lab:focus{border-color:var(--line);background:var(--soft);outline:none}
.crm-au-meta small{display:block;font-size:11.5px;color:var(--muted);padding:0 6px}
.crm-au-del{border:none;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px}
.crm-au-del:hover{color:#DC2626;background:rgba(220,38,38,.08)}
.crm-q-del:hover{color:#DC2626!important;border-color:#DC2626!important}
@media (max-width:640px){
  .crm-au-item{grid-template-columns:1fr auto}
  .crm-au-item audio{grid-column:1 / -1}
}

/* ===== Latest note on CRM cards (v058) ===== */
.crm-note{display:flex;gap:6px;align-items:flex-start;margin-top:7px;padding:6px 8px;border-radius:8px;
  background:var(--soft);border-left:3px solid var(--accent);font-size:12.5px;line-height:1.35;color:var(--ink)}
.crm-note-i{flex:0 0 auto;font-size:11px;opacity:.7;margin-top:1px}
.crm-note-t{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.crm-note small{flex:0 0 auto;font-size:10.5px;color:var(--muted);white-space:nowrap;margin-top:1px}
.crm-note-td{max-width:240px;font-size:12.5px}
.crm-note-td small{color:var(--muted)}

/* ===== Country code + duplicates (v059) ===== */
.crm-phone{display:flex;gap:6px}
.crm-phone .crm-cc{flex:0 0 118px;min-width:0}
.crm-phone input{flex:1;min-width:0}
.waq-phone{display:flex;gap:8px}
.waq-phone .waq-cc{flex:0 0 120px;font-size:15px;padding:12px 8px}
.waq-tip{font-size:11.5px;color:var(--muted);margin-top:6px}
.crm-dupflag{display:inline-block;margin-bottom:6px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:800;
  background:#FEF3C7;color:#92400E;border:1px solid #FCD34D}
body.dark .crm-dupflag{background:#3a2c10;color:#ffd48a;border-color:#7a5a1a}

/* ===== Follow-up time + reminders (v060) ===== */
.crm-fu-row{display:flex;gap:6px}
.crm-fu-row input[type=date]{flex:1;min-width:0}
.crm-fu-row input[type=time]{flex:0 0 118px;min-width:0}
.crm-rem-modal{width:520px}
#crmRemBody{padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow:auto}
.crm-rem-item{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card)}
.crm-rem-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.crm-rem-top b{font-size:15px}
.crm-rem-top small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.crm-rem-due{flex:0 0 auto;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.crm-rem-due.over{background:#FEE2E2;color:#B91C1C}
.crm-rem-due.today{background:#FEF3C7;color:#92400E}
body.dark .crm-rem-due.over{background:#3b1414;color:#fca5a5}
body.dark .crm-rem-due.today{background:#3a2c10;color:#ffd48a}
.crm-rem-stage{margin-top:6px}
.crm-rem-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.crm-rem-snooze{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12.5px;background:var(--card);color:var(--ink)}
.crm-rem-done{color:#059669!important;border-color:#059669!important;font-weight:800}

/* ===== Service drop-downs (v061) ===== */
.svp-dd{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.svp-dd label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:5px}
.svp-dd select{width:100%}
.svp-dd select:disabled{opacity:.55}
@media (max-width:640px){.svp-dd{grid-template-columns:1fr}}

/* =====================================================================
   CRM REFRESH (v062) — cleaner layout, every screen size, smoother
   ===================================================================== */
/* -- performance: no glass blur or background motion while in the CRM -- */
#crmOverlay,#svcOverlay,#waqOverlay,#crmRemOverlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.crm-modal,.svc-modal,.waq-modal,.crm-rem-modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--card)!important}
.crm-wrap .btn,.crm-modal .btn,.svc-modal .btn,.waq-modal .btn,.crm-rem-modal .btn{backdrop-filter:none!important}
body.crm-view .wb-icon,body.crm-view .wb-caustic,body.crm-view .sm-icon,
body.crm-view .main::before,body.crm-view .main::after,body.crm-view .content::before{animation-play-state:paused!important}
.toast{white-space:normal!important;max-width:calc(100vw - 32px);text-align:center}

/* -- page rhythm -- */
.crm-wrap{gap:16px}
.crm-kpi{border-radius:14px;box-shadow:none}
.crm-kpi b{font-variant-numeric:tabular-nums}
.crm-bar{gap:8px}
.crm-bar .btn,.crm-sel,.crm-seg{min-height:38px}
.crm-search{min-height:38px}

/* -- board -- */
.crm-board{gap:14px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:14px}
.crm-col{flex:0 0 288px;border-radius:16px;border-top-width:3px}
.crm-col-h{position:sticky;top:0;z-index:1;background:inherit;border-radius:16px 16px 0 0;padding:12px 14px 10px}
.crm-col-b{padding:0 10px 12px;gap:10px;overscroll-behavior:contain}
.crm-card{border-radius:12px;padding:12px;box-shadow:0 1px 2px rgba(16,24,40,.05);contain:layout style;
  transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
@media (hover:hover){
  .crm-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,24,40,.09);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
}
.crm-card-top b{font-size:14px}
.crm-ico{width:30px;height:30px;border-radius:9px}
.crm-av{width:26px;height:26px}
@media (pointer:coarse){ .crm-ico{width:34px;height:34px} .crm-av{width:30px;height:30px} }

/* -- lead form -- */
.crm-modal{width:820px}
.crm-modal .mbody{gap:14px 16px;padding:18px 22px}
.crm-modal .crm-sec{margin-top:6px;padding-top:14px}
.crm-modal .mfoot{padding:14px 22px}

/* -- services: button in the form -- */
.svp-open{display:flex;align-items:center;gap:12px;width:100%;margin-top:8px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:14px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;-webkit-tap-highlight-color:transparent}
.svp-open.empty{border-style:dashed;padding:18px 14px;margin-top:0}
.svp-open:hover{border-color:var(--brand)}
.svp-open:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.svp-open-i{flex:none;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}
.svp-open b{display:block;font-size:14px;font-weight:800}
.svp-open small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
body.dark .svp-open-i{background:var(--accent);color:#1a1206}

/* -- services: the pop-up -- */
.svc-ov{align-items:center}
.svc-modal{width:min(1000px,100%);max-height:min(88vh,920px);display:flex;flex-direction:column;overflow:hidden;margin:auto!important;
  border-radius:20px!important;opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);animation:none!important}
.svc-ov.in .svc-modal{opacity:1;transform:none}
.svc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px}
.svc-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.svc-title h2{font-size:19px;font-weight:900;color:var(--ink);letter-spacing:-.01em;margin:0}
#svcCount:not(:empty){font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--brand);color:#fff}
.svc-x{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.svc-x:hover{background:var(--card)}
.svc-tools{padding:0 20px 12px;border-bottom:1px solid var(--line)}
.svc-search{display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:0 12px;margin:0;
  text-transform:none;letter-spacing:0;font-size:14px;color:var(--muted)}
.svc-search input{border:none!important;background:transparent!important;outline:none!important;padding:11px 0!important;font-size:14px;color:var(--ink)}
.svc-tabs{display:flex;gap:6px;overflow-x:auto;margin-top:10px;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svc-tabs::-webkit-scrollbar{display:none}
.svc-tab{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.svc-tab em{font-style:normal;font-size:11px;font-weight:800;color:var(--muted);background:var(--soft);border-radius:999px;padding:1px 7px}
.svc-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.svc-tab.on em{background:rgba(255,255,255,.2);color:#fff}
.svc-body{flex:1;min-height:0;overflow-y:auto;padding:18px 20px 22px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.svc-sec+.svc-sec{margin-top:22px}
.svc-sec h3{font-size:13px;font-weight:800;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:6px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.svc-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:7px;text-align:left;padding:14px 14px 12px;
  border:1.5px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-tap-highlight-color:transparent}
@media (hover:hover){ .svc-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))} }
.svc-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.svc-card:active{transform:scale(.99)}
.svc-card.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.svc-check{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,border-color .15s ease}
.svc-card.on .svc-check{background:var(--brand);border-color:var(--brand)}
.svc-card.on .svc-check::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.svc-card-h{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-right:32px}
.svc-card-h b{font-size:14.5px;font-weight:800;line-height:1.3}
.svc-bill{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px}
.svc-bill.mon{background:#DBEAFE;color:#1E40AF}
.svc-bill.one{background:#DCFCE7;color:#166534}
.svc-bill.yr{background:#EDE9FE;color:#5B21B6}
body.dark .svc-bill.mon{background:#172554;color:#93C5FD}
body.dark .svc-bill.one{background:#052e16;color:#86EFAC}
body.dark .svc-bill.yr{background:#2e1065;color:#C4B5FD}
.svc-range{font-size:18px;font-weight:900;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.svc-range em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted);margin-left:2px}
.svc-note{font-size:12.5px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc-tiers{list-style:none;margin:2px 0 0;padding:8px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:4px}
.svc-tiers li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.svc-tiers span{color:var(--muted)}
.svc-tiers b{font-weight:800;font-variant-numeric:tabular-nums}
.svc-ad{font-size:11.5px;line-height:1.4;color:#92400E;background:#FEF3C7;border-radius:8px;padding:5px 8px}
body.dark .svc-ad{background:#3a2c10;color:#ffd48a}
.svc-empty{text-align:center;padding:48px 16px;color:var(--muted);font-size:14px}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--card)}
.svc-sum{min-width:0}
.svc-sum b{display:block;font-size:14px;color:var(--ink)}
.svc-sum span{display:block;font-size:12px;color:var(--muted)}
.svc-done{flex:none;min-width:120px;padding:11px 22px;font-weight:800}
@media (prefers-reduced-motion:reduce){ .svc-modal,.svc-card,.svc-tab,.crm-card{transition:none!important} }

/* -- tablets & small laptops -- */
@media (max-width:1100px){ .crm-col{flex-basis:272px} }
@media (max-width:860px){
  .crm-acts-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .crm-acts-row .crm-wa-btn{order:1}
  .crm-acts-row .crm-new-btn{order:2}
  .crm-acts-row .crm-disc-btn{order:3}
  .crm-acts-row .crm-more{order:4}
  .crm-acts-row .crm-seg{order:5;grid-column:1/-1}
  .crm-acts-row .crm-spacer{display:none}
  .crm-acts-row .btn,.crm-more-btn{width:100%;justify-content:center}
  .crm-seg{display:flex}
  .crm-seg button{flex:1}
  .crm-filt-row{display:grid;grid-template-columns:1fr auto;gap:8px}
  .crm-ftog{display:inline-flex!important}
  .crm-filts{grid-column:1/-1;display:none;grid-template-columns:1fr 1fr;gap:8px}
  .crm-filts.open{display:grid}
  .crm-filts .crm-sel{width:100%;max-width:none}
  .crm-menu{left:0;right:auto;min-width:100%}
}
/* -- phones -- */
@media (max-width:640px){
  .crm-wrap{gap:12px;padding-bottom:84px}
  .crm-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .crm-kpi{padding:11px 12px}
  .crm-kpi b{font-size:18px}
  .crm-board{scroll-snap-type:x mandatory;padding:0 0 14px}
  .crm-col{flex-basis:min(86vw,360px);max-height:none}

  /* lead form, voice notes, reminders and quick add open full screen */
  #crmOverlay,#crmRemOverlay{padding:0!important;align-items:stretch}
  .crm-modal,.crm-rem-modal{width:100%!important;max-width:100%!important;min-height:100%;margin:0!important;border-radius:0!important;border:none!important}
  .crm-modal .modal-h,.crm-rem-modal .modal-h{position:sticky;top:0;z-index:5;border-radius:0!important;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .crm-modal .mbody{padding:16px}
  .crm-modal .mfoot{position:sticky;bottom:0;z-index:5;background:var(--card);padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 16px rgba(0,0,0,.06)}
  .crm-modal .mfoot .btn{min-height:42px}
  .crm-track{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .crm-track::-webkit-scrollbar{display:none}
  .crm-step{flex:0 0 auto!important}

  /* services pop-up becomes a bottom sheet */
  .svc-ov{padding:0!important;align-items:flex-end}
  .svc-modal{width:100%;height:94vh;height:94dvh;max-height:none;border-radius:20px 20px 0 0!important;transform:translateY(40px)}
  .svc-head{padding:16px 16px 10px}
  .svc-tools{padding:0 16px 10px}
  .svc-body{padding:14px 16px 18px}
  .svc-foot{padding-left:16px;padding-right:16px}
  .svc-grid{grid-template-columns:1fr;gap:10px}
}
/* stop iPhone zooming into fields */
@media (max-width:860px) and (pointer:coarse){
  .crm-modal input,.crm-modal select,.crm-modal textarea,.svc-modal input,.waq-in,.crm-search input,.crm-sel,.crm-rem-snooze{font-size:16px!important}
}
/* very small phones */
@media (max-width:360px){
  .crm-kpis{grid-template-columns:1fr 1fr}
  .crm-kpi small{font-size:11px}
  .svc-done{min-width:96px}
}
/* big screens */
@media (min-width:1600px){ .crm-col{flex-basis:310px} .svc-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))} }

/* -- v062 toolbar -- */
.crm-bar{display:flex;flex-direction:column;gap:10px}
.crm-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crm-acts-row .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;font-weight:800;white-space:nowrap}
.crm-new-btn{box-shadow:0 2px 6px color-mix(in srgb,var(--brand) 35%,transparent)}
.crm-filt-row .crm-search{flex:1 1 280px;max-width:none}
.crm-filts{display:flex;flex-wrap:wrap;gap:8px}
.crm-filts .crm-sel{max-width:230px}
.crm-ftog{display:none!important;align-items:center;gap:6px;font-weight:800}
.crm-fcount:not(:empty){display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:11px;font-weight:800}
.crm-more{position:relative}
.crm-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:220px;padding:6px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);box-shadow:0 12px 32px rgba(16,24,40,.16)}
.crm-menu.open{display:flex;flex-direction:column}
.crm-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:700;padding:10px 12px;border-radius:8px;cursor:pointer}
.crm-menu button:hover,.crm-menu button:focus-visible{background:var(--soft);outline:none}
.crm-seg button[aria-selected="true"]{background:var(--brand);color:#fff}

/* solid backgrounds (the glass theme made these see-through) */
#crmOverlay .crm-modal,#svcOverlay .svc-modal,#waqOverlay .waq-modal,#crmRemOverlay .crm-rem-modal{background:var(--card)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.crm-au-file{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;color:var(--ink)!important}
.svp-sel-h{align-items:center}
.svp-sel-h>div{display:flex;flex-direction:column;gap:2px}
.svp-change{flex:none;font-weight:800}
.crm-bar{align-items:stretch!important}
.crm-acts-row,.crm-filt-row{width:100%}
@media (min-width:861px){
  .crm-filt-row{flex-wrap:nowrap}
  .crm-filts{flex:none;flex-wrap:nowrap}
  .crm-filts .crm-sel{width:auto;max-width:220px}
}
/* toolbar on tablets & phones (kept last so it wins over the base toolbar rules) */
@media (max-width:860px){
  .crm-row.crm-acts-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .crm-acts-row .crm-wa-btn{order:1}
  .crm-acts-row .crm-new-btn{order:2}
  .crm-acts-row .crm-disc-btn{order:3}
  .crm-acts-row .crm-more{order:4}
  .crm-acts-row .crm-seg{order:5;grid-column:1/-1;display:flex}
  .crm-acts-row .crm-seg button{flex:1}
  .crm-acts-row .crm-spacer{display:none}
  .crm-acts-row .btn,.crm-acts-row .crm-more-btn{width:100%;justify-content:center;padding:10px 10px}
  .crm-row.crm-filt-row{display:grid;grid-template-columns:1fr auto;gap:8px}
  .crm-filt-row .crm-ftog{display:inline-flex!important}
  .crm-filts{grid-column:1/-1;display:none!important;grid-template-columns:1fr 1fr;gap:8px}
  .crm-filts.open{display:grid!important}
  .crm-filts .crm-sel{width:100%;max-width:none}
  .crm-menu{left:0;right:auto;min-width:100%}
}
@media (max-width:360px){
  .crm-acts-row .btn,.crm-acts-row .crm-more-btn{font-size:12px;padding:10px 6px}
  .crm-filts.open{grid-template-columns:1fr}
}
@media (max-width:860px){
  .crm-row.crm-filt-row{grid-template-columns:minmax(0,1fr) auto}
  .crm-row.crm-acts-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.crm-search{min-width:0}
.crm-search input{min-width:0}
@media (max-width:420px){
  .crm-modal .mfoot{gap:8px}
  .crm-modal .mfoot .spacer{display:none}
  .crm-modal .mfoot .btn{flex:1 1 0;justify-content:center;display:inline-flex;align-items:center;white-space:nowrap}
  .crm-modal .mfoot .btn-brand{flex:1 1 100%;order:9}
}

/* ===== Phone digits hint (v063) ===== */
.crm-ph-hint{display:block;font-size:11.5px;color:var(--muted);margin-top:5px;min-height:15px}
.crm-ph-hint.bad{color:#DC2626;font-weight:700}
.crm-ph-hint.ok{color:#059669;font-weight:700}
.dc-phone-wrap label{margin-bottom:5px}

/* ===== Services pop-up: compact cards + plan details (v064) ===== */
.svc-modal{position:relative}
.svc-head{padding:14px 18px 10px}
.svc-title h2{font-size:17px}
.svc-tools{padding:0 18px 10px}
.svc-search input{padding:9px 0!important}
.svc-tabs{margin-top:8px}
.svc-tab{padding:6px 11px;font-size:12.5px}
.svc-body{padding:14px 18px 18px}
.svc-sec+.svc-sec{margin-top:16px}
.svc-sec h3{margin-bottom:8px;font-size:12.5px}
.svc-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.svc-card{padding:11px 12px 10px;gap:4px;border-radius:14px}
.svc-card-h{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px;padding-right:28px}
.svc-card-h b{font-size:13.5px}
.svc-check{top:10px;right:10px;width:20px;height:20px}
.svc-card.on .svc-check::after{width:5px;height:9px;border-width:0 2px 2px 0}
.svc-range{font-size:15.5px}
.svc-note{font-size:12px;-webkit-line-clamp:2}
.svc-more{font-size:11.5px;color:var(--muted);margin-top:2px}
.svc-more b{color:var(--brand);font-weight:800}
body.dark .svc-more b{color:var(--accent)}
.svc-foot{padding:10px 18px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.svc-done{padding:10px 20px}

/* plan details (opens over the services list) */
.svd{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,12,20,.42);opacity:0;transition:opacity .16s ease}
.svd.show{display:flex}
.svd.open{opacity:1}
.svd-box{width:min(560px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--card);border-radius:18px;
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;transform:translateY(10px) scale(.985);
  transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.svd.open .svd-box{transform:none}
.svd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 10px;border-bottom:1px solid var(--line)}
.svd-head h3{font-size:16px;font-weight:900;color:var(--ink);margin:0 0 6px;line-height:1.3}
.svd-head .svc-bill{margin-right:6px}
.svd-added{font-size:11px;font-weight:800;color:#059669}
.svd-body{flex:1;min-height:0;overflow-y:auto;padding:12px 16px 14px;overscroll-behavior:contain}
.svd-label{font-size:11px;font-weight:800;color:var(--muted);margin-bottom:8px}
.svd-plans{display:flex;flex-direction:column;gap:8px}
.svd-plan{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.svd-plan.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--card))}
.svd-radio{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;border:2px solid var(--line);background:var(--card)}
.svd-plan.on .svd-radio{border-color:var(--brand);box-shadow:inset 0 0 0 4px var(--card);background:var(--brand)}
.svd-plan-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.svd-plan-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.svd-plan-top b{font-size:13.5px;font-weight:800}
.svd-plan-top strong{font-size:14px;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}
.svd-plan-top em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-left:2px}
.svd-plan small{font-size:12px;color:var(--muted);line-height:1.4}
.svd-plan ul{margin:3px 0 0 16px;padding:0;font-size:12px;color:var(--ink);line-height:1.5}
.svd-ad{font-size:11.5px;color:#92400E}
body.dark .svd-ad{color:#ffd48a}
.svd-foot{display:flex;gap:8px;justify-content:flex-end;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.svd-foot .btn{padding:10px 18px;font-weight:800}
.svd-remove{color:#DC2626!important;border-color:#FCA5A5!important}
.svd-add{min-width:140px}
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr 1fr;gap:8px}
  .svc-card{padding:10px 10px 9px}
  .svc-card-h b{font-size:13px}
  .svc-range{font-size:14.5px}
  .svd{padding:0;align-items:flex-end}
  .svd-box{width:100%;max-height:88%;border-radius:18px 18px 0 0;transform:translateY(30px)}
  .svd-foot .btn{flex:1}
}
@media (max-width:360px){ .svc-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .svd,.svd-box,.svd-plan{transition:none!important} }
.svd-moreinc{font-size:11.5px;color:var(--muted);font-weight:700;margin-left:16px}
@media (min-width:641px){ .svd-plan.on ul{columns:2;column-gap:22px} .svd-plan ul li{break-inside:avoid} }

/* ===== Live duplicate warning (v065) ===== */
.crm-dupwarn{display:flex;gap:10px;align-items:center;margin-top:8px;padding:9px 11px;border-radius:10px;
  background:#FEF3C7;border:1px solid #FCD34D;color:#78350F;animation:crmDupIn .16s ease}
.crm-dupwarn[hidden]{display:none}
.crm-dupwarn-i{flex:none;font-size:16px}
.crm-dupwarn>div{flex:1;min-width:0}
.crm-dupwarn b{display:block;font-size:12.5px;font-weight:800;word-break:break-word}
.crm-dupwarn small{display:block;font-size:11.5px;color:#92400E;margin-top:1px}
.crm-dupwarn .btn{flex:none;background:#fff!important;font-weight:800}
body.dark .crm-dupwarn{background:#3a2c10;border-color:#7a5a1a;color:#ffd48a}
body.dark .crm-dupwarn small{color:#f5c56b}
body.dark .crm-dupwarn .btn{background:var(--card)!important}
@keyframes crmDupIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.crm-dupwarn{animation:none}}

/* ===== Lead links (v066) ===== */
.crm-links{display:flex;flex-direction:column;gap:8px}
.crm-link-list{display:flex;flex-direction:column;gap:6px}
.crm-link{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 10px;border:1px solid var(--line);border-radius:11px;background:var(--card)}
.crm-link-ico{flex:none;width:30px;height:30px;border-radius:8px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:15px}
.crm-link-main{flex:1;min-width:0;display:flex;flex-direction:column}
.crm-link-lab{border:1px solid transparent!important;background:transparent!important;padding:2px 6px!important;font-weight:700;font-size:13px;color:var(--ink);border-radius:6px}
.crm-link-lab:hover,.crm-link-lab:focus{border-color:var(--line)!important;background:var(--soft)!important;outline:none}
.crm-link-main a{font-size:12px;color:#2563EB;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
body.dark .crm-link-main a{color:#93C5FD}
.crm-link-main a:hover{text-decoration:underline}
.crm-link-go,.crm-link-del{flex:none;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--soft);color:var(--ink);text-decoration:none;font-size:15px;cursor:pointer;line-height:1}
.crm-link-del{font-size:20px;color:var(--muted)}
.crm-link-del:hover{color:#DC2626;border-color:#FCA5A5}
.crm-link-go:hover{border-color:var(--brand)}
.crm-link-add{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:6px}
.crm-link-add .btn{white-space:nowrap;font-weight:800}
.crm-link-msg{font-size:11.5px;color:var(--muted);min-height:14px}
.crm-link-msg.bad{color:#DC2626;font-weight:700}
.crm-card-links{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.crm-card-link{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;
  border:1px solid var(--line);background:var(--soft);font-size:12.5px;text-decoration:none;color:var(--ink)}
.crm-card-link.more{width:auto;padding:0 7px;font-size:11px;font-weight:800;color:var(--muted)}
@media (hover:hover){ .crm-card-link:hover{border-color:var(--brand)} }
@media (max-width:640px){
  .crm-link-add{grid-template-columns:1fr 1fr}
  .crm-link-add input{grid-column:1/-1;order:-1}
  .crm-link-add select{grid-column:1}
}
.crm-link-ico{position:relative;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;color:inherit}
.crm-link-ico select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;font-size:16px}
.crm-link-ico:focus-within{outline:2px solid var(--brand);outline-offset:1px}

/* ===== Pipeline stages editor (v066) ===== */
.crm-stg-modal{width:560px}
#crmStgOverlay .crm-stg-modal{background:var(--card)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#crmStgOverlay{backdrop-filter:none!important}
.crm-stg-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.crm-stg-tip{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}
.crm-stg-list{display:flex;flex-direction:column;gap:6px}
.crm-stg-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.crm-stg-row.fixed{background:var(--soft)}
.crm-stg-color{position:relative;flex:none;width:30px;height:30px;margin:0;border-radius:9px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.crm-stg-color span{width:16px;height:16px;border-radius:50%;background:var(--sc)}
.crm-stg-color select{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px;padding:0}
.crm-stg-color:focus-within{outline:2px solid var(--brand);outline-offset:1px}
.crm-stg-name{flex:1;min-width:0}
.crm-stg-name input{font-weight:800;font-size:14px;padding:7px 9px}
.crm-stg-name small{display:block;font-size:11px;color:var(--muted);margin:3px 2px 0}
.crm-stg-acts{display:flex;gap:4px;flex:none}
.crm-stg-acts button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--soft);color:var(--ink);
  font-size:15px;cursor:pointer;line-height:1}
.crm-stg-acts button:disabled{opacity:.35;cursor:default}
.crm-stg-acts button.del{font-size:19px;color:var(--muted)}
.crm-stg-acts button.del:not(:disabled):hover{color:#DC2626;border-color:#FCA5A5}
.crm-stg-lock{flex:none;width:32px;text-align:center;opacity:.55}
.crm-stg-add{display:flex;gap:8px}
.crm-stg-add input{flex:1}
.crm-stg-add .btn{white-space:nowrap;font-weight:800}
@media (max-width:640px){
  #crmStgOverlay{padding:0!important;align-items:stretch}
  .crm-stg-modal{width:100%!important;min-height:100%;margin:0!important;border-radius:0!important}
  .crm-stg-modal .modal-h{border-radius:0!important;position:sticky;top:0;z-index:3;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .crm-stg-body{padding:14px 16px}
  .crm-stg-modal .mfoot{position:sticky;bottom:0;background:var(--card);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .crm-stg-name input{font-size:16px}
}

/* ===== Quote options + add-ons pop-up (v066) ===== */
.crm-qopts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crm-qopt{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease}
.crm-qopt em{font-style:normal;font-size:11px;font-weight:800;background:var(--soft);color:var(--muted);border-radius:999px;padding:1px 7px}
.crm-qopt.on{background:var(--brand);border-color:var(--brand);color:#fff}
.crm-qopt.on em{background:rgba(255,255,255,.2);color:#fff}
.crm-qopt.add{border-style:dashed;color:var(--muted);font-weight:700}
.crm-qopt.add:hover{color:var(--ink);border-color:var(--brand)}
.crm-qopt-main{color:#F59E0B}
.crm-qopt.on .crm-qopt-main{color:#FDE68A}
.crm-qopt-tools{display:inline-flex;gap:4px;margin-left:auto}
.crm-qopt-tools button{border:none;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:700;padding:6px 8px;border-radius:8px;cursor:pointer}
.crm-qopt-tools button:hover{background:var(--soft);color:var(--ink)}
.crm-q-inc{display:flex!important;align-items:center;gap:5px;margin:4px 0 0!important;font-size:11.5px!important;font-weight:700;
  text-transform:none!important;letter-spacing:0!important;color:var(--ink)!important;cursor:pointer}
.crm-q-inc input{width:auto!important;margin:0}
.crm-q-inc em{font-style:normal;font-weight:600;color:var(--muted)}
.crm-q-table tr.optional td{background:color-mix(in srgb,#F59E0B 6%,transparent)}
.crm-q-addon{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crm-q-addbtn{font-weight:800}
.add-tip{font-size:11.5px;color:var(--muted);margin:8px 0 0;line-height:1.4}
.add-card{cursor:default}
.add-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.add-btn{font-weight:800}
.add-step{display:inline-flex;align-items:center;border:1.5px solid var(--brand);border-radius:999px;overflow:hidden}
.add-step button{width:32px;height:30px;border:none;background:var(--card);color:var(--ink);font-size:16px;font-weight:800;cursor:pointer}
.add-step b{min-width:26px;text-align:center;font-size:13px}
.add-in{font-size:11.5px;font-weight:800;color:#059669}
#addOverlay .svc-modal{background:var(--card)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#addOverlay{backdrop-filter:none!important;overscroll-behavior:contain}
.add-modal{width:min(860px,100%)}
@media (max-width:640px){
  #addOverlay{padding:0!important;align-items:flex-end}
  .crm-qopt-tools{margin-left:0;width:100%}
}
.add-card .add-row{margin-top:auto;padding-top:6px}
.crm-q-inc{white-space:nowrap;flex-wrap:wrap}
.crm-q-optag{font-size:10.5px!important;font-weight:800!important;color:#92400E!important;background:#FEF3C7;border-radius:999px;padding:1px 7px;margin-left:2px}
body.dark .crm-q-optag{background:#3a2c10;color:#ffd48a!important}

/* ===== v069: add-ons inside Choose services + One-time / Monthly / Yearly payment ===== */
.add-card{cursor:pointer}
.svd-bills{display:flex;gap:8px;flex-wrap:wrap}
.svd-billopt{flex:1 1 90px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 8px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:border-color .15s,background .15s}
.svd-billopt small{font-size:10.5px;font-weight:700;color:var(--muted)}
.svd-billopt.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card))}
.svd-billopt:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.svd-billtip{font-size:11.5px;color:var(--muted);margin:8px 0 0;line-height:1.4}
.svd-addnote{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.45}
.svd-qty{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.crm-q-billrow{display:flex!important;align-items:center;gap:6px;margin:5px 0 0!important;font-size:11.5px!important;font-weight:700;color:var(--muted);white-space:nowrap}
.crm-q-billrow select.crm-q-bill{width:auto!important;min-width:0;padding:3px 24px 3px 8px!important;font-size:12px!important;height:auto!important;border-radius:8px}
.crm-q-per{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-left:2px}
.crm-q-table tr.addon td{background:transparent}

/* ===== v071: simpler lead form ===== */
.mbody.lf{gap:12px 14px}
.lf-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding-top:14px;margin-top:2px;border-top:1px solid var(--line)}
.lf label{font-size:12px}
.lf-more{border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--card)}
.lf-more>summary{cursor:pointer;list-style:none;padding:11px 0;font-size:13px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.lf-more>summary::-webkit-details-marker{display:none}
.lf-more>summary::before{content:"+";width:18px;height:18px;border-radius:50%;background:var(--soft,#f3f0ec);display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.lf-more[open]>summary::before{content:"\2212"}
.lf-more>summary em{font-style:normal;font-size:11px;font-weight:800;color:var(--muted);background:var(--soft,#f3f0ec);border-radius:999px;padding:1px 8px}
.lf-more[open]{padding-bottom:12px}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lf-grid .full{grid-column:1/-1}
.lf textarea#crm-f-asked{min-height:58px}
.lf-budget{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lf-budget label{margin:0!important;font-size:12.5px;color:var(--muted)}
.lf-cur{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--muted)}
.lf-cur input{width:130px!important}
.lf-budget select{width:auto!important}
/* extra numbers */
.crm-more-ph{display:flex;flex-direction:column;gap:8px}
.crm-mph-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:8px;align-items:start}
.crm-mph-row .crm-ph-hint{display:none}
.crm-mph-del{width:34px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted);font-size:18px;cursor:pointer}
.crm-mph-add{align-self:flex-start;text-decoration:none!important;font-size:12.5px}
@media(max-width:600px){ .crm-mph-row{grid-template-columns:minmax(0,1fr) auto} .crm-mph-lab{grid-column:1/2} .crm-mph-del{grid-row:1;grid-column:2} .lf-grid{grid-template-columns:minmax(0,1fr)} }
/* quote cards */
.lq{display:flex;flex-direction:column;gap:12px}
.lq-rows{display:flex;flex-direction:column;gap:8px}
.lq-row{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.lq-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.lq-top b{font-size:14px;color:var(--ink)}
.lq-del{border:none;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.lq-del:hover{color:#DC2626}
.lq-ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lq-ctl .lq-sel{width:auto!important;min-width:0;flex:0 1 auto;padding:7px 28px 7px 10px!important;font-size:13px!important}
.lq-price{display:inline-flex!important;align-items:center;gap:4px;margin:0 0 0 auto!important;font-weight:800;color:var(--muted)}
.lq-price input{width:120px!important;text-align:right;font-weight:800;font-size:14px!important}
.lq-price em{font-style:normal;font-size:11.5px;font-weight:700}
.lq-qty{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;font-size:12.5px!important}
.lq-qty input{width:64px!important}
.lq-x{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.lq-x label{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;font-size:12px!important;color:var(--muted)}
.lq-x input{width:100px!important;padding:5px 8px!important;font-size:12.5px!important}
.lq-xbtn{margin-top:4px;font-size:11.5px!important;font-weight:700!important;color:var(--muted)!important;text-decoration:none!important}
.lq-add{align-self:flex-start}
.lq-opts{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;padding:10px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.lq-disc{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink)}
.lq-dseg button{padding:6px 11px!important}
.lq-disc input{width:100px!important;padding:7px 10px!important}
.lq-chk,.lq-months{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;font-size:13px!important;font-weight:700;color:var(--ink)}
.lq-chk input{width:auto!important;margin:0}
.lq-months input{width:62px!important;padding:6px 8px!important}
.lq-sum{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;background:color-mix(in srgb,var(--brand) 6%,var(--card));border-radius:14px;padding:14px 16px}
.lq-tot small{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lq-tot b{display:block;font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.lq-tot span{font-size:12.5px;font-weight:700;color:var(--muted)}
.lq-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:12px;font-weight:700;color:var(--muted)}
.lq-side b{color:#059669}
.lq-save{color:var(--ink)}
.lq-bud.ok{color:#059669} .lq-bud.near{color:#B45309} .lq-bud.over{color:#DC2626}
.lq-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:600px){ .lq-price{margin-left:0!important} .lq-side{align-items:flex-start} }
/* WhatsApp bar: number picker + app choice */
.crm-qwa-to{width:auto!important;max-width:240px;padding:5px 26px 5px 8px!important;font-size:12.5px!important}
.crm-qwa-app button{padding:6px 10px!important;font-size:11.5px!important}