:root{
  --navy-950:#0b1526;
  --navy-900:#101c33;
  --navy-800:#16253f;
  --blue-500:#2f6fed;
  --blue-600:#2560d6;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text-900:#12203a;
  --text-600:#5b6b85;
  --text-400:#94a3b8;
  --border:#e6eaf2;
  --red:#e0473c;
  --red-bg:#fdeceb;
  --amber:#d97706;
  --amber-bg:#fef3e0;
  --green:#16a34a;
  --green-bg:#e6f7ec;
  --purple:#7c5cf0;
  --purple-bg:#efeafd;
  --radius:14px;
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text-900);}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}

.app{display:flex;min-height:100vh;}

/* ---------------- Sidebar ---------------- */
.sidebar{
  width:250px;flex-shrink:0;background:var(--navy-950);color:#fff;
  display:flex;flex-direction:column;padding:22px 16px;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 22px;}
.brand-mark{
  width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--blue-500),#5b8bff);
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.brand-name{font-weight:700;font-size:17px;letter-spacing:.2px;}

.branch-switcher{
  position:relative;display:flex;align-items:center;gap:10px;
  background:var(--navy-800);border-radius:12px;padding:10px 12px;margin-bottom:18px;cursor:pointer;
}
.branch-icon{font-size:18px;}
.branch-text{flex:1;min-width:0;}
.branch-label{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.branch-sub{font-size:11px;color:#8a97ad;}
.chev{color:#8a97ad;}
.branch-select-native{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}

.nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:#aab4c8;font-size:14px;font-weight:500;
}
.nav-item .ico{font-size:15px;width:18px;text-align:center;}
.nav-item:hover{background:var(--navy-800);color:#fff;}
.nav-item.active{background:var(--blue-500);color:#fff;}

.sidebar-user{
  display:flex;align-items:center;gap:10px;border-top:1px solid var(--navy-800);
  padding-top:16px;margin-top:10px;
}
.avatar{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:700;flex-shrink:0;
}
.user-name{font-size:13px;font-weight:600;}
.user-role{font-size:11px;color:#8a97ad;}

/* ---------------- Main ---------------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;gap:12px;padding:20px 28px;background:var(--card);
  border-bottom:1px solid var(--border);
}
.topbar h1{font-size:20px;margin:0;display:flex;align-items:center;gap:8px;}
.ico-lg{font-size:18px;}
.spacer{flex:1;}
.btn{
  border:1px solid var(--border);background:#fff;padding:9px 16px;border-radius:10px;
  font-size:13.5px;font-weight:600;cursor:pointer;color:var(--text-900);
}
.btn-primary{background:var(--blue-500);border-color:var(--blue-500);color:#fff;}
.btn-primary:hover{background:var(--blue-600);}
.btn-ghost:hover{background:var(--bg);}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-bg);}
.filter-select-native{
  border:1px solid var(--border);border-radius:10px;padding:9px 10px;font-size:13.5px;background:#fff;
}
.bell{font-size:18px;}

/* ---------------- Board ---------------- */
.board{
  flex:1;display:flex;gap:18px;padding:22px 28px;overflow-x:auto;align-items:flex-start;
}
.board-loading{color:var(--text-400);padding:40px;}

.column{
  background:#eef1f7;border-radius:16px;min-width:280px;max-width:280px;
  display:flex;flex-direction:column;max-height:calc(100vh - 130px);
}
.column-head{
  display:flex;align-items:center;gap:8px;padding:14px 14px 10px;font-weight:700;font-size:14.5px;
}
.column-count{
  background:#fff;color:var(--text-600);font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;
}
.column-add{margin-left:auto;color:var(--text-400);font-size:18px;cursor:pointer;}
.column-body{
  padding:0 10px 10px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;flex:1;
}
.column-body.drag-over{background:#e2e8f5;border-radius:12px;}

/* ---------------- Task Card ---------------- */
.task-card{
  background:var(--card);border-radius:12px;padding:13px 14px;box-shadow:0 1px 2px rgba(16,28,51,.06);
  cursor:grab;border-left:4px solid var(--col-color,#94a3b8);
}
.task-card:active{cursor:grabbing;}
.task-card.dragging{opacity:.4;}
.task-title{font-size:13.8px;font-weight:600;margin:0 0 4px;line-height:1.3;}
.task-branch{font-size:12px;color:var(--text-600);margin-bottom:8px;}
.task-badges{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.badge{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.2px;}
.badge-high{background:var(--red-bg);color:var(--red);}
.badge-medium{background:var(--amber-bg);color:var(--amber);}
.badge-low{background:var(--green-bg);color:var(--green);}
.badge-tag{background:var(--purple-bg);color:var(--purple);}

.progress-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.progress-track{flex:1;height:5px;background:#eef1f7;border-radius:4px;overflow:hidden;}
.progress-fill{height:100%;background:var(--blue-500);}
.progress-label{font-size:11px;color:var(--text-600);font-weight:600;white-space:nowrap;}

.task-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px;}
.task-due{font-size:11.5px;color:var(--text-600);display:flex;align-items:center;gap:4px;}
.task-due.done::before{content:"✓ ";color:var(--green);}
.task-avatar{
  width:24px;height:24px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* ---------------- Modal ---------------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(11,21,38,.5);display:none;
  align-items:center;justify-content:center;z-index:50;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff;border-radius:16px;width:100%;max-width:480px;padding:24px;
  max-height:90vh;overflow-y:auto;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-head h2{font-size:18px;margin:0;}
.modal-close{border:none;background:none;font-size:22px;cursor:pointer;color:var(--text-400);}
#taskForm label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--text-600);margin-bottom:14px;}
#taskForm input,#taskForm select{
  border:1px solid var(--border);border-radius:9px;padding:9px 11px;font-size:13.5px;color:var(--text-900);font-weight:500;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal-actions{display:flex;align-items:center;gap:10px;margin-top:6px;}

@media (max-width:860px){
  .sidebar{width:78px;}
  .brand-name,.branch-text,.nav-item span:not(.ico),.user-name,.user-role,.sidebar-user div:last-child{display:none;}
  .nav-item{justify-content:center;}
  .sidebar-user{justify-content:center;}
}

.board-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 680px;
  min-height: 220px;
  margin: 40px auto;
  padding: 28px;
  text-align: center;
  white-space: normal;
}

.board-error strong {
  color: #0f172a;
  font-size: 18px;
}

.board-error span {
  color: #64748b;
  line-height: 1.5;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}