/* Staff dashboard Tasks board (live Trello). Loaded by index.html. */
.kb-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;align-items:stretch;-webkit-overflow-scrolling:touch}
.kb-col{flex:0 0 280px;width:280px;background:rgba(17,24,39,.75);border:1px solid rgba(255,255,255,.06);border-radius:16px;display:flex;flex-direction:column;max-height:calc(100vh - 340px);min-height:120px;transition:border-color .2s,background .2s,box-shadow .2s}
.kb-col-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}
.kb-cards{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:64px}
.kb-cards:not(:has(.kb-card))::before{content:'Drop cards here';display:block;text-align:center;font-size:13px;color:#475569;padding:14px 0;border:1px dashed rgba(255,255,255,.07);border-radius:10px}
.kb-col.drag-over{border-color:rgba(124,58,237,.6);background:rgba(124,58,237,.07);box-shadow:0 0 0 1px rgba(124,58,237,.25),0 0 28px rgba(124,58,237,.18)}
.kb-card{cursor:grab;border-radius:12px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.kb-card img{-webkit-user-drag:none}
.kb-card-inner{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 12px;transition:background .15s,border-color .15s}
.kb-card:hover .kb-card-inner{background:rgba(255,255,255,.09);border-color:rgba(124,58,237,.35)}
.kb-chosen .kb-card-inner{border-color:rgba(124,58,237,.55)}
/* slot where the card will land */
.kb-placeholder{outline:2px dashed rgba(124,58,237,.6);outline-offset:-2px;background:rgba(124,58,237,.10)}
.kb-placeholder .kb-card-inner{visibility:hidden}
/* card lifted under the cursor (Sortable positions it with transform, so tilt the inner box) */
.kb-drag{opacity:1!important}
.kb-drag .kb-card-inner{background:#1e2640;border-color:rgba(124,58,237,.65);animation:kbLift .18s ease-out forwards}
@keyframes kbLift{from{transform:none;box-shadow:none}to{transform:rotate(3.5deg) scale(1.04);box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(124,58,237,.35)}}
.kb-settle .kb-card-inner{animation:kbSettle .34s cubic-bezier(.2,.8,.2,1)}
@keyframes kbSettle{0%{transform:scale(1.04);box-shadow:0 0 0 2px rgba(124,58,237,.75),0 10px 26px rgba(124,58,237,.3)}100%{transform:none;box-shadow:0 0 0 0 rgba(124,58,237,0)}}
.kb-snapback .kb-card-inner{border-color:rgba(239,68,68,.65);box-shadow:0 0 0 1px rgba(239,68,68,.4),0 12px 28px rgba(0,0,0,.5)}
body.kb-is-dragging,body.kb-is-dragging *{cursor:grabbing!important}
.kb-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:rgba(127,29,29,.95);border:1px solid rgba(239,68,68,.5);color:#fecaca;padding:10px 18px;border-radius:12px;font-size:14px;z-index:300;transition:opacity .25s,transform .25s;pointer-events:none;max-width:calc(100vw - 32px)}
.kb-toast.show{opacity:1;transform:translate(-50%,0)}
.kb-label{display:inline-block;height:7px;min-width:32px;border-radius:4px;margin:0 4px 4px 0}
.kb-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#EC4899);color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #0A0F1E;margin-left:-6px}
.kb-avatar:first-child{margin-left:0}
.kb-due{display:inline-flex;align-items:center;gap:3px;font-size:12px;padding:2px 7px;border-radius:6px;background:rgba(100,116,139,.15);color:#94a3b8}
.kb-due.overdue{background:rgba(239,68,68,.18);color:#f87171}
.kb-due.today{background:rgba(245,158,11,.18);color:#fbbf24}
.kb-due.complete{background:rgba(16,185,129,.15);color:#10b981}
.kb-addcard{margin:0;padding:7px 10px;font-size:13px;color:#64748b;border:1px dashed rgba(255,255,255,.12);border-radius:10px;cursor:pointer;text-align:left;background:none;font-family:'Outfit',sans-serif;flex-shrink:0;transition:all .15s}
.kb-addcard:hover{color:#e2e8f0;border-color:rgba(124,58,237,.5)}
.kb-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:13px;cursor:pointer;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#94a3b8;transition:all .15s;font-family:'Outfit',sans-serif}
.kb-chip.on{background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(236,72,153,.3));border-color:rgba(124,58,237,.6);color:#fff}
.kb-avatar-img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid #0A0F1E;margin-left:-6px;display:inline-block;vertical-align:middle}
.kb-avatar-img:first-child,.kb-avatar:first-child{margin-left:0}
.kb-meta-badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;padding:2px 7px;border-radius:6px;background:rgba(100,116,139,.15);color:#94a3b8}
.kb-meta-badge.complete{background:rgba(16,185,129,.15);color:#10b981}
.kb-picker{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;margin-bottom:12px}
.kb-pick-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:14px;color:#cbd5e1;transition:background .15s}
.kb-pick-row:hover{background:rgba(255,255,255,.06)}
.kb-checkitem{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:14px;color:#cbd5e1}
.kb-checkitem input[type=checkbox]{width:15px;height:15px;accent-color:#7C3AED;cursor:pointer;flex-shrink:0}
.kb-checkitem.done span.ci-name{text-decoration:line-through;color:#64748b}
.kb-del-btn{background:none;border:none;color:#475569;cursor:pointer;padding:3px;border-radius:6px;flex-shrink:0;display:inline-flex}
.kb-del-btn:hover{color:#ef4444;background:rgba(239,68,68,.1)}
.kb-progress{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;flex:1}
.kb-progress>div{height:100%;background:linear-gradient(90deg,#7C3AED,#EC4899);border-radius:3px;transition:width .2s}
.kb-comment{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.kb-comment:last-child{border-bottom:none}
.kb-attach-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);margin-bottom:6px}
@media(max-width:768px){.kb-col{flex:0 0 82vw;width:82vw;max-height:none}}

/* ---- toolbar & filters ---- */
.kb-toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.kb-toolbar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kb-toolbar .kb-chip,.kb-search,.kb-select,.kb-icon-btn,.kb-views{height:34px;box-sizing:border-box}
.kb-views{display:inline-flex;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:3px}
.kb-view-btn{border:none;background:none;color:#94a3b8;font-size:13px;height:26px;padding:0 13px;border-radius:999px;cursor:pointer;font-family:'Outfit',sans-serif;display:inline-flex;align-items:center;gap:6px;transition:color .15s,background .15s}
.kb-view-btn:hover{color:#e2e8f0}
.kb-view-btn.on{background:linear-gradient(135deg,rgba(124,58,237,.45),rgba(236,72,153,.45));color:#fff}
.kb-actions{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.kb-icon-btn{width:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#94a3b8;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.kb-icon-btn:hover{color:#fff;background:rgba(124,58,237,.18);border-color:rgba(124,58,237,.45)}
.kb-icon-btn.spinning svg{animation:kbSpin .8s linear infinite}
@keyframes kbSpin{to{transform:rotate(360deg)}}
.kb-search{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:0 13px;color:#64748b;flex:0 1 260px;min-width:180px;transition:border-color .15s}
.kb-search:focus-within{border-color:rgba(124,58,237,.55)}
.kb-search input{background:none;border:none;outline:none;color:#e2e8f0;font-size:13px;width:100%;min-width:0;font-family:'Outfit',sans-serif}
.kb-select-wrap{position:relative;display:inline-flex;align-items:center}
.kb-select{-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:0 30px 0 31px;font-size:13px;font-weight:400;color:#cbd5e1;outline:none;font-family:'Outfit',sans-serif;max-width:190px;cursor:pointer;transition:border-color .15s,background .15s}
.kb-select:hover{border-color:rgba(255,255,255,.2)}
.kb-select:focus-visible{border-color:rgba(124,58,237,.55)}
.kb-select option{background:#1a2035;color:#e2e8f0}
.kb-sel-icon{position:absolute;left:11px;color:#64748b;pointer-events:none}
.kb-sel-chev{position:absolute;right:10px;color:#64748b;pointer-events:none}
.kb-select-wrap.on .kb-select{border-color:rgba(124,58,237,.6);background:rgba(124,58,237,.16);color:#fff}
.kb-select-wrap.on .kb-sel-icon,.kb-select-wrap.on .kb-sel-chev{color:#c4b5fd}
.kb-filter-status{margin-left:auto;font-size:13px;color:#64748b;white-space:nowrap}
.kb-filter-status .n{color:#cbd5e1;font-weight:600;margin-right:4px}
.kb-filter-status button{background:none;border:none;color:#a78bfa;cursor:pointer;font-size:13px;font-family:'Outfit',sans-serif;padding:0 0 0 4px}
.kb-filter-status button:hover{color:#c4b5fd;text-decoration:underline}
/* instant hover labels for icon-only buttons */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);background:#111827;border:1px solid rgba(124,58,237,.35);color:#e2e8f0;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;padding:6px 9px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.4);font-family:'Outfit',sans-serif}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
[data-tip].tip-right::after{left:auto;right:0;transform:translate(0,-4px)}
[data-tip].tip-right:hover::after,[data-tip].tip-right:focus-visible::after{transform:translate(0,0)}
@media(max-width:768px){
  /* phones: one tidy grid; the toolbar rows dissolve so controls can be arranged two per line */
  .kb-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .kb-toolbar-row{display:contents}
  .kb-views{order:1;grid-column:1/-1;display:flex}
  .kb-view-btn{flex:1;justify-content:center;padding:0 8px}
  .kb-search{order:2;grid-column:1/-1;min-width:0}
  .kb-select-wrap{order:3;min-width:0}
  .kb-select{width:100%;max-width:none}
  #kb-filter-mine{order:4;justify-content:center}
  .kb-filter-status{order:5;margin:0;align-self:center}
  .kb-actions{order:6;margin:0;justify-self:end}
}
.kb-admin-only{display:none!important}
body.kb-admin .kb-admin-only{display:inline-flex!important}
body.kb-admin .kb-admin-only.kb-block{display:block!important}

/* ---- column extras ---- */
.kb-col-menu-btn{background:none;border:none;color:#64748b;cursor:pointer;padding:2px 4px;border-radius:6px;display:inline-flex}
.kb-col-menu-btn:hover{color:#e2e8f0;background:rgba(255,255,255,.08)}
body.kb-admin .kb-col-head{cursor:grab}
.kb-col-placeholder{outline:2px dashed rgba(124,58,237,.6);outline-offset:-2px;background:rgba(124,58,237,.08)!important}
.kb-col-placeholder>*{visibility:hidden}
.kb-col-add{flex:0 0 260px;width:260px;align-self:flex-start;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);border-radius:16px;padding:12px}
.kb-composer{background:rgba(255,255,255,.05);border:1px solid rgba(124,58,237,.35);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px}
.kb-composer textarea{background:none;border:none;outline:none;color:#e2e8f0;font-size:14px;resize:none;font-family:'Outfit',sans-serif;min-height:44px}
.kb-meta-badge.kb-start{background:rgba(6,182,212,.12);color:#67e8f9}

/* ---- popover menus ---- */
.kb-pop{position:fixed;z-index:160;background:#161d31;border:1px solid rgba(124,58,237,.3);border-radius:12px;padding:6px;min-width:190px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.kb-pop button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;color:#cbd5e1;font-size:14px;padding:7px 10px;border-radius:8px;cursor:pointer;font-family:'Outfit',sans-serif}
.kb-pop button:hover{background:rgba(255,255,255,.07);color:#fff}
.kb-pop button.danger{color:#f87171}

/* ---- card modal extras ---- */
.kb-section-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#64748b;margin-bottom:6px}
.kb-archived-banner{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);color:#fde68a;border-radius:10px;padding:8px 12px;font-size:13px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.kb-inline-edit{cursor:text;border-radius:6px;padding:1px 4px;margin:-1px -4px}
.kb-inline-edit:hover{background:rgba(255,255,255,.06)}
.kb-conflict{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:#fecaca;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px}
.kb-label-swatches{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.kb-swatch{width:28px;height:20px;border-radius:5px;cursor:pointer;border:2px solid transparent}
.kb-swatch.on{border-color:#fff}
.kb-mention-menu{position:absolute;left:0;bottom:100%;margin-bottom:4px;background:#161d31;border:1px solid rgba(124,58,237,.35);border-radius:10px;padding:4px;min-width:220px;z-index:5;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.kb-mention-menu div{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:13px;color:#cbd5e1;cursor:pointer}
.kb-mention-menu div:hover,.kb-mention-menu div.on{background:rgba(124,58,237,.25);color:#fff}
.kb-mention{color:#c4b5fd;font-weight:600}
.kb-activity-row{display:flex;gap:8px;padding:5px 0;font-size:13px;color:#94a3b8;border-bottom:1px solid rgba(255,255,255,.04)}
.kb-activity-row b{color:#e2e8f0;font-weight:600}

/* ---- calendar ---- */
.kb-cal-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.kb-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.kb-cal-dow{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#64748b;text-align:center;padding:4px 0}
.kb-cal-day{background:rgba(17,24,39,.75);border:1px solid rgba(255,255,255,.06);border-radius:12px;min-height:112px;padding:6px;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}
.kb-cal-day.other{opacity:.45}
.kb-cal-day.today{border-color:rgba(124,58,237,.6);box-shadow:0 0 0 1px rgba(124,58,237,.25)}
.kb-cal-day.drag-over{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.6)}
.kb-cal-num{font-size:13px;color:#94a3b8;font-weight:600}
.kb-cal-cards{display:flex;flex-direction:column;gap:4px;flex:1;min-height:30px}
.kb-cal-chip{font-size:13px;line-height:1.25;padding:4px 7px;border-radius:7px;background:rgba(255,255,255,.07);border-left:3px solid #94a3b8;color:#e2e8f0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none}
.kb-cal-chip:hover{background:rgba(255,255,255,.12)}
.kb-cal-chip.done{text-decoration:line-through;color:#64748b}
.kb-cal-chip.overdue{background:rgba(239,68,68,.14)}
.kb-cal-more{font-size:12px;color:#64748b;padding-left:4px}
@media(max-width:768px){.kb-cal-grid{grid-template-columns:repeat(7,minmax(44px,1fr));gap:3px}.kb-cal-day{min-height:70px;padding:3px}.kb-cal-chip{font-size:12px;padding:2px 4px}}

/* ---- workload ---- */
.kb-wl-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;min-width:60px}
.kb-wl-bar>div{height:100%;border-radius:3px}
.kb-wl-row{cursor:pointer}

/* ---- notifications bell ---- */
.kb-bell-wrap{position:relative}
.kb-bell{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#cbd5e1;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.kb-bell:hover{color:#fff;background:rgba(255,255,255,.1)}
.kb-bell-count{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:9px;background:#EC4899;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #0A0F1E}
.kb-notif-panel{position:absolute;right:0;top:44px;width:360px;max-width:calc(100vw - 32px);max-height:70vh;overflow-y:auto;background:#141b2e;border:1px solid rgba(124,58,237,.3);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.55);z-index:120}
.kb-notif{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;font-size:13px;color:#cbd5e1}
.kb-notif:hover{background:rgba(255,255,255,.04)}
.kb-notif.unread{background:rgba(124,58,237,.08)}
.kb-notif .dot{width:7px;height:7px;border-radius:50%;background:#EC4899;margin-top:5px;flex-shrink:0}
.kb-notif .dot.read{background:transparent}
@media(max-width:768px){.kb-notif-panel{position:fixed;left:16px;right:16px;top:70px;width:auto}}

/* ---- recurring / templates forms ---- */
.kb-daychip{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#94a3b8;border-radius:8px;padding:4px 9px;font-size:13px;cursor:pointer;font-family:'Outfit',sans-serif}
.kb-daychip.on{background:rgba(124,58,237,.35);border-color:rgba(124,58,237,.7);color:#fff}
.kb-rule{border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:rgba(255,255,255,.03)}
.kb-toast.ok{background:rgba(6,78,59,.95);border-color:rgba(16,185,129,.5);color:#a7f3d0}