/*
 * Topicus Events - beheer panel brand layer (buildless).
 *
 * This project runs on Laravel Mix/webpack (no Vite/Tailwind), so we cannot
 * generate a real Filament theme. Instead we override Filament v5's own CSS
 * custom properties and .fi-* classes at runtime via a HEAD_END render hook.
 *
 * House style:
 *   - Primary blue  #0E7FC3  (already the panel `primary`; Filament derives
 *                             the --color-primary-* shades from it)
 *   - Navy          #002959  (group labels + headings)
 *   - Accent yellow #F1EA36  (focus ring only, never a fill or text colour)
 *   - Muted grey    #77818b
 *   - Font          Montserrat (set via ->font('Montserrat'); this file only
 *                              provides the fallback chain + weights)
 *
 * WCAG: navy on white and white on primary blue both clear >= 4.5:1; the yellow
 * is used only as a focus outline (non-text UI), so its low contrast is fine.
 */

:root {
    /* Brand tokens, referenced below so a future colour tweak is one edit. */
    --te-navy: #002959;
    --te-blue: #0e7fc3;
    /*
     * Dark-mode brand blue. The navy accents and the mid brand blue are too
     * dark/low-contrast on Filament's dark surfaces (~gray-900 #18181b), so in
     * dark mode we swap them for a lighter tint that clears WCAG AA for text:
     * #7cc0ec on #18181b is ~8.6:1.
     */
    --te-blue-light: #7cc0ec;
    --te-accent: #f1ea36;
    --te-muted: #77818b;

    /*
     * Clean white + grey canvas (reference: the Dumea beheer panel). The page
     * sits on a soft neutral grey while sidebar, topbar and cards stay white, so
     * content reads crisply. Slightly greyer than Filament's default gray-50 for
     * a touch more separation between the canvas and the white surfaces.
     */
    --te-canvas: #f4f5f7;

    /*
     * ->font('Montserrat') sets --font-family to "Montserrat". We extend the
     * fallback chain here so the panel degrades gracefully before the webfont
     * loads or if the external fetch is blocked.
     */
    --default-font-family: var(--font-family, "Montserrat"), ui-sans-serif,
        system-ui, -apple-system, "Segoe UI", Roboto, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";

    /* Slightly rounder corners for a modern, less boxy feel. */
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
}

/* ---------------------------------------------------------------------------
 * Sidebar group labels + section headings in navy.
 * These are the "Evenementen / Rapportages / Systeem" captions.
 * ------------------------------------------------------------------------ */
.fi-sidebar-group-label {
    color: var(--te-navy);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

/* Page heading in navy so titles read as "Topicus" rather than default grey. */
.fi-header-heading {
    color: var(--te-navy);
}

/* ---------------------------------------------------------------------------
 * Active navigation item: brand-blue tint + a solid blue leading marker.
 * Filament marks the active row with .fi-active on .fi-sidebar-item.
 * ------------------------------------------------------------------------ */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: color-mix(in srgb, var(--te-blue) 12%, transparent);
    border-radius: var(--radius-lg);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-icon {
    color: var(--te-blue);
    font-weight: var(--font-weight-semibold, 600);
}

/* Hover state for inactive items: gentle grey wash + rounded corners. */
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn {
    border-radius: var(--radius-lg);
    transition: background-color 0.15s ease;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background-color: color-mix(in srgb, var(--te-navy) 6%, transparent);
}

/* ---------------------------------------------------------------------------
 * Light sidebar + topbar (chosen deliberately: the Topicus logo is navy, so a
 * light bar keeps the wordmark crisp and readable; see report).
 * We add a subtle brand-blue hairline under the topbar as a modern accent.
 * ------------------------------------------------------------------------ */
.fi-topbar {
    box-shadow: inset 0 -1px 0 0
        color-mix(in srgb, var(--te-blue) 25%, transparent);
}

.fi-sidebar {
    border-right: 1px solid
        color-mix(in srgb, var(--te-navy) 8%, transparent);
}

/* ---------------------------------------------------------------------------
 * Focus ring in the accent yellow (non-text UI element, so low contrast is
 * acceptable and it reads as a distinctly Topicus touch).
 * ------------------------------------------------------------------------ */
.fi-input:focus,
.fi-select-input:focus,
.fi-btn:focus-visible,
.fi-link:focus-visible,
.fi-sidebar-item-btn:focus-visible {
    outline: 2px solid var(--te-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Login page: give the brand card a touch more polish (rounder, softer shadow).
 * ------------------------------------------------------------------------ */
.fi-simple-main {
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--te-navy) 22%, transparent);
}

/* ---------------------------------------------------------------------------
 * Dark mode overrides.
 * Filament toggles dark mode with a `.dark` class on <html>. The navy accents
 * above disappear on the dark surface, so we re-point them to the lighter
 * brand blue (--te-blue-light) which stays legible (>= AA) on gray-900.
 * ------------------------------------------------------------------------ */

/* Group labels + page heading: navy -> light brand blue for readable contrast. */
.dark .fi-sidebar-group-label,
.dark .fi-header-heading {
    color: var(--te-blue-light);
}

/* Active nav item: brighter tint + lighter leading marker on the dark bg. */
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: color-mix(in srgb, var(--te-blue-light) 16%, transparent);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-icon {
    color: var(--te-blue-light);
}

/* Inactive hover wash: use the light blue instead of the near-invisible navy. */
.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background-color: color-mix(in srgb, var(--te-blue-light) 8%, transparent);
}

/* ---------------------------------------------------------------------------
 * Info slide-over (settings version thresholds).
 * Filament v5's shipped CSS does not include the arbitrary Tailwind utilities a
 * custom Blade view would use, so the version-info copy is styled with dedicated
 * classes loaded via this brand sheet (bold labels, muted body, blank line).
 * ------------------------------------------------------------------------ */
.te-info {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Blank line above the "Advies" block, like the Nou layout. */
.te-info__block + .te-info__block {
    margin-top: 1.25rem;
}

.te-info__label {
    font-weight: 700;
    color: #111827;
}

.te-info__text {
    color: #6b7280;
}

.dark .te-info__label {
    color: #f9fafb;
}

.dark .te-info__text {
    color: #9ca3af;
}

/* ---------------------------------------------------------------------------
 * Tab intro note (event workspace).
 * A short, muted one-liner rendered above a tab's table/widgets to explain what
 * the tab is for. Filament v5 ships no Tailwind utility build for custom Blade,
 * so the spacing and muted colour live here instead of inline utilities.
 * ------------------------------------------------------------------------ */
.te-tab-intro {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--te-muted);
}

/* ---------------------------------------------------------------------------
 * Onsite check-in page (EXTRA-1).
 * Filament v5's shipped CSS does not include the arbitrary Tailwind utilities a
 * custom Blade view would use for its layout (grid, gaps, spacing), so the
 * scanner/manual/result blocks are laid out with dedicated classes here. The
 * blocks themselves are Filament <x-filament::section> cards; these classes only
 * handle spacing and the two-column split.
 * ------------------------------------------------------------------------ */

/* Two-column split: scanner + manual on the left, last check-in on the right. */
.te-checkin {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .te-checkin {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* Stack the scanner and manual sections in the left column. */
.te-checkin__col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Camera preview: full width, rounded, dark backdrop before the stream loads. */
.te-checkin__video {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background: #000;
    object-fit: cover;
}

/* Button row under the camera preview + the manual code field. */
.te-checkin__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Manual code form: input + submit button side by side. */
.te-checkin__field-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.te-checkin__field-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* "Camera not supported" hint. */
.te-checkin__notice {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #b45309;
}

.dark .te-checkin__notice {
    color: #fbbf24;
}

/* Result detail list: label left, value right, hairline between rows. */
.te-checkin__list {
    display: flex;
    flex-direction: column;
}

.te-checkin__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-top: 1px solid #f3f4f6;
}

.dark .te-checkin__row {
    border-top-color: rgb(255 255 255 / 0.1);
}

.te-checkin__row:first-child {
    border-top: 0;
}

.te-checkin__row-label {
    font-size: 0.875rem;
    color: var(--te-muted);
}

.te-checkin__row-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    text-align: right;
}

.dark .te-checkin__row-value {
    color: #f9fafb;
}

/* Empty state + "already checked in" note + print-badge spacing. */
.te-checkin__empty {
    font-size: 0.875rem;
    color: var(--te-muted);
}

.te-checkin__already {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #b45309;
}

.dark .te-checkin__already {
    color: #fbbf24;
}

.te-checkin__footer {
    margin-top: 1rem;
}

/* Topbar hairline + sidebar border: lift onto the light blue so they read. */
.dark .fi-topbar {
    box-shadow: inset 0 -1px 0 0
        color-mix(in srgb, var(--te-blue-light) 30%, transparent);
}

.dark .fi-sidebar {
    border-right: 1px solid
        color-mix(in srgb, var(--te-blue-light) 14%, transparent);
}

/* ---------------------------------------------------------------------------
 * Clean white + grey page canvas (light mode).
 * Filament's default light body is near-white (gray-50). We nudge the canvas to
 * a soft neutral grey so the white sidebar, topbar and section cards separate
 * cleanly, matching the reference layout. Loaded after Filament's own CSS via
 * the HEAD_END hook, so this .fi-body rule wins over the utility class. Dark
 * mode keeps Filament's own dark surfaces untouched.
 * ------------------------------------------------------------------------ */
html:not(.dark) .fi-body {
    background-color: var(--te-canvas);
}

/* Sidebar stays white so it separates from the soft grey canvas (light mode). */
html:not(.dark) .fi-sidebar {
    background-color: #fff;
}

/* ---------------------------------------------------------------------------
 * Brand logo swap (buildless). The `dark:` Tailwind utilities are not compiled
 * in this project, so we toggle the two wordmarks by hand: navy on the light
 * topbar, white on the dark topbar (the navy one is unreadable on dark).
 * ------------------------------------------------------------------------ */
.te-logo--white {
    display: none;
}

.dark .te-logo--navy {
    display: none;
}

.dark .te-logo--white {
    display: inline-block;
}