/**
 * OMS — Werkplek-login (css/werkplek.css, migratie 084).
 *
 * Het tegelscherm op ?page=login (dat óók het vergrendelscherm is, zie
 * ?page=vergrendeld), plus de pincode-velden die de layout in zijn eigen modal
 * gebruikt. Eén bestand: het is dezelfde vormtaal, en kopieën lopen uit elkaar
 * zodra er één maat verandert.
 *
 * Alle kleuren komen uit css/theme.css, dus dit werkt in beide thema's zonder
 * eigen dark-blok.
 */

/* ── Naam-tegels ────────────────────────────────────────────────────────── */

.tegel-grid {
    display: grid;
    /* Royaal, niet de minimale 44px: er wordt met haast getikt, soms met
       handschoenen aan. */
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 12px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 2px;
}

.tegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 138px;
    padding: 18px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, transform .1s ease;
}
.tegel:hover  { background: var(--bg-card-hover); border-color: var(--border-focus); }
.tegel:active { transform: scale(.97); }
.tegel:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.tegel-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .02em;
    /* Vaste kleur per gebruiker (omsTegelKleur): herkennen gaat sneller dan
       lezen, en dat is het halve winstpunt van tegels. */
}
.tegel-avatar-groot { width: 62px; height: 62px; font-size: 21px; margin: 0 auto 10px; }

.tegel-naam {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
}

.tegel-pin-kop { text-align: center; }

/* Een tegel zonder pincode is geen dode knop maar een uitnodiging: hij opent het
   instelscherm. Gedempt zodat het verschil met een gewone tegel zichtbaar is
   zonder dat hij onbruikbaar lijkt. */
.tegel-geen-pin { border-style: dashed; }
.tegel-geen-pin .tegel-avatar { opacity: .55; }
.tegel-status {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted);
    text-align: center;
}

/* ── Tegels als KEUZEVELD (gekoppelde gebruiker) ─────────────────────────── */
/* Dezelfde vormtaal, compacter: op het inlogscherm vullen deze tegels een heel
   scherm, in een modal staan ze in een kolom naast twee andere velden. Ze staan
   hier en niet in css/order-detail.css omdat ?page=orders dat bestand niet
   laadt — en de modal "Nieuwe order" staat daar wél. */

.tegel-kies-zoek { margin-bottom: 8px; }

.tegel-grid.tegel-grid-kies {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
    /* Ruim genoeg voor twee rijen; daarboven scrollt de lijst binnen de modal in
       plaats van de velden eronder weg te duwen. */
    max-height: 232px;
}

.tegel.tegel-kies {
    min-height: 96px;
    gap: 6px;
    padding: 12px 8px;
}
.tegel-kies .tegel-avatar { width: 40px; height: 40px; font-size: 14px; }
.tegel-kies .tegel-naam   { font-size: 12.5px; }

/* De gekozen tegel: rand in primary, zoals elke andere aan-stand in de app.
   Géén gevuld achtergrondvlak — dat gaat vloeken met de gekleurde avatar erin.
   Het inlogscherm kent deze stand niet: daar volgt op de klik meteen het
   pinveld, dus er valt niets te tonen. */
.tegel-kies.is-gekozen {
    position: relative;
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
.tegel-kies.is-gekozen::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Filteren verbergt tegels; `hidden` alleen verliest het van de `display: flex`
   van .tegel. */
.tegel-kies[hidden] { display: none; }

/* Rode outline om het hele raster als er niets gekozen is — zelfde afweging als
   .kn-seg.veld-mis in css/style.css: per tegel een rand leest als tien fouten in
   plaats van één onbeantwoorde vraag. Zetten via veldMarkeer() op het grid. */
.tegel-grid.veld-mis {
    padding: 4px;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
    outline: 1px solid var(--color-danger, #c0392b);
}

/* ── Pinvakjes ──────────────────────────────────────────────────────────── */

.pin-velden {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 4px;
}

/* Maskeren met CSS in plaats van type="password".
   Reden: de pincode-modal staat permanent in de layout.
   Eén type="password" in de DOM is voor Chrome genoeg om de pagina als
   inlogformulier te zien, waarna hij zijn wachtwoordkiezer over het eerstvolgende
   tekstveld legt — op ?page=instellingen&tab=gebruikers was dat het zoekvak van
   de lijst. js/pinveld.js zet alsnog type=password in browsers die deze
   eigenschap niet kennen; daar speelt het Chrome-gedrag niet. */
.veld-gemaskeerd {
    -webkit-text-security: disc;
    text-security: disc;
}

.pin-vak {
    width: 46px;
    height: 56px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 10px;
}
.pin-vak:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.pin-vak:disabled { opacity: .55; }

/* In een modal mogen de vakjes kleiner: daar staan ze in een formulier tussen
   andere velden, niet als het enige op het scherm. */
.pin-velden-klein { justify-content: flex-start; gap: 6px; }
.pin-velden-klein .pin-vak { width: 38px; height: 44px; font-size: 19px; }

/* Vakjes die de volle kolombreedte vullen. Eigen variant en geen wijziging van
   .pin-velden-klein: die deelt #modalPincode, waar de vakjes naast een smal
   formulier staan en juist NIET moeten uitrekken.

   DE FLEX-BASIS MOET EEN MAAT ZIJN, geen 0 met `width: auto`. Een <input> heeft
   een intrinsieke breedte van ~20 tekens; valt de expliciete breedte weg, dan
   rekent de grid-kolom eromheen met ruim 180px per vakje en blaast de hele
   modal op. Met 38px als basis groeien ze alleen in de ruimte die er werkelijk
   is, en `min-width: 0` laat ze in een smalle kolom alsnog krimpen. */
.pin-velden-vol { width: 100%; }
.pin-velden-vol .pin-vak { flex: 1 1 38px; min-width: 0; }

/* Een `1fr`-kolom is `minmax(auto, 1fr)`: hij krimpt NIET onder de max-content
   van zijn inhoud, dus één breed veld duwt de andere kolom plat. Alleen hier
   gescoped en niet generiek op .kn-cols — dat raakt elke modal in de app. */
#modalBewerkGebruiker .kn-cols > div { min-width: 0; }

/* De knoppenrij onder de pincodevakjes in de bewerk-gebruiker-modal. De marge van
   .pin-velden is 4px en dat plakt een knop tegen de vakjes aan; hier hoort de
   afstand van een form-group te staan. */
.bg-pin-acties {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 12px;
}

/* Verwijderen is rood van TEKST, niet van vlak: het is een secundaire actie in
   de voet, en een fel rood blok naast "Opslaan" trekt de aandacht van de knop
   die je meestal wél wilt. De bevestiging zit in het vasthouden. */
.pin-verwijder {
    color: var(--color-danger);
    border-color: var(--border-color);
    background: none;
}
.pin-verwijder:hover { background: rgba(239,68,68,0.08); border-color: var(--color-danger); }

/* ── Losse tekstlink onder een formulier ────────────────────────────────── */

.login-tekstlink {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 4px;
    background: none;
    border: 0;
    font-size: 13px;
    color: var(--text-link);
    cursor: pointer;
    text-align: center;
}
.login-tekstlink:hover { text-decoration: underline; }

.kp-code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 22px;
    letter-spacing: .28em;
    text-align: center;
    text-transform: uppercase;
}

/* ── Vergrendelen ───────────────────────────────────────────────────────── */

/* Er is geen apart vergrendelscherm meer: ?page=vergrendeld toont views/login.php
   in tegelmodus, met dezelfde achtergrond en dezelfde kaart als het inloggen.
   Alleen de foutregel onder het pinveld is nog van hier. */

.vergrendel-fout {
    min-height: 18px;      /* vaste hoogte: anders springt de kaart bij elke fout */
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--color-danger);
    text-align: center;
}

/* ── Sidebar-footer: vergrendelen + uitloggen ───────────────────────────── */

/* GEEN eigen rand om de rij: .sidebar-footer heeft al een border-top, en een
   tweede lijn daaronder leest als een dubbele streep. De twee knoppen zitten
   naadloos in de footer met één verticale scheiding ertussen.
   Verhouding 4:1 — vergrendelen wordt op een werkplek de hele dag gebruikt,
   uitloggen hooguit één keer per dienst en die heeft genoeg aan zijn icoon.
   Kleur zegt wat de handeling doet: geel = het scherm gaat op slot en je komt
   terug; rood = je sessie is voorbij. */
.sidebar-footer-row { gap: 0; }

.sidebar-actie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 10px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    min-width: 0;
    transition: background .15s ease;
}
.sidebar-actie svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-actie .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-actie-vergrendel {
    flex: 4 1 0;
    color: var(--color-warning);
}
.sidebar-actie-vergrendel:hover { background: rgba(245,158,11,0.10); }

/* De scheidingslijn zit ÓP de uitlogknop, zodat er geen streep overblijft als
   die knop in zijn eentje staat. */
.sidebar-actie-uitloggen,
.sidebar-actie-vol {
    color: var(--color-danger);
}
.sidebar-actie-uitloggen {
    flex: 1 1 0;
    padding: 0;
    border-left: 1px solid var(--border-color);
}
.sidebar-actie-vol { flex: 1 1 100%; }
.sidebar-actie-uitloggen:hover,
.sidebar-actie-vol:hover { background: rgba(239,68,68,0.10); }

/* Ingeklapte sidebar: alleen de iconen, onder elkaar — naast elkaar passen twee
   knoppen niet in 64px. */
.sidebar.collapsed .sidebar-footer-row { flex-direction: column; }
.sidebar.collapsed .sidebar-actie { flex: 0 0 auto; width: 100%; padding: 0; }
.sidebar.collapsed .sidebar-actie .nav-label { display: none; }
.sidebar.collapsed .sidebar-actie-uitloggen {
    border-left: 0;
    border-top: 1px solid var(--border-color);
}

/* ── Gebruikersmenu in de header ────────────────────────────────────────── */

.header-username-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px 0 6px;
    background: none;
    /* De rand staat er ook in rust: hij maakt zichtbaar dát het een knop is.
       Bij hover verandert het vlak eronder, niet de rand — anders lijkt de knop
       bij elke muisbeweging van vorm te veranderen. */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.header-username-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--color-primary);
}
.header-username-btn[aria-expanded="true"] {
    background: var(--bg-card-hover);
    border-color: var(--color-primary);
}
/* Vorm en kleur komen uit .gebruiker-avatar (css/style.css) — die kleur staat
   inline en is per persoon. Hier alleen het formaat: in de header is de knop
   38px hoog en mag het bolletje wat groter dan in een tabelrij. */
.header-username-avatar {
    width: 26px; height: 26px;
    font-size: 11.5px;
}
.header-username-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-username-chevron { flex-shrink: 0; opacity: .6; }

.gebruiker-menu { min-width: 240px; }
.gm-kop { padding: 8px 12px 8px; display: flex; align-items: center; gap: 10px; }
.gm-kop-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gm-kop-naam { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.gm-kop-rol  { font-size: 12px; color: var(--text-muted); }

/* De themaregel is geen menu-ITEM: er valt niets aan te klikken behalve de
   schakelaar zelf, dus hij krijgt ook geen hoverstand die een handeling belooft. */
.gm-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 12px;
}
.gm-rij-label { font-size: 13.5px; color: var(--text-primary); }

/* Dezelfde kleurtaal als de knoppen in de sidebar-footer: geel = tijdelijk weg,
   rood = sessie voorbij. */
.gm-vergrendel { color: var(--color-warning); }
.gm-vergrendel svg { color: var(--color-warning); opacity: 1; }
.gm-uitloggen  { color: var(--color-danger); }
.gm-uitloggen svg { color: var(--color-danger); opacity: 1; }

/* De donkerheid-popover hangt binnen dit paneel; hij mag er niet achter vallen. */
.gebruiker-menu .theme-popover { z-index: 10001; }

/* ── Bekijken als gebruiker ─────────────────────────────────────────────────
   Een beheerder zet het scherm tijdelijk op de rechten van iemand anders. De
   stand moet OPVALLEN: wie vergeet dat hij als een ander kijkt, trekt straks de
   verkeerde conclusie over wat wel en niet werkt. Vandaar een balk over de volle
   breedte in plaats van een pill in een hoek.

   Paars en niet oranje/rood: die twee zijn hier al bezet door de onderhouds- en
   de dev-balk, en drie waarschuwingskleuren die op elkaar lijken vertellen je
   niets meer. */

.bekijk-als-balk {
    position: fixed;
    left: 0; right: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 12px;
    background: #6d28d9;
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    box-sizing: border-box;
    min-height: 26px;
}
.bekijk-als-balk svg   { flex-shrink: 0; opacity: .9; }
.bekijk-als-balk span  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bekijk-als-balk strong { font-weight: 700; }

/* De weg terug staat ín de balk, want dat is de plek die je sowieso ziet.
   Anders dan de dev- en onderhoudsbalk is deze dus WEL aanklikbaar. */
.bekijk-als-balk-terug {
    flex-shrink: 0;
    padding: 2px 10px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: var(--radius-full, 999px);
    background: rgba(255,255,255,.12);
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.bekijk-als-balk-terug:hover { background: rgba(255,255,255,.24); border-color: #fff; }

/* Op een smal scherm past de uitleg niet meer naast de knop; de knop is het
   enige dat écht mee moet. */
@media (max-width: 720px) {
    .bekijk-als-balk span { display: none; }
}

/* Het avatarbolletje in de header en in de menukop draagt tijdens de stand de naam
   van de BEKEKEN gebruiker. Het merkteken is een paarse RING en niet een paarse
   vulling: de vulling is de identiteitskleur van die persoon (dezelfde als in de
   orderlijst en op het tegelscherm), en die overschrijven zou het bolletje juist
   onherkenbaar maken. `outline` en geen `border`: dat verandert de maat niet en
   houdt het bolletje dus even groot als anders. */
.header-username-avatar.is-bekijk-als {
    outline: 2px solid #6d28d9;
    outline-offset: 1.5px;
}

/* Het submenu met gebruikers, onder Beheer → "Bekijken als". Vorm is de gedeelde
   .row-dropdown; alleen de lijst erbinnen krijgt een eigen maat. */

/* Een menu-item dat een submenu opent i.p.v. een handeling uitvoert: de chevron
   staat rechts en wijst de kant op waar het paneel verschijnt. */
.rd-submenu-knop { padding-right: 8px; }
.rd-submenu-chevron { margin-left: auto; opacity: .45; }
.rd-submenu-knop.is-open { background: var(--bg-card-hover); }

.bekijk-als-menu { min-width: 250px; max-width: 300px; }

.ba-zoek {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 4px 6px;
    padding: 0 9px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-input, var(--bg-card));
}
.ba-zoek svg { flex-shrink: 0; color: var(--text-muted); }
.ba-zoek input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
}

/* Scrollt binnen het menu i.p.v. het paneel tot buiten het scherm te laten
   groeien: op een instantie met dertig gebruikers valt de onderkant anders weg,
   en juist daar staat de uitleg. */
.ba-lijst { max-height: 46vh; overflow-y: auto; }

/* Het bolletje is de gedeelde .gebruiker-avatar; de kleur staat er per persoon
   inline op (zie php/ajax/bekijk_als.php). */
.ba-item { gap: 9px; padding: 7px 10px; }
.ba-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ba-naam  { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ba-rol   { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }

.ba-melding {
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.ba-melding.is-fout { color: var(--color-danger); }

/* Wie er écht ingelogd is, onder de kop van het gebruikersmenu. */
.gm-echt {
    padding: 0 12px 8px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
}
.gm-echt strong { color: var(--text-primary); font-weight: 600; }

/* Terug naar beheerder — geel, net als vergrendelen: je komt terug. Rood zou
   beloven dat de sessie voorbij is, en dat is juist niet wat er gebeurt. */
.gm-terug { color: var(--color-warning); }
.gm-terug svg { color: var(--color-warning); opacity: 1; }

/* In de sidebar-footer neemt de terugknop de plek van uitloggen in (zie
   index.php). .sidebar-actie-vol is rood; deze regel staat er later in het
   bestand en wint dus, zonder !important. */
.sidebar-actie-terug { color: var(--color-warning); }
.sidebar-actie-terug:hover { background: rgba(245,158,11,0.10); }

@media (max-width: 640px) {
    .tegel-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
    .pin-vak    { width: 40px; height: 50px; font-size: 21px; }
}