/*
  Candidate app design system — walk-in test center UI.
  Deliberately independent of the Admindek theme used by WebUI.Admin: own palette, spacing
  scale, typography, and component shapes. Only Bootstrap 5's grid/utility classes and the
  Phosphor icon font are shared (layout primitives, not visual style).

  Palette: violet/indigo primary (interactive + focus), teal secondary (status/positive),
  amber (caution), red (danger/flagged), neutral slate grays for text/surfaces.
*/

:root {
    --cb-primary: #6d5ef8;
    --cb-primary-dark: #5a47ea;
    --cb-primary-soft: #f0eefe;
    --cb-teal: #0f9d8c;
    --cb-teal-soft: #e3f7f4;
    --cb-danger: #e0435c;
    --cb-danger-soft: #fdeaee;
    --cb-amber: #d68a1c;
    --cb-amber-soft: #fbf1e0;
    --cb-ink: #1c1b2e;
    --cb-ink-muted: #6b6a80;
    --cb-border: #e4e2f1;
    --cb-surface: #ffffff;
    --cb-bg: #f7f7fb;
    --cb-radius: 14px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    background-color: var(--cb-bg);
    color: var(--cb-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: var(--cb-primary);
}

/* ---------- Buttons ---------- */

.cb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.7rem 1.5rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    text-decoration: none;
    cursor: pointer;
}

.cb-btn:disabled,
.cb-btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.cb-btn-primary {
    background: var(--cb-primary);
    color: #fff;
}

.cb-btn-primary:hover {
    background: var(--cb-primary-dark);
    color: #fff;
}

.cb-btn-lg {
    padding: 0.95rem 2.5rem;
    font-size: 1.0625rem;
    border-radius: 12px;
}

.cb-btn-sm {
    padding: 0.5rem 1.1rem;
    font-size: 0.8125rem;
    border-radius: 8px;
}

.cb-btn-outline {
    background: #fff;
    border-color: var(--cb-border);
    color: var(--cb-ink);
}

.cb-btn-outline:hover {
    border-color: var(--cb-primary);
    color: var(--cb-primary);
}

.cb-btn-teal {
    background: var(--cb-teal);
    color: #fff;
}

.cb-btn-teal:hover {
    background: #0c8577;
    color: #fff;
}

.cb-btn-amber {
    background: var(--cb-amber);
    color: #fff;
}

.cb-btn-amber:hover {
    background: #b9760f;
    color: #fff;
}

.cb-btn-text {
    background: transparent;
    border: none;
    color: var(--cb-ink-muted);
    padding: 0.7rem 1rem;
}

.cb-btn-text:hover {
    color: var(--cb-ink);
}

/* ---------- Cards / surfaces ---------- */

.cb-card {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    box-shadow: 0 1px 2px rgba(28, 27, 46, 0.04);
}

.cb-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Auth / single-focus centered layout ---------- */

.cb-center-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.cb-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--cb-ink);
    text-decoration: none;
}

.cb-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--cb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* ---------- Minimal top strip (verification/details/start) ---------- */

.cb-topstrip {
    border-bottom: 1px solid var(--cb-border);
    background: var(--cb-surface);
    padding: 1rem 1.5rem;
}

/* ---------- Form fields ---------- */

.cb-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cb-ink-muted);
    margin-bottom: 0.4rem;
    display: block;
}

.cb-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1.5px solid var(--cb-border);
    font-size: 0.9375rem;
    transition: border-color 0.15s ease;
}

.cb-input:focus {
    outline: none;
    border-color: var(--cb-primary);
    box-shadow: 0 0 0 3px var(--cb-primary-soft);
}

/* ---------- Step indicator ---------- */

.cb-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.cb-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cb-border);
}

.cb-step-dot.is-active {
    width: 22px;
    border-radius: 4px;
    background: var(--cb-primary);
}

.cb-step-dot.is-done {
    background: var(--cb-teal);
}

/* ---------- Shared wizard-stage sizing & typography ---------- */

.cb-stage {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.cb-step-subtitle {
    font-size: 0.9rem;
    color: var(--cb-ink-muted);
}

.cb-help-text {
    font-size: 0.8125rem;
    color: var(--cb-ink-muted);
}

.cb-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Palette-correct color utilities (override Bootstrap's default blue/red) ---------- */

.text-primary-cb {
    color: var(--cb-primary) !important;
}

.bg-danger-soft {
    background: var(--cb-danger-soft) !important;
}

.text-danger-cb {
    color: var(--cb-danger) !important;
}

.bg-amber-soft {
    background: var(--cb-amber-soft) !important;
}

.text-amber-cb {
    color: var(--cb-amber) !important;
}

/* ---------- Info rows (test details / candidate verify) ---------- */

.cb-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--cb-border);
    font-size: 0.9375rem;
}

.cb-info-row:last-child {
    border-bottom: none;
}

.cb-info-row .label {
    color: var(--cb-ink-muted);
}

.cb-info-row .value {
    font-weight: 600;
}

.cb-photo-frame {
    width: 96px;
    height: 116px;
    border-radius: 12px;
    border: 2px solid var(--cb-border);
    object-fit: cover;
    background: var(--cb-bg);
}

/* ---------- Focus header for exam-taking (very minimal) ---------- */

.cb-exam-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--cb-surface);
    border-bottom: 1px solid var(--cb-border);
    padding: 0.7rem 1.25rem;
}

.cb-timer-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: var(--cb-primary-soft);
    color: var(--cb-primary-dark);
    border: 2px solid var(--cb-danger);
    box-shadow: 0 0 0 3px var(--cb-danger-soft);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
}

.cb-timer-pill.is-warning {
    background: var(--cb-amber-soft);
    color: #94660f;
    border-color: var(--cb-amber);
    box-shadow: 0 0 0 3px var(--cb-amber-soft);
}

.cb-timer-pill.is-critical {
    background: var(--cb-danger-soft);
    color: var(--cb-danger);
    border-color: var(--cb-danger);
    box-shadow: 0 0 0 3px var(--cb-danger-soft);
    animation: cb-pulse 1.1s ease-in-out infinite;
}

@keyframes cb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.cb-candidate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    border-radius: 999px;
    background: var(--cb-bg);
    border: 1px solid var(--cb-border);
}

.cb-candidate-badge img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.cb-candidate-badge .name {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.1;
}

.cb-candidate-badge .roll {
    font-size: 0.6875rem;
    color: var(--cb-ink-muted);
}

/* ---------- Progress bar ---------- */

.cb-progress-track {
    height: 6px;
    border-radius: 3px;
    background: var(--cb-border);
    overflow: hidden;
}

.cb-progress-fill {
    height: 100%;
    background: var(--cb-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ---------- Question area ---------- */

.cb-question-card {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius);
}

.cb-qtag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cb-primary);
    background: var(--cb-primary-soft);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

.cb-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border: 1.5px solid var(--cb-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    font-size: 0.95rem;
}

.cb-option:hover {
    border-color: #c9c4f7;
    background: var(--cb-primary-soft);
}

.cb-option.is-selected {
    border-color: var(--cb-primary);
    background: var(--cb-primary-soft);
}

.cb-option-marker {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--cb-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.cb-option.is-selected .cb-option-marker {
    border-color: var(--cb-primary);
    background: var(--cb-primary);
}

.cb-option.is-selected .cb-option-marker::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

.cb-option-letter {
    font-weight: 700;
    color: var(--cb-ink-muted);
    width: 1.2rem;
}

/* ---------- Question navigator (answered / current / not-visited only — no marked state) ---------- */

.cb-nav-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.3rem;
}

.cb-nav-cell {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    border: 1.5px solid var(--cb-border);
    background: #fff;
    color: var(--cb-ink-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    cursor: pointer;
}

.cb-nav-cell.is-answered {
    background: var(--cb-teal);
    border-color: var(--cb-teal);
    color: #fff;
}

.cb-nav-cell.is-current {
    background: var(--cb-primary);
    border-color: var(--cb-primary);
    outline: 2px solid var(--cb-primary);
    outline-offset: 1px;
    color: #fff;
}

.cb-nav-cell.is-marked {
    background: var(--cb-amber);
    border-color: var(--cb-amber);
    color: #fff;
}

/* ---------- Misc ---------- */

.cb-divider {
    border-top: 1px solid var(--cb-border);
}

.text-teal {
    color: var(--cb-teal) !important;
}

.bg-teal-soft {
    background: var(--cb-teal-soft) !important;
}