/*
 * brand-overrides.css
 * ─────────────────────────────────────────────────────────────────
 * Loaded AFTER Bootswatch Lux so it wins on equal specificity for
 * app-owned components (navbar, custom buttons, cards). Purpose:
 * preserve the SimulariExamen dark-blue + Romanian tricolor identity
 * while letting Lux drive typography (Nunito Sans), form controls,
 * spacing, and modals.
 *
 * Rule of thumb — put stuff here only when Lux's default clashes with
 * a brand-critical element. General styling belongs in style.css.
 */

/* ── Global navbar (blue bar at the top of every page) ─────────────── */
/* Lux navbars are white/light by default; our brand is a solid dark
   blue with white text. Keep the visual consistent across pages. */
body > .navbar,
.navbar.page-navbar,
.page-wrapper > .navbar {
  background: var(--primary) !important;
  color: #fff !important;
  padding: 1.1rem 1.5rem;   /* fuller vertical breathing room */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 76px;
}
/* Everything in the navbar is white text — EXCEPT explicit buttons
   with their own background (`.btn-white`, `.btn-primary` etc.), which
   own their color contract. Without this exception the navbar rule was
   winning `!important` against `.btn.btn-white { color: var(--primary) }`
   and rendering the "Înregistrare" pill as white-on-white. */
body > .navbar a:not(.btn),
body > .navbar .navbar-brand,
body > .navbar span,
body > .navbar .navbar-user {
  color: #fff !important;
}
body > .navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  /* Keep the original Inter face for the wordmark — Lux forces Nunito
     Sans + uppercase on brands, but the SimulariExamen logo is a
     designed lockup that must not shift typography or case. */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: none !important;
  letter-spacing: -0.01em;
}
body > .navbar .navbar-brand:hover { opacity: 0.9; }
body > .navbar .navbar-brand img,
body > .navbar .navbar-brand .logo-mark {
  width: auto;
  height: 36px;
  flex-shrink: 0;
}
/* Tricolor strip between the icon and the wordmark — must stay legible
   over the dark-blue navbar and match the height of the wordmark cap. */
body > .navbar .navbar-brand .flag-strip {
  display: flex;
  flex-direction: column;
  width: 6px;
  height: 30px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
body > .navbar .navbar-brand .flag-strip span { flex: 1; display: block; }
/* The RO tricolor blue (#002B7F) is the same shade as the navbar
   background, so the blue stripe disappears entirely on the dark bar.
   Use a lighter, sky-blue tint on the navbar-only tricolor so all three
   colors read clearly against the primary dark backdrop. */
body > .navbar .navbar-brand .flag-strip .b { background: #3b82f6; }
body > .navbar .navbar-brand .flag-strip .y { background: var(--ro-yellow); }
body > .navbar .navbar-brand .flag-strip .r { background: var(--ro-red); }
body > .navbar .navbar-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-direction: row;
}
body > .navbar .btn-logout {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white !important;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
}
body > .navbar .btn-logout:hover { background: rgba(255,255,255,0.25); }

/* ── Custom .btn variants Lux doesn't ship ─────────────────────────── */
.btn.btn-white {
  background: #fff;
  color: var(--primary) !important;   /* wins over `.navbar a:not(.btn)` */
  border: 1px solid #fff;
  font-weight: 700;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn.btn-white:hover,
.btn.btn-white:focus {
  /* Light-blue tint that harmonises with the primary dark blue — feels
     on-brand and gives clear contrast for the dark-blue label on hover.
     Previous yellow accent (RO tricolor) clashed with the navbar. */
  background: #dbeafe;
  color: var(--primary-dark) !important;
  border-color: #dbeafe;
}
.btn.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 500;
}
.btn.btn-ghost:hover {
  background: var(--bg);
  color: var(--text);
}

/* ── Hero (landing page) ──────────────────────────────────────────── */
/* Lux uppercases all headings via `text-transform: uppercase` on .h1..h6.
   Keep the hero visually anchored on the SimulariExamen dark blue instead
   of Lux's white background. */
.hero {
  background: var(--primary);
  color: #fff;
}
.hero h1 { color: #fff; }
.hero p, .hero .lead { color: rgba(255,255,255,0.85); }

/* ── Page-wrapper background stays neutral gray (Lux would blank it) ─ */
body.page-wrapper { background: var(--bg); }

/* ── Modals (custom overlay + card pattern) ────────────────────────── */
/* Redundant safety-net for Bootstrap `.modal { display:none }`. Already
   in style.css but keeping here in case load order ever flips. */
.modal-overlay .modal {
  position: static;
  display: block;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 0;
  pointer-events: auto;
}

/* ── Alerts colored per app palette (Lux uses muted tones) ─────────── */
.alert-error, .alert-danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.alert-success {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.alert-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde047;
}

/* ── Badges: solid colors with white text ────────────────────────────
   Previous pastel styles read as pink/washed-gray. Override with solid
   brand tones so the label is unambiguous. `.badge-yellow` keeps dark
   text since bright yellow + white would be unreadable. */
.badge.badge-red {
  background: var(--ro-red);
  color: #fff;
}
.badge.badge-gray {
  background: #4b5563;   /* Tailwind gray-600 — dark enough for white text */
  color: #fff;
}
.badge.badge-blue {
  background: var(--primary);
  color: #fff;
}
.badge.badge-green {
  background: var(--success);
  color: #fff;
}
.badge.badge-yellow {
  background: var(--ro-yellow);
  color: var(--primary-dark);
}

/* ── Back-link / long button text overflow fix ────────────────────────
   Lux uppercases `.btn` text which pushes "← ÎNAPOI LA PAGINA
   PRINCIPALĂ" past the 100%-width side-nav button. Drop the uppercase +
   allow the label to wrap and shrink so it fits any label length. */
.question-nav-panel .btn,
.exam-nav-btns .btn,
.btn#back-link {
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.25;
}