/*
 * Icon brand theme overrides.
 * Loaded after styles.css (and any inline <style> blocks) so these rules win
 * on selectors of equal specificity, without having to rewrite the existing
 * markup/CSS wholesale.
 */

:root {
  --canvas: #faf5f2;
  --panel: #ffffff;
  --ink: #37262d;
  --muted: #8a6f76;
  --accent: #9c4a5f;
  --accent-dark: #863d50;
  --accent-soft: #f7eaee;
  --stroke: #ecdee1;
  --gold: #c29a5b;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--font-sans) !important;
  background-color: var(--canvas) !important;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(247, 227, 232, 0.9) 0 20%, transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(243, 230, 217, 0.9) 0 16%, transparent 30%);
  background-attachment: fixed;
  color: var(--ink);
}

/* Brand wordmark, added at the top of the main container on every page */
.brand {
  display: inline-grid;
  gap: 2px;
  margin-bottom: 18px;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, var(--gold), transparent);
}

.brand-sub {
  font-size: 9px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
}

.container {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 1.125rem;
  box-shadow: 0 10px 26px rgba(156, 74, 95, 0.07);
}

.section,
.question,
.test-card,
.config-form,
.admin-tab-content,
.result-item,
.timer,
.results tr:hover,
#newTestForm .question {
  border-radius: 10px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

h2 {
  color: var(--ink) !important;
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
  border-color: var(--stroke) !important;
  border-radius: 8px !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.text-answer:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

select[multiple] option:checked {
  background-color: var(--accent) !important;
}

/* Generic + primary action buttons -> brand accent */
button,
.primary-btn,
.next-btn,
.restart-btn,
#submitTest,
#addQuestionBtn,
.edit-btn,
.config-form button,
.options label:hover {
  background-color: var(--accent) !important;
}

button:hover,
.primary-btn:hover,
.next-btn:hover,
.restart-btn:hover,
#submitTest:hover,
#addQuestionBtn:hover,
.edit-btn:hover,
.config-form button:hover {
  background-color: var(--accent-dark) !important;
}

/* Secondary / neutral actions -> bordered, matching leave-tracker's btn-secondary */
.logout-btn,
.back-btn,
.secondary-btn,
.prev-btn,
.cancel-delete {
  background-color: #fff !important;
  color: var(--ink) !important;
  border: 1px solid var(--stroke) !important;
}

.logout-btn:hover,
.back-btn:hover,
.secondary-btn:hover,
.prev-btn:hover,
.cancel-delete:hover {
  background-color: var(--accent-soft) !important;
}

/* Destructive actions stay red, but a shade that matches the palette better */
.delete-btn,
.remove-question,
.nav button.logout,
.confirm-delete {
  background-color: #b23b48 !important;
}

.delete-btn:hover,
.remove-question:hover,
.nav button.logout:hover,
.confirm-delete:hover {
  background-color: #932e39 !important;
}

/* Tabs */
.tab-btn.active,
.tab-button.active,
button.tab-button.active,
.nav button.tab-button.active {
  color: var(--accent) !important;
}

.tab-btn.active::after,
.tab-button.active::after {
  background-color: var(--accent) !important;
}

.nav button {
  background-color: var(--accent-soft) !important;
  color: var(--ink) !important;
}

.nav button:hover {
  background-color: #f0dde2 !important;
}

.nav button.active,
.nav button.tab-button.active {
  background-color: var(--accent) !important;
  color: #fff !important;
}

/* Selection / highlight states */
.options label:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

.option-label:hover,
.option-block:hover {
  border-color: var(--accent) !important;
  background-color: var(--accent-soft) !important;
}

.option-label:has(input[type="radio"]:checked),
.option-block.selected {
  background-color: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

.option-text strong {
  color: var(--accent) !important;
}

/* Result / score highlights */
.results h2,
.percentage,
.results-table td.score {
  color: var(--accent) !important;
}

.feedback {
  border-left-color: var(--accent) !important;
}

/* Admin dashboard cards */
.result-card {
  border-left-color: var(--accent) !important;
}