/* Gedeelde shell-CSS voor de AppKit-topbar-panelen (voorkeuren + help) en widgets. De app includeert dit via
   <link href="_content/Adm.AppKit.Web/adm-shell.css">. Shell-structuur (.shell/.sidebar/grootte) blijft app-CSS. */

/* Topbar-icoonknoppen (menu in-/uitklappen, help). */
.icon-btn {
    border: none; background: transparent; padding: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bs-body-color); border-radius: 8px;
}
.icon-btn:hover { background: var(--bs-secondary-bg); }

/* Avatar (initialen of foto). */
.avatar-btn { border: none; background: transparent; padding: 0; cursor: pointer; display: inline-flex; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--bs-primary); color: #fff; font-size: 0.8rem; font-weight: 600;
    object-fit: cover;
}
.avatar-lg { width: 44px; height: 44px; font-size: 1rem; }
.avatar-img { background: none; padding: 0; object-fit: cover; }

/* Uitschuifbare zijpanelen (voorkeuren + help). */
.prefs-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1040; }
.prefs-panel, .help-panel {
    position: fixed; top: 0; right: 0; height: 100vh; width: 330px; max-width: 92vw;
    background: var(--bs-body-bg); color: var(--bs-body-color);
    border-left: 1px solid var(--bs-border-color); z-index: 1041;
    display: flex; flex-direction: column; box-shadow: -4px 0 18px rgba(0, 0, 0, 0.18);
}
.prefs-header {
    display: flex; align-items: center; gap: 12px; padding: 16px;
    border-bottom: 1px solid var(--bs-border-color);
}
.prefs-id { flex: 1; min-width: 0; }
.prefs-user { font-weight: 600; }
.help-head-title { display: flex; align-items: center; gap: 8px; font-weight: 600; flex: 1; }
.prefs-close {
    border: none; background: transparent; color: var(--bs-secondary-color);
    font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 6px;
}
.prefs-close:hover { background: var(--bs-secondary-bg); }

.prefs-body, .help-body { flex: 1; overflow-y: auto; padding: 16px; }
.help-body { font-size: 0.92rem; }
.help-body :first-child { margin-top: 0; }
.prefs-section { margin-bottom: 18px; }
.prefs-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--bs-secondary-color); margin-bottom: 8px;
}
.prefs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prefs-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
    border: 1px solid var(--bs-border-color); border-radius: 999px;
    font-size: 0.85rem; color: var(--bs-body-color); text-decoration: none; cursor: pointer;
}
.prefs-chip:hover { background: var(--bs-secondary-bg); }
.prefs-chip.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

.prefs-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.prefs-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid transparent; box-shadow: 0 0 0 1px var(--bs-border-color);
}
.prefs-swatch.active { border-color: var(--bs-body-bg); box-shadow: 0 0 0 2px var(--bs-primary); }

.prefs-footer { padding: 16px; border-top: 1px solid var(--bs-border-color); }
.prefs-logout {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    padding: 8px; border: 1px solid var(--bs-border-color); border-radius: 8px;
    background: transparent; color: var(--bs-body-color); text-decoration: none; cursor: pointer;
}
.prefs-logout:hover { background: var(--bs-secondary-bg); }

/* Auth-kaart: gedeeld door de login én andere zelfstandige auth-schermen (bv. wachtwoord wijzigen). Niet-scoped
   zodat élke auth-pagina (ook buiten de AppKit, zoals CreditSoft's WachtwoordWijzigen) dezelfde nette kaart krijgt. */
.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-tertiary-bg); padding: 24px;
}
.login-card {
    width: 100%; max-width: 380px;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: 14px; padding: 32px 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}
.login-lang { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 8px; font-size: .85rem; }
.login-lang a { color: var(--bs-secondary-color); text-decoration: none; }
.login-lang a.active { color: var(--bs-primary); font-weight: 700; }
.login-brand { font-weight: 700; font-size: 1.25rem; margin-bottom: 18px; }
.login-title { font-size: 1.4rem; margin: 0 0 4px; }
.login-subtitle { color: var(--bs-secondary-color); margin-bottom: 20px; font-size: .92rem; }
.login-label { display: block; font-size: .85rem; font-weight: 600; margin: 12px 0 4px; }
.login-submit { margin-top: 20px; }

/* Badge-teller op een nav-item (bv. ongelezen privé-overleg). Duwt naar rechts in de uitgeklapte zijbalk. */
.nav-menu .nav-link .nav-badge {
    margin-left: auto;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 0.7rem; font-weight: 700; line-height: 1;
    background: var(--bs-primary); color: #fff;
}

/* Versielabel onderaan de zijbalk → versiehistoriek: gecentreerd met een scheidingslijn erboven. */
.nav-version {
    display: block; text-align: center;
    margin-top: 4px; padding: 10px 12px 2px;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.75rem; letter-spacing: 0.02em;
    color: var(--bs-secondary-color); text-decoration: none;
}
.nav-version:hover { color: var(--bs-primary); }

/* ── AdmGrid-werkbalk ───────────────────────────────────────────────────────────────────────────────
   Deze regels horen HIER en niet in de app-CSS: AdmGrid zit in deze RCL en rendert deze klassen, dus de
   bijhorende stijl moet met het pakket meereizen. Stond ze tot 0.17.1 alleen in de app.css van CreditSoft,
   waardoor elke andere app een ongestylede werkbalk kreeg (zoekvak, titel en "⋯"-menu zonder opmaak).
   Zie de valkuil in het playbook §6. */

/* Geconsolideerde grid-werkbalk: embedded titel + acties links, zoek + hulpmiddelen rechts. */
.adm-grid-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-right: 2px;
    white-space: nowrap;
}

.adm-grid-info {
    color: var(--bs-secondary-color);
    cursor: help;
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.adm-grid-searchbox {
    width: 220px;
    max-width: 100%;
    height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 6px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, inherit);
    font-size: 0.9rem;
}

.adm-grid-searchbox:focus {
    outline: none;
    border-color: var(--adm-accent, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}

/* "⋯"-menu op de grid-werkbalk: bundelt kolomkiezer + Excel/CSV-export achter één knop. */
.adm-grid-menu { position: relative; display: inline-flex; }

.adm-menu-backdrop { position: fixed; inset: 0; z-index: 1040; }

.adm-menu-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1050;
    min-width: 210px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 6px; display: flex; flex-direction: column;
}

.adm-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; background: transparent; border-radius: 7px;
    font-size: 0.9rem; color: var(--bs-body-color); text-align: left; cursor: pointer;
}

.adm-menu-item:hover { background: var(--bs-tertiary-bg, #f1f3f5); }

.adm-menu-item .adm-icon { color: var(--bs-secondary-color); flex: 0 0 auto; }

/* Topbar-spacer: duwt hulp + voorkeuren naar rechts. MainLayout rendert dit element, dus de regel hoort
   hier — stond ze alleen in de app.css van CreditSoft, dan schuiven avatar en hulpknop in elke andere app
   naar links tegen de merknaam aan. */
.topbar-spacer { flex: 1; }

/* QR-code bij het inschakelen van 2FA (TwoFactorSetupPanel). Zonder de vaste maat rendert de SVG op zijn
   natuurlijke grootte en vult hij het halve scherm. */
.qr-box {
    display: inline-block;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
}

.qr-box svg {
    display: block;
    width: 200px;
    height: 200px;
}

/* Ingeklapte zijbalk. De knop en de JS zitten allebei in deze RCL (MainLayout rendert #sidebar-toggle,
   adm-shell.js zet de klasse op <html> en onthoudt ze in een cookie) — dus hoort ook de bijbehorende CSS
   hier. Stond ze alleen in de app-CSS van CreditSoft en ADM One, waardoor de knop in elke andere app wél
   de klasse zette maar er zichtbaar niets gebeurde.
   Wordt een smalle icoon-balk: labels/secties/versie verbergen, iconen blijven. */
html.adm-sidebar-collapsed .sidebar { flex-basis: 54px; padding: 12px 6px; }
html.adm-sidebar-collapsed .sidebar .nav-link { justify-content: center; padding: 8px; }
html.adm-sidebar-collapsed .sidebar .nav-link span,
html.adm-sidebar-collapsed .sidebar .nav-section,
html.adm-sidebar-collapsed .sidebar .nav-user,
html.adm-sidebar-collapsed .sidebar .nav-version { display: none; }