/* ── Design tokens ── */
:root {
  --bg:       #050816;
  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.08);
  --purple:   #7c3aed;
  --blue:     #3b82f6;
  --text:     #f1f5f9;
  --muted:    #64748b;
  --muted-l:  #94a3b8;
}

/* ── Base ── */
body { font-family: 'Inter', sans-serif; background: var(--bg) !important; color: var(--text) !important; padding: 0 !important; margin: 0 !important; }

/* Explicitly set Inter on elements that don't inherit font-family by default */
input, select, textarea, button { font-family: inherit; }

.wrapper, .content-wrapper, .main-sidebar,
.main-header, .main-footer { font-family: 'Inter', sans-serif !important; }

/* ── Content area (sidebar layout) ── */
.content-wrapper { background: var(--bg) !important; color: var(--text) !important; }
.content-header  { background: transparent !important; }
.content-header h1 {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Navigation bar ── */
.main-header.navbar {
  background: rgba(5,8,22,0.92) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(16px) !important;
}
.main-header .navbar-nav .nav-link {
  color: var(--muted-l) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
.main-header .navbar-nav .nav-link:hover { color: var(--text) !important; }

/* ── Sidebar ── */
.main-sidebar, .sidebar {
  background: rgba(8,10,26,0.98) !important;
  border-right: 1px solid var(--border) !important;
}
.brand-link {
  background: rgba(8,10,26,0.98) !important;
  border-bottom: 1px solid var(--border) !important;
}
.brand-text {
  color: var(--text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.sidebar .nav-header {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #1e293b !important;
  padding: 1rem 1rem 0.4rem !important;
}
.sidebar .nav-link {
  color: var(--muted-l) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  margin: 1px 8px !important;
  padding: 0.5rem 0.75rem !important;
  transition: background 0.18s, color 0.18s !important;
}
.sidebar .nav-link .nav-icon { color: var(--muted) !important; font-size: 0.9rem !important; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
  background: rgba(124,58,237,0.14) !important;
  color: #c4b5fd !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover .nav-icon { color: #a78bfa !important; }

/* ── Footer ── */
.main-footer {
  background: rgba(5,8,22,0.95) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.8rem !important;
}
.main-footer a { color: var(--muted) !important; text-decoration: none; }
.main-footer a:hover { color: var(--muted-l) !important; }

/* ── Cards ── */
.card, .card-outline {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.card-primary > .card-header,
.card-success > .card-header,
.card-warning > .card-header,
.card-danger  > .card-header,
.card-info    > .card-header { background: transparent !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 1rem 1.4rem !important;
}
.card-header h3, .card-header .card-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--muted-l) !important;
  margin: 0 !important;
}
.card-header h3 i, .card-header .card-title i { color: var(--purple) !important; margin-right: 0.4rem; }
.card-body  { padding: 1.4rem !important; color: var(--text) !important; }
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  padding: 1rem 1.4rem !important;
}
.card-outline.card-primary { border-color: rgba(124,58,237,0.3) !important; }
.card-outline.card-success { border-color: rgba(34,197,94,0.3) !important; }
.card-outline.card-danger  { border-color: rgba(239,68,68,0.3) !important; }
.card-outline.card-warning { border-color: rgba(245,158,11,0.3) !important; }
.card-tools .btn { color: var(--muted) !important; }

/* Slack setup guide collapse */
.card-body.bg-light {
  background: rgba(255,255,255,0.03) !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
}
.card-body.bg-light h5, .card-body.bg-light h6 { color: var(--text) !important; }
.card-body.bg-light ol, .card-body.bg-light ul { color: var(--muted-l) !important; }
.card-body.bg-light a { color: #60a5fa !important; }

/* ── Info-box (legacy AdminLTE component) ── */
.info-box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.info-box-text { color: var(--muted-l) !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
.info-box-number { color: var(--text) !important; font-weight: 800 !important; font-size: 1.5rem !important; }
.info-box-icon.bg-info    { background: rgba(6,182,212,0.15) !important; color: #67e8f9 !important; border-radius: 12px 0 0 12px !important; }
.info-box-icon.bg-success { background: rgba(34,197,94,0.15) !important; color: #86efac !important; border-radius: 12px 0 0 12px !important; }
.info-box-icon.bg-warning { background: rgba(245,158,11,0.15) !important; color: #fcd34d !important; border-radius: 12px 0 0 12px !important; }
.info-box-icon.bg-primary { background: rgba(124,58,237,0.15) !important; color: #a78bfa !important; border-radius: 12px 0 0 12px !important; }
.info-box-icon.bg-danger  { background: rgba(239,68,68,0.15) !important; color: #fca5a5 !important; border-radius: 12px 0 0 12px !important; }

/* ── Tables ── */
.table { color: var(--text) !important; font-size: 0.85rem !important; }
.table thead th {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.7rem 1rem !important;
}
.table tbody td {
  border-color: rgba(255,255,255,0.04) !important;
  padding: 0.8rem 1rem !important;
  vertical-align: middle !important;
  color: var(--muted-l) !important;
}
.table-hover tbody tr:hover td { background: rgba(124,58,237,0.06) !important; color: var(--text) !important; }
.table-responsive { overflow: hidden; }
.text-muted   { color: var(--muted) !important; }
.text-success { color: #86efac !important; }
.text-danger  { color: #fca5a5 !important; }
.font-weight-bold, strong { color: var(--text) !important; }

/* ── Badges ── */
.badge { border-radius: 6px !important; font-size: 0.7rem !important; font-weight: 600 !important; padding: 3px 9px !important; }
.badge-success   { background: rgba(34,197,94,0.15)  !important; color: #86efac !important; }
.badge-warning   { background: rgba(245,158,11,0.15) !important; color: #fcd34d !important; }
.badge-danger    { background: rgba(239,68,68,0.15)  !important; color: #fca5a5 !important; }
.badge-info      { background: rgba(6,182,212,0.15)  !important; color: #67e8f9 !important; }
.badge-primary   { background: rgba(124,58,237,0.15) !important; color: #a78bfa !important; }
.badge-secondary { background: rgba(255,255,255,0.08) !important; color: var(--muted-l) !important; }

/* ── Form labels ── */
label, .form-group label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--muted-l) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0.45rem !important;
}
.form-check-label {
  font-size: 0.88rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: var(--muted-l) !important;
}

/* ── Inputs ── */
.form-control, select.form-control, textarea.form-control {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  padding: 0.65rem 0.9rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control::placeholder { color: #334155 !important; }
.form-control:focus, select.form-control:focus, textarea.form-control:focus {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(124,58,237,0.6) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
  color: var(--text) !important;
}
select.form-control option { background: #0f172a !important; color: var(--text) !important; }
.form-check-input { accent-color: var(--purple) !important; width: 1.1em; height: 1.1em; margin-top: 0.25em; }
.form-text.text-muted { color: var(--muted) !important; font-size: 0.75rem !important; margin-top: 0.3rem !important; }
.input-group-text {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--muted-l) !important;
  border-radius: 0 10px 10px 0 !important;
}
.input-group .form-control { border-radius: 10px 0 0 10px !important; }

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #3b82f6) !important;
  border: none !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
.btn-primary:hover { opacity: 0.9 !important; transform: translateY(-1px) !important; box-shadow: 0 5px 18px rgba(124,58,237,0.35) !important; }
.btn-success {
  background: rgba(34,197,94,0.15) !important;
  border: 1px solid rgba(34,197,94,0.3) !important;
  color: #86efac !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
}
.btn-success:hover { background: rgba(34,197,94,0.25) !important; color: #86efac !important; }
.btn-info {
  background: rgba(6,182,212,0.15) !important;
  border: 1px solid rgba(6,182,212,0.3) !important;
  color: #67e8f9 !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
}
.btn-info:hover { background: rgba(6,182,212,0.25) !important; color: #67e8f9 !important; }
.btn-warning {
  background: rgba(245,158,11,0.15) !important;
  border: 1px solid rgba(245,158,11,0.3) !important;
  color: #fcd34d !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
}
.btn-warning:hover { background: rgba(245,158,11,0.25) !important; color: #fcd34d !important; }
.btn-danger {
  background: rgba(239,68,68,0.15) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  color: #fca5a5 !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
}
.btn-danger:hover { background: rgba(239,68,68,0.25) !important; color: #fca5a5 !important; }
.btn-default, .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--muted-l) !important;
  border-radius: 9px !important;
  font-weight: 500 !important;
}
.btn-default:hover, .btn-secondary:hover { background: rgba(255,255,255,0.1) !important; color: var(--text) !important; }
.btn-outline-secondary {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--muted-l) !important;
  border-radius: 0 9px 9px 0 !important;
}
.btn-outline-secondary:hover { background: rgba(255,255,255,0.06) !important; color: var(--text) !important; }
.btn-sm  { font-size: 0.78rem !important; padding: 0.35rem 0.85rem !important; border-radius: 7px !important; }
.btn-lg  { font-size: 1rem !important; padding: 0.75rem 1.75rem !important; border-radius: 11px !important; }
.btn-block { width: 100% !important; }
.btn:disabled, .btn[disabled] { opacity: 0.35 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }

/* ── Alerts ── */
.alert { border-radius: 10px !important; font-size: 0.85rem !important; border: none !important; }
.alert-info    { background: rgba(59,130,246,0.1)  !important; border: 1px solid rgba(59,130,246,0.2)  !important; color: #93c5fd !important; }
.alert-success { background: rgba(34,197,94,0.1)   !important; border: 1px solid rgba(34,197,94,0.2)   !important; color: #86efac !important; }
.alert-warning { background: rgba(245,158,11,0.1)  !important; border: 1px solid rgba(245,158,11,0.2)  !important; color: #fcd34d !important; }
.alert-danger  { background: rgba(239,68,68,0.1)   !important; border: 1px solid rgba(239,68,68,0.2)   !important; color: #fca5a5 !important; }
.alert-link { color: inherit !important; text-decoration: underline !important; }
.close { color: currentColor !important; opacity: 0.6 !important; }

/* ── Tabs ── */
.nav-tabs { border-bottom: 1px solid var(--border) !important; gap: 0.2rem !important; }
.nav-tabs .nav-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: color 0.18s, background 0.18s !important;
}
.nav-tabs .nav-link:hover { color: var(--muted-l) !important; background: rgba(255,255,255,0.03) !important; }
.nav-tabs .nav-link.active {
  background: rgba(124,58,237,0.12) !important;
  border-color: rgba(124,58,237,0.3) rgba(124,58,237,0.3) transparent !important;
  color: #a78bfa !important;
}
.tab-pane { padding-top: 1.25rem !important; }

/* ── dl inside cards ── */
.card-body dt {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.card-body dd { font-size: 0.88rem !important; font-weight: 500 !important; color: var(--text) !important; }
.card-body code {
  background: rgba(124,58,237,0.12) !important;
  color: #a78bfa !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  font-size: 0.8rem !important;
}
pre.bg-light {
  background: rgba(255,255,255,0.04) !important;
  color: var(--muted-l) !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  border: 1px solid var(--border) !important;
}

/* ── Spinner ── */
.spinner-border { color: var(--purple) !important; }

/* ── Misc helpers ── */
.section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
hr { border-color: var(--border) !important; margin: 1.75rem 0 !important; }

/* ── Stat card ── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s;
  text-decoration: none;
  color: var(--text);
}
a.stat-card:hover {
  background: var(--surface2);
  border-color: rgba(124,58,237,0.35);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(124,58,237,0.12);
  color: var(--text);
  text-decoration: none;
}
.stat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.stat-value { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.2rem; }
.stat-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.stat-footer { font-size: 0.72rem; color: var(--muted); margin-top: 0.3rem; display: flex; align-items: center; gap: 0.3rem; }

/* ── Minimal layout (take/results pages) ── */
.minimal-wrapper {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.minimal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.minimal-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.minimal-logo-icon {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg,#7c3aed,#3b82f6);
  display: flex; align-items: center; justify-content: center;
}
.minimal-logo span { font-weight: 700; font-size: 0.95rem; color: var(--text); letter-spacing: -0.01em; }

.page-title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
}

/* ── Quiz-specific ── */
.score-display { font-size: 4rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1; }
.question-number {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  line-height: 28px;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* ── Create quiz page specifics ── */
.section-heading { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 1.25rem; }
.section-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
#gdrive_docs_list, #confluence_docs_list {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 0.75rem !important;
}
.document-item { border-radius: 8px !important; border-color: var(--border) !important; transition: background 0.18s !important; }
.document-item:hover { background: rgba(124,58,237,0.08) !important; }
.document-item label { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.85rem !important; }
.form-control-file { color: var(--muted-l) !important; font-size: 0.85rem !important; }