/* ====================================================
   Nekta — Pro Theme v3 · Dark Nav + Blue Brand
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Brand */
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --primary-50:#eff6ff;
  --accent:#0ea5e9;
  --highlight:#f59e0b;
  /* Semantic */
  --danger:#ef4444;
  --ok:#16a34a;
  /* Content area */
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  /* Sidebar — dark (hardcoded below via !important) */
  --nav:#0f172a;
  --nav-active:rgba(37,99,235,.16);
  --nav-icon:#60a5fa;
  /* Layout */
  --sidebar-w:248px;
  --sidebar-w-compact:68px;
  --topbar-h:58px;
  --footer-h:42px;
  /* Elevation */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.03);
  --shadow:0 4px 16px rgba(0,0,0,.07);
  --shadow-md:0 8px 24px rgba(0,0,0,.10);
  --radius:12px;
  --radius-sm:8px;
}

/* ── Base ── */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif}
body{overflow:hidden;-webkit-font-smoothing:antialiased}

/* ── App grid ── */
.app{
  display:grid;height:100%;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:var(--topbar-h) 1fr var(--footer-h);
  grid-template-areas:"sidebar topbar" "sidebar content" "sidebar footer";
  transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1);
}
.app.compact{grid-template-columns:var(--sidebar-w-compact) 1fr}
.is-hidden{visibility:hidden}
#sidebar{grid-area:sidebar}
#topbar {grid-area:topbar}
#footer {grid-area:footer}
.content{grid-area:content;overflow:auto;padding:20px}
#topbar>.topbar{height:100%;width:100%}
#footer>.footer{height:100%}
#sidebar>.sidebar{height:100%}

/* ══════════════════════════════════
   SIDEBAR — Dark
   ══════════════════════════════════ */
.sidebar{
  background:#0f172a !important;
  border-right:none !important;
  overflow:hidden;z-index:30;
  display:flex;flex-direction:column;
}
/* Brand row */
.sidebar .brand{
  height:var(--topbar-h);
  display:flex;align-items:center;gap:12px;
  padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  font-weight:700;font-size:1rem;
  color:#f8fafc !important;
  flex-shrink:0;
}
.sidebar .logo,.sidebar .brand .logo{
  flex:0 0 auto;
  display:block;
  object-fit:contain;
}
.sidebar .brand .logo-full{
  width:140px;
  height:34px;
}
.sidebar .brand .logo-compact{
  width:34px;
  height:34px;
  display:none;
}
.sidebar .brand .brand-tag{
  font-size:.72rem;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#94a3b8 !important;
}
/* Section label */
.sidebar .section-title{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#475569 !important;padding:14px 18px 4px;flex-shrink:0;
}
/* Nav */
.sidebar nav{padding:8px;flex:1;overflow-y:auto;overflow-x:hidden}
.sidebar nav hr{border-color:rgba(255,255,255,.07) !important;margin:.4rem .5rem}
.sidebar .nav-link{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;
  color:#94a3b8 !important;text-decoration:none;font-size:.875rem;font-weight:500;
  transition:background .14s,color .14s;border-left:none !important;
  white-space:nowrap;
}
.sidebar .nav-link:hover{background:rgba(255,255,255,.07) !important;color:#e2e8f0 !important}
.sidebar .nav-link.active{
  background:rgba(37,99,235,.18) !important;
  color:#ffffff !important;font-weight:600;
}
.sidebar .nav-link i{font-size:1.05rem;color:#64748b;flex:0 0 auto;transition:color .14s}
.sidebar .nav-link:hover i,.sidebar .nav-link.active i{color:#60a5fa !important}
.sidebar .link-text{overflow:hidden;text-overflow:ellipsis}

/* Compact sidebar */
.app.compact .sidebar .brand .brand-tag,
.app.compact .sidebar .link-text,
.app.compact .sidebar .section-title,
.sidebar.compact .brand .brand-tag,
.sidebar.compact .link-text,
.sidebar.compact .section-title{display:none}
.app.compact .sidebar .brand,.sidebar.compact .brand{justify-content:center;padding:0}
.app.compact .sidebar .brand .logo,.sidebar.compact .brand .logo{margin:0 auto}
.app.compact .sidebar .brand .logo-full,
.sidebar.compact .brand .logo-full{display:none}
.app.compact .sidebar .brand .logo-compact,
.sidebar.compact .brand .logo-compact{display:block}
.app.compact .sidebar nav,.sidebar.compact nav{padding:8px 4px}
.app.compact .sidebar .nav-link,.sidebar.compact .nav-link{justify-content:center;padding:11px;gap:0}

/* ══════════════════════════════════
   TOPBAR
   ══════════════════════════════════ */
.topbar{
  background:#ffffff !important;
  border-bottom:1px solid var(--border) !important;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.topbar .left,.topbar .right{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:36px;height:36px;border-radius:9px;
  border:1px solid var(--border);background:#fff;
  display:grid;place-items:center;cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;font-size:.875rem;
}
.icon-btn:hover{background:var(--primary-50);border-color:var(--primary);color:var(--primary)}

/* ── Card ── */
.card{
  background:var(--card);
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-xs) !important;
}
.card:hover{box-shadow:var(--shadow-sm) !important}

/* ── Footer ── */
.footer{
  display:flex;align-items:center;justify-content:center;
  background:#ffffff;border-top:1px solid var(--border);
  color:var(--muted);font-size:.82rem;
}

/* ── Overlay / backdrop ── */
.overlay,.backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:20;
}
.overlay.show,.menu-open .backdrop{opacity:1;pointer-events:auto}

/* ── Mobile drawer ── */
@media (max-width:992px){
  .app{grid-template-columns:0 1fr}
  .sidebar{
    position:fixed;top:0;left:0;height:100%;width:var(--sidebar-w) !important;
    transform:translateX(-100%);transition:transform .25s;
    box-shadow:0 0 0 1px rgba(255,255,255,.04),0 24px 48px rgba(0,0,0,.35) !important;
  }
  body.drawer-open .sidebar,.menu-open .sidebar{transform:translateX(0)}
  body.drawer-open .overlay{opacity:1;pointer-events:auto}
}

/* ══════════════════════════════════
   BOOTSTRAP OVERRIDES
   ══════════════════════════════════ */
.btn{font-weight:500;border-radius:var(--radius-sm)}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--primary-600);border-color:var(--primary-600)}
.btn-outline-primary{color:var(--primary);border-color:var(--primary)}
.btn-outline-primary:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-sm{font-size:.8rem;padding:.3rem .65rem}
.form-control,.form-select{
  border-color:var(--border);border-radius:var(--radius-sm);font-size:.9rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.form-label{font-size:.875rem;font-weight:500;color:var(--text);margin-bottom:.3rem}
.table th,.table td{vertical-align:middle;font-size:.875rem}
.table thead th{
  background:#f8fafc;color:var(--muted);
  font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.table-hover tbody tr:hover{background:#f8fafc}
.table>:not(caption)>*>*{padding:.75rem 1rem}

/* ── Nav tabs ── */
.nav-tabs{border-color:var(--border)}
.nav-tabs .nav-link{color:var(--muted);font-weight:600;border:none;border-radius:8px 8px 0 0;padding:.55rem 1rem}
.nav-tabs .nav-link:hover{color:var(--text);background:rgba(0,0,0,.03)}
.nav-tabs .nav-link.active{
  color:var(--primary);background:var(--primary-50);
  border-bottom:2px solid var(--primary);
}

/* ── Status badges ── */
.badge-status{
  text-transform:capitalize;font-size:.78rem;padding:.3rem .7rem;
  border-radius:999px;font-weight:600;letter-spacing:.01em;
}
.badge-open        {background:#dbeafe;color:#1e40af}
.badge-under_review{background:#fef3c7;color:#92400e}
.badge-accepted    {background:#dcfce7;color:#166534}
.badge-refuted     {background:#fee2e2;color:#991b1b}

/* ── Code badge ── */
.badge-code{
  display:inline-block;padding:.28rem .65rem;border-radius:999px;
  background:#eff6ff;color:#1d4ed8;font-weight:700;font-size:.84rem;
  border:1px solid #bfdbfe;text-decoration:none;
}
.badge-code:hover{background:#dbeafe;text-decoration:none}

/* ── Tab pills ── */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs .tab{
  border:1px solid var(--border);background:#fff;color:var(--muted);
  padding:.35rem .85rem;border-radius:999px;cursor:pointer;
  font-size:.84rem;font-weight:600;transition:all .12s;
}
.tabs .tab:hover{background:#f1f5f9;color:var(--text)}
.tabs .tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.tabs .tab .count{font-weight:700;margin-left:.3rem;opacity:.85}

/* ── KPI icon helpers ── */
.kpi-icon{
  width:46px;height:46px;border-radius:11px;flex:0 0 auto;
  display:grid;place-items:center;font-size:1.2rem;
}
.kpi-icon.blue {background:#dbeafe;color:#2563eb}
.kpi-icon.amber{background:#fef3c7;color:#d97706}
.kpi-icon.green{background:#dcfce7;color:#16a34a}
.kpi-icon.red  {background:#fee2e2;color:#dc2626}
.kpi-icon.sky  {background:#e0f2fe;color:#0284c7}

/* ── Utilities ── */
.badge-soft{background:var(--primary-50);color:var(--primary);border-radius:6px;padding:.2rem .5rem;font-size:.83rem;font-weight:600}
.text-muted{color:var(--muted)!important}
.hidden{display:none!important}
.empty{padding:36px;text-align:center;color:var(--muted)}
.cell-num{white-space:nowrap;font-variant-numeric:tabular-nums}
.form-section{border-left:3px solid var(--primary);padding-left:14px}
.section-header{font-size:.95rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.theme-pill{
  position:fixed;right:16px;bottom:calc(var(--footer-h) + 16px);
  background:var(--primary);color:#fff;border:none;border-radius:999px;
  padding:10px 16px;box-shadow:0 6px 20px rgba(37,99,235,.4);
  cursor:pointer;z-index:10;font-size:.875rem;font-weight:500;
}