/* ==========================*/
/* EduDisplay Beheer Shell CSS */
/* Update: 2026-08-28 */
/* ==========================*/
/* Hoort bij: layouts/base.html, includes/navigation|sidebar|footer */
/* Light: soft gray shell; dark: custom shell variables */
/* Actief menu: .sidebar-nav-active */

html.dark {
    /* Menu gray-800; header = canvas #19202e; border #2c3545 */
    --app-shell-bg: #1f2937;
    --app-header-bg: #19202e;
    --app-header-border: #2c3545;
    --app-canvas-bg: #19202e;
    --app-panel-bg: #212c3c;
    --app-shell-border: #3e4756;
    --app-shell-divider: #353d4c;
}

:root {
    --app-header-offset: 4rem;
}

@media (max-width: 1023px) {
    :root {
        --app-header-offset: 3.25rem;
    }

    /* Twee regels (merk + school) → iets meer ruimte */
    body:has(.app-topnav--with-school) {
        --app-header-offset: 3.75rem;
    }
}

.app-brand-title {
    font-size: 1.3rem;
    line-height: 1.2;
}

.app-brand-title-row {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: 0;
}

.app-brand-test {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.app-brand-logo {
    height: 1.75rem; /* iets kleiner op telefoon */
    width: auto;
}

.app-brand > picture {
    display: contents;
}

.app-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 0.05rem;
}

/* Mobiel: school altijd op regel 2, zonder “ - ”-prefix, met ellipsis */
.app-brand-school {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 500;
    opacity: 0.9;
}

.app-brand-school-sep {
    display: none;
}

@media (min-width: 640px) {
    .app-brand-logo {
        height: 2.25rem; /* h-9 */
    }

    .app-brand-test {
        font-size: 1rem;
    }

    .app-brand-text {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: nowrap;
        gap: 0.35rem; /* ruimte tussen TEST en streepje/schoolnaam */
    }

    .app-brand-school {
        display: inline;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        font-size: 1.3rem;
        font-weight: 600;
        opacity: 1;
    }

    .app-brand-school-sep {
        display: inline;
    }
}

.app-topnav {
    border-bottom: 1px solid #d1d5db; /* gray-300: zichtbaar, niet te hard */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* subtiele scheiding */
}

/* Portaalwisselaar: icoon (+ chevron) tot desktop; ≥1024px (lg) = volle naam
   (op sm/md concurreren logo, school, gebruikersnaam en avatar al) */
.portal-switcher-wrap {
    margin-left: 0.25rem;
}

.portal-switcher-button {
    gap: 0.125rem;
    padding: 0.375rem;
    max-width: 9.5rem;
}

.portal-switcher-label-full {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.portal-switcher-chevron {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
}

@media (min-width: 1024px) {
    .portal-switcher-wrap {
        margin-left: 0.75rem;
    }

    .portal-switcher-button {
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        max-width: 14rem;
    }

    .portal-switcher-label-full {
        display: inline;
    }

    .portal-switcher-chevron {
        width: 1rem;
        height: 1rem;
    }
}

/* Ander portaal: project-blauw (Tailwind blue-500 / primary-500) */
.portal-switcher-button--shared {
    color: #3b82f6;
    box-shadow: inset 0 0 0 1px #93c5fd;
}

.portal-switcher-button--shared:hover {
    color: #2563eb;
}

html.dark .portal-switcher-button--shared {
    color: #60a5fa;
    box-shadow: inset 0 0 0 1px #3b82f6;
}

html.dark .portal-switcher-button--shared:hover {
    color: #93c5fd;
}

/* Compactere header op telefoon */
.app-topnav-inner {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 1024px) {
    .app-topnav-inner {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Content-offset onder fixed header */
@media (max-width: 1023px) {
    .app-shell-offset {
        padding-top: var(--app-header-offset);
    }

    #sidebar:not(.hidden) {
        padding-top: var(--app-header-offset);
    }
}

@media (min-width: 1024px) {
    #sidebar {
        padding-top: var(--app-header-offset);
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }
}

/* Shell tot de viewport-onderkant — voorkomt een even gekleurde strook onder de footer */
html,
body {
    height: 100%;
    overflow: hidden;
}

.app-shell-offset {
    position: fixed;
    inset: 0;
    min-height: 0;
}

#main-content {
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
}

html.dark .app-topnav {
    background-color: var(--app-header-bg) !important;
    border-bottom-color: var(--app-header-border) !important;
    box-shadow: none;
}

.app-footer {
    border-top: 1px solid #d1d5db !important; /* gray-300 */
    flex-shrink: 0;
}

html.dark .app-footer {
    background-color: var(--app-shell-bg) !important;
    border-top-color: var(--app-shell-divider) !important;
}

.app-footer-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.75rem;
    color: #9ca3af;
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 0;
    min-height: 0;
    appearance: none;
    -webkit-appearance: none;
}

html.dark .app-footer-toggle {
    color: #6b7280;
}

.app-footer-toggle-icon--closed {
    width: 2rem;
    height: 0.25rem;
    border-radius: 999px;
    background-color: currentColor;
    opacity: 0.55;
}

.app-footer-toggle-icon--open {
    display: none;
    width: 0.75rem;
    height: 0.75rem;
}

.app-footer-toggle-icon--hint {
    display: none;
    width: 0.85rem;
    height: 0.85rem;
}

.app-footer--collapsible.is-open .app-footer-toggle-icon--closed,
.app-footer--collapsible.is-open .app-footer-toggle-icon--hint {
    display: none;
}

.app-footer--collapsible.is-open .app-footer-toggle-icon--open {
    display: block;
}

.app-footer-panel {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.3rem 1rem;
    min-height: 0;
    line-height: 1.2;
    overflow-x: auto;
}

.app-footer-links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.app-footer-links a {
    white-space: nowrap;
}

.app-footer-copy {
    margin: 0 0 0 auto;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 1023px) {
    .app-shell-offset {
        flex: none;
        padding-top: var(--app-header-offset);
    }

    .app-footer--collapsible {
        flex: 0 0 auto;
    }

    .app-footer--collapsible .app-footer-toggle {
        display: flex;
    }

    .app-footer--collapsible:not(.is-open) .app-footer-panel {
        display: none;
    }

    .app-footer--collapsible.is-open .app-footer-panel {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0 0.75rem 0.4rem;
    }

    .app-footer--collapsible.is-open .app-footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1rem;
        width: 100%;
    }

    .app-footer--collapsible.is-open .app-footer-copy {
        margin-left: auto;
        margin-top: 0.15rem;
        text-align: right;
    }

    .app-footer--collapsible:not(.is-open) .app-footer-toggle:focus-visible .app-footer-toggle-icon--closed {
        display: none;
    }

    .app-footer--collapsible:not(.is-open) .app-footer-toggle:focus-visible .app-footer-toggle-icon--hint {
        display: block;
    }

    @media (hover: hover) and (pointer: fine) {
        .app-footer--collapsible:not(.is-open) .app-footer-toggle:hover .app-footer-toggle-icon--closed {
            display: none;
        }

        .app-footer--collapsible:not(.is-open) .app-footer-toggle:hover .app-footer-toggle-icon--hint {
            display: block;
        }

        .app-footer--collapsible:not(.is-open) .app-footer-toggle:hover {
            color: #9ca3af;
        }

        html.dark .app-footer--collapsible:not(.is-open) .app-footer-toggle:hover {
            color: #d1d5db;
        }
    }
}

/* Sidebar + header: menu gray-800, geen streep door nested bg */
html.dark #sidebar {
    background-color: var(--app-shell-bg);
}

html.dark #sidebar > div {
    background-color: var(--app-shell-bg) !important;
    border-color: var(--app-shell-border) !important;
}

html.dark #sidebar .bg-gray-50,
html.dark #sidebar .dark\:bg-gray-800,
html.dark #sidebar > div > .overflow-y-auto .bg-white {
    background-color: transparent !important;
}

html.dark #sidebar [sidebar-bottom-menu] {
    background-color: var(--app-shell-bg) !important;
}

#sidebar [sidebar-bottom-menu] {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

#sidebar > div {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#sidebar > div > .overflow-y-auto {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto; /* alleen balk bij overflow — geen vaste lege track */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4rem;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
}

/* Geen pijltjes/hoek (Chromium witte “uitsulping”) */
#sidebar > div > .overflow-y-auto::-webkit-scrollbar-button,
#sidebar > div > .overflow-y-auto::-webkit-scrollbar-button:start:decrement,
#sidebar > div > .overflow-y-auto::-webkit-scrollbar-button:end:increment,
#sidebar > div > .overflow-y-auto::-webkit-scrollbar-button:single-button,
#sidebar > div > .overflow-y-auto::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

#sidebar > div > .overflow-y-auto::-webkit-scrollbar {
    width: 8px !important;
    height: 0 !important; /* geen horizontale balk-ruimte */
}

#sidebar > div > .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent !important;
}

#sidebar > div > .overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: #9ca3af !important;
    border-radius: 9999px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

#sidebar > div > .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280 !important;
}

html.dark #sidebar > div > .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: #d1d5db !important;
}

html:not(.dark) #sidebar .text-gray-400,
html:not(.dark) .app-topnav .text-gray-400,
html:not(.dark) #main-content .text-gray-400 {
    color: #6b7280 !important;
}

html:not(.dark) #sidebar .text-gray-500,
html:not(.dark) .app-topnav .text-gray-500,
html:not(.dark) #main-content .text-gray-500 {
    color: #4b5563 !important;
}

html:not(.dark) #sidebar .text-gray-600,
html:not(.dark) .app-topnav .text-gray-600,
html:not(.dark) #main-content .text-gray-600 {
    color: #374151 !important;
}

/* Actief menu-item (alleen light): iets donkerder grijs; dark blijft gray-700 */
#sidebar a.sidebar-nav-active,
#sidebar button.sidebar-nav-active {
    background-color: #e5e7eb; /* gray-200 */
    color: #111827; /* gray-900 */
    font-weight: 600;
}

#sidebar a.sidebar-nav-active svg,
#sidebar button.sidebar-nav-active svg {
    color: #374151 !important; /* gray-700 */
}

html.dark #sidebar a.sidebar-nav-active,
html.dark #sidebar button.sidebar-nav-active {
    background-color: #374151; /* gray-700 — zelfde als voorheen */
    color: #e5e7eb; /* gray-200 */
    font-weight: 600;
}

html.dark #sidebar a.sidebar-nav-active svg,
html.dark #sidebar button.sidebar-nav-active svg {
    color: #d1d5db !important; /* gray-300 */
}

a.doc-variant-card,
a.doc-variant-card:hover,
a.doc-variant-card:focus,
a.doc-variant-card * {
    text-decoration: none !important;
}

html.dark #main-content {
    background-color: var(--app-canvas-bg) !important;
    scrollbar-color: #4b5563 var(--app-canvas-bg);
}

html.dark #main-content > .flex-1 {
    background-color: var(--app-canvas-bg) !important;
}

html.dark #main-content .dark\:bg-gray-800 {
    background-color: var(--app-panel-bg) !important;
}

/* Release-notities: uitklap per versie */
.app-release-details > summary {
    list-style: none;
}

.app-release-details > summary::-webkit-details-marker {
    display: none;
}

.app-release-details > summary:hover {
    background-color: #f3f4f6;
}

html.dark .app-release-details > summary:hover {
    background-color: #374151;
}

html.dark .app-release-details > summary:hover h2 {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.14);
    text-underline-offset: 5px;
}

.app-release-details-chevron {
    transition: transform 0.2s ease;
}

.app-release-details[open] > summary .app-release-details-chevron {
    transform: rotate(90deg);
}

/* Soft panel + nav-link (o.a. download ↔ nieuw-pagina) */
.app-soft-panel {
    background-color: #ffffff;
}

html.dark .app-soft-panel {
    background-color: var(--app-panel-bg);
}

.app-soft-panel-link {
    color: #111827; /* gray-900 */
}

.app-soft-panel-link:hover {
    background-color: #f9fafb; /* gray-50 */
}

.app-soft-panel-link-icon {
    color: #16a34a; /* green-600 */
}

.app-soft-panel-link-chevron {
    color: #9ca3af; /* gray-400 */
}

html.dark .app-soft-panel-link {
    color: #ffffff;
}

html.dark .app-soft-panel-link:hover {
    background-color: #374151; /* gray-700 */
}

html.dark .app-soft-panel-link-icon {
    color: #4ade80; /* green-400 */
}

html.dark .app-soft-panel-link-chevron {
    color: #9ca3af;
}

/* Panels: subtiele diepte i.p.v. harde rand (auth gebruikt hero-CSS; beheer blijft rustiger) */
#main-content .rounded-lg.border.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.06);
}

html.dark #main-content .rounded-lg.border.shadow-sm {
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

/* Dark: scrollbar mee met shell (geen lichte/witte track naast sidebar) */
html.dark {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 var(--app-shell-bg);
}

html.dark *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.dark *::-webkit-scrollbar-track {
    background: var(--app-shell-bg);
}

html.dark *::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 9999px;
    border: 2px solid var(--app-shell-bg);
}

html.dark *::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

html.dark #main-content *::-webkit-scrollbar-track {
    background: var(--app-canvas-bg);
}

html.dark #main-content *::-webkit-scrollbar-thumb {
    border-color: var(--app-canvas-bg);
}

/* SSPR dashboard statistieken: 1 → 2 → 4 kolommen */
.sspr-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .sspr-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sspr-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Portaal permissies-modal: tabs + footer op smalle schermen */
.portal-permissions-tabs-nav {
    display: flex;
    gap: 1rem;
    min-width: max-content;
}

@media (min-width: 640px) {
    .portal-permissions-tabs-nav {
        gap: 2rem;
    }
}

.portal-permissions-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .portal-permissions-footer {
        flex-direction: row;
        justify-content: flex-end;
    }

    .portal-permissions-footer > button {
        width: auto;
    }
}

/* Gebruikersbeheer tokens: op smalle schermen horizontaal scrollen
   (geen display:none — CSV mist anders Type/Geboortedatum/Email) */
@media (max-width: 767px) {
    #tokenEditTable {
        min-width: 56rem;
    }

    #tokenEditTable .flex.flex-col > button {
        width: 100%;
        justify-content: center;
    }
}

/* Gebruikersbeheer CSV-import: 2×2 gelijke, uitgelijnde stappen */
.csv-import-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .csv-import-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 17rem);
        grid-template-areas:
            "step1 step3"
            "step2 step4";
        align-items: stretch;
    }

    .csv-import-step--1 { grid-area: step1; }
    .csv-import-step--2 { grid-area: step2; }
    .csv-import-step--3 { grid-area: step3; }
    .csv-import-step--4 { grid-area: step4; }
}

.csv-import-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 17rem;
    overflow: hidden;
    box-sizing: border-box;
}

.csv-import-dropzone {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Gebruikersbeheer: token-header + tabs */
.um-token-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.um-token-header-tabs {
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
}

@media (max-width: 639px) {
    #manualTab,
    #csvTab,
    #microsoftTab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 calc(50% - 0.25rem);
        text-align: center;
    }
}

/* Gebruikersbeheer modal footer */
.um-modal-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .um-modal-footer {
        flex-direction: row;
        justify-content: flex-end;
    }

    .um-modal-footer > button {
        width: auto;
    }
}

/* Microsoft Sync tenant-acties (compact icon-knoppen in card-header) */
.um-tenant-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
}

/* Status-badges (Leerling / Specifieke groepen) — voldoende ruimte ertussen */
.um-tenant-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
}

/* Specifieke groepen: zachte amber-vulling, gedempte gele tekst, heel subtiele rand */
.um-badge-specific-groups {
    border: 1px solid rgb(202 168 50 / 0.28);
}

.dark .um-badge-specific-groups {
    color: rgb(214 188 102);
    border-color: rgb(232 200 72 / 0.22);
}

.um-tenant-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
}

/* Microsoft Sync tenant-configuratie (compacte uitlijning) */
.um-tenant-meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.um-tenant-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.75rem;
    row-gap: 0.375rem;
}

.um-tenant-meta-item {
    display: inline-grid;
    grid-template-columns: auto minmax(0, max-content);
    gap: 0.5rem;
    align-items: baseline;
    min-width: 0;
}

.um-tenant-meta-item--full {
    display: grid;
    grid-template-columns: 8.75rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    width: 100%;
}

.um-tenant-meta-item--results {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgb(229 231 235);
}

.dark .um-tenant-meta-item--results {
    border-top-color: rgb(55 65 81);
}

.um-tenant-meta-item dt {
    margin: 0;
    font-weight: 500;
    color: rgb(55 65 81);
}

.dark .um-tenant-meta-item dt {
    color: rgb(229 231 235);
}

.um-tenant-meta-item dd {
    margin: 0;
    min-width: 0;
    color: rgb(107 114 128);
    word-break: break-word;
}

.dark .um-tenant-meta-item dd {
    color: rgb(156 163 175);
}

.um-tenant-sync-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
}

.um-tenant-sync-stats strong {
    font-weight: 600;
    color: rgb(55 65 81);
}

.dark .um-tenant-sync-stats strong {
    color: rgb(243 244 246);
}