/* =========================================================
   BEYOND Task Board — styles.css (defragmented, behavior-identical)
   ========================================================= */
:root{
  --navy:#031931; --navy-2:#0B2A4A; --navy-3:#15406B; --coral:#F0512E;
  --paper:#F4F6F8; --card:#FFF; --line:#DCE1E8;
  --ink:#1B2430; --muted:#6B7889;
  --u1:#D92D20; --u2:#F0512E; --u3:#2E7D8F; --ok:#1E7C5A; --gold:#B78103;
  --radius:14px; --radius-sm:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Google Sans','Inter','Segoe UI',Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mono{font-family:Consolas,"SF Mono",monospace;font-size:.85em;letter-spacing:.02em}
.hidden{display:none!important}
h1,h2,h3{margin:0}
button{font-family:inherit;font-size:14px;border-radius:var(--radius-sm);border:1px solid transparent;
  padding:9px 15px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
button:focus-visible,input:focus,select:focus,textarea:focus{outline:2px solid var(--coral);outline-offset:1px}
input,select,textarea{font-family:inherit;font-size:14px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);width:100%}
.btn.primary{background:var(--coral);color:#fff;font-weight:600}
.btn.primary:hover{background:#D8451F}
.btn.ghost{background:#fff;border-color:var(--line);position:relative}
.btn.ghost:hover{border-color:var(--navy)}
.btn.danger-outline{background:#fff;border-color:var(--u1);color:var(--u1)}
.btn.danger-outline:hover{background:#FDECEA}
.link{background:none;border:none;color:#9FB2C7;text-decoration:underline;padding:0;font-size:12px;cursor:pointer}

/* ===== Login ===== */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{background:#fff;border-radius:20px;padding:34px;width:360px;max-width:100%;
  box-shadow:0 12px 40px rgba(3,25,49,.12)}
.login-card .brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.login-card h1{font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.login-card p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.login-card .brand .mark{width:28px;height:28px;background:url('/favicon.png') center/contain no-repeat;border-radius:6px}
.login-card input{margin-bottom:12px}
.login-card .btn{width:100%;padding:12px;font-size:15px}
.err{color:var(--u1);font-size:13px;text-align:center;min-height:18px}
.brand{justify-content:center}
.brand .mark{width:24px;height:24px;background:url('/favicon.png') center/contain no-repeat !important;border-radius:6px !important;transform:none !important}
.side-brand .mark{width:26px;height:26px;background:url('/favicon.png') center/contain no-repeat;border-radius:5px;flex:0 0 auto}

/* ===== App shell ===== */
.app{display:flex;min-height:100vh}
.side{flex:0 0 230px;background:var(--navy);color:#fff;padding:18px 0;
  display:flex;flex-direction:column}
.side-brand{display:flex;gap:12px;align-items:center;padding:0 18px 20px}
.side h1{font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.side-brand p{margin:2px 0 0;font-size:11px;color:#7E93AD}
.side-label{margin:14px 18px 7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5E7794}
.side ul{list-style:none;margin:0;padding:0}
.nav{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;color:#C3D0DE;
  padding:10px 18px;border-radius:0;font-size:14px}
.nav:hover{background:var(--navy-2);color:#fff}
.nav.on{background:var(--navy-3);color:#fff;box-shadow:inset 3px 0 0 var(--coral)}
.nav span{width:12px;text-align:center}
.side-foot{margin-top:auto;padding:16px 18px 0;border-top:1px solid var(--navy-2);
  font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bar-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.view-switch{display:inline-flex;background:#EEF1F5;border-radius:10px;padding:3px;gap:2px}
.view-switch .vs{border:none;background:transparent;color:var(--muted);font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:8px;cursor:pointer;transition:all .15s;font-family:inherit}
.view-switch .vs:hover{color:var(--ink)}
.view-switch .vs.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(3,25,49,.12)}

/* ===== Table view (Monday.com-style) ===== */
.table-view{padding:0 !important}
.tv-scroll{overflow-x:auto;width:100%}
.tv{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(3,25,49,.07)}
.tv thead th{position:sticky;top:0;background:#EAEDF1;color:#5E7794;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.tv tbody td{padding:11px 14px;border-bottom:1px solid #F0F2F5;vertical-align:middle;color:var(--ink)}
.tv tbody tr{cursor:pointer;transition:background .12s}
.tv tbody tr:hover{background:#F6F9FC}
.tv tbody tr:last-child td{border-bottom:none}
.tv .t-title{max-width:380px;font-weight:600;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv .t-muted{color:var(--muted);font-size:12.5px}
.t-urg{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.t-urg.U1{background:#FDECEC;color:var(--u1)} .t-urg.U2{background:#FFF1E6;color:#C2410C} .t-urg.U3{background:#E6F4EC;color:#1E7A46}
.t-due{font-size:12.5px;color:var(--ink);white-space:nowrap}
.t-due.late{color:var(--u1);font-weight:700}
.t-stage{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:#EEF1F5;color:#5A6B7B}
.tv .av.sm{margin-right:0}
.t-check-cell{width:38px;text-align:center}
.t-check{width:17px;height:17px;cursor:pointer;accent-color:var(--ok)}
.tv-empty{text-align:center;color:var(--muted);padding:18px 0}

/* status pill colors in table */
.t-stage.st-Done{background:#E6F4EC;color:#1E7A46}
.t-stage.st-Blocked{background:#FDECEC;color:var(--u1)}
.t-stage.st-In{background:#FFF7E0;color:#B7791F}
.t-stage.st-Review{background:#FFF1E6;color:#C2410C}
.t-stage.st-Backlog,.t-stage.st-To{background:#EEF1F5;color:#5A6B7B}

/* table sections (Active / Done separated) */
.tv-section{margin-bottom:18px}
.tv-sec-head{font-size:13px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;
  margin:6px 2px 8px;display:flex;align-items:center;gap:8px}
.tv-sec-head.done{color:#1E7A46}
.tv-sec-count{display:inline-block;background:#EEF1F5;color:#5A6B7B;font-size:11px;font-weight:700;
  padding:1px 9px;border-radius:20px}
.tv-sec-head.done .tv-sec-count{background:#E6F4EC;color:#1E7A46}

/* ===== Kanban: Done card green background ===== */
.card.done{background:#EAF6EF;border-left:3px solid var(--ok)}
.card.done .card-head h3{color:#1E5E38}

/* ===== Settings sort segment ===== */
.set-sort{margin:4px 0 2px}
.seg{display:inline-flex;background:#EEF1F5;border-radius:10px;padding:3px;gap:2px}
.seg-btn{border:none;background:transparent;color:var(--muted);font-size:13px;font-weight:600;
  padding:7px 14px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .15s}
.seg-btn.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(3,25,49,.12)}
.side-foot span:last-child{display:block;font-size:11px;color:#7E93AD;text-transform:uppercase;
  letter-spacing:.08em;margin:2px 0 6px}
.who-avatar{width:38px;height:38px;border-radius:50%;flex:0 0 auto;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  background-size:cover;background-position:center}
.who-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.who-text #whoName{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-text #whoRole{font-size:11px;color:var(--muted)}

/* ===== Main / top bar ===== */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:#fff;border-bottom:1px solid var(--line);padding:14px 22px}
.bar h2{font-size:19px}
.bar p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.bar-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.search{display:flex;align-items:center;gap:6px;background:#F1F4F7;border:1px solid transparent;border-radius:10px;padding:0 11px;transition:border-color .15s,background .15s}
.search:focus-within{border-color:var(--coral);background:#fff}
.search span{font-size:13px;opacity:.55}
.search input{border:none;background:transparent;padding:9px 0;width:170px}
.search input:focus{outline:none}
.filter{background:#F1F4F7;border-color:transparent;padding:9px 10px;border-radius:10px;color:var(--muted);font-size:13px}
.filter:focus{border-color:var(--coral);background:#fff;color:var(--ink)}
.bar-tools .btn{padding:9px 13px;font-size:13px}
.stats{display:flex;gap:26px;padding:12px 24px;background:#EAEDF1;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap}
.stats b{color:var(--ink);font-size:16px;margin-right:6px}
.stats .hot b{color:var(--u1)}

/* ===== Board (always horizontal) ===== */
.board{display:flex;gap:16px;padding:20px 24px 44px;overflow-x:auto;overflow-y:hidden;
  align-items:flex-start;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.col{flex:0 0 280px;max-width:280px;background:#E7EBEF;border-radius:var(--radius);padding:12px;
  min-height:120px;display:flex;flex-direction:column}
.col.over{background:#D9E1EA;outline:2px dashed var(--navy-3)}
.col-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 12px;
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}
.count{background:var(--navy);color:#fff;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600}
.col[data-stage="Blocked"] .count{background:var(--u1)}
.col[data-stage="Done"] .count{background:var(--ok)}

/* ===== Cards ===== */
.card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--u3);
  border-radius:var(--radius-sm);padding:7px 7px;margin-bottom:6px;cursor:grab;
  box-shadow:0 1px 3px rgba(3,25,49,.07);transition:transform .1s, box-shadow .1s}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(3,25,49,.12)}
.card.dragging{opacity:.4}
.card.p-U1{border-left-color:var(--u1)}
.card.p-U2{border-left-color:var(--u2)}
.card.p-U3{border-left-color:var(--u3)}
.card.done{border-left-color:var(--ok)}
.card.secret{background:#FFFCF2;border-color:#E8D9A8}
.card-head{margin-bottom:2px}
.card h3{margin:0;font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.card-sub{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:8.5px;line-height:1}
.card-urg{font-weight:600;font-size:8.5px;color:var(--u3)}
.card-urg.U1{color:var(--u1)} .card-urg.U2{color:var(--u2)}
.card-sub .chip.due{background:#E6F4EC;color:#1E7A46;font-size:8.5px;padding:2px 6px;font-weight:500}
.card-sub .chip.due.late{background:#FDECEC;color:var(--u1)}
.meta{display:flex;gap:6px;flex-wrap:wrap;font-size:11px}
.chip{background:#EEF1F5;border-radius:20px;padding:3px 9px;color:var(--muted)}
.chip.who{background:var(--navy);color:#fff}
.chip.due{background:#E7F0EE;color:var(--ok)}
.chip.late{background:#FDECEA;color:var(--u1);font-weight:700}
.chip.carry{background:var(--u1);color:#fff;font-weight:700}
.chip.lock{background:var(--gold);color:#fff;font-weight:700}
.chip.cl{background:#E9EDF3;color:var(--navy)}
.empty{font-size:12px;color:var(--muted);text-align:center;padding:22px 8px;line-height:1.6}

/* ===== Avatars ===== */
.av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;font-size:11px;font-weight:700;object-fit:cover;vertical-align:middle}
.av.sm{width:22px;height:22px;font-size:9px;border:1px solid #fff;margin-right:4px;flex:0 0 auto}
.card-avatars{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap}
.card-avatars .av{width:28px;height:28px;font-size:10px;border:2px solid #fff;box-shadow:0 1px 3px rgba(3,25,49,.18)}

/* ===== Panel (task modal popup) ===== */
.scrim{position:fixed;inset:0;background:rgba(3,25,49,.45);display:none;z-index:9}
.scrim.show{display:block}
#panel{width:520px;max-width:94%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
#panel .panel-body{flex:1;overflow-y:auto;padding:18px 20px}
.panel-head{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;padding:15px 18px}
.panel-actions{display:flex;align-items:center;gap:8px}
.btn.sm{padding:6px 11px;font-size:12.5px}
.x{flex:0 0 auto;width:34px;height:34px;margin-left:10px;border-radius:50%;background:var(--u1);color:#fff;border:none;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:background .15s,transform .1s}
.x:hover{background:#B42318}
.x:active{transform:scale(.94)}
.panel-title{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:2px 0 6px}
.doc-link{display:inline-block;font-size:13px;font-weight:500;color:var(--coral);text-decoration:none;margin-bottom:14px;word-break:break-all}
.doc-link:hover{text-decoration:underline}
.panel-body label{display:block;font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px}
.panel-body input,.panel-body select,.panel-body textarea{width:100%;font-size:14px;box-sizing:border-box}
.panel-body input[type=date]{min-height:38px}
.panel-body textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:820px){ .grid2{grid-template-columns:1fr;gap:0} }
.secret-row{display:flex!important;gap:10px;align-items:flex-start;background:#FFFCF2;
  border:1px solid #E8D9A8;border-radius:var(--radius-sm);padding:12px;text-transform:none!important;
  color:var(--ink)!important;font-size:13px!important}
.secret-row input{width:auto!important;margin-top:3px!important}
.secret-row small{color:var(--muted);line-height:1.5}
.panel-foot{display:flex;justify-content:space-between;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}

/* ===== Checklist + comments ===== */
.block{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.block-head{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.bar-track{height:6px;background:#E7EBEF;border-radius:6px;overflow:hidden;margin-bottom:11px}
.bar-fill{height:100%;background:var(--ok);width:0;transition:width .2s;border-radius:6px}
.checklist{list-style:none;margin:0 0 10px;padding:0}
.checklist li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #F0F2F5;
  justify-content:flex-start;width:100%}
.checklist li:last-child{border-bottom:none}
.checklist .ctext{flex:1;text-align:left;line-height:1.4}
.checklist li.done .ctext{text-decoration:line-through;color:var(--muted)}
.cb{position:relative;display:inline-flex;cursor:pointer;flex:0 0 auto}
.cb input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
.cb span{width:18px;height:18px;border:2px solid var(--line);border-radius:5px;display:inline-block;
  background:#fff;transition:background .15s,border-color .15s}
.cb input:checked + span{background:var(--ok);border-color:var(--ok)}
.cb input:checked + span::after{content:'✓';color:#fff;font-size:12px;display:flex;
  align-items:center;justify-content:center;height:100%}
.checklist .del{margin-left:auto;background:none;border:none;color:var(--muted);padding:0 6px;font-size:18px;flex:0 0 auto}
.checklist .del:hover{color:var(--u1)}
.row{display:flex;gap:8px}
.row input{flex:1}
.cm{border-left:2px solid var(--line);padding:2px 0 2px 12px;margin-bottom:10px;
  font-size:14px;line-height:1.5}
.cm-main{position:relative}
.cm-text{font-size:14px;line-height:1.5;margin:2px 0 6px}
.cm em{font-style:normal;font-size:11px;color:var(--muted)}
.cm-reply{background:none;border:none;color:var(--coral);font-size:12px;padding:0 8px 0 0;cursor:pointer;font-weight:600}
.cm-toggle{background:none;border:none;color:var(--muted);font-size:12px;padding:0;cursor:pointer}
.cm-replybox{display:flex;gap:6px;margin:8px 0 6px}
.cm-replybox input{flex:1;padding:7px 9px}
.cm-replybox .btn{padding:7px 12px}
.cm-replies{margin-top:8px;margin-left:14px;border-left:2px solid #E7EBEF;padding-left:10px}

/* ===== Modal base ===== */
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);opacity:0;
  width:min(520px,92vw);max-width:92vw;max-height:92vh;background:#fff;border-radius:18px;z-index:-1;
  transition:opacity .18s,transform .18s;
  box-shadow:0 20px 60px rgba(3,25,49,.3);pointer-events:none;display:flex;flex-direction:column;overflow:hidden}
.modal.show{opacity:1;z-index:11;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.modal-head h3{font-size:18px}
.modal-body{padding:18px 20px;flex:1 1 auto;overflow-y:auto;min-height:0}
.modal-body .hint{font-size:13px;color:var(--muted);margin:0 0 14px}
.col-edit{list-style:none;margin:0 0 14px;padding:0}
.col-edit li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.col-edit input[type=text]{flex:1}
.col-edit input[type=number]{width:64px}
.col-edit .del{background:none;border:none;color:var(--u1);font-size:18px;padding:0 6px}
.modal-body hr{border:none;border-top:1px solid var(--line);margin:16px 0}
.modal-body .btn{width:100%}
.note{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.6}

/* ===== Members / divisions ===== */
.modal.member{width:min(640px,94vw);max-width:94vw}
.modal.member .modal-body{padding:18px 22px}
.modal.member .mem-table{font-size:14.5px}
.modal.member .addbox{margin-top:6px}
.modal.member .addbox input,.modal.member .addbox select{flex:1 1 160px;min-width:130px}
.mem-table th,.mem-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.mem-table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:#EAEDF1}
.mem-table .mono{font-size:12px}
.mem-table td:last-child{text-align:right}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;background:#EEF1F5;color:var(--muted);white-space:nowrap}
.pill.mgr{background:var(--navy);color:#fff}
.pill.spv{background:#E6F0FF;color:#1C5FD6}
.pill.ctb{background:#EAF7EE;color:#1E8E4E}
.pill.mem{background:#EEF1F5;color:#5A6B7B}
.divpick{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:4px}
.divcheck{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:#F4F7FA;
  border:1px solid var(--line);border-radius:10px;padding:6px 10px;cursor:pointer}
.divcheck input{accent-color:var(--coral);width:15px;height:15px}
.divrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.divrow .divcheck{border:none;background:none;padding:0}
.divrow select{padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:#F7F9FB;font-size:13px}
.addbox{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.addbox input,.addbox select{flex:1;min-width:120px}

/* ===== Notifications + admin ===== */
.badge{position:absolute;top:-6px;right:-6px;background:var(--u1);color:#fff;border-radius:10px;
  font-size:10px;min-width:16px;height:16px;line-height:16px;padding:0 4px;display:none}
.modal.wide{max-width:920px;width:920px}
.modal.wide .modal-body{padding:20px 24px}
#admUserTable th:nth-child(1){width:30%}
#admUserTable th:nth-child(2){width:34%}
#admUserTable th:nth-child(3){width:22%}
#admUserTable th:nth-child(4){width:14%;text-align:right}
#admUserTable td:nth-child(3){padding:6px 12px}
#admDivTable .row{display:flex;gap:10px;margin:10px 0 4px}
#admDivTable .row input{flex:1}
#admDivTable input,#admUserTable select{width:100%}
#admUserTable .row .btn,#admUserTable .btn{flex:0 0 auto;width:auto}
#admUserTable select{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--line);
  background:#F7F9FB;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%235A6B7B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
#admUserTable select:focus{border-color:var(--coral);background-color:#fff;outline:none}
#admUserTable .role-act{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
#admUserTable .role-act button{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px 8px;border-radius:6px}
#admUserTable .role-act button:hover{background:#F0F2F5}
#admUserTable .role-act button.del{color:var(--u1)}
.addbox-detail summary{cursor:pointer;color:var(--coral);font-weight:600;font-size:13px;padding:8px 0}
.mention{color:var(--u1);font-weight:600}
.notif-list{list-style:none;margin:10px 0;padding:0;max-height:55vh;overflow:auto}
.notif-list li{display:flex;gap:10px;padding:10px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px}
.notif-list li:hover{background:#F6F9FC}
.notif-list li.read{opacity:.6}
.ni-icon{font-size:18px;flex:0 0 auto}
.ni-top{font-size:12px;color:var(--muted)}
.ni-text{font-size:14px}

/* ===== Tracking ===== */
.trk-totals{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.trk-totals .tt{flex:1;min-width:90px;background:#F1F4F7;border-radius:12px;padding:12px 14px;text-align:center}
.trk-totals .tt b{display:block;font-size:22px;color:var(--navy)}
.trk-totals .tt span{font-size:11px;color:var(--muted)}
.trk-totals .tt.ok b{color:var(--ok)}
.trk-totals .tt.hot b{color:var(--u1)}
.trk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.trk-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.trk-name{font-weight:700;font-size:14px;margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trk-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--muted)}
.trk-row b{color:var(--ink)}
.trk-row.ok b{color:var(--ok)}
.trk-row.hot b,.hot{color:var(--u1)}
.trk-sla{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:14px}
.trk-sla b{font-size:16px}
.trk-sla.ok b{color:var(--ok)}
.trk-sla.warn b{color:var(--gold)}
.trk-sla.hot b{color:var(--u1)}

/* ===== Toast ===== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;
  transition:transform .2s;z-index:20;max-width:85%;box-shadow:0 8px 24px rgba(3,25,49,.3)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--u1)}

/* ===== Settings avatar + crop ===== */
.set-avatar{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.avatar-prev{width:64px;height:64px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;
  background-size:cover;background-position:center;flex:0 0 auto}
.set-avatar-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.crop-wrap{margin:8px 0 4px}
.crop-stage{position:relative;width:200px;height:200px;margin:0 auto;background:#0E2238;border-radius:14px;overflow:hidden;cursor:grab;touch-action:none}
.crop-stage:active{cursor:grabbing}
.crop-stage img{position:absolute;top:0;left:0;user-select:none;pointer-events:none}
.crop-circle{position:absolute;border-radius:50%;border:2px dashed rgba(255,255,255,.85);
  box-shadow:0 0 0 9999px rgba(0,0,0,.35);pointer-events:none}
.crop-wrap input[type=range]{width:100%;margin:10px 0 6px}
#setCropApply{width:100%}

/* ===== Assignee checklist (Penanggung jawab) ===== */
.chklist{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow-y:auto;padding:2px 0}
.chk{display:flex;align-items:center;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;
  padding:3px 4px;border-radius:6px;cursor:pointer;background:none;border:none}
.chk:hover{background:#F4F7FA}
.chk input{margin:0 9px 0 0;width:16px;height:16px;accent-color:var(--ok);flex:0 0 auto}
.chk .av{margin-right:9px;flex:0 0 auto}
.chk span{flex:1 1 auto;line-height:1.3}

/* ===== Responsive ===== */
@media(max-width:900px){
  .board{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:14px;flex-wrap:nowrap}
  .col{flex:0 0 78%}
  #panel{width:96%}
}
@media(max-width:680px){
  .app{flex-direction:column}
  .side{flex:none;width:100%;flex-direction:row;flex-wrap:wrap;padding:10px 12px;gap:4px;align-items:center}
  .side-brand{display:none}
  .side-label{display:none}
  .side-foot{display:flex;width:100%;margin-top:6px;padding:10px 4px 0}
  .side ul{display:flex;gap:4px;overflow-x:auto;flex:1}
  .nav{padding:8px 11px;border-radius:8px;white-space:nowrap;font-size:13px}
  .nav.on{box-shadow:none}
  .admin-nav-item{font-size:13px}
  .bar{flex-direction:column;align-items:stretch;gap:10px}
  .bar-tools{width:100%;justify-content:flex-start}
  .search input{width:100%}
  .bar-tools .btn{flex:0 0 auto;font-size:12px;padding:8px 10px}
  .stats{gap:14px;padding:10px 14px}
  .grid2{grid-template-columns:1fr}
  #panel{width:100%;max-width:100%;max-height:100vh;height:100%;border-radius:0}
  .modal{max-width:96%}
  .modal.wide{max-width:96%;width:auto}
  .trk-grid{grid-template-columns:1fr}
}