/* ==========================================================================
   TECH OPTIMUM brand theme (colors from the official logo)
   Navy (#101C4D) is the primary brand color; Gold (#F4C430) is the accent.
   Gold is used only where it's paired with dark text/backgrounds — as plain
   text or hover color on a light background, gold reads at very low
   contrast, so it's kept to buttons, badges, and borders instead.
   ========================================================================== */
:root {
  --brand-primary: #101C4D;   /* navy */
  --brand-secondary: #F4C430; /* gold */
}

body { background:#f5f7fb; }

/* Bootstrap color overrides so the whole system follows the brand palette */
.navbar.bg-primary, .bg-primary { background-color: var(--brand-primary) !important; }
.btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-primary); /* navy text on gold for contrast */
}
.btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-primary:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.text-primary { color: var(--brand-primary) !important; }
a { color: var(--brand-primary); }
a:hover { color: #060d29; text-decoration-color: var(--brand-secondary); } /* darker navy on hover, gold underline accent */
.btn-outline-light:hover { color: var(--brand-primary); }

.brand-logo { height: 52px; width: auto; }
.navbar-brand { display:flex; align-items:center; gap:.5rem; }

/* Admin sidebar */
.bg-dark, .navbar-dark.bg-dark { background-color: var(--brand-primary) !important; }
.nav-pills .nav-link.active { background: var(--brand-secondary); color: var(--brand-primary) !important; font-weight:600; }
.nav-pills .nav-link:hover { background:rgba(255,255,255,.1); }

.card-stat { border:none; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.question-nav-btn {
  width: 40px;
  height: 40px;
  padding: 0;              /* Bootstrap's default .btn padding left only ~16px
                               for text inside a 40px box — not enough room
                               for two-digit numbers, which then overflowed
                               and visually overlapped the next button. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
  flex: 0 0 auto;
}
.question-nav-btn.answered { background:#198754; color:#fff; }
.question-nav-btn.unanswered { background:#dee2e6; }
.question-nav-btn.review { background: var(--brand-secondary); color: var(--brand-primary); }
.question-nav-btn.current {
  box-shadow: 0 0 0 3px var(--brand-secondary); /* box-shadow instead of
    outline: same visual ring, but paired with the wider gap-3 spacing below
    it no longer overlaps the adjacent button. */
}
#navPanel { row-gap: 10px; }
#testTimer { font-size:1.4rem; font-weight:700; }
body.test-active { user-select:none; }