/* ============================================================
   Design Tokens — Light (default)
   ============================================================ */
:root {
  --bg:             #f0f2f5;
  --surface:        #ffffff;
  --surface-2:      #f6f8fa;
  --border:         #c9cdd4;
  --text:           #0d1117;
  --text-2:         #24292f;
  --text-muted:     #57606a;

  --primary:        #7c3aed;
  --primary-h:      #6d28d9;
  --primary-light:  #ede9fe;

  --nav-bg:         #ffffff;
  --nav-border:     #d0d7de;
  --nav-text:       #0d1117;
  --nav-text-muted: #57606a;

  --success:        #1a7f37;
  --success-bg:     #dafbe1;
  --success-border: #aceebb;
  --success-text:   #116329;

  --danger:         #cf222e;
  --danger-bg:      #ffebe9;
  --danger-border:  #ffb8b0;
  --danger-text:    #a40e26;

  --info:           #0969da;
  --info-bg:        #ddf4ff;
  --info-border:    #54aeff;
  --info-text:      #0550ae;

  --warning:        #9a6700;
  --warning-bg:     #fff8c5;
  --warning-border: #d4a72c;
  --warning-text:   #6e4c10;

  --shadow-sm:  0 1px 3px rgba(27,31,35,.12), 0 1px 2px rgba(27,31,35,.08);
  --shadow-md:  0 3px 12px rgba(27,31,35,.15), 0 2px 4px rgba(27,31,35,.08);

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 999px;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

/* ============================================================
   Dark mode override
   ============================================================ */
[data-bs-theme="dark"] {
  --bg:             #0f172a;
  --surface:        #1e293b;
  --surface-2:      #263347;
  --border:         #334155;
  --text:           #f1f5f9;
  --text-2:         #cbd5e1;
  --text-muted:     #94a3b8;

  --primary:        #a78bfa;
  --primary-h:      #7c3aed;
  --primary-light:  #1e1b4b;

  --nav-bg:         #0f172a;
  --nav-border:     #1e293b;
  --nav-text:       #f1f5f9;
  --nav-text-muted: #94a3b8;

  --success:        #4ade80;
  --success-bg:     #052e16;
  --success-border: #166534;
  --success-text:   #86efac;

  --danger:         #f87171;
  --danger-bg:      #450a0a;
  --danger-border:  #991b1b;
  --danger-text:    #fca5a5;

  --info:           #60a5fa;
  --info-bg:        #1e3a5f;
  --info-border:    #1e40af;
  --info-text:      #93c5fd;

  --warning:        #fbbf24;
  --warning-bg:     #451a03;
  --warning-border: #92400e;
  --warning-text:   #fcd34d;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:  0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2);
}

/* ============================================================
   Global resets & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  transition: background-color .2s ease, color .2s ease;
}

a { color: var(--primary); }
a:hover { color: var(--primary-h); }

/* ============================================================
   Navbar
   ============================================================ */
.app-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  transition: background-color .2s ease, border-color .2s ease;
}
.app-nav .navbar-brand,
.app-nav .nav-text {
  color: var(--nav-text) !important;
}
.app-nav .nav-muted {
  color: var(--nav-text-muted) !important;
}
.app-nav .btn-nav {
  color: var(--nav-text);
  border: 1px solid var(--border);
  background: transparent;
  border-radius: var(--radius-md);
  padding: .3rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.app-nav .btn-nav:hover {
  background: var(--surface-2);
}

/* ============================================================
   Card
   ============================================================ */
.card-app {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  transition: background-color .2s ease, border-color .2s ease;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-app {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn-app:hover  { background: var(--primary-h); color: #fff; }
.btn-app:disabled { opacity: .55; cursor: not-allowed; }

.btn-app-outline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-app-outline:hover {
  background: var(--primary);
  color: #fff;
}

.btn-app-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.btn-app-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ============================================================
   Badges / chips
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: .8rem;
  white-space: nowrap;
  color: var(--text-2);
}
.chip-success {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}
.chip-danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}
.chip-info {
  border-color: var(--info-border);
  background: var(--info-bg);
  color: var(--info-text);
}
.chip-warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* ============================================================
   Typography helpers
   ============================================================ */
.muted { color: var(--text-muted); font-size: .9rem; }
.text-app-muted { color: var(--text-muted); }
.label-sm {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: .3rem;
  display: block;
}

/* ============================================================
   Divider
   ============================================================ */
.divider { border-top: 1px solid var(--border); margin: .75rem 0; }

/* ============================================================
   Tables
   ============================================================ */
.table-app {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-app th,
.table-app td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.table-app th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: .875rem;
  color: var(--text-2);
}
.table-app tr:last-child td { border-bottom: none; }
.table-app td { color: var(--text); }

/* ============================================================
   Form controls
   ============================================================ */
.input-app {
  width: 100%;
  padding: .55rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input-app:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============================================================
   HTMX / loading spinner
   ============================================================ */
.htmx-indicator { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display: inline-block;
}

/* ============================================================
   Verdict helpers (problem editor)
   ============================================================ */
.verdict-ok   { color: var(--success); }
.verdict-fail { color: var(--danger); }
.verdict-warn { color: var(--warning); }