/* KanbanKerja — gaya aplikasi. Bootstrap 5.3 sebagai dasar; token warna dari PRD bagian 8. */
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../vendor/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../vendor/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --kk-primary:#4F46E5; --kk-primary-rgb:79,70,229; --kk-primary-hover:#4338CA;
  --kk-success:#10B981; --kk-warning:#F59E0B; --kk-danger:#EF4444;
  --kk-success-text:#047857; --kk-warning-text:#92400E; --kk-danger-text:#B91C1C;
  --kk-success-bg:#D1FAE5; --kk-warning-bg:#FEF3C7; --kk-danger-bg:#FEE2E2;
  --kk-bg:#F6F7FB; --kk-surface:#FFFFFF; --kk-surface-2:#F1F2F8; --kk-border:#E3E5EE; --kk-text:#1E2130; --kk-muted:#5B6072;
  --kk-radius:12px; --kk-radius-sm:10px; --kk-shadow:0 1px 2px rgba(20,24,40,.06),0 2px 8px rgba(20,24,40,.05);
  --kk-shadow-lg:0 8px 28px rgba(20,24,40,.16);
  --kk-p-low:#94A3B8; --kk-p-medium:#3B82F6; --kk-p-high:#F59E0B; --kk-p-urgent:#EF4444;
  --kk-sidebar-w:264px; --kk-t:180ms;
  --bs-body-font-family:"Inter Variable",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-body-font-size:.9375rem; --bs-primary:#4F46E5; --bs-primary-rgb:79,70,229;
  --bs-link-color:#4338CA; --bs-link-hover-color:#3730A3; --bs-border-radius:10px; --bs-border-radius-lg:12px;
}
[data-bs-theme=dark]{
  --kk-primary:#818CF8; --kk-primary-rgb:129,140,248; --kk-primary-hover:#A5B4FC;
  --kk-success-text:#6EE7B7; --kk-warning-text:#FCD34D; --kk-danger-text:#FCA5A5;
  --kk-success-bg:rgba(16,185,129,.16); --kk-warning-bg:rgba(245,158,11,.16); --kk-danger-bg:rgba(239,68,68,.18);
  --kk-bg:#0F1117; --kk-surface:#181B25; --kk-surface-2:#1F2331; --kk-border:#2B3042; --kk-text:#E8EAF2; --kk-muted:#A3A9BF;
  --kk-shadow:0 1px 2px rgba(0,0,0,.4); --kk-shadow-lg:0 10px 30px rgba(0,0,0,.55);
  --bs-body-bg:var(--kk-bg); --bs-body-color:var(--kk-text); --bs-border-color:var(--kk-border);
  --bs-link-color:#A5B4FC; --bs-link-hover-color:#C7D2FE; --bs-secondary-color:var(--kk-muted);
}
body{background:var(--kk-bg);color:var(--kk-text);-webkit-font-smoothing:antialiased}
.text-muted,.text-secondary{color:var(--kk-muted)!important}
a{text-underline-offset:2px}
:focus-visible{outline:3px solid rgba(var(--kk-primary-rgb),.55);outline-offset:2px;border-radius:6px}
.btn-primary{--bs-btn-bg:#4F46E5;--bs-btn-border-color:#4F46E5;--bs-btn-hover-bg:#4338CA;--bs-btn-hover-border-color:#4338CA;--bs-btn-active-bg:#3730A3;--bs-btn-active-border-color:#3730A3;--bs-btn-disabled-bg:#4F46E5;--bs-btn-disabled-border-color:#4F46E5}
.btn-outline-primary{--bs-btn-color:var(--kk-primary);--bs-btn-border-color:var(--kk-primary);--bs-btn-hover-bg:#4F46E5;--bs-btn-hover-border-color:#4F46E5;--bs-btn-hover-color:#fff}
[data-bs-theme=dark] .btn-primary{--bs-btn-bg:#6366F1;--bs-btn-border-color:#6366F1;--bs-btn-hover-bg:#818CF8;--bs-btn-hover-border-color:#818CF8;--bs-btn-hover-color:#0F1117}
.form-control,.form-select{border-color:var(--kk-border);background-color:var(--kk-surface)}
.form-control:focus,.form-select:focus{border-color:var(--kk-primary);box-shadow:0 0 0 .25rem rgba(var(--kk-primary-rgb),.18)}
.card{--bs-card-border-color:var(--kk-border);--bs-card-bg:var(--kk-surface);border-radius:var(--kk-radius);box-shadow:var(--kk-shadow)}
.dropdown-menu,.modal-content,.offcanvas{--bs-dropdown-bg:var(--kk-surface);--bs-dropdown-border-color:var(--kk-border);border-radius:var(--kk-radius)}
.modal-content{box-shadow:var(--kk-shadow-lg)}
.table{--bs-table-bg:transparent}
@media (pointer:coarse){.btn:not(.btn-sm-touch),.form-control,.form-select{min-height:44px}.btn-sm{min-height:40px}}
.kk-min-44{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Kerangka ---------- */
.kk-shell{display:flex;min-height:100vh}
.kk-sidebar{width:var(--kk-sidebar-w);background:var(--kk-surface);border-right:1px solid var(--kk-border)}
@media (min-width:992px){.kk-sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;flex:0 0 var(--kk-sidebar-w)}}
.kk-sidebar .offcanvas-body{padding:0;display:flex;flex-direction:column}
.kk-brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.1rem;color:var(--kk-text);text-decoration:none;padding:1.1rem 1.25rem}
.kk-brand-logo{width:32px;height:32px;border-radius:9px;background:var(--kk-primary);display:grid;place-items:center;color:#fff}
[data-bs-theme=dark] .kk-brand-logo{color:#0F1117}
.kk-nav{padding:.25rem .75rem}
.kk-nav a{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:var(--kk-radius-sm);color:var(--kk-text);text-decoration:none;font-weight:500;min-height:44px;transition:background var(--kk-t)}
.kk-nav a:hover{background:var(--kk-surface-2)}
.kk-nav a.active{background:rgba(var(--kk-primary-rgb),.12);color:var(--kk-primary)}
.kk-nav .bi{font-size:1.05rem;opacity:.85}
.kk-nav-title{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--kk-muted);font-weight:600;padding:1rem 1.5rem .35rem;display:flex;justify-content:space-between;align-items:center}
.kk-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.kk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.kk-topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--kk-bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--kk-border);padding:.6rem 1rem;display:flex;align-items:center;gap:.75rem;min-height:60px}
.kk-content{padding:1.5rem;flex:1}
@media (max-width:767.98px){.kk-content{padding:1rem}}
.kk-page-title{font-size:1.4rem;font-weight:700;margin:0}
.kk-bell-badge{position:absolute;top:2px;right:0;transform:translate(25%,-10%);font-size:.65rem;min-width:18px}
.kk-notif-menu{width:min(380px,94vw);padding:0}
.kk-notif-item{display:block;padding:.7rem 1rem;border-bottom:1px solid var(--kk-border);color:var(--kk-text);text-decoration:none;font-size:.875rem}
.kk-notif-item:hover{background:var(--kk-surface-2)}
.kk-notif-item.unread{background:rgba(var(--kk-primary-rgb),.07);font-weight:500}
.kk-notif-item .ago{font-size:.75rem;color:var(--kk-muted);font-weight:400}

/* ---------- Avatar ---------- */
.kk-avatar{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:600;object-fit:cover;flex:0 0 auto;border:2px solid var(--kk-surface);line-height:1}
.kk-avatar-stack{display:inline-flex}.kk-avatar-stack .kk-avatar+.kk-avatar{margin-left:-8px}

/* ---------- Komponen umum ---------- */
.kk-stat{padding:1.1rem 1.25rem;display:flex;align-items:center;gap:1rem;height:100%}
.kk-stat-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;flex:0 0 44px}
.kk-stat-num{font-size:1.75rem;font-weight:700;line-height:1}
.kk-project-card{display:block;text-decoration:none;color:inherit;padding:1rem 1.1rem;border-left:5px solid var(--pc,var(--kk-primary));transition:transform var(--kk-t),box-shadow var(--kk-t)}
.kk-project-card:hover{transform:translateY(-2px);box-shadow:var(--kk-shadow-lg);color:inherit}
.kk-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .55rem;border-radius:999px;font-size:.75rem;font-weight:600}
.kk-pill-danger{background:var(--kk-danger-bg);color:var(--kk-danger-text)}
.kk-pill-warning{background:var(--kk-warning-bg);color:var(--kk-warning-text)}
.kk-pill-success{background:var(--kk-success-bg);color:var(--kk-success-text)}
.kk-pill-muted{background:var(--kk-surface-2);color:var(--kk-muted)}
.kk-label{display:inline-block;padding:.1rem .5rem;border-radius:6px;font-size:.7rem;font-weight:600;color:#fff;line-height:1.5}
.kk-empty{text-align:center;padding:3rem 1rem;color:var(--kk-muted)}
.kk-empty .bi{font-size:2.5rem;display:block;margin-bottom:.5rem;opacity:.6}
.kk-priority-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.p-low{--pc:var(--kk-p-low)}.p-medium{--pc:var(--kk-p-medium)}.p-high{--pc:var(--kk-p-high)}.p-urgent{--pc:var(--kk-p-urgent)}

/* ---------- Auth ---------- */
.kk-auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kk-auth-form{display:flex;align-items:center;justify-content:center;padding:2rem 1.25rem}
.kk-auth-form .inner{width:100%;max-width:400px}
.kk-auth-art{background:linear-gradient(140deg,#4F46E5 0%,#6D5EF0 55%,#8B7CF6 100%);display:flex;align-items:center;justify-content:center;padding:2rem;color:#fff}
.kk-auth-art h2{font-weight:700}
@media (max-width:991.98px){.kk-auth{grid-template-columns:1fr}.kk-auth-art{display:none}}

/* ---------- Papan ---------- */
.kk-board-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
.kk-board-bar .search{position:relative;flex:1 1 220px;max-width:340px}
.kk-board-bar .search .bi{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--kk-muted);pointer-events:none}
.kk-board-bar .search input{padding-left:36px}
.kk-board{display:flex;gap:1rem;align-items:flex-start;overflow-x:auto;padding-bottom:1rem;min-height:60vh;scroll-snap-type:x proximity}
.kk-col{flex:1 1 210px;min-width:210px;background:var(--kk-surface-2);border-radius:var(--kk-radius);display:flex;flex-direction:column;max-height:calc(100vh - 210px);scroll-snap-align:start;border:1px solid transparent;transition:border-color var(--kk-t),background var(--kk-t)}
@media (max-width:1023.98px){.kk-col{flex:0 0 280px}}
.kk-col.drop-ok{border-color:rgba(var(--kk-primary-rgb),.6);background:rgba(var(--kk-primary-rgb),.08)}
.kk-col.drop-no{opacity:.55}
.kk-col-head{display:flex;align-items:center;gap:.5rem;padding:.8rem .9rem .5rem;font-weight:700}
.kk-col-head .count{font-weight:600;font-size:.75rem;color:var(--kk-muted);background:var(--kk-surface);border-radius:999px;padding:.05rem .5rem}
.kk-col-head .kind-dot{width:9px;height:9px;border-radius:50%;background:var(--kk-muted)}
.kk-col[data-kind=todo] .kind-dot{background:#3B82F6}.kk-col[data-kind=in_progress] .kind-dot{background:var(--kk-warning)}
.kk-col[data-kind=review] .kind-dot{background:#8B5CF6}.kk-col[data-kind=done] .kind-dot{background:var(--kk-success)}
.kk-cards{flex:1;overflow-y:auto;padding:.25rem .6rem .5rem;min-height:56px}
.kk-card{position:relative;background:var(--kk-surface);border-radius:var(--kk-radius-sm);box-shadow:var(--kk-shadow);padding:.7rem .75rem .6rem .95rem;margin-bottom:.55rem;cursor:pointer;border:1px solid var(--kk-border);transition:box-shadow var(--kk-t),transform var(--kk-t);overflow:hidden}
.kk-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--pc)}
.kk-card:hover{box-shadow:var(--kk-shadow-lg)}
.kk-card.sortable-ghost{opacity:.35}
.kk-card.sortable-chosen{cursor:grabbing;box-shadow:var(--kk-shadow-lg)}
.kk-card.readonly{cursor:pointer}
.kk-card-title{font-weight:600;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;margin-bottom:.35rem;padding-right:1.6rem}
.kk-card-labels{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.4rem}
.kk-card-meta{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;font-size:.75rem;color:var(--kk-muted)}
.kk-card-meta .due{font-weight:600}
.kk-card-meta .due.overdue{color:var(--kk-danger-text)}.kk-card-meta .due.soon{color:var(--kk-warning-text)}.kk-card-meta .due.done{color:var(--kk-success-text)}
.kk-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem}
.kk-card .kk-card-menu{position:absolute;top:2px;right:2px;opacity:.7}
.kk-card:hover .kk-card-menu,.kk-card .kk-card-menu:focus{opacity:1}
.kk-progress{height:5px;background:var(--kk-surface-2);border-radius:99px;overflow:hidden;margin:.35rem 0}
.kk-progress>span{display:block;height:100%;background:var(--kk-success);transition:width var(--kk-t)}
.kk-quick{padding:.4rem .6rem .7rem}
.kk-quick input{background:var(--kk-surface)}
.kk-add-btn{width:100%;text-align:left;color:var(--kk-muted);background:transparent;border:0;padding:.5rem .6rem;border-radius:var(--kk-radius-sm);font-weight:500;min-height:40px}
.kk-add-btn:hover{background:rgba(var(--kk-primary-rgb),.08);color:var(--kk-primary)}
.kk-col-tabs{display:none;gap:.4rem;overflow-x:auto;margin-bottom:.75rem;padding-bottom:.25rem}
.kk-col-tabs button{flex:0 0 auto;border:1px solid var(--kk-border);background:var(--kk-surface);color:var(--kk-text);border-radius:999px;padding:.4rem .9rem;font-weight:600;font-size:.85rem;min-height:44px}
.kk-col-tabs button.active{background:var(--kk-primary);border-color:var(--kk-primary);color:#fff}
[data-bs-theme=dark] .kk-col-tabs button.active{color:#0F1117}
.kk-fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;box-shadow:var(--kk-shadow-lg);display:none;z-index:30;font-size:1.5rem}
@media (max-width:767.98px){
  .kk-col-tabs{display:flex}.kk-fab{display:grid;place-items:center}
  .kk-board{display:block;overflow:visible;min-height:0}
  .kk-col{display:none;width:100%;max-height:none}.kk-col.mobile-active{display:flex}
  .kk-cards{overflow:visible}
}
.kk-list-view table{background:var(--kk-surface);border-radius:var(--kk-radius);overflow:hidden}
.kk-list-view tr{cursor:pointer}

/* Panel detail kartu */
.kk-detail{--bs-offcanvas-width:min(720px,100vw)}
.kk-detail .section-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--kk-muted);margin:1.25rem 0 .5rem;display:flex;align-items:center;gap:.4rem}
.kk-detail .title-input{font-size:1.25rem;font-weight:700;border:1px solid transparent;background:transparent;padding:.25rem .5rem;margin-left:-.5rem}
.kk-detail .title-input:hover,.kk-detail .title-input:focus{border-color:var(--kk-border);background:var(--kk-surface)}
.kk-meta-grid{display:grid;grid-template-columns:130px 1fr;gap:.6rem .75rem;align-items:center}
@media (max-width:575.98px){.kk-meta-grid{grid-template-columns:1fr}}
.kk-comment{display:flex;gap:.65rem;margin-bottom:.9rem}
.kk-comment .bubble{background:var(--kk-surface-2);border-radius:var(--kk-radius-sm);padding:.55rem .8rem;flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.kk-mention{background:rgba(var(--kk-primary-rgb),.15);color:var(--kk-primary);border-radius:4px;padding:0 3px;font-weight:600}
.kk-mention-menu{position:absolute;z-index:1080;background:var(--kk-surface);border:1px solid var(--kk-border);border-radius:var(--kk-radius-sm);box-shadow:var(--kk-shadow-lg);max-height:200px;overflow:auto;min-width:200px}
.kk-mention-menu button{display:flex;gap:.5rem;align-items:center;width:100%;border:0;background:transparent;padding:.45rem .7rem;text-align:left;color:var(--kk-text);min-height:40px}
.kk-mention-menu button.active,.kk-mention-menu button:hover{background:rgba(var(--kk-primary-rgb),.12)}
.kk-check-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}
.kk-check-item.done span.txt{text-decoration:line-through;color:var(--kk-muted)}
.kk-activity{font-size:.83rem;color:var(--kk-muted);border-left:2px solid var(--kk-border);padding-left:.75rem;margin-left:.3rem}
.kk-activity li{margin-bottom:.4rem;list-style:none}
.kk-revision{border-left:4px solid var(--kk-warning);background:var(--kk-warning-bg);color:var(--kk-warning-text);border-radius:var(--kk-radius-sm);padding:.6rem .8rem}
.kk-review-bar{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.35);border-radius:var(--kk-radius-sm);padding:.7rem .9rem}
.kk-att{display:flex;align-items:center;gap:.6rem;padding:.4rem .6rem;border:1px solid var(--kk-border);border-radius:var(--kk-radius-sm);margin-bottom:.4rem;background:var(--kk-surface)}
.kk-att img.thumb{width:40px;height:40px;object-fit:cover;border-radius:6px}
.kk-onboard{max-width:560px;margin:2rem auto;text-align:center}
.kk-onboard ol{text-align:left;display:inline-block;margin:1rem 0 1.5rem;padding-left:1.25rem}
.kk-toast-wrap{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:.5rem;align-items:center;width:min(92vw,420px)}
.kk-toast{background:#1E2130;color:#fff;border-radius:var(--kk-radius-sm);padding:.65rem .9rem;box-shadow:var(--kk-shadow-lg);display:flex;align-items:center;gap:.75rem;width:100%;animation:kk-in 200ms ease-out}
.kk-toast.error{background:#991B1B}.kk-toast.ok{background:#065F46}
.kk-toast button{margin-left:auto}
@keyframes kk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kk-drag-hint{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:50}
.kk-chart-box{position:relative;height:280px}
.table-hover>tbody>tr:hover>*{--bs-table-bg-state:var(--kk-surface-2)}
.dropdown-item{min-height:38px;display:flex;align-items:center;gap:.5rem}
.kk-card .kk-card-menu{top:-2px;right:-2px}
.kk-card .kk-card-menu .btn{min-width:32px;min-height:32px;padding:0}
@media (pointer:coarse){.kk-card .kk-card-menu .btn{min-width:44px;min-height:44px}}
.kk-card-title{padding-right:1.9rem}
.txt-wrap{word-break:break-word}
.min-w-0{min-width:0}