/* ==========================================================================
   Design system
   --------------------------------------------------------------------------
   Nothing here redefines a Bootstrap class directly (e.g. .btn-primary,
   .card). Two mechanisms are used instead, both sanctioned by Bootstrap
   5.3 itself:
     1. Bootstrap's own CSS custom properties (--bs-*) at :root — this is
        Bootstrap's documented theming API, not a class override.
     2. New custom classes (app-*, chrome-*, ticket-*, page-header) for
        things Bootstrap has no utility for.
   The one exception, per-event color overrides in theme.php, is
   documented there — those values are data-driven per event, not
   authored per-element inline styles.

   Color system: every "app-*"/"chrome-*" rule below reads from the
   --theme-* custom properties that theme.php's render_theme_styles()
   sets per event (primary/accent/dark, each with a computed readable
   text color — see theme.php for the contrast logic). The --app-*
   variables directly below are only a fallback for the rare page that
   doesn't call render_theme_styles(), so nothing breaks if that ever
   happens; in normal operation the --theme-* values win.
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Baseline Bootstrap theming hooks — sets the quiet, disciplined
       foundation. Per-event primary/accent/dark colors (theme.php)
       layer on top of this for public-facing pages. */
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bs-body-bg: #f7f5f0;
    --bs-body-color: #2a2f36;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-sm: 0.375rem;

    /* Fallback-only tokens — see note above. */
    --app-ink: #1c2b39;
    --app-ink-2: #24384a;
    --app-ink-text: #dbe2ea;
    --app-ink-muted-text: #7e93a8;
    --app-line: #e2ddd0;
    --app-amber: #e8a33d;
    --app-amber-text: #1c1400;
}

h1, h2, h3, h4, h5, .display-6 {
    font-family: 'Oswald', var(--bs-font-sans-serif);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Admin chrome — top bar + offcanvas navigation
   Colors always come from --theme-dark / --theme-dark-text / --theme-
   dark-2 (falling back to the static --app-ink tokens above if a page
   never called render_theme_styles()). Because dark-text is computed
   from the actual chosen color's brightness, a light "dark_color"
   choice automatically gets dark text instead of invisible white text
   — there's no separate light/dark toggle to set, it just works.
   ========================================================================== */

.app-topbar {
    background-color: var(--theme-dark, var(--app-ink));
    border-bottom: 1px solid var(--theme-dark-2, var(--app-ink-2));
}

.app-topbar .navbar-brand {
    font-family: 'Oswald', var(--bs-font-sans-serif);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--theme-dark-text, var(--app-ink-text));
}

.chrome-text-muted {
    color: var(--theme-dark-text, var(--app-ink-text));
    opacity: 0.65;
}

.chrome-badge {
    background-color: var(--theme-dark-2, var(--app-ink-2));
    color: var(--theme-dark-text, var(--app-ink-text));
}

.app-icon-btn {
    background: transparent;
    border: 1px solid var(--theme-dark-text, var(--app-ink-text));
    color: var(--theme-dark-text, var(--app-ink-text));
    opacity: 0.85;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius);
}

.app-icon-btn:hover {
    background-color: var(--theme-dark-2, var(--app-ink-2));
    color: var(--theme-dark-text, var(--app-ink-text));
    opacity: 1;
}

.chrome-btn-outline {
    background: transparent;
    border: 1px solid var(--theme-dark-text, var(--app-ink-text));
    color: var(--theme-dark-text, var(--app-ink-text));
}

.chrome-btn-outline:hover {
    background-color: var(--theme-dark-2, var(--app-ink-2));
    color: var(--theme-dark-text, var(--app-ink-text));
}

.app-sidebar {
    background-color: var(--theme-dark, var(--app-ink));
    color: var(--theme-dark-text, var(--app-ink-text));
}

.app-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--theme-dark-2, var(--app-ink-2));
}

.app-sidebar .offcanvas-title,
.app-sidebar .fw-semibold {
    color: var(--theme-dark-text, var(--app-ink-text));
}

.app-sidebar .nav-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-dark-muted-text, var(--app-ink-muted-text));
    padding: 1rem 0.25rem 0.4rem;
}

.app-sidebar .nav-link {
    color: var(--theme-dark-text, var(--app-ink-text));
    border-radius: var(--bs-border-radius);
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
}

.app-sidebar .nav-link i {
    font-size: 1.05rem;
    width: 1.2rem;
    text-align: center;
    opacity: 0.85;
}

.app-sidebar .nav-link:hover {
    background-color: var(--theme-dark-2, var(--app-ink-2));
    color: var(--theme-dark-text, var(--app-ink-text));
}

.app-sidebar .nav-link.active {
    background-color: var(--theme-accent, var(--app-amber));
    color: var(--theme-accent-text, var(--app-amber-text));
}

.app-sidebar .nav-link.active i {
    opacity: 1;
}

/* ==========================================================================
   Shared layout helpers
   ========================================================================== */

.page-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}

.page-header i {
    font-size: 1.4rem;
    color: var(--theme-accent, var(--app-amber));
}

.page-header h1 {
    margin-bottom: 0;
}

.intake-wrapper {
    min-height: 100vh;
}

.intake-card {
    width: 100%;
    max-width: 480px;
}

.event-logo {
    max-height: 80px;
}

.login-badge {
    width: 56px;
    height: 56px;
    background: var(--theme-dark, var(--app-ink));
    color: var(--theme-dark-text, var(--app-ink-text));
}

.nav-logo-thumb {
    max-height: 28px;
    margin-right: 8px;
}

.logo-preview-thumb {
    max-height: 120px;
}

.theme-preview-box {
    background-color: #f8f9fa;
}

/* ==========================================================================
   Ticket stub — the signature element. Used wherever a raffle number is
   revealed to a person (intake confirmation, results lookup). Modeled
   on a physical perforated raffle ticket: dashed tear-line, condensed
   numerals, a corner "stub" label — grounded directly in the actual
   object this whole system revolves around.
   ========================================================================== */

.ticket-stub {
    position: relative;
    border: 2px dashed var(--app-line);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem 1.25rem;
    background: linear-gradient(180deg, #fffdf9 0%, #fbf7ef 100%);
}

.ticket-stub::before,
.ticket-stub::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    background: var(--bs-body-bg);
    border-radius: 50%;
    transform: translateY(-50%);
}

.ticket-stub::before { left: -13px; }
.ticket-stub::after { right: -13px; }

.ticket-stub-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a8f78;
}

.assigned-number {
    font-family: 'Oswald', var(--bs-font-sans-serif);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Countdown widget — shared by results.php, awards.php via countdown.js.
   ========================================================================== */

.countdown-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, #fffdf9 0%, #fbf7ef 100%);
    border: 1px solid var(--app-line);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.95rem;
}

.countdown-badge .countdown-value {
    font-family: 'Oswald', var(--bs-font-sans-serif);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.countdown-badge.countdown-closed {
    opacity: 0.7;
}

.countdown-badge.countdown-closed .countdown-value {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
}

@media print {
    .no-print {
        display: none !important;
    }
}