/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f0f2f5;
  color: #1a1a2e;
  min-height: 100vh;
}

/* ── Header ──────────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a2332;
  color: #fff;
  padding: 12px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header h1 { font-size: 18px; font-weight: 700; letter-spacing: .3px; }

.last-sync {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 12px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, opacity .15s;
  background: #3b82f6;
  color: #fff;
}
.btn:hover { opacity: .88; }

.btn-refresh {
  background: #10b981;
  padding: 7px 14px;
  font-size: 14px;
}

.btn-secondary {
  background: #64748b;
}

/* ── Summary badges ───────────────────────────────────────── */
.summary-bar {
  display: flex;
  gap: 12px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.summary-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  font-size: 13px;
}

.badge-count {
  font-size: 18px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}
.badge-label { font-weight: 500; }

.badge-in-progress  { background: #dbeafe; color: #1d4ed8; }
.badge-paused       { background: #fef3c7; color: #b45309; }
.badge-rfa          { background: #d1fae5; color: #065f46; }
.badge-qa           { background: #ede9fe; color: #6d28d9; }
.badge-done         { background: #f1f5f9; color: #475569; }

/* ── Filters ──────────────────────────────────────────────── */
.filters-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.filter-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.filter-label select,
.filter-label input {
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  background: #f8fafc;
  color: #1a2332;
  min-width: 140px;
}
.filter-label select:focus,
.filter-label input:focus { outline: 2px solid #3b82f6; outline-offset: -1px; border-color: transparent; }

/* ── Error banner ─────────────────────────────────────────── */
.error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  color: #991b1b;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
}
.error-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #ef4444;
  padding: 0 4px;
}

/* ── Loading / empty ──────────────────────────────────────── */
.gantt-outer {
  padding: 16px 24px;
}

.gantt-loading,
.gantt-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  font-size: 14px;
  color: #64748b;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.app-nav { display:flex; gap:4px; margin-left:20px; }
.nav-link { color:#94a3b8; text-decoration:none; font-size:13px; font-weight:600; padding:5px 12px; border-radius:6px; transition:background .15s,color .15s; }
.nav-link:hover { background:rgba(255,255,255,.08); color:#e2e8f0; }
.nav-link--active { background:rgba(59,130,246,.25); color:#93c5fd; }

/* ── Dashboard tabs ──────────────────────────────────────────────────────── */
.dash-tabs { display:flex; background:#fff; border-bottom:2px solid #e2e8f0; padding:0 24px; position:sticky; top:49px; z-index:90; }
.dash-tab { padding:13px 20px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:#64748b; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s; white-space:nowrap; }
.dash-tab:hover { color:#1e293b; }
.dash-tab--active { color:#3b82f6; border-bottom-color:#3b82f6; }

/* ── Panel & shared ──────────────────────────────────────────────────────── */
.dash-panel { padding:24px; }
.section-title { font-size:15px; font-weight:700; color:#1e293b; margin:0; }

/* ── Assign tab ──────────────────────────────────────────────────────────── */
.assign-form { background:#fff; border-radius:10px; border:1px solid #e2e8f0; padding:20px 24px; margin-bottom:24px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.assign-form-row { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.assign-form .form-group { flex:0 0 auto; }
.assign-form .form-control { min-width:210px; }
.assign-price-badge { font-size:20px; font-weight:800; color:#10b981; padding-bottom:6px; min-width:80px; }
.assign-comp-badge { font-size:11px; color:#64748b; padding-bottom:8px; font-weight:600; }
.btn-find { padding:9px 22px; font-size:13px; font-weight:700; background:#3b82f6; color:#fff; border:none; border-radius:7px; cursor:pointer; transition:background .15s; white-space:nowrap; }
.btn-find:hover { background:#2563eb; }
.btn-find:disabled { background:#cbd5e1; cursor:not-allowed; }

/* Ranking */
.ranking-header { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.ranking-subtitle { font-size:12px; color:#64748b; background:#f1f5f9; padding:3px 10px; border-radius:10px; font-weight:500; }
.ranking-table-wrap { background:#fff; border-radius:10px; border:1px solid #e2e8f0; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.04); margin-bottom:16px; }
.ranking-table { width:100%; border-collapse:collapse; font-size:13px; }
.ranking-table th { background:#f8fafc; padding:9px 14px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#94a3b8; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
.ranking-table td { padding:11px 14px; border-bottom:1px solid #f1f5f9; color:#1e293b; vertical-align:middle; }
.ranking-table tr:last-child td { border-bottom:none; }
.ranking-table tbody tr:hover td { background:#f8fafc; }
.ranking-table tr.row-top td { background:#f0fdf4; }
.ranking-table tr.row-top:hover td { background:#dcfce7; }

.rank-num { font-size:15px; font-weight:800; color:#94a3b8; min-width:24px; display:inline-block; text-align:center; }
.rank-num.gold   { color:#f59e0b; }
.rank-num.silver { color:#64748b; }
.rank-num.bronze { color:#b45309; }

.spec-name-cell { display:flex; align-items:center; gap:8px; }
.avail-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.avail-free { background:#10b981; }
.avail-busy { background:#f59e0b; }
.avail-over { background:#ef4444; }

.load-cell { display:flex; flex-direction:column; gap:3px; }
.load-bar-bg { width:72px; height:5px; background:#f1f5f9; border-radius:3px; overflow:hidden; }
.load-bar-fill { height:100%; border-radius:3px; }
.fill-green  { background:#10b981; }
.fill-yellow { background:#f59e0b; }
.fill-red    { background:#ef4444; }
.load-text { font-size:11px; color:#64748b; }
.load-text.warn { color:#ef4444; font-weight:600; }

.score-pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:12px; font-size:13px; font-weight:700; }
.score-a { background:#d1fae5; color:#065f46; }
.score-b { background:#dbeafe; color:#1d4ed8; }
.score-c { background:#fef3c7; color:#92400e; }
.score-d { background:#fee2e2; color:#991b1b; }

.q-tag { display:inline-flex; align-items:center; padding:2px 6px; border-radius:4px; font-size:10px; font-weight:700; background:#fee2e2; color:#b91c1c; margin-right:3px; }

.comp-tag { display:inline-flex; align-items:center; padding:2px 7px; border-radius:4px; font-size:10px; font-weight:700; margin:1px; }
.ct-SDCext    { background:#ede9fe; color:#5b21b6; }
.ct-SDCint    { background:#ddd6fe; color:#6d28d9; }
.ct-MLRext    { background:#dbeafe; color:#1e40af; }
.ct-MLRint    { background:#e0f2fe; color:#075985; }
.ct-MOD       { background:#fef3c7; color:#92400e; }
.ct-Animation { background:#d1fae5; color:#065f46; }
.ct-Ps        { background:#fce7f3; color:#9d174d; }

.ineligible-wrap { background:#fff; border-radius:10px; border:1px solid #e2e8f0; padding:14px 20px; }
.ineligible-label { font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.ineligible-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ineligible-chip { padding:4px 12px; background:#f1f5f9; border-radius:12px; font-size:12px; color:#94a3b8; }

/* ── Team tab ────────────────────────────────────────────────────────────── */
.team-controls { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.team-stats { display:flex; gap:16px; font-size:13px; color:#64748b; }
.team-stat { display:flex; align-items:center; gap:6px; }
.stat-dot { width:8px; height:8px; border-radius:50%; }

.team-filter-wrap { display:flex; gap:6px; flex-wrap:wrap; }
.comp-filter-btn { padding:5px 12px; border:1.5px solid #e2e8f0; border-radius:16px; background:#fff; font-size:11px; font-weight:700; color:#64748b; cursor:pointer; transition:all .15s; }
.comp-filter-btn:hover { border-color:#94a3b8; color:#1e293b; }
.comp-filter-btn--active { background:#1e293b; color:#fff; border-color:#1e293b; }

.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.spec-card { background:#fff; border-radius:12px; border:1px solid #e2e8f0; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,.04); transition:box-shadow .15s; }
.spec-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); }
.spec-card.card-over { border-color:#fca5a5; }
.spec-card.card-warn { border-color:#fde68a; }

.card-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.card-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.card-name { font-weight:700; font-size:14px; color:#1e293b; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-comps { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:12px; }
.card-divider { height:1px; background:#f1f5f9; margin:10px 0; }

.card-metrics { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-bottom:10px; }
.card-metric { font-size:11px; }
.cm-label { color:#94a3b8; display:block; margin-bottom:1px; }
.cm-value { font-weight:700; color:#1e293b; font-size:12px; }
.cm-value.val-good { color:#10b981; }
.cm-value.val-warn { color:#f59e0b; }
.cm-value.val-bad  { color:#ef4444; }

.card-load-bar { width:100%; height:4px; background:#f1f5f9; border-radius:2px; overflow:hidden; margin:4px 0 12px; }
.card-load-fill { height:100%; border-radius:2px; transition:width .3s; }

.card-tasks-title { font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.card-task-item { display:flex; align-items:center; gap:7px; font-size:11px; color:#475569; padding:2px 0; }
.task-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.td-in_progress { background:#3b82f6; }
.td-qa          { background:#8b5cf6; }
.td-paused      { background:#f59e0b; }
.td-rfa         { background:#10b981; }
.task-name-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-days { color:#94a3b8; flex-shrink:0; font-size:10px; }
.task-days.stale { color:#ef4444; font-weight:700; }
.card-empty { font-size:11px; color:#94a3b8; font-style:italic; }

/* ── Analytics tab ───────────────────────────────────────────────────────── */
.analytics-controls { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.period-switch { display:flex; background:#f1f5f9; border-radius:8px; padding:3px; gap:2px; }
.period-btn { padding:5px 14px; border:none; background:none; border-radius:6px; font-size:12px; font-weight:600; color:#64748b; cursor:pointer; transition:all .15s; }
.period-btn--active { background:#fff; color:#1e293b; box-shadow:0 1px 3px rgba(0,0,0,.1); }

.analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.a-card { background:#fff; border-radius:12px; border:1px solid #e2e8f0; padding:20px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.a-card--wide { grid-column:span 2; }
.a-card-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#94a3b8; margin-bottom:16px; }

/* Bar chart */
.bar-chart { display:flex; flex-direction:column; gap:6px; }
.bc-row { display:flex; align-items:center; gap:10px; font-size:11px; }
.bc-label { width:120px; flex-shrink:0; color:#475569; font-weight:500; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-bar-wrap { flex:1; height:18px; background:#f1f5f9; border-radius:4px; overflow:hidden; position:relative; }
.bc-bar { height:100%; border-radius:4px; display:flex; align-items:center; padding-left:6px; font-size:10px; font-weight:700; color:#fff; min-width:4px; }
.bc-val { font-size:11px; font-weight:700; color:#475569; min-width:40px; flex-shrink:0; }
.bc-target { position:absolute; top:0; bottom:0; width:2px; background:#ef4444; opacity:.7; pointer-events:none; }
.bc-target-label { position:absolute; top:-14px; font-size:9px; color:#ef4444; font-weight:700; transform:translateX(-50%); white-space:nowrap; }

.bar-blue   { background:#3b82f6; }
.bar-green  { background:#10b981; }
.bar-red    { background:#ef4444; }
.bar-amber  { background:#f59e0b; }
.bar-purple { background:#8b5cf6; }
.bar-teal   { background:#14b8a6; }
.bar-slate  { background:#64748b; }

/* ── LOA / availability badges ──────────────────────────────────────────── */
.loa-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:10px; font-size:11px; font-weight:700; }
.loa-ok       { background:#d1fae5; color:#065f46; }
.loa-vacation { background:#fef3c7; color:#b45309; }
.loa-sick     { background:#fee2e2; color:#b91c1c; }
.loa-personal { background:#e0e7ff; color:#3730a3; }
.loa-other    { background:#f1f5f9; color:#475569; }

/* ── Quality (SREZ) badges ──────────────────────────────────────────────── */
.q-good    { background:#d1fae5; color:#065f46; }
.q-minor   { background:#fef3c7; color:#92400e; }
.q-major   { background:#fee2e2; color:#991b1b; }
.q-invalid { background:#fee2e2; color:#991b1b; }
.q-none    { background:#f1f5f9; color:#94a3b8; }

/* ── Data note ───────────────────────────────────────────────────────────── */
.data-note {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 12px;
}
.info-banner {
  display: block;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  color: #1e40af;
  padding: 10px 20px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* ── Catalogue list (Assign tab, no price) ──────────────────────────────── */
.cat-list { display:flex; flex-direction:column; gap:4px; max-height:280px; overflow:auto; }
.cat-item { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-radius:7px; cursor:pointer; transition:background .12s; font-size:13px; }
.cat-item:hover { background:#f1f5f9; }
.cat-item.cat-item--active { background:#dbeafe; color:#1d4ed8; font-weight:700; }
.cat-item-count { font-size:11px; color:#94a3b8; font-weight:600; background:#f1f5f9; padding:1px 8px; border-radius:8px; }
.cat-item.cat-item--active .cat-item-count { background:#bfdbfe; color:#1d4ed8; }

.cat-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.cat-tab-btn { padding:6px 14px; border:1.5px solid #e2e8f0; border-radius:16px; background:#fff; font-size:12px; font-weight:700; color:#64748b; cursor:pointer; transition:all .15s; }
.cat-tab-btn:hover { border-color:#94a3b8; color:#1e293b; }
.cat-tab-btn--active { background:#1e293b; color:#fff; border-color:#1e293b; }

.spec-mini-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; }
.spec-mini-row:hover { background:#f8fafc; }
.spec-mini-name { font-weight:600; flex:1; }
.spec-mini-tag { font-size:10px; padding:2px 7px; border-radius:8px; font-weight:700; }

.card-task-item.empty-row { color:#94a3b8; font-style:italic; }