:root{
  --bg:#f5f7fb; --card:#fff; --text:#0f172a; --muted:#64748b; --line:#e5e7eb;
  --brand:#111827; --shadow:0 10px 30px rgba(2,6,23,.08); --radius:16px;

  --goodBg:#ecfdf5; --goodLine:#6ee7b7;
  --warnBg:#fff7ed; --warnLine:#fdba74;
  --badBg:#fef2f2;  --badLine:#fca5a5;

  --blueBg:#eff6ff; --blueLine:#93c5fd;
  --purpleBg:#f5f3ff; --purpleLine:#c4b5fd;
  --tealBg:#ecfeff; --tealLine:#67e8f9;
  --grayBg:#f1f5f9; --grayLine:#e2e8f0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}

.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{
  background:linear-gradient(180deg, rgba(17,24,39,1) 0%, rgba(2,6,23,1) 100%);
  color:#fff;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);margin-bottom:14px}
.brand .logo{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.brand .title{font-weight:900;letter-spacing:.2px}
.brand .sub{font-size:12px;color:rgba(255,255,255,.7)}
.navtitle{font-size:11px;color:rgba(255,255,255,.55);padding:10px 12px 6px 12px;text-transform:uppercase;letter-spacing:.12em}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;color:rgba(255,255,255,.92);text-decoration:none;border:1px solid transparent}
.nav a:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.10)}
.nav a.active{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.25)}
.content{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(245,247,251,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(229,231,235,.75);
  padding:12px 18px;display:flex;gap:12px;align-items:center;
}
.crumb{font-weight:900}
.right{margin-left:auto;display:flex;gap:10px;align-items:center}
.wrap{max-width:1280px;width:100%;margin:18px auto;padding:0 16px 28px 16px}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(229,231,235,.75);padding:16px;margin-bottom:14px}
h2{margin:0 0 8px 0;font-size:20px}
h3{margin:0 0 10px 0;font-size:16px}
.small{color:var(--muted);font-size:13px}
hr.sep{border:0;border-top:1px solid var(--line);margin:14px 0}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:var(--brand);color:#fff;border:0;cursor:pointer;text-decoration:none;font-weight:800;box-shadow:0 10px 18px rgba(2,6,23,.18)}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#334155;box-shadow:none}
.btn.ghost{background:#fff;color:var(--text);border:1px solid rgba(229,231,235,.9);box-shadow:none}
.btn.sm{padding:7px 10px;font-size:12px;border-radius:12px}

.input,select,textarea{width:100%;padding:10px 12px;border-radius:14px;border:1px solid rgba(229,231,235,.95);background:#fff;outline:none}
.input:focus,select:focus,textarea:focus{border-color:rgba(99,102,241,.45);box-shadow:0 0 0 5px rgba(99,102,241,.12)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--grayLine);background:var(--grayBg);font-size:12px;font-weight:900}
.chip.good{background:var(--goodBg);border-color:var(--goodLine)}
.chip.warn{background:var(--warnBg);border-color:var(--warnLine)}
.chip.bad{background:var(--badBg);border-color:var(--badLine)}
.chip.blue{background:var(--blueBg);border-color:var(--blueLine)}
.chip.purple{background:var(--purpleBg);border-color:var(--purpleLine)}
.chip.teal{background:var(--tealBg);border-color:var(--tealLine)}

table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
tbody tr:hover{background:#f8fafc}

.kanban{display:flex;gap:12px;overflow:auto;padding-bottom:10px}
.col{min-width:280px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(229,231,235,.75)}
.colhead{padding:12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.dropzone{padding:12px;min-height:320px}
.taskcard{background:#fbfdff;border:1px solid rgba(229,231,235,.95);border-radius:16px;padding:10px;margin-bottom:10px;cursor:grab;box-shadow:0 8px 16px rgba(2,6,23,.06)}
.taskcard.dragging{opacity:.55}
.taskcard.blocked{background:var(--warnBg);border-color:var(--warnLine)}
.tasktitle{font-weight:900;font-size:13px;margin:0 0 8px 0}
.taskmeta{display:flex;flex-wrap:wrap;gap:6px}
.taskfooter{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:10px}

.topsearch{width:360px;max-width:44vw}
.notifbtn{position:relative}
.badgedot{
  position:absolute;top:-6px;right:-6px;
  background:#ef4444;color:#fff;border-radius:999px;font-size:11px;
  padding:2px 6px;font-weight:900;border:2px solid rgba(245,247,251,.85);
}

@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .topsearch{width:100%;max-width:100%}
}


:root[data-theme="dark"]{
  --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#9ca3af; --line:#233049;
  --brand:#e5e7eb; --shadow:0 10px 30px rgba(0,0,0,.35);

  --goodBg:rgba(16,185,129,.12); --goodLine:#34d399;
  --warnBg:rgba(249,115,22,.12); --warnLine:#fb923c;
  --badBg:rgba(239,68,68,.12);  --badLine:#f87171;

  --blueBg:rgba(59,130,246,.14); --blueLine:#60a5fa;
  --purpleBg:rgba(139,92,246,.14); --purpleLine:#a78bfa;
  --tealBg:rgba(45,212,191,.12); --tealLine:#5eead4;
  --grayBg:rgba(148,163,184,.10); --grayLine:#94a3b8;
}



.logoimg{width:38px;height:38px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,.08);padding:6px;display:block}
.iconbtn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:10px 12px;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.iconbtn svg{display:block}
.mobileonly{display:none}
.topsearch{min-width:360px}
@media (max-width: 1100px){ .topsearch{min-width:240px} }



@media (max-width: 920px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed; inset:0 auto 0 0; width:290px; z-index:50;
    transform:translateX(-105%); transition:transform .2s ease;
  }
  body.sidebar-open .sidebar{ transform:translateX(0) }
  .content{ margin-left:0 }
  .mobileonly{display:inline-flex}
  .iconbtn{display:inline-flex}
  .topbar{gap:10px; flex-wrap:wrap; align-items:center}
  .right{gap:8px; flex-wrap:wrap}
  .topsearch{min-width:180px; width:100%}
  .wrap{padding:14px}
  table{display:block; overflow:auto; -webkit-overflow-scrolling:touch}
}
@media (max-width: 520px){
  .card{padding:14px}
  .crumb{font-size:14px}
  .btn{padding:10px 12px}
  .btn.sm{padding:8px 10px}
  .kanban{grid-template-columns:1fr}
}