*{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#2f3566; --brand2:#4b5299; --accent:#e8b04b; --bg:#eef0f6; --card:#fff; --ink:#1c2230;
  --muted:#6b7280; --line:#e3e6ef; --soft:#f4f5fa;
  --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:#0f1117; --card:#181b24; --ink:#e7ebf2; --muted:#93a0b4; --line:#2a2f3c; --soft:#1e222d;
  --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-l:0 10px 30px rgba(0,0,0,.55);
  --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}
.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)}
.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;}
.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:80;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; }
}

/* ================================================================
   ITFTS 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:#070b15!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;}

/* ===================================================================
   ITFTS 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;} }

/* ===================================================================
   ITFTS 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;}

/* ===================================================================
   ITFTS 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 */
  --brand:#3730A3;      /* indigo 800 */
  --brand2:#4F46E5;     /* indigo 600 */
  --accent:#0D9488;     /* teal 600  */
  /* surfaces + text */
  --bg:#F5F7FB; --card:#FFFFFF; --ink:#0F172A; --muted:#5B6779;
  --line:#E3E8F0; --soft:#F1F4F9;
  /* 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:#4F46E5; --brand2:#6366F1; --accent:#2DD4BF;
  --bg:#0B0F1A; --card:#151A27; --ink:#E9EDF5; --muted:#9AA7BC;
  --line:#262E3D; --soft:#1A2130;
  /* 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:#080B14!important;}
#water-bg{background:
  radial-gradient(120% 80% at 18% 8%, rgba(79,70,229,.10), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, rgba(13,148,136,.10), transparent 55%),
  linear-gradient(180deg,#F7F9FC 0%,#EFF3F9 50%,#E9EEF6 100%)!important;}
body.dark #water-bg{background:
  radial-gradient(120% 80% at 18% 8%, rgba(99,102,241,.16), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, rgba(45,212,191,.10), transparent 55%),
  linear-gradient(180deg,#0B0F1A 0%,#080B14 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:#0F766E; }
body.dark{ --accent-txt:#5EEAD4; }
.kpi .kd b,.see-all,a{color:var(--accent-txt);}
body.dark .logo{color:#0B0F1A!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);}

/* ===================================================================
   ITFTS 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:#5B21B6;        /* violet 800 */
  --brand2:#7C3AED;       /* violet 600 */
  --accent:#7E22CE;       /* purple 700 — white text = 6.98:1 */
  --accent-txt:#6D28D9;   /* purple as text on light = 7.10:1 */
  --rev:#0E7490;  --rev-bg:#CFFAFE;     /* in review -> cyan  */
  --daily:#6D28D9;--daily-bg:#F3E8FF;
  --arch:#6D28D9;
}
body.dark{
  --brand:#6D28D9; --brand2:#8B5CF6; --accent:#C084FC;
  --accent-txt:#D8B4FE;
  --rev:#67E8F9;  --rev-bg:#0B2F38;
  --daily:#D8B4FE;--daily-bg:#2A1840;
  --arch:#D8B4FE;
}
/* backdrop tinted violet */
#water-bg{background:
  radial-gradient(120% 80% at 18% 8%, rgba(124,58,237,.12), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, rgba(168,85,247,.10), transparent 55%),
  linear-gradient(180deg,#FAF8FE 0%,#F3F0FA 50%,#EDE9F6 100%)!important;}
body.dark #water-bg{background:
  radial-gradient(120% 80% at 18% 8%, rgba(139,92,246,.18), transparent 60%),
  radial-gradient(120% 90% at 82% 26%, rgba(192,132,252,.10), transparent 55%),
  linear-gradient(180deg,#0D0A18 0%,#080611 100%)!important;}
body.dark{background:#080611!important;}

/* purple-led chips + controls */
.ev-rev{background:linear-gradient(135deg,#0891B2,#0E7490)!important;}   /* review = cyan  */
.ev-sched{background:linear-gradient(135deg,#7C3AED,#5B21B6)!important;} /* scheduled = violet */
.post-chip{background:linear-gradient(135deg,#7E22CE,#5B21B6)!important;box-shadow:0 1px 4px rgba(126,34,206,.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,#7E22CE,#5B21B6)!important;box-shadow:0 2px 6px rgba(126,34,206,.35)!important;}
.sidebar .hub-btn{background:linear-gradient(135deg,#7E22CE,#5B21B6)!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:#fff!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);}

/* ===================================================================
   ITFTS 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(180deg,#8B5CF6 0%,#7C3AED 45%,#6D28D9 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{border:none;background:transparent;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;
  padding:0 4px;border-radius:6px;flex:0 0 auto;}
.att-x:hover{color:#fff;background:#DC2626;}

/* ===================================================================
   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:#fff;}

/* ---- 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:#fff;}
.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:#fff;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;}
/* Keep attendance column geometry independent of the other page tables. */
.att-table.combined{
  --att-name-width:150px;--att-label-width:54px;--att-day-width:34px;--att-total-width:70px;--att-gap:3px;
  border-collapse:separate;table-layout:fixed;
}
/* One explicit width shared by colgroup, header and both rows. A max-content
   table lets long names and the legacy name-cell width stretch these columns. */
#view-attend table.att-table.combined{
  width:calc(var(--att-name-width) + var(--att-label-width) + var(--att-day-width) * var(--att-days) + var(--att-total-width) + var(--att-gap) * (var(--att-days) + 4));
  min-width:0;border-spacing:var(--att-gap)!important;
}
.att-col-name{width:var(--att-name-width)}
.att-col-label{width:var(--att-label-width)}
.att-col-day{width:var(--att-day-width)}
.att-col-total{width:var(--att-total-width)}
#view-attend .att-wrap{
  isolation:isolate;scroll-padding-inline-start:calc(var(--att-name-width,150px) + var(--att-label-width,54px) + 14px);
}
#view-attend table.att-table tr{transform:none!important;filter:none!important;cursor:default}
#view-attend table.att-table .att-dh{position:relative;top:auto;z-index:0}
#view-attend table.att-table .att-c,#view-attend table.att-table .hrs-cell{
  position:relative;z-index:0;transform:none!important;scroll-margin-inline:6px;
}
/* Sticky cells must stay opaque on every row, including hover and banded rows.
   The side shadows cover border-spacing so scrolled dates cannot peek through. */
#view-attend table.att-table .att-name,
#view-attend table.att-table .att-name-h,
#view-attend table.att-table .att-rowlbl,
#view-attend table.att-table .att-rowh{
  position:sticky!important;background:var(--card)!important;opacity:1;
  box-shadow:3px 0 0 var(--card),-3px 0 0 var(--card)!important;z-index:3;
}
#view-attend table.att-table .att-name,#view-attend table.att-table .att-name-h{
  left:0!important;width:var(--att-name-width);max-width:var(--att-name-width);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;
}
#view-attend table.att-table .att-rowlbl,#view-attend table.att-table .att-rowh{
  left:calc(var(--att-name-width) + var(--att-gap))!important;
}
#view-attend table.att-table .att-name-h,#view-attend table.att-table .att-rowh{z-index:4!important}
#view-attend table.att-table [role=button]:focus-visible{outline:3px solid #2563eb!important;outline-offset:-3px}
.att-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:860px){
  .att-table.combined{--att-name-width:112px;--att-label-width:46px}
  #view-attend .att-wrap{scroll-padding-inline-start:172px}
}

.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:#fff;}
.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:#fff;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:#fff;}
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:#fff;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:#fff;}
.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:#5B21B6;}
.ng-post{font-size:10.5px;font-weight:800;color:#fff;background:#7C3AED;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:#fff;transform:translateY(-1px);}
body.dark .cli-cnt{background:rgba(255,255,255,.08);}