:root {
    --primary-color: #9b59b6;
    --secondary-color: #3498db;
    --accent-color: #f1c40f;
}
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f0f4f8;
}
#header {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-radius: 0 0 15px 15px;
    color: white;
}
.module h2, .module caption, .inline-group h2 {
    background: var(--primary-color);
    border-radius: 10px;
    color: white;
    padding: 10px;
}
.button, input[type=submit], input[type=button], .submit-row input {
    background: var(--secondary-color);
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    color: white;
    transition: transform 0.3s, background 0.3s;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover {
    transform: scale(1.05);
    background: #2980b9;
}
th, td {
    border-radius: 8px;
}
.field-response_count, .field-choice_count, .field-is_correct {
    font-weight: bold;
    color: var(--accent-color);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700&display=swap');

/* ══════════════════════════════════════════════════════
   1. FONT — Inter everywhere, no ugly system fallbacks
══════════════════════════════════════════════════════ */
body, h1, h2, h3, h4, h5, h6,
.navbar-brand, .sidebar, .content-wrapper,
.main-header, .main-footer,
input, select, textarea, button, label,
th, td, p, span, a, li {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.01em;
}

/* ── Page title — big, bold, not the ugly tiny default ── */
.content-header h1 {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: #f1f5f9 !important;
  margin-bottom: 0 !important;
}
.content-header .breadcrumb-item,
.content-header .breadcrumb-item a {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════
   2. FULL DARK BACKGROUND — kills every white panel
══════════════════════════════════════════════════════ */
html,
body,
.wrapper,
.content-wrapper,
.main-sidebar,
.sidebar,
.login-page,
.login-box,
.register-page {
  background-color: #0f1117 !important;
  color: #e2e8f0 !important;
}

/* Specific white offenders */
.card,
.card-body,
.card-footer,
.card-header,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.jumbotron,
.nav-tabs,
.tab-content,
.fieldset,
fieldset,
.form-row,
.inline-group,
.tabular.inline-related,
.stacked.inline-related,
#changelist,
#changelist-filter,
.change-list,
.related-widget-wrapper,
.datetime,
.help,
.errornote,
.submit-row,
.object-tools,
#toolbar,
#changelist-search,
.paginator,
#footer,
.breadcrumbs,
#content,
#content-main,
#main,
div[id^="fieldsetcollapser"],
.collapse-toggle {
  background-color: #161b27 !important;
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════
   3. CARDS — dark with subtle glow border
══════════════════════════════════════════════════════ */
.card {
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
  overflow: hidden;
}
.card-header {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  background-color: #1c2233 !important;
}

/* ══════════════════════════════════════════════════════
   4. TABLES
══════════════════════════════════════════════════════ */
.table,
.table th,
.table td,
#result_list th,
#result_list td {
  border-color: rgba(255,255,255,0.06) !important;
  color: #cbd5e1 !important;
  background-color: transparent !important;
}
.table-striped tbody tr:nth-of-type(odd),
#result_list tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.025) !important;
}
.table-hover tbody tr:hover,
#result_list tbody tr:hover {
  background-color: rgba(59,130,246,0.07) !important;
}
#result_list thead th {
  background: #1c2233 !important;
  border-bottom: 2px solid rgba(59,130,246,0.3) !important;
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ══════════════════════════════════════════════════════
   5. INPUTS — all dark, blue focus ring
══════════════════════════════════════════════════════ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.form-control,
.vTextField,
.vURLField,
.vLargeTextField,
.select2-selection,
.select2-selection--single,
.select2-selection--multiple {
  background: #1e2638 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #e2e8f0 !important;
  border-radius: 7px !important;
  padding: 7px 11px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
  outline: none !important;
}
input::placeholder,
textarea::placeholder {
  color: #4b5563 !important;
}

/* ══════════════════════════════════════════════════════
   6. SELECT2 DROPDOWNS
══════════════════════════════════════════════════════ */
.select2-dropdown,
.select2-results,
.select2-results__options {
  background: #1e2638 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e2e8f0 !important;
}
.select2-results__option--highlighted {
  background: #3b82f6 !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   7. BREADCRUMB
══════════════════════════════════════════════════════ */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
}
.breadcrumb-item a   { color: #60a5fa !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #475569 !important; }
.breadcrumb-item.active { color: #94a3b8 !important; }

/* ══════════════════════════════════════════════════════
   8. HIDE JAZZMIN FOOTER (version number etc.)
══════════════════════════════════════════════════════ */
.main-footer {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   9. DASHBOARD STAT BOXES
══════════════════════════════════════════════════════ */
.small-box {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}
.small-box h3 {
  font-weight: 700 !important;
  font-size: 2.2rem !important;
}
.small-box p {
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  opacity: 0.85 !important;
}
.small-box .icon { opacity: 0.25 !important; }
.small-box:hover { transform: translateY(-2px); transition: transform 0.2s; }

/* ══════════════════════════════════════════════════════
   10. SIDEBAR ENHANCEMENTS
══════════════════════════════════════════════════════ */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  border-radius: 8px !important;
  margin: 0 8px !important;
}
.nav-sidebar .nav-link {
  border-radius: 6px !important;
  margin: 1px 6px !important;
  font-size: 0.85rem !important;
}
.nav-sidebar .nav-link:hover {
  background: rgba(59,130,246,0.12) !important;
}

/* ══════════════════════════════════════════════════════
   11. SUBMIT / ACTION BUTTONS ROW
══════════════════════════════════════════════════════ */
.submit-row {
  background: #161b27 !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 0 0 10px 10px !important;
  padding: 12px 16px !important;
}
.submit-row input[type="submit"],
.submit-row button {
  border-radius: 7px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 8px 18px !important;
}

/* ══════════════════════════════════════════════════════
   12. FILTERS / SEARCH BAR
══════════════════════════════════════════════════════ */
#changelist-filter {
  border-left: 1px solid rgba(255,255,255,0.06) !important;
  background: #161b27 !important;
  border-radius: 0 10px 10px 0 !important;
}
#changelist-filter h2 {
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}
#changelist-filter li a { color: #93c5fd !important; font-size: 0.85rem !important; }
#changelist-filter li a:hover { color: #fff !important; }
#changelist-filter li.selected a { color: #3b82f6 !important; font-weight: 600 !important; }

/* ══════════════════════════════════════════════════════
   13. INLINE ADMIN GROUPS
══════════════════════════════════════════════════════ */
.inline-group h2 {
  background: #1c2233 !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 16px !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════
   14. FIELDSETS
══════════════════════════════════════════════════════ */
fieldset.module h2,
.collapse-toggle {
  background: #1c2233 !important;
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
}

/* ══════════════════════════════════════════════════════
   15. HELP TEXT
══════════════════════════════════════════════════════ */
.help, p.help {
  color: #64748b !important;
  font-size: 0.78rem !important;
}

/* ══════════════════════════════════════════════════════
   16. DASHBOARD RECENT ACTIONS
══════════════════════════════════════════════════════ */
#recent-actions-module {
  background: #161b27 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}
#recent-actions-module h2 {
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  font-weight: 600 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
#recent-actions-module .actionlist li {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  padding: 8px 16px !important;
  font-size: 0.83rem !important;
}
#recent-actions-module .actionlist a { color: #60a5fa !important; }