/*
 * Website-mockup van het portaal: aanvullingen op de CSS van het portaal (assets/portaal.css),
 * alleen voor wat zonder de scripts van de app anders zou zijn. portaal.html draait in een
 * binnenframe van 1280 × 720 (16:9, zie index.html).
 */
/* Niet scrollen in het frame (eigenaar 2026-09-23): wat niet past valt buiten beeld. */
html,
body {
    overflow: hidden;
    height: 100%;
}

/* Zonder zijmenu (de stand waarin het frame begint, eigenaar 2026-09-23): de inhoud gebruikt de
   hele breedte. De knop linksboven in de balk haalt het hele menu tevoorschijn. */
html.ehbo-mock-zonder-menu .fi-main-sidebar {
    display: none;
}

/* Op een telefoon geen bovenbalk (eigenaar 2026-09-23). */
@media (max-width: 699px) {
    .fi-topbar-ctn,
    .fi-topbar {
        display: none !important;
    }
}

/* Links doen in het frame niets en hebben geen adres meer (anders toont de browser onderin het
   adres van het frame zelf); ze moeten wel als link aanvoelen. */
a[data-mock-link] {
    cursor: pointer;
}

/* Filament laat het middengedeelte pas zien als zijn script klaar is (opacity 0). Dat script is
   er in de mockup niet, dus hier meteen zichtbaar. */
.fi-main-ctn {
    opacity: 1 !important;
}

/* In het frame laadt nooit iets. De generator haalt de laad-draaiertjes weg, maar in de
   vastgelegde uitgeklapte stand (<template id="ehbo-mock-open">) bleef die in het zoekveld staan:
   na het openen van het menu draaide er een rondje naast het vergrootglas. */
.fi-loading-indicator {
    display: none !important;
}

/* Geen schuifbalk in het menu: in een voorbeeld leidt die alleen af. */
.fi-sidebar-nav,
.fi-sidebar {
    scrollbar-width: none;
}

.fi-sidebar-nav::-webkit-scrollbar,
.fi-sidebar::-webkit-scrollbar {
    display: none;
}

/* Geen focusrand na een muisklik, wel bij toetsenbordgebruik. */
:focus:not(:focus-visible) {
    outline: none;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

/* Ingeklapte menugroep: de pijl draait mee, zoals in het portaal. */
.fi-sidebar-group.fi-collapsed .fi-sidebar-group-collapse-btn {
    transform: rotate(180deg);
}

/* De melding is een kopie van de echte portaalmelding; alleen het in- en uitfaden komt hier
   vandaan, omdat dat in het portaal door het script van de app gebeurt. */
.ehbo-mock-melding {
    animation: ehbo-mock-melding-in .2s ease-out;
    transition: opacity .25s ease;
}

.ehbo-mock-melding.is-weg {
    opacity: 0;
}

@keyframes ehbo-mock-melding-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* De kalender zet zijn breedte in pixels met een script (gemeten op desktop). Zonder dat script
   past hij zich niet aan: meegaan met de beschikbare breedte, ook op een telefoon. */
.fc .fc-col-header,
.fc .fc-scrollgrid-sync-table,
.fc .fc-daygrid-body {
    width: 100% !important;
}

/* Het uitgeklapte menu ligt OVER de pagina in plaats van ernaast (eigenaar 2026-09-23 gaf
   toestemming hier van het portaal af te wijken): op een breed scherm is het menu in het portaal
   een kolom die de inhoud opzij duwt, en dan breken de teksten in dit smalle frame af. */
@media (min-width: 700px) {
    html:not(.ehbo-mock-zonder-menu) .fi-main-sidebar {
        position: fixed;
        top: 4rem;
        bottom: 0;
        inset-inline-start: 0;
        z-index: 30;
        box-shadow: 0 20px 45px -12px rgba(20, 18, 74, .35);
    }
}

/* Op een telefoon telt elke regel (eigenaar 2026-09-23): de toelichting onder een titel valt weg,
   zodat de inhoud zelf meteen in beeld staat. Alleen in het frame, niet in het portaal. */
@media (max-width: 699px) {
    .fi-header-subheading,
    .fi-section-header-description {
        display: none !important;
    }

    /* Per frame aangewezen onderdelen (MOCK_MOBIEL_VERBERG), zoals de filterbalk bij Activiteiten:
       anders zie je op een telefoon alleen filters en geen activiteiten. */
    [data-mock-mobiel-weg] {
        display: none !important;
    }

    /* Kalender: het portaal schakelt op een telefoon met zijn script over op de lijstweergave;
       het frame is op desktop vastgelegd en houdt de maand. Daarin waren de afspraken
       afgeknipte stukjes tekst en viel de titel ("oktober 2026") over de pijltjes. Op deze
       breedte daarom de titel op een eigen regel onder de knoppen en de afspraken als gekleurde
       streepjes. */
    /* De filters en de kleurenuitleg boven de kalender vulden het hele staande frame; net als de
       filterbalk bij Activiteiten weg op een telefoon, zodat de kalender zelf in beeld staat. */
    .fi-section-content:has(.fc) > .mb-4 {
        display: none;
    }

    .fc .fc-header-toolbar .fc-toolbar-chunk:first-child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem .75rem;
    }

    .fc .fc-header-toolbar .fc-toolbar-chunk:first-child > * {
        margin: 0 !important;
    }

    .fc .fc-toolbar-title {
        flex-basis: 100%;
        font-size: 1.125rem;
    }

    .fc .fc-daygrid-event {
        min-height: 6px;
        border-radius: 3px;
    }

    .fc .fc-daygrid-event .fc-event-main {
        display: none;
    }
}