/* ============================================================
   Design Tokens — Verdigris · Light (default)
   ============================================================ */
:root {
  --bg:             oklch(0.975 0.007 175);
  --surface:        oklch(1.000 0.000 0);
  --surface-2:      oklch(0.955 0.012 175);
  --border:         oklch(0.880 0.018 175);
  --border-2:       oklch(0.825 0.026 175);
  --text:           oklch(0.200 0.032 188);
  --text-2:         oklch(0.360 0.024 180);
  --text-muted:     oklch(0.560 0.016 175);

  --primary:        oklch(0.520 0.158 177);
  --primary-h:      oklch(0.440 0.155 177);
  --primary-light:  oklch(0.945 0.035 175);

  --nav-bg:         oklch(1.000 0.000 0);
  --nav-border:     oklch(0.880 0.018 175);
  --nav-text:       oklch(0.200 0.032 188);
  --nav-text-muted: oklch(0.560 0.016 175);

  --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 2px oklch(0.200 0.032 188 / .08), 0 3px 10px oklch(0.200 0.032 188 / .06);
  --shadow-md:  0 2px 6px oklch(0.200 0.032 188 / .10), 0 6px 20px oklch(0.200 0.032 188 / .08);

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 999px;

  --font-serif: 'Spectral', Georgia, serif;
  --font-sans:  'Karla', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
}

/* ============================================================
   Dark mode override — Aged Verdigris
   ============================================================ */
[data-bs-theme="dark"] {
  --bg:             oklch(0.120 0.018 165);
  --surface:        oklch(0.200 0.012 165);
  --surface-2:      oklch(0.260 0.014 165);
  --border:         oklch(0.400 0.016 162);
  --border-2:       oklch(0.460 0.018 162);
  --text:           oklch(0.915 0.014 88);
  --text-2:         oklch(0.785 0.016 90);
  --text-muted:     oklch(0.545 0.018 130);

  --primary:        oklch(0.685 0.105 165);
  --primary-h:      oklch(0.600 0.108 165);
  --primary-light:  oklch(0.250 0.040 165);

  --nav-bg:         oklch(0.130 0.022 165);
  --nav-border:     oklch(0.320 0.034 162);
  --nav-text:       oklch(0.915 0.014 88);
  --nav-text-muted: oklch(0.545 0.018 130);

  --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 4px oklch(0 0 0 / .36), 0 5px 16px oklch(0 0 0 / .32);
  --shadow-md:  0 2px 8px oklch(0 0 0 / .40), 0 8px 24px oklch(0 0 0 / .36);
}

/* ============================================================
   Bootstrap component alignment (radius, accent, fonts)
   ============================================================ */
:root, [data-bs-theme="dark"] {
  --bs-primary: var(--primary);
  --bs-primary-rgb: 70, 130, 120;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-h);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-color: var(--border);
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
}
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-h);
  --bs-btn-hover-border-color: var(--primary-h);
  --bs-btn-active-bg: var(--primary-h);
  --bs-btn-active-border-color: var(--primary-h);
  font-weight: 700;
}
.card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.table {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
}
.badge { font-weight: 600; }

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
}

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: .55rem 1.1rem;
  background: var(--primary);
  color: var(--surface);
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .12s ease-out, background-color .2s ease;
  white-space: nowrap;
}
.btn-app:hover  { opacity: .85; color: var(--surface); }
.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: .3rem .85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
  transition: background .2s, border-color .2s, color .2s;
}
.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); }

/* ============================================================
   Solved Problems History — Bubble grid + animations
   ============================================================ */
@keyframes prob-shake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  10%     { transform: translateX(-5px) rotate(-2deg); }
  30%     { transform: translateX(5px)  rotate(2deg); }
  50%     { transform: translateX(-4px) rotate(-1.5deg); }
  70%     { transform: translateX(4px)  rotate(1.5deg); }
  90%     { transform: translateX(-2px) rotate(-.5deg); }
}

.prob-bubble {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 7px 8px;
  min-width: 0;
  display: block;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  cursor: pointer;
  user-select: none;
}
.prob-bubble-clickable:hover,
.prob-bubble-link:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.prob-bubble-blocked {
  background: linear-gradient(135deg, oklch(0.97 0.04 25 / .5), var(--surface-2) 70%);
  border-color: oklch(0.75 0.12 25 / .6);
  cursor: not-allowed;
}
.prob-bubble.prob-shake {
  animation: prob-shake .42s ease-in-out;
}

.prob-bubble-id {
  font-size: .65rem;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1;
}
.prob-bubble-name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prob-bubble-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 4px;
}
.prob-chip-word {
  font-size: .58rem;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
  line-height: 1.4;
}

/* Time-group headers */
.time-group { margin-bottom: 14px; }
.time-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.group-count {
  font-size: .68rem;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .prob-bubble.prob-shake { animation: none; }
  .prob-bubble { transition: none; }
}