/* portaal.css — de portaal-chrome die vroeger in basis.css (Ragently.Gedeeld) stond: zijbalk, instellingen, onderbalk (companion), kopbalk, dashboard-primitieven en mobiele overlay/PWA-banner/zijbalk-wrapper. Letterlijk dezelfde regels in dezelfde volgorde; index.html laadt dit bestand direct ná basis.css en vóór app.css. Geen van deze selectors deelt een element met een latere basisregel van gelijke specificiteit, dus de cascade blijft gelijk (final review A1-I3; BasisCssTests bewaakt de grens en de laadvolgorde). */

/* =========================================================
   SIDEBAR NAV
   ========================================================= */

.app-root .sidebar-container {
    width: 16rem;
    background-color: var(--app-bg);
    border-right: 1px solid var(--app-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    flex-shrink: 0;
    z-index: 20;
}

.app-root .app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;

    font-size: 0.875rem;
    font-weight: 500;

    color: var(--app-secondary);
    border-radius: 0.75rem;
    transition: background-color .15s, color .15s;
}

.app-root .app-nav-link:hover {
    color: var(--app-primary);
    background-color: var(--app-secondary-soft);
}

.app-root .app-nav-link.active {
    color: var(--app-primary);
    background-color: var(--app-primary-soft);
}

/* Groepslabel in de zijbalk (horeca-herontwerp fase 1): klein, gedempt,
   geen hoofdletters -- een kop boven een groep, geen menu-item. */
.app-root .app-nav-groep {
    margin: .25rem 0 .25rem;
    padding: 0 .75rem;
    font-size: .75rem;
    color: var(--app-text-secondary);
}

/* =========================================================
   SETTINGS PAGES
   ========================================================= */

/* Shared card shell — was duplicated as an identical inline style on every
   settings section (Account, Notifications, Security, Billing). Having it
   as a class means the mobile padding reduction below only has to be
   written once instead of hand-editing five near-identical inline styles. */
.app-root .settings-section {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    padding: 2rem;
}
.app-root .settings-section.is-danger {
    border-color: var(--app-danger);
}
@media (max-width: 767px) {
    .app-root .settings-section {
        padding: 1.25rem;
    }
}

/* Floating "unsaved changes" pill. Fixed to the viewport, so on the mobile
   companion it must clear the bottom nav itself — the original inline
   `bottom: 1.5rem` sat squarely behind/under it (nav is z-index 100 vs this
   pill's 30), making Save unreachable. */
.app-root .settings-save-pill {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 30;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 9999px;
    padding: 0.4rem 0.5rem 0.4rem 0.75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    animation: settingsPillSlideUp 0.3s ease-out;
}
@media (max-width: 767px) {
    .app-root .settings-save-pill {
        right: 1rem;
        bottom: calc(60px + env(safe-area-inset-bottom) + 1rem);
    }
}

/* =========================================================
   EMBEDDED MOBILE BOTTOM NAV
   ========================================================= */

.embedded-mobile-nav {
    display: none; /* hidden on desktop */
}

@media (max-width: 767px) {
    .embedded-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 60px;
        background-color: var(--app-surface);
        border-top: 1px solid var(--app-border);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
        justify-content: space-around;
        align-items: stretch;
    }

    /* push content up so it's not hidden behind the bar */
    .app-root main .embedded-mobile-spacer {
        height: 60px;
        flex-shrink: 0;
    }
}

/* Companion-modus (geïnstalleerde PWA): bottom-nav is dan de enige navigatie,
   dus op elke schermbreedte zichtbaar — ook op een desktop-install. */
.embedded-mobile-nav.emn-companion {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 60px;
    background-color: var(--app-surface);
    border-top: 1px solid var(--app-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    justify-content: space-around;
    align-items: stretch;
}

.app-root main .embedded-mobile-spacer.emn-companion-spacer {
    height: calc(60px + env(safe-area-inset-bottom));
    flex-shrink: 0;
}

/* Native-app-gevoel in de geïnstalleerde companion: nav boven de
   iPhone-thuisbalk (safe-area), geen tap-flits, geen tekstselectie op de
   nav en geen rubber-band/pull-to-refresh op de pagina zelf. */
.embedded-mobile-nav.emn-companion {
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.emn-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 3px;
    color: var(--app-text-secondary);
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s;
    padding: 6px 4px;
    margin: 4px 3px;
    min-width: 0;
    border-radius: 0.6rem;
}

/* Touch devices have no real "unhover" event, so a shared :hover/.active
   rule left every tab you'd ever tapped stuck in the active color — hence
   all of Dashboard/Inbox/Meldingen reading as permanently highlighted.
   Only apply :hover where a mouse can actually leave (hover: hover). */
@media (hover: hover) {
    .emn-tab:hover {
        color: var(--app-primary);
    }
}

/* The active tab gets a filled pill, not just a text-color change — the
   color alone wasn't a clear enough "you are here" signal. */
.emn-tab.active {
    color: var(--app-primary);
    background: var(--app-primary-soft);
}

.emn-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.emn-label {
    font-size: 0.6rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    line-height: 1.2;
}

/* =========================================================
   TOP HEADER
   ========================================================= */

.app-root .top-header {
    width: 100%;
    height: 4rem;
    background-color: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .app-root .top-header {
        padding: 0 2rem;
    }
}

.app-root .mobile-menu-btn {
    display: flex;
    padding: 0.5rem;
    color: var(--app-secondary);
    transition: color 0.15s;
}

.app-root .mobile-menu-btn:hover {
    color: var(--app-primary);
}

@media (min-width: 1024px) {
    .app-root .mobile-menu-btn {
        display: none;
    }
}

.app-root .header-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .app-root .header-title {
        font-size: 1.125rem;
    }
}

.app-root .header-subtitle {
    font-size: 0.75rem;
    color: var(--app-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

@media (min-width: 640px) {
    .app-root .header-subtitle {
        display: block;
    }
}


@keyframes settingsPillSlideUp {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   DASHBOARD — shared primitives still used by RecentMessages
   ========================================================= */

.app-root .dashboard-panel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-text-secondary);
}

.app-root .dashboard-panel {
    position: relative;
}

.app-root .dashboard-empty-state__icon {
    opacity: 0.4;
}

.app-root .dashboard-message-item {
    position: relative;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.app-root .dashboard-message-item:hover {
    background: var(--app-secondary-soft);
    transform: translateX(2px);
}

.app-root .dashboard-message-item:focus-visible {
    background: var(--app-secondary-soft);
    transform: translateX(2px);
    outline: none;
    box-shadow: 0 0 0 3px var(--app-primary-soft);
}

.app-root .dashboard-message-item__avatar {
    box-shadow: inset 0 0 0 1px var(--app-border);
}

.app-root .dashboard-message-item__chevron {
    align-self: center;
    color: var(--app-text-secondary);
    opacity: 0.6;
}

@media (max-width: 640px) {
    .app-root .card-title {
        font-size: 1rem;
    }
}

/* Mobile overlay for sidebar */
.app-root .mobile-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
    display: none;
}

@media (max-width: 1023px) {
    .app-root .mobile-overlay {
        display: block;
    }
}

/* PWA-installatiebanner (Pages/Components/PwaInstallBanner.razor).
   Mobiel: volle breedte onderaan, ónder de opengeklapte sidebar (z-40 < 50).
   Desktop (≥1024px): de sidebar staat vast op 16rem breed — de banner begint
   rechts daarvan i.p.v. eronder te verdwijnen, en de copy wisselt naar een
   "open dit op je telefoon"-hint (installeren op desktop is niet de
   bedoeling van de companion-app). */
.app-root .pwa-install-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 40;
}

.app-root .pwa-banner-desktop-hint {
    display: none;
}

@media (min-width: 1024px) {
    .app-root .pwa-install-banner {
        left: 17rem;
        right: auto;
        max-width: 26rem;
    }

    .app-root .pwa-banner-desktop-hint {
        display: block;
    }

    .app-root .pwa-banner-mobile-hint {
        display: none;
    }
}

/* Sidebar wrapper for mobile/desktop transitions */
.app-root .sidebar-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 16rem;
    background-color: var(--app-surface);
    border-right: 1px solid var(--app-border);
    z-index: 50;
    transition: transform 300ms ease-in-out;
    overflow: hidden;
}

@media (max-width: 1023px) {
    .app-root .sidebar-wrapper.sidebar-closed {
        transform: translateX(-100%);
    }

    .app-root .sidebar-wrapper.sidebar-open {
        transform: translateX(0);
    }
}

@media (min-width: 1024px) {
    .app-root .sidebar-wrapper {
        position: relative;
        transform: translateX(0) !important;
    }

    .app-root .mobile-overlay {
        display: none !important;
    }
}

/* Main content area */
.app-root .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    position: relative;
}