/*
 * ============================================================================
 * CnX HUB — Production Build
 * Technology: HTML5, CSS3 (custom properties, flexbox, grid), ES6+
 * Browser support: Chrome 87+, Firefox 66+, Safari 14.1+, Edge 87+
 * ============================================================================
 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:#101010;color:var(--tx);overflow:hidden;-webkit-font-smoothing:antialiased}
:root{--pr:#067F14;--pr-l:#E9FDE9;--ac:#09EB20;--ac-l:#E9FDE9;--su:#09EB20;--su-l:#E9FDE9;--su-d:#067F14;--pe:#FFC400;--pe-l:#FFF8E1;--wa:#F57C00;--wa-l:#FFF4E5;--da:#FF3D00;--da-l:#FFEBE5;--di:#E0E0E0;--pu:#7c3aed;--pu-l:#F5F3FF;--sb:#0A0A0A;--pg:#EFEFEF;--sf:#F8F8F8;--wh:#FFF;--tx:#000000;--t2:#555555;--t3:#777777;--t4:#999999;--bd:#E5E5E5;--mn:'IBM Plex Mono',monospace;--rd:12px;--rs:8px;--sh:0 1px 3px rgba(0,0,0,.06)}
#sw{position:fixed;top:0;left:0;right:0;height:46px;background:#000000;display:flex;align-items:center;gap:6px;padding:0 14px;z-index:9999}
.sw-btn{min-width:100px;text-align:center;padding:7px 16px;border-radius:20px;border:2px solid #fff;background:rgba(255,255,255,.12);color:#fff;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:all .15s ease;letter-spacing:.02em}
.sw-btn:hover{background:rgba(255,255,255,.22);color:#fff;transform:scale(1.04)}
.sw-btn.on{background:var(--su);color:#000;font-size:10px;font-weight:700;padding:7px 16px;letter-spacing:.02em;border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.3)}
/* Locked by persona (a free Engaging Party has no operator modules). Deliberately NOT
   greyed into a dead end: the pill carries a padlock and stays full-strength so it
   reads as "unlock me", not "disabled". The click opens that module's preview + upgrade
   box (operator-only?area=...). .on.locked is the pill for the module being previewed. */
.sw-btn.locked{border-color:rgba(255,255,255,.4);background:transparent;color:rgba(255,255,255,.9);display:inline-flex;align-items:center;justify-content:center;gap:5px}
.sw-btn.locked:hover{background:rgba(255,255,255,.14);color:#fff;transform:none}
.sw-btn.on.locked{background:var(--su);color:#000;border-color:#fff}
.sw-btn.on.locked:hover{background:var(--su);color:#000;transform:none}
.sw-lock{width:11px;height:11px;flex-shrink:0}
#cv{position:fixed;top:calc(46px + var(--ann-strip-h, 0px));left:0;right:0;bottom:0;display:flex;overflow:hidden}
.sidebar{width:248px;min-width:248px;flex-shrink:0;background:var(--sb);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='248' height='600'%3E%3Ccircle cx='248' cy='600' r='80' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='248' cy='600' r='140' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='248' cy='600' r='200' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='248' cy='600' r='260' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='248' cy='600' r='320' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='248' cy='600' r='380' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='248' cy='600' r='440' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='248' cy='600' r='500' stroke='rgba(255,255,255,0.04)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:bottom right;display:flex;flex-direction:column;height:100%;border-right:1px solid var(--bd)}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--pg);min-width:0}
.topbar{height:52px;border-bottom:1px solid var(--bd);background:var(--wh);display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0}
.content{flex:1;overflow-y:auto;padding:20px 24px 40px}
.sb-id{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 14px;height:56px;border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0;background:#fff}
.sb-id img.cnx-logo{height:40px;width:auto;object-fit:contain;display:block}
.sb-id img.cnx-logo--dark{display:none}
body.dark-mode .sb-id{background:var(--sb)}
body.dark-mode .sb-id img.cnx-logo--light{display:none}
body.dark-mode .sb-id img.cnx-logo--dark{display:block}
.sb-id-prod{font-family:var(--mn);font-size:11px;font-weight:700;color:var(--t2);letter-spacing:.15em;line-height:1;text-transform:uppercase;margin-top:2px}
.sb-nav{flex:1;overflow-y:auto;padding:4px 0;scrollbar-width:none;-ms-overflow-style:none}
.sb-section{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.3);padding:10px 10px 3px}
.sb-link{display:flex;align-items:center;gap:7px;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.65);cursor:pointer;margin:1px 5px;transition:.12s;text-decoration:none;position:relative}
.sb-link:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8)}.sb-link.active{background:rgba(9,235,32,.18);color:#09EB20}
.sb-link.locked{opacity:1}.sb-link.locked:hover{opacity:1}
.sb-link svg.sb-lock{width:13px;height:13px;margin-left:auto;opacity:.7}
/* Visible only to screen readers. The locked state cannot live in title= alone:
   tooltips are announced inconsistently and never appear on touch. */
.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}
.sb-link svg{flex-shrink:0;width:15px;height:15px}
.sb-badge{position:absolute;right:10px;min-width:16px;height:16px;border-radius:8px;background:var(--ac);color:#000;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.sb-bottom{border-top:1px solid rgba(255,255,255,0.06);padding:6px 5px;flex-shrink:0}
.sb-bottom-link{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.65);cursor:pointer;transition:.12s;text-decoration:none;margin:0 0 1px}.sb-bottom-link:hover{background:rgba(255,255,255,0.08);color:#fff}.sb-bottom-link svg{width:16px;height:16px}
.sb-user{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);margin-top:auto;flex-shrink:0}
.sb-footer{height:22px;background:rgba(0,0,0,.12);border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:8px;color:rgba(255,255,255,.18);flex-shrink:0}
.page{display:none}.page.active{display:block}
.card{background:var(--wh);border:1px solid var(--bd);border-radius:var(--rd);box-shadow:var(--sh);overflow:hidden}
.card-header{padding:12px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.card-body{padding:16px}
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:9px;font-weight:700}
.badge-blue{background:var(--pr-l);color:var(--pr)}.badge-green{background:var(--su-l);color:var(--su-d)}.badge-red{background:var(--da-l);color:var(--da)}.badge-amber{background:var(--pe-l);color:#B8860B}.badge-grey{background:#F0F0F0;color:var(--t3)}.badge-orange{background:var(--wa-l);color:var(--wa)}.badge-purple{background:var(--pu-l);color:var(--pu)}
.actions-menu{position:relative;display:inline-block}.actions-btn{width:28px;height:28px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:.15s}.actions-btn:hover{background:var(--sf);color:var(--pr)}.actions-dd{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--wh);border:1px solid var(--bd);border-radius:var(--rs);box-shadow:0 8px 24px rgba(0,0,0,.12);padding:4px;min-width:160px;z-index:500}.actions-dd.open{display:block}
.card:has(.actions-menu){overflow:visible}.card:has(.actions-menu) .card-body{overflow:visible}.actions-dd a{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:5px;font-size:10px;font-weight:600;color:var(--t2);cursor:pointer;transition:.1s;text-decoration:none}.actions-dd a:hover{background:var(--pr-l);color:var(--pr)}.actions-dd a.danger{color:var(--da)}.actions-dd a.danger:hover{background:var(--da-l)}
.btn{padding:7px 14px;border-radius:var(--rs);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .12s,background .12s,border-color .12s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1;border:1px solid transparent}.btn-sm{padding:5px 10px;font-size:10px}.btn-primary{background:var(--ac);color:#000;border:1px solid var(--ac)}.btn-primary:hover{background:#067F14;border-color:#067F14;color:#fff}.btn-create{background:var(--ac);color:#000;border:1px solid var(--ac)}.btn-create:hover{background:#067F14;border-color:#067F14;color:#fff}.btn-print{background:var(--su-d);color:#fff;border:1px solid var(--su-d)}.btn-print:hover{opacity:.88}.btn-export{background:var(--wh);color:var(--pr);border:1.5px solid var(--pr)}.btn-export:hover{background:var(--pr-l)}.btn-danger{background:var(--da);color:#fff;border:1px solid var(--da)}.btn-danger:hover{opacity:.88}.btn-outline{background:var(--wh);color:var(--t2);border:1px solid var(--bd)}.btn-outline:hover{background:var(--sf);border-color:var(--t3)}.btn-ghost{background:transparent;color:var(--t3);border:none;padding:4px 8px}.btn-ghost:hover{background:var(--sf);color:var(--tx)}.btn-secondary{background:var(--ac);color:#000;border:1px solid var(--ac)}.btn-secondary:hover{background:#067F14;border-color:#067F14;color:#fff}.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.hint{font-size:10px;color:var(--t4)}.text-bold{font-size:12px;font-weight:700;color:var(--tx)}.text-mono{font-size:10px;color:var(--t3);font-family:var(--mn)}.text-sub{font-size:11px;color:var(--t2)}
.label{display:block;font-size:10px;font-weight:700;color:var(--t2);margin-bottom:4px}.input{width:100%;padding:7px 10px;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:11px;font-family:inherit;outline:none;color:var(--tx)}.input:focus{border-color:var(--pr)}.req{color:var(--da)}
.csd{position:relative}.csd-input{width:100%;padding:7px 10px;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:11px;font-family:inherit;outline:none;color:var(--tx);background:var(--wh);cursor:text}.csd-input:focus{border-color:var(--pr)}.csd-dd{display:none;position:absolute;left:0;right:0;top:100%;margin-top:2px;max-height:180px;overflow-y:auto;background:var(--wh);border:1.5px solid var(--bd);border-radius:var(--rs);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:600;padding:4px}.csd-dd.open{display:block}.csd-opt{padding:6px 10px;font-size:11px;color:var(--tx);cursor:pointer;border-radius:4px}.csd-opt:hover{background:var(--pr-l);color:var(--pr)}.csd-opt.active{background:var(--ac);color:#000}.csd-empty{padding:8px 10px;font-size:10px;color:var(--t4);text-align:center}
.tbl{width:100%;border-collapse:collapse}.tbl th{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);padding:8px 14px;text-align:left;border-bottom:2px solid var(--bd)}.tbl td{padding:10px 14px;border-bottom:1px solid #F8F8F8;font-size:11px}.tbl tr:hover td{background:var(--sf)}.tbl-link{color:var(--pr);font-weight:600;cursor:pointer}.tbl-link:hover{text-decoration:underline}
.sort-arrow{font-size:9px;color:var(--t4);margin-left:3px;opacity:.35}.sort-arrow::after{content:'\25B2\25BC'}.sort-arrow.asc,.sort-arrow.desc{opacity:1;color:var(--t2)}.sort-arrow.asc::after{content:'\25B2'}.sort-arrow.desc::after{content:'\25BC'}
.tabs{display:flex;gap:0;border-bottom:2px solid var(--bd);margin-bottom:12px}.tab{padding:8px 14px;font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.12s}.tab:hover{color:var(--tx)}.tab.active{color:var(--pr);border-bottom-color:var(--pr)}.tab-count{font-size:9px;font-weight:700;background:var(--pr-l);color:var(--pr);padding:1px 5px;border-radius:8px;margin-left:4px}
.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.filter-select{padding:5px 8px;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:10px;font-family:inherit;color:var(--t2);background:var(--wh);cursor:pointer;outline:none}
.search-wrap{position:relative}.search-wrap svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--t4);pointer-events:none}.search-wrap input{width:100%;padding:5px 8px 5px 26px;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:10px;font-family:inherit;outline:none;color:var(--tx)}.search-wrap input:focus{border-color:var(--pr)}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:10px;color:var(--t3)}.page-btns{display:flex;gap:2px}.page-btn{width:28px;height:28px;border:1.5px solid var(--bd);border-radius:var(--rs);background:var(--wh);font-size:10px;font-weight:600;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}.page-btn:hover{border-color:var(--pr);color:var(--pr)}.page-btn.active{background:var(--ac);color:#000;border-color:var(--ac)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat-card{background:var(--wh);border-radius:var(--rd);border:1px solid var(--bd);box-shadow:var(--sh);padding:14px 16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:.15s}
.stat-card:hover{border-color:var(--pr);box-shadow:0 2px 8px rgba(9,235,32,.1)}
.stat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.stat-value{font-size:24px;font-weight:800;color:var(--tx);line-height:1}
.stat-label{font-size:10px;font-weight:600;color:var(--t3)}
.stat-change{font-size:9px;font-weight:700;display:flex;align-items:center;gap:2px}.stat-up{color:var(--su-d)}.stat-down{color:var(--da)}
/* === SECURITY PATTERNS (shared component set — ported from CDD) === */
.vault-security-strip{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--sb);color:#fff;border-radius:var(--rd);margin-bottom:14px;box-shadow:var(--sh)}
.vault-security-strip .vss-icon svg{width:20px;height:20px;color:#fff;flex-shrink:0}
.vault-security-strip .vss-text{flex:1;font-size:11px;line-height:1.5}
.vault-security-strip .vss-text strong{font-weight:800;color:#fff}
.vault-security-strip .vss-meta{display:flex;gap:6px;flex-shrink:0}
.vault-security-strip .vss-tag{font-family:var(--mn);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:var(--rs);color:#fff}
.encryption-banner{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;background:linear-gradient(to right,rgba(9,235,32,.12),rgba(9,235,32,.06));border:1px solid rgba(9,235,32,.4);border-left:4px solid var(--su-d);border-radius:var(--rs);font-size:11px;color:var(--tx);line-height:1.55;margin-bottom:14px}
.encryption-banner svg{width:22px;height:22px;color:var(--su-d);flex-shrink:0;margin-top:1px}
.encryption-banner strong{font-weight:800;color:var(--su-d)}
.encryption-banner .enc-meta{font-size:10px;color:var(--t3);margin-top:3px;font-family:var(--mn);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.audit-trail-strip{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--sf);border:1px solid var(--bd);border-left:4px solid var(--pu);border-radius:var(--rs);font-size:10px;color:var(--t2);margin-bottom:10px}
.audit-trail-strip svg{width:14px;height:14px;color:var(--pu);flex-shrink:0}
.audit-trail-strip strong{color:var(--pu);font-weight:800}
body.dark-mode .encryption-banner{background:rgba(9,235,32,.08);color:var(--t2);border-color:rgba(9,235,32,.3)}
body.dark-mode .encryption-banner strong{color:#09EB20}
body.dark-mode .encryption-banner .enc-meta{color:var(--t3)}
body.dark-mode .audit-trail-strip{background:var(--sf);border-color:var(--bd)}
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;min-height:400px}
.kb-col{min-width:270px;flex:1;max-width:320px;background:var(--sf);border-radius:var(--rd);padding:10px;flex-shrink:0}
.kb-col-head{font-size:11px;font-weight:700;color:var(--tx);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.kb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kb-card{background:var(--wh);border:1px solid var(--bd);border-radius:var(--rd);box-shadow:var(--sh);padding:12px;margin-bottom:8px;cursor:pointer;transition:.12s;border-left:4px solid var(--bd)}
.kb-card:hover{border-color:var(--pr);box-shadow:0 2px 8px rgba(9,235,32,.1);border-left-color:inherit}
.kb-card.pri-low{border-left-color:var(--su)}
.kb-card.pri-low:hover{border-left-color:var(--su)}
.kb-card.pri-medium{border-left-color:var(--pe)}
.kb-card.pri-medium:hover{border-left-color:var(--pe)}
.kb-card.pri-high{border-left-color:#F57C00}
.kb-card.pri-high:hover{border-left-color:#F57C00}
.kb-card.pri-urgent{border-left:5px solid var(--da)}
.kb-card.pri-urgent:hover{border-left-color:var(--da)}
.kb-card.pri-done{border-left-color:var(--di)}
.kb-card[draggable="true"]{cursor:grab}
.kb-card.dragging{opacity:.4;transform:scale(.97);box-shadow:0 8px 24px rgba(0,0,0,.15);cursor:grabbing}
.kb-col.drag-over{background:var(--sf)}
.tag-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700}
.comment-item{display:flex;gap:8px;padding:10px 0;border-bottom:1px solid #F8F8F8}.comment-item:last-child{border-bottom:none}
.kb-card-group{display:flex;align-items:center;gap:4px;margin-bottom:5px;font-size:9px;color:var(--t3)}.kb-card-group svg{width:11px;height:11px;flex-shrink:0}
.kb-card-assignee{display:flex;align-items:center;gap:5px;margin-bottom:6px;font-size:9px;color:var(--t3)}
.kb-card-assignee-av{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;flex-shrink:0}
.kb-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.kb-card-footer{display:flex;align-items:center;justify-content:space-between}
.kb-card-title{font-size:11px;font-weight:700;color:var(--tx);margin-bottom:4px}
.kb-card-desc{font-size:10px;color:var(--t3);margin-bottom:6px;line-height:1.4}
.kb-card.completed{opacity:.5;border-left-color:var(--di)!important}
.kb-card.completed .kb-card-title{text-decoration:line-through;color:var(--t3)}
.kb-completed-toggle{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:600;color:var(--pr);cursor:pointer;margin-bottom:8px;padding:4px 8px;border-radius:var(--rs);transition:background .12s;user-select:none}
.kb-completed-toggle:hover{background:var(--pr-l)}
.kb-completed-toggle svg{width:12px;height:12px}
/* Workshop week calendar */
.wc-page{display:flex;flex-direction:column;min-height:100%}
.wc-week{flex:1;min-height:0}
.wc-nav{display:inline-flex;align-items:center;border:1px solid var(--bd);border-radius:var(--rs);overflow:hidden;background:var(--wh)}
.wc-nav button{border:none;background:none;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;color:var(--t2);padding:6px 12px;line-height:1;border-right:1px solid var(--bd);transition:.12s}
.wc-nav button:last-child{border-right:none}
.wc-nav button:hover{background:var(--sf);color:var(--pr)}
.wc-rail{min-width:0;background:var(--da-l);border:1px solid var(--bd);border-radius:10px;display:flex;flex-direction:column;transition:box-shadow .12s,border-color .12s}
.wc-day{min-width:0;background:var(--sf);border:1px solid var(--bd);border-radius:10px;display:flex;flex-direction:column;transition:box-shadow .12s,border-color .12s}
.wc-day.is-today{border-color:var(--pr);box-shadow:0 0 0 1px var(--pr)}
.wc-day.is-today .wc-head{background:var(--pr-l)}
.wc-day.is-weekend{background:var(--pg)}
.wc-head{display:flex;align-items:center;gap:6px;padding:9px 11px;border-bottom:1px solid var(--bd);background:var(--wh);border-radius:10px 10px 0 0;flex-shrink:0}
/* Rail headings must stay on ONE line. Every column is now an equal grid track, so a rail is no
   longer pinned at a width that always fits "IN PROGRESS" — on a narrower screen it would wrap,
   pushing that rail's card list lower than every other column and looking broken. Truncating is
   the lesser evil, and it only bites well below a 24" screen at 100%. */
.wc-rail-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wc-body{flex:1;min-height:0;padding:8px;display:flex;flex-direction:column;gap:7px;overflow-y:auto}
.wc-rail.drag-over,.wc-day.drag-over{border-color:var(--pr);box-shadow:0 0 0 2px var(--pr) inset}
.wc-rail.drag-over .wc-body,.wc-day.drag-over .wc-body{background:var(--pr-l)}
.wc-count{font-size:9px;font-weight:700;color:var(--t3);background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:1px 7px;min-width:18px;text-align:center}
.wc-card{background:var(--wh);border:1px solid var(--bd);border-radius:8px;padding:8px 9px;box-shadow:var(--sh);transition:transform .1s ease,box-shadow .12s,border-color .12s}
.wc-card:hover{border-color:var(--pr);box-shadow:0 3px 10px rgba(9,235,32,.13);transform:translateY(-1px)}
.wc-card.is-overdue{background:var(--da-l)}
.wc-card.is-overdue:hover{border-color:var(--da);box-shadow:0 3px 10px rgba(255,61,0,.15)}
.wc-card.is-draggable{cursor:grab}
.wc-card.is-draggable:active{cursor:grabbing}
.wc-card.wc-card-dropbefore{box-shadow:0 -3px 0 0 var(--pr),var(--sh)}
.btn-complete-modal{background:var(--su-l);color:var(--su-d);border:1.5px solid var(--su);font-size:11px;padding:8px 16px;border-radius:var(--rs);cursor:pointer;font-family:inherit;font-weight:700;transition:.15s;display:flex;align-items:center;gap:6px;justify-content:center}
.btn-complete-modal:hover{background:var(--su);color:#000}
.btn-complete-modal svg{width:14px;height:14px}
.btn-complete-modal.is-done{opacity:.6;cursor:default;background:var(--su-l);color:var(--su-d)}
.assign-search{position:relative}
.assign-search-input{width:100%;padding:7px 30px 7px 10px;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:11px;font-family:inherit;outline:none;color:var(--tx);background:var(--wh)}
.assign-search-input:focus{border-color:var(--pr)}
.assign-search-icon{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--t4);pointer-events:none}
.assign-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:none;border:none;color:var(--t4);cursor:pointer;padding:0;display:none;align-items:center;justify-content:center}
.assign-search-clear:hover{color:var(--da)}
.assign-dd{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--wh);border:1.5px solid var(--bd);border-radius:var(--rs);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:50;max-height:180px;overflow-y:auto}
.assign-dd.open{display:block}
.assign-dd-item{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:11px;color:var(--tx);cursor:pointer;transition:background .1s}
.assign-dd-item:hover,.assign-dd-item.highlighted{background:var(--sf)}
.assign-dd-item.selected{background:var(--pr-l);font-weight:700}
.assign-dd-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0}
.assign-dd-info{flex:1;min-width:0}
.assign-dd-name{font-size:11px;font-weight:600}
.assign-dd-role{font-size:9px;color:var(--t3)}
.assign-dd-empty{padding:12px;font-size:10px;color:var(--t4);text-align:center}
/* Attachments */
.attach-zone{display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer}
.attach-zone-btn{width:56px;height:56px;border-radius:6px;border:1.5px dashed var(--bd);display:flex;align-items:center;justify-content:center;color:var(--t4);transition:.15s;flex-shrink:0}
.attach-zone-btn:hover{border-color:var(--pr);color:var(--pr);background:var(--pr-l)}
.attach-zone.drag-active .attach-zone-btn{border-color:var(--pr);color:var(--pr);background:var(--pr-l)}
.attach-zone.at-limit .attach-zone-btn{opacity:.3;cursor:not-allowed;border-color:var(--bd);color:var(--t4);background:none}
.attach-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.attach-item{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--rs);font-size:10px;color:var(--t2);cursor:pointer;transition:.12s;max-width:200px}
.attach-item:hover{border-color:var(--pr);background:var(--pr-l)}
.attach-item-icon{width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:8px;font-weight:800;text-transform:uppercase}
.attach-item-icon.is-img{overflow:hidden;background:var(--sf)}.attach-item-icon.is-img img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.attach-item-info{flex:1;min-width:0;overflow:hidden}
.attach-item-name{font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attach-item-size{font-size:9px;color:var(--t4);font-family:var(--mn)}
.attach-item-remove{width:16px;height:16px;border:none;background:none;cursor:pointer;color:var(--t4);padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;transition:.12s}
.attach-item-remove:hover{background:var(--da-l);color:var(--da)}
/* File viewer */
.file-viewer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;display:none;align-items:center;justify-content:center}
.file-viewer-overlay.open{display:flex}
.file-viewer{background:var(--wh);border-radius:var(--rd);box-shadow:0 12px 40px rgba(0,0,0,.25);max-width:640px;width:90%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.file-viewer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bd)}
.file-viewer-title{font-size:12px;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:10px}
.file-viewer-meta{font-size:9px;color:var(--t3);font-family:var(--mn)}
.file-viewer-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:20px;min-height:200px;background:#F8F8F8}
.file-viewer-body img{max-width:100%;max-height:55vh;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.file-viewer-body .fv-text{width:100%;max-height:55vh;overflow:auto;font-family:var(--mn);font-size:11px;color:var(--tx);white-space:pre-wrap;line-height:1.6;padding:16px;background:var(--wh);border:1px solid var(--bd);border-radius:var(--rs)}
.file-viewer-body .fv-generic{text-align:center;padding:40px 20px}
.file-viewer-body .fv-generic-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:14px;font-weight:800;text-transform:uppercase}
.file-viewer-footer{padding:10px 16px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end}
.kb-filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.kb-filter-chips{display:flex;gap:4px;flex-wrap:wrap}
.kb-filter-chip{padding:4px 10px;border-radius:16px;font-size:9px;font-weight:700;cursor:pointer;border:1.5px solid var(--bd);background:var(--wh);color:var(--t3);transition:.12s;user-select:none}
.kb-filter-chip:hover{border-color:var(--t3)}
.kb-filter-chip.active{border-color:currentColor;background:currentColor;color:#fff}
.kb-filter-chip.f-urgent{color:var(--da)}.kb-filter-chip.f-urgent.active{background:var(--da);border-color:var(--da);color:#fff}
.kb-filter-chip.f-high{color:#F57C00}.kb-filter-chip.f-high.active{background:#F57C00;border-color:#F57C00;color:#000}
.kb-filter-chip.f-medium{color:#B8860B}.kb-filter-chip.f-medium.active{background:var(--pe);border-color:var(--pe);color:#000}
.kb-filter-chip.f-low{color:var(--su-d)}.kb-filter-chip.f-low.active{background:var(--su);border-color:var(--su);color:#000}
.kb-card.overdue .kb-overdue-tag{display:inline-flex}.kb-overdue-tag{display:none;align-items:center;gap:3px;font-size:8px;font-weight:700;color:var(--da);margin-left:auto}
.task-overdue-banner{display:none;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--rs);background:var(--da-l);border:1px solid rgba(255,61,0,.2);margin-bottom:14px;font-size:11px;color:var(--da);font-weight:600}
.task-overdue-banner svg{width:16px;height:16px;flex-shrink:0}
.task-overdue-banner.show{display:flex}
.task-overdue-notifs{font-size:10px;font-weight:500;color:var(--t2);margin-top:4px}
.task-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:10000;display:none;align-items:center;justify-content:center}
.task-modal-overlay.open{display:flex}
.task-modal{background:var(--wh);border-radius:var(--rd);box-shadow:0 12px 40px rgba(0,0,0,.2);width:560px;max-width:94vw;max-height:88vh;overflow-y:auto}
.chat-layout{display:flex;height:calc(100vh - 130px);margin:-20px -24px -40px;background:var(--wh);border-radius:var(--rd);overflow:hidden;border:1px solid var(--bd)}
.chat-list{width:300px;border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0;background:var(--sf)}
.chat-list-header{padding:14px 16px;font-size:13px;font-weight:700;color:var(--tx);display:flex;align-items:center;justify-content:space-between}
.chat-search{padding:0 12px 12px}.chat-search input{width:100%;padding:8px 12px 8px 32px;border:1.5px solid var(--bd);border-radius:20px;font-size:10px;font-family:inherit;outline:none;background:var(--wh);color:var(--tx)}.chat-search input:focus{border-color:var(--pr)}
.chat-section-label{padding:8px 16px 4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t4)}
.chat-list-items{flex:1;overflow-y:auto}
.chat-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .12s}.chat-item:hover{background:rgba(0,0,0,.04)}.chat-item.active{background:var(--wh);border-right:2px solid var(--ac)}
.chat-item-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;position:relative}
.chat-item-online{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:var(--su);border:2px solid var(--sf)}
.chat-item-info{flex:1;min-width:0}.chat-item-name{font-size:11px;font-weight:700;color:var(--tx)}.chat-item-preview{font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.chat-item-time{font-size:9px;color:var(--t4);font-family:var(--mn)}
.chat-item-unread{min-width:18px;height:18px;border-radius:9px;background:var(--ac);color:#000;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.chat-channel-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}
.chat-main{flex:1;display:flex;flex-direction:column;background:var(--wh)}
.chat-main-header{padding:12px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px}
.chat-main-header-info{flex:1}.chat-main-header-name{font-size:13px;font-weight:700;color:var(--tx)}.chat-main-header-status{font-size:9px;color:var(--su-d);font-weight:600}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:3px}
.chat-msg-group{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.chat-msg{max-width:70%;padding:10px 14px;font-size:11px;line-height:1.6;position:relative}
.chat-msg.sent{align-self:flex-end;background:var(--ac);color:#000;border-radius:14px 14px 4px 14px}
.chat-msg.received{align-self:flex-start;background:var(--sf);color:var(--tx);border-radius:14px 14px 14px 4px}
.chat-msg-footer{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:4px}
.chat-msg-time{font-size:8px;opacity:.6}
.chat-msg-status{display:flex;align-items:center}
.chat-msg-status svg{width:12px;height:12px}
.chat-msg-sender{font-size:9px;font-weight:700;margin-bottom:3px}
.chat-msg-file{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.15);border-radius:8px;margin-top:6px;cursor:pointer}
.chat-msg.received .chat-msg-file{background:rgba(0,0,0,.05)}
.chat-msg-file-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-date-sep{text-align:center;margin:16px 0;position:relative}.chat-date-sep:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bd)}.chat-date-sep span{position:relative;background:var(--wh);padding:0 12px;font-size:9px;font-weight:600;color:var(--t4)}
.chat-compose{padding:14px 20px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:8px}
.chat-compose-input{flex:1;padding:10px 14px;border:1.5px solid var(--bd);border-radius:22px;font-size:11px;font-family:inherit;outline:none;color:var(--tx);background:var(--sf)}.chat-compose-input:focus{border-color:var(--pr);background:var(--wh)}
.chat-compose-btn{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}
.chat-compose-send{background:var(--ac);color:#000}.chat-compose-send:hover{background:#067F14;color:#fff}
.chat-compose-attach{background:transparent;color:var(--t3)}.chat-compose-attach:hover{background:var(--sf);color:var(--tx)}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.notif-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid #F8F8F8;cursor:pointer;transition:background .12s}.notif-item:hover{background:var(--sf)}.notif-item.unread{background:var(--pr-l)}
.notif-archive-btn{opacity:0;transition:opacity .15s}.notif-item:hover .notif-archive-btn{opacity:1}
.notif-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-content{flex:1}.notif-title{font-size:11px;font-weight:600;color:var(--tx);margin-bottom:2px}.notif-desc{font-size:10px;color:var(--t3);line-height:1.5}.notif-time{font-size:9px;color:var(--t4);font-family:var(--mn);margin-top:4px}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--ac);flex-shrink:0;margin-top:4px}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;align-items:flex-start;justify-content:center;padding-top:5vh;overflow-y:auto}
/* Employee detail panel */
.emp-profile{display:none}
.emp-profile.active{display:block}
.emp-register{display:block}
.emp-register.hidden{display:none}
.emp-profile-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.emp-profile-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.emp-profile-name{font-size:16px;font-weight:800;color:var(--tx)}
.emp-profile-role{font-size:11px;color:var(--t3)}
.emp-profile-tabs{display:flex;border-bottom:2px solid var(--bd);margin-bottom:16px}
.emp-profile-tab{padding:10px 16px;font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.12s}
.emp-profile-tab:hover{color:var(--tx)}.emp-profile-tab.active{color:var(--pr);border-bottom-color:var(--pr)}
.emp-tab-content{display:none}.emp-tab-content.active{display:block}
.emp-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.emp-detail-item{display:flex;flex-direction:column;gap:2px}
.emp-detail-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t4)}
.emp-detail-value{font-size:11px;font-weight:600;color:var(--tx)}
.emp-profile.editing .emp-detail-value[contenteditable]{background:var(--sf);border:1.5px solid var(--bd);border-radius:6px;padding:5px 8px;outline:none;transition:border .12s}
.emp-profile.editing .emp-detail-value[contenteditable]:focus{border-color:var(--pr)}
.emp-training-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #F8F8F8}
.emp-training-item:last-child{border-bottom:none}
.emp-doc-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #F8F8F8;cursor:pointer;border-radius:var(--rs);transition:background .12s}
.emp-doc-item:hover{background:var(--sf)}
.emp-note-item{padding:10px 0;border-bottom:1px solid #F8F8F8}
.emp-note-item:last-child{border-bottom:none}
.tbl tr.emp-row{cursor:pointer}.tbl tr.emp-row:hover td{background:var(--pr-l)}
.emp-select-all{accent-color:var(--pr);cursor:pointer;width:14px;height:14px}
.emp-select{accent-color:var(--pr);cursor:pointer;width:14px;height:14px}
/* Add Employee Panel */
.add-emp-overlay{position:fixed;top:calc(46px + var(--ann-strip-h, 0px));left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:10000;display:none}
.add-emp-overlay.open{display:block}
.add-emp-panel{position:fixed;top:calc(46px + var(--ann-strip-h, 0px));right:-600px;width:600px;max-width:92vw;height:calc(100vh - 46px - var(--ann-strip-h, 0px));background:var(--wh);box-shadow:none;z-index:10001;display:flex;flex-direction:column;transition:right .25s ease,box-shadow .25s ease}
.add-emp-panel.open{right:0;box-shadow:-8px 0 32px rgba(0,0,0,.15)}
.add-emp-steps{display:flex;padding:0 20px;border-bottom:1px solid var(--bd);flex-shrink:0}
.add-emp-step{padding:10px 14px;font-size:10px;font-weight:600;color:var(--t4);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.12s;display:flex;align-items:center;gap:6px}
.add-emp-step:hover{color:var(--tx)}
.add-emp-step.active{color:var(--pr);border-bottom-color:var(--pr)}
.add-emp-step .step-num{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;transition:.12s}
.add-emp-step.active .step-num{background:var(--ac);border-color:var(--ac);color:#000}
.add-emp-step.done .step-num{background:var(--su);border-color:var(--su);color:#000}
.add-emp-section{display:none;padding:20px}.add-emp-section.active{display:block}
.modal{background:var(--wh);border-radius:var(--rd);width:90%;max-width:520px;max-height:85vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.2)}
.mh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd)}
.mx{background:none;border:none;font-size:18px;cursor:pointer;color:var(--t3);padding:4px;line-height:1}
#pub-notify{display:none;position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:10px;font-size:11px;font-weight:600;z-index:10002;box-shadow:0 4px 24px rgba(0,0,0,.18);align-items:center;gap:8px;min-width:260px;max-width:480px;animation:notifyIn .25s ease}
#pub-notify.success{background:#067F14;color:#fff}#pub-notify.info{background:#000000;color:#fff}#pub-notify.warn{background:#92400e;color:#fff}#pub-notify.error{background:#991b1b;color:#fff}#pub-notify.progress{background:var(--tx);color:#fff}
.notify-icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.notify-close{background:none;border:none;color:rgba(255,255,255,.6);font-size:16px;cursor:pointer;padding:0 0 0 8px;line-height:1}.notify-close:hover{color:#fff}
.notify-progress{position:absolute;bottom:0;left:0;height:2px;background:rgba(255,255,255,.3);border-radius:0 0 10px 10px;animation:notifyProg 3.5s linear forwards}
.spin-icon{animation:spin 1s linear infinite}
@keyframes notifyIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes notifyProg{from{width:100%}to{width:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.inline-save-banner{display:flex;align-items:center;gap:8px;padding:8px 14px;margin-top:10px;background:var(--su-l);border:1.5px solid var(--su);border-radius:var(--rs);font-size:11px;font-weight:600;color:var(--su-d);opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease}
body.dark-mode{--pg:#101010;--sf:#1C1C1C;--wh:#151515;--tx:#E5E5E5;--t2:#999999;--t3:#777777;--t4:#555555;--bd:#2E2E2E;--pr:#09EB20;--pr-l:#0f261a;--ac-l:#0f261a;--su-l:#0f261a;--su-d:#09EB20;--da-l:#2d1410;--pe-l:#2d2410;--wa-l:#2d1c0e;--pu-l:#1f1838;--di:#3E3E3E}
body.dark-mode .btn-print{color:#000}
body.dark-mode #pub-notify.progress{color:#000}
body.dark-mode .topbar{background:var(--wh);border-bottom-color:var(--bd)}
body.dark-mode .card{background:var(--wh);border-color:var(--bd)}
body.dark-mode .card-header{border-bottom-color:var(--bd)}
body.dark-mode .input,body.dark-mode .filter-select{background:var(--sf);border-color:var(--bd);color:var(--tx)}
body.dark-mode .tbl th{background:var(--sf);border-color:var(--bd);color:var(--t3)}
body.dark-mode .tbl td{border-color:var(--bd);color:var(--tx)}
body.dark-mode .modal{background:var(--wh);border-color:var(--bd)}
body.dark-mode .actions-dd{background:var(--wh);border-color:var(--bd)}
body.dark-mode #profile-panel,body.dark-mode #settings-panel{background:var(--wh);border-color:var(--bd)}
body.dark-mode #profile-panel-overlay,body.dark-mode #settings-panel-overlay{background:rgba(0,0,0,.6)}
body.dark-mode .modal-overlay{background:rgba(0,0,0,.6)}
body.dark-mode .mh{border-bottom-color:var(--bd)}
body.dark-mode .chat-list{background:var(--sf)}
body.dark-mode .chat-main{background:var(--wh)}
body.dark-mode .chat-msg.received{background:var(--sf)}
body.dark-mode .chat-compose-input{background:var(--sf);border-color:var(--bd);color:var(--tx)}
body.dark-mode .content{background:var(--pg)}
body.dark-mode .emp-training-item,body.dark-mode .emp-doc-item,body.dark-mode .emp-note-item{border-color:var(--bd)}
body.dark-mode .notif-item{border-color:var(--bd)}
body.dark-mode .pagination{border-color:var(--bd)}
body.dark-mode .kb-card{background:var(--wh);border-color:var(--bd)}
body.dark-mode .kb-col-head{border-color:var(--bd)}
body.dark-mode .tabs .tab{color:var(--t3)}
body.dark-mode .tabs .tab.active{color:var(--ac);border-color:var(--ac)}
body.dark-mode .help-panel{background:var(--wh);border-color:var(--bd);box-shadow:0 12px 40px rgba(0,0,0,.4)}
body.dark-mode .help-drag{background:var(--su);border-bottom-color:rgba(0,0,0,.2)}
body.dark-mode .help-search-bar{border-bottom-color:var(--bd)}
body.dark-mode .help-search-bar input{background:var(--sf);border-color:var(--bd);color:var(--tx)}
body.dark-mode .help-tip{background:var(--ac-l);color:var(--ac);border-left-color:var(--ac)}
body.dark-mode .help-step-n{background:var(--ac-l);color:var(--ac)}
body.dark-mode .help-cat-card{border-color:var(--bd)}
body.dark-mode .help-cat-card:hover{border-color:var(--ac)}
body.dark-mode .help-related{border-top-color:var(--bd)}
body.dark-mode .help-footer{border-top-color:var(--bd)}
body.dark-mode .help-scroll{scrollbar-color:var(--bd) transparent}
.settings-panel{display:none}.settings-panel.active{display:block}
.help-panel{display:none;position:fixed;top:60px;right:20px;width:420px;max-height:calc(100vh - 80px);background:var(--wh);border:1.5px solid var(--bd);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.28);z-index:10000;flex-direction:column;overflow:hidden}
.help-panel.open{display:flex}
.help-drag{padding:10px 16px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;gap:10px;cursor:move;user-select:none;background:var(--su)}
.help-drag-title{font-size:13px;font-weight:700;color:#000;flex:1}
.help-close{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#000;cursor:pointer;border:none;background:none}
.help-close:hover{background:rgba(0,0,0,.12)}
.help-search-bar{padding:8px 14px;border-bottom:1px solid var(--bd)}
.help-search-bar input{width:100%;padding:7px 10px 7px 30px;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:11px;background:var(--sf);color:var(--tx);outline:none}
.help-search-bar input:focus{border-color:var(--ac)}
.help-scroll{flex:1;overflow-y:auto;padding:14px 16px;font-size:11px}
.help-crumb{font-size:0.9em;color:var(--t4);margin-bottom:8px}
.help-crumb a{color:var(--pr);text-decoration:none;cursor:pointer}
.help-h2{font-size:1.27em;font-weight:700;color:var(--tx);margin:0 0 6px 0}
.help-h3{font-size:1.09em;font-weight:700;color:var(--tx);margin:14px 0 4px 0}
.help-p{font-size:1em;color:var(--t2);line-height:1.7;margin:0 0 8px 0}
.help-ul{margin:4px 0 10px 0;padding-left:16px;list-style:disc}
.help-ul li{font-size:1em;color:var(--t2);line-height:1.7;margin-bottom:4px}
.help-ul li strong{font-weight:600;color:var(--tx)}
.help-step{display:flex;gap:8px;margin-bottom:8px}
.help-step-n{width:20px;height:20px;border-radius:50%;background:var(--ac-l);color:var(--su-d);font-size:0.82em;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.help-step-t{font-size:1em;color:var(--t2);line-height:1.7}
.help-step-t strong{font-weight:600;color:var(--tx)}
.help-tip{padding:8px 10px;background:var(--ac-l);border-left:3px solid var(--ac);border-radius:0;margin:10px 0;font-size:0.91em;color:var(--tx);line-height:1.5}
.help-related{border-top:1px solid var(--bd);padding:12px 16px}
.help-related-title{font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.help-related a{display:block;font-size:11px;color:var(--pr);text-decoration:none;padding:3px 0;cursor:pointer}
.help-related a:hover{text-decoration:underline}
.help-footer{border-top:1px solid var(--bd);padding:10px 16px;display:flex;align-items:center;gap:8px}
.help-footer-text{font-size:10px;color:var(--t3);line-height:1.4;flex:1}
.help-cat-card{padding:10px 12px;border:1.5px solid var(--bd);border-radius:var(--rs);cursor:pointer;display:flex;align-items:center;gap:10px;transition:border-color .12s;margin-bottom:6px}
.help-cat-card:hover{border-color:var(--ac)}
.help-cat-card-title{font-size:1em;font-weight:600;color:var(--tx)}
.help-cat-card-desc{font-size:0.82em;color:var(--t3)}
.help-search-result{padding:8px 10px;border-radius:var(--rs);cursor:pointer;margin-bottom:2px}
.help-search-result:hover{background:var(--sf)}
.help-search-result-title{font-size:1em;font-weight:600;color:var(--tx)}
.help-search-result-cat{font-size:0.82em;color:var(--t4)}
/* === SHORTCUTS === */
.sc-wrap{padding:8px 8px 4px;border-bottom:1px solid rgba(255,255,255,0.06)}
/* Platform announcement marquee (CnX-SA broadcast strip under the module bar) */
#platform-announcements{position:fixed;top:46px;left:0;right:0;z-index:9998}
.platform-ann{display:flex;align-items:center;gap:10px;height:32px;padding:0 16px;font-size:11px;font-weight:600;color:#fff;overflow:hidden}
/* Marquee-specific severity colours: info uses the brand green fill with black text
   (12.9:1); warning/critical keep darkened fills so white 11px text clears WCAG AA (>=4.5:1). */
.platform-ann.sev-info{background:var(--ac);color:#000}
.platform-ann.sev-warning{background:#B45309}
.platform-ann.sev-critical{background:#C62828}
.platform-ann>svg{width:14px;height:14px;flex-shrink:0}
.platform-ann-track{flex:1;height:100%;position:relative;overflow:hidden}
.platform-ann-set{display:inline-flex;align-items:center}
/* Classic marquee: one copy starts off the right edge (padding-left:100% of the
   track) and scrolls fully across, then repeats from the right. The decorative
   second set is not needed for this and is hidden. */
.platform-ann-set + .platform-ann-set{display:none}
.platform-ann-seq{position:absolute;left:0;top:0;height:100%;display:inline-flex;align-items:center;white-space:nowrap;padding-left:100%;animation:annScroll 24s linear infinite;will-change:transform}
.platform-ann-track:hover .platform-ann-seq,.platform-ann-track:focus-within .platform-ann-seq{animation-play-state:paused}
.platform-ann-item{padding:0 4px}
.platform-ann-item strong{font-weight:800}
.platform-ann-sep{padding:0 12px;opacity:.5}
@keyframes annScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* Reduced motion: no auto-scroll. Keep the fixed-height strip but let the user
   scroll it by hand, and drop the decorative duplicate so content isn't doubled. */
@media (prefers-reduced-motion:reduce){
  .platform-ann-seq{animation:none;position:static;padding-left:0}
  .platform-ann-track{overflow-x:auto}
  .platform-ann-set + .platform-ann-set{display:none}
}

/* Shared confirmation modal — replaces the native browser wire:confirm dialog with
   a centred, on-brand prompt. Tone drives the accent: danger=red (delete/remove),
   warn=orange (archive/warnings), info=green (benign). Theme-aware via the tokens. */
.cnx-cf-overlay{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.42)}
.cnx-cf-card{background:var(--wh);border-radius:var(--rd);width:400px;max-width:100%;box-shadow:0 16px 50px rgba(0,0,0,.32);overflow:hidden}
.cnx-cf-bar{height:4px;background:var(--da)}
.cnx-cf-bar.warn{background:var(--wa)}
.cnx-cf-bar.info{background:var(--ac)}
.cnx-cf-body{padding:22px 24px}
.cnx-cf-head{display:flex;gap:14px;align-items:flex-start}
.cnx-cf-icon{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--da-l);color:var(--da)}
.cnx-cf-icon svg{width:20px;height:20px}
.cnx-cf-icon.warn{background:var(--wa-l);color:var(--wa)}
.cnx-cf-icon.info{background:var(--pr-l);color:var(--su-d)}
.cnx-cf-title{font-size:14px;font-weight:700;color:var(--tx);line-height:1.35}
.cnx-cf-msg{font-size:12.5px;color:var(--t2);margin-top:5px;line-height:1.5}
.cnx-cf-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.cnx-cf-confirm{background:var(--da);color:#fff;border:0}
.cnx-cf-confirm.warn{background:var(--wa)}
.cnx-cf-confirm.info{background:var(--su-d)}
.platform-ann-close{background:none;border:none;color:rgba(255,255,255,.78);cursor:pointer;font-size:16px;padding:0 2px;line-height:1;flex-shrink:0}
.platform-ann-close:hover{color:#fff}
.platform-ann.sev-info .platform-ann-close{color:rgba(0,0,0,.6)}.platform-ann.sev-info .platform-ann-close:hover{color:#000}
.pu-card{border:1px solid var(--bd);border-radius:var(--rd);padding:14px 16px;margin-bottom:10px;background:var(--wh);transition:.12s}
.pu-card:hover{border-color:var(--pr);box-shadow:0 2px 8px rgba(9,235,32,.06)}
.pu-card.unread{border-left:4px solid var(--ac)}
.pu-card-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pu-card-date{font-size:9px;color:var(--t4);font-family:var(--mn)}
.pu-card-title{font-size:12px;font-weight:700;color:var(--tx)}
.pu-card-body{font-size:11px;color:var(--t2);line-height:1.6}
.pu-card-module{font-size:8px;font-weight:700;padding:2px 6px;border-radius:10px;background:var(--sf);color:var(--t3);margin-left:auto}

.sc-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px}
.sc-title{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.22)}
.sc-gear{width:16px;height:16px;color:rgba(255,255,255,.2);cursor:pointer;transition:.15s}.sc-gear:hover{color:rgba(255,255,255,.6)}
.sc-list{display:flex;flex-direction:column;gap:2px}
.sc-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:0 5px 5px 0;font-size:10px;font-weight:600;color:rgba(255,255,255,0.65);cursor:pointer;transition:.12s;text-decoration:none;border-left:4px solid var(--ac);background:rgba(9,235,32,.06)}
.sc-item:hover{background:rgba(9,235,32,.12);color:#fff;border-left-color:#09EB20}
.sc-item svg{width:12px;height:12px;flex-shrink:0;opacity:.5}
.sc-mod{font-size:7px;font-weight:800;letter-spacing:.04em;color:var(--ac);background:rgba(9,235,32,.12);padding:1px 4px;border-radius:3px;flex-shrink:0;text-transform:uppercase;min-width:22px;text-align:center}
.sc-empty{font-size:9px;color:rgba(255,255,255,0.15);padding:8px;text-align:center;font-style:italic}
.sc-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center}
.sc-modal-bg.open{display:flex}
.sc-modal{background:var(--wh);border-radius:var(--rd);box-shadow:0 20px 60px rgba(0,0,0,.25);width:640px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column}
.sc-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd)}
.sc-modal-hdr h3{font-size:14px;font-weight:800;color:var(--tx);margin:0}
.sc-modal-close{width:28px;height:28px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:.12s}.sc-modal-close:hover{background:var(--sf)}
.sc-modal-body{display:grid;grid-template-columns:1fr 1fr;gap:0;flex:1;overflow:hidden}
.sc-col{display:flex;flex-direction:column;overflow:hidden}
.sc-col:first-child{border-right:1px solid var(--bd)}
.sc-col-hdr{padding:10px 16px;border-bottom:1px solid var(--bd);font-size:10px;font-weight:700;color:var(--t3);background:var(--sf)}
.sc-col-body{flex:1;overflow-y:auto;padding:8px}
.sc-group-title{font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t4);padding:8px 8px 4px}
.sc-avail{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;font-size:11px;font-weight:500;color:var(--t2);cursor:pointer;transition:.12s}
.sc-avail:hover{background:var(--pr-l);color:var(--pr)}
.sc-avail.added{opacity:.3;pointer-events:none}
.sc-avail svg{width:14px;height:14px;flex-shrink:0;color:var(--t4)}
.sc-sel{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;font-size:11px;font-weight:500;color:var(--tx);background:var(--sf);margin-bottom:4px}
.sc-sel-mod{font-size:8px;font-weight:700;color:var(--su-d);min-width:32px}
.sc-sel-name{flex:1}
.sc-sel-rm{width:20px;height:20px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t4);transition:.12s;flex-shrink:0}.sc-sel-rm:hover{background:var(--da-l);color:var(--da)}
.sc-modal-ft{padding:12px 20px;border-top:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center}
.sc-limit{font-size:9px;color:var(--t4)}
.sc-toggle{position:relative;width:36px;height:20px;cursor:pointer;flex-shrink:0}
.sc-toggle input{opacity:0;width:0;height:0}
.sc-toggle-track{position:absolute;inset:0;background:var(--bd);border-radius:10px;transition:.2s}
.sc-toggle input:checked+.sc-toggle-track{background:var(--ac)}
.sc-toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sc-toggle input:checked~.sc-toggle-knob{left:18px}
.sc-sel-drag{width:16px;height:16px;cursor:grab;color:var(--t4);flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.4;transition:.15s}
.sc-sel-drag:hover{opacity:.8;color:var(--tx)}
.sc-sel.dragging{opacity:.4;background:var(--ac-l)}
.sc-sel.drag-over{border-top:2px solid var(--ac);margin-top:-2px}
.sb-nav.hidden{display:none}
@media(max-width:768px){.sidebar{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}.chat-list{width:100%}.chat-main{display:none}.chat-main.chat-mobile-open{display:flex;position:fixed;inset:0;z-index:200;background:var(--wh)}.chat-list.chat-mobile-hidden{display:none}.chat-mobile-back{display:inline-flex!important}.kb-col{min-width:240px;max-width:240px}.dash-grid{grid-template-columns:1fr}.dash-widget.dw-half{grid-column:span 1}}

/* ===== Mobile shell: hamburger drawer with the module switcher folded in (<=768px) ===== */
.sw-burger{display:none;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;padding:0;border:1.5px solid rgba(255,255,255,.5);border-radius:8px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.sw-burger svg{width:20px;height:20px;display:block}
.sw-burger .sw-burger-close{display:none}
body.nav-open .sw-burger .sw-burger-open{display:none}
body.nav-open .sw-burger .sw-burger-close{display:block}
.sw-mobile-brand{display:none;color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em}
.sb-modules{display:none}
.nav-backdrop{display:none}
@media(max-width:768px){
  #sw{justify-content:flex-start;gap:10px;padding:0 12px}
  #sw .sw-btn{display:none}
  .sw-burger{display:inline-flex}
  .sw-mobile-brand{display:inline-flex;align-items:center}
  .sidebar{display:flex;position:fixed;top:calc(46px + var(--ann-strip-h, 0px));left:0;bottom:0;width:268px;max-width:84vw;transform:translateX(-100%);transition:transform .25s ease;z-index:10001;box-shadow:6px 0 24px rgba(0,0,0,.28)}
  body.nav-open .sidebar{transform:translateX(0)}
  .nav-backdrop{display:block;position:fixed;top:calc(46px + var(--ann-strip-h, 0px));left:0;right:0;bottom:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:10000}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
  .sb-modules{display:block}
  .tb-mo-hide{display:none !important}
}
/* Dashboard widgets */
.dash-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.dash-widget{position:relative;border-radius:var(--rd);grid-column:span 2}
.dash-widget.dw-half{grid-column:span 1}



.col-pick-btn{width:28px;height:28px;border-radius:var(--rs);border:1.5px solid var(--bd);background:var(--wh);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s;position:relative;flex-shrink:0}
.col-pick-btn:hover{border-color:var(--pr);color:var(--pr)}
.col-pick-btn svg{width:14px;height:14px;color:var(--t2)}
.col-pick-btn:hover svg{color:var(--pr)}
.col-pick-dd{display:none;position:absolute;right:0;top:calc(100% + 6px);width:260px;background:var(--wh);border:1.5px solid var(--bd);border-radius:var(--rd);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:600;padding:0;max-height:400px;overflow-y:auto}
.col-pick-dd.open{display:block}
.col-pick-hdr{padding:10px 12px 8px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.col-pick-hdr span{font-size:11px;font-weight:700;color:var(--tx)}
.col-pick-reset{font-size:10px;color:var(--pr);cursor:pointer;font-weight:600}
.col-pick-reset:hover{text-decoration:underline}
.col-pick-list{padding:6px 0}
.col-pick-item{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:11px;color:var(--tx);cursor:pointer;transition:background .08s}
.col-pick-item:hover{background:var(--sf)}
.col-pick-item.locked{cursor:default;opacity:.7}
.col-pick-item.locked:hover{background:transparent}
.col-pick-item .cp-toggle{width:30px;height:16px;border-radius:8px;position:relative;transition:background .15s;flex-shrink:0}
.col-pick-item .cp-toggle.on{background:var(--su)}
.col-pick-item .cp-toggle.off{background:var(--di)}
.col-pick-item .cp-toggle::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:2px;transition:left .15s}
.col-pick-item .cp-toggle.on::after{left:16px}
.col-pick-item .cp-toggle.off::after{left:2px}
.col-pick-item .cp-name{flex:1;font-size:11px}
.col-pick-item .cp-name.off{color:var(--t4)}
.col-pick-item .cp-lock{color:var(--t4);flex-shrink:0}
.col-pick-item .cp-lock svg{width:11px;height:11px}
.col-pick-item .cp-move{display:flex;flex-direction:column;gap:0;flex-shrink:0}
.col-pick-item .cp-move button{background:none;border:none;cursor:pointer;padding:0;line-height:1;font-size:9px;color:var(--t4);transition:color .1s}
.col-pick-item .cp-move button:hover{color:var(--pr)}
body.dark-mode .col-pick-dd{background:var(--wh);border-color:var(--bd)}
body.dark-mode .col-pick-item:hover{background:var(--sf)}
/* === USERS REGISTER — fill viewport, sticky header + pagination, internal body scroll === */
#page-employees.active{display:flex;flex-direction:column;height:100%}
#emp-register-card{flex:1;min-height:0;display:flex;flex-direction:column}
.emp-register-scroll{flex:1;overflow-y:auto;min-height:0}
.emp-register-scroll table{width:100%}
.emp-register-scroll thead th{position:sticky;top:0;background:var(--wh);z-index:1}
#emp-register-card>.pagination{flex-shrink:0;background:var(--wh);border-top:1px solid var(--bd)}
body.dark-mode .emp-register-scroll thead th{background:var(--wh)}
body.dark-mode #emp-register-card>.pagination{background:var(--wh);border-color:var(--bd)}
/* === FLEET REGISTER — same pattern as Users === */
#page-fleet.active{display:flex;flex-direction:column;height:100%}
#fleet-register-card{flex:1;min-height:0;display:flex;flex-direction:column}
.fleet-register-scroll{flex:1;overflow-y:auto;overflow-x:auto;min-height:0}
.fleet-register-scroll table{width:100%}
.fleet-register-scroll thead th{position:sticky;top:0;background:var(--wh);z-index:1}
#fleet-register-card>.pagination{flex-shrink:0;background:var(--wh);border-top:1px solid var(--bd)}
body.dark-mode .fleet-register-scroll thead th{background:var(--wh)}
body.dark-mode #fleet-register-card>.pagination{background:var(--wh);border-color:var(--bd)}
/* === ASSETS REGISTER — same pattern === */
#page-assets.active{display:flex;flex-direction:column;height:100%}
#assets-register-card{flex:1;min-height:0;display:flex;flex-direction:column}
.assets-register-scroll{flex:1;overflow-y:auto;overflow-x:auto;min-height:0}
.assets-register-scroll table{width:100%}
.assets-register-scroll thead th{position:sticky;top:0;background:var(--wh);z-index:1}
#assets-register-card>.pagination{flex-shrink:0;background:var(--wh);border-top:1px solid var(--bd)}
body.dark-mode .assets-register-scroll thead th{background:var(--wh)}
body.dark-mode #assets-register-card>.pagination{background:var(--wh);border-color:var(--bd)}
/* === SEARCHABLE DROPDOWN (canonical) === */
.search-dd-wrap{position:relative}
.search-dd-input{width:100%;padding:7px 10px;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:11px;font-family:inherit;color:var(--tx);background:var(--wh);outline:none;box-sizing:border-box}
.search-dd-input:focus{border-color:var(--pr)}
.search-dd-list{display:none;position:absolute;top:100%;left:0;right:0;max-height:160px;overflow-y:auto;background:var(--wh);border:1.5px solid var(--pr);border-top:none;border-radius:0 0 var(--rs) var(--rs);z-index:60;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.search-dd-list.open{display:block}
.search-dd-item{padding:6px 10px;font-size:11px;color:var(--tx);cursor:pointer;transition:background .1s}
.search-dd-item:hover,.search-dd-item.highlighted{background:var(--pr-l);color:var(--pr)}
.search-dd-item.no-match{color:var(--t4);font-style:italic;cursor:default}
body.dark-mode .search-dd-list{background:var(--wh);border-color:var(--pr)}
body.dark-mode .search-dd-item:hover,body.dark-mode .search-dd-item.highlighted{background:var(--pr-l)}