/* ---------------------------------------------------------------------------
   beheer.css - wat de beheerschermen nog nodig hebben bovenop feest.css

   Gebruikt door dashboard.php, create_group.php, edit_group.php en profiel.php.

   Dit bestand wordt geladen NA assets/css/feest.css en wint daar dus van. Om
   die reden staat hier alleen wat feest.css niet doet: de maatvoering van een
   paar koppen, de rasters die alleen op deze schermen voorkomen, en de
   onderdelen die nergens anders terugkomen. Alles wat een knop, een kaart, een
   veld, een label of een melding is, komt uit feest.css.

   Wat hier stond en verdwenen is: de hele oude beheeropmaak in verlopen en
   ronde schaduwen (.edit-header-card, .settings-card, .group-card-modern,
   .profile-card, .snack-card, .btn-save-settings en zo verder). Die pagina's
   zijn omgebouwd naar .wrap, .kaart, .sectie-kaart, .veld en .knop.

   Indeling:
     1. dashboard.php
     2. create_group.php en edit_group.php
     3. profiel.php
     4. de inlogpagina's
     5. responsief

   De inlogpagina's laden dit bestand ook. Dat is geen beheerscherm, maar de
   weg erheen, en het blok dat ze nodig hebben is twintig regels. Een eigen
   stylesheet voor één smalle kaart is dat niet waard.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   0. Eén rechtzetting die voor al deze pagina's geldt
   =========================================================================== */

/* De .wrapper uit includes/header.php is een flexkolom. Een .wrap die daar
   direct in staat is dus een flexitem, en dan maakt de margin-inline:auto van
   .wrap hem zo smal als zijn inhoud in plaats van 1140 breed: de kop stond
   midden op het scherm in plaats van links. width:100% zet dat recht.

   Dit hoort eigenlijk bij .wrap zelf in feest.css; zie het verslag. */
.wrapper > .wrap { width: 100%; }

/* ===========================================================================
   1. dashboard.php
   =========================================================================== */

/* Het pilletje boven de kop is op het dashboard bessenblauw in plaats van
   inktblauw: het staat op een lichtblauwe band en zou anders wegvallen. */
.label-bes { background: var(--bes); }

/* De h1 van het dashboard is kleiner dan die van de publieke pagina's. Boven
   een rij kaarten leest de volle maat van feest.css als geschreeuw. */
.dash-titel {
    margin-top: 14px;
    font-size: clamp(2rem, 4.5vw, 3rem);
}

.dash-welkom { margin: 28px 0 0; }

/* De lege staat: één kaart met een knop, geen illustratie. */
.dash-leeg {
    margin: 48px 0;
    padding: 34px 32px;
    max-width: 44rem;
}
.dash-leeg h2 { margin-bottom: 10px; }
.dash-leeg p { margin-bottom: 22px; }

.dash-voetnoot { margin-bottom: 40px; }

/* De waarschuwing dat een lijst wordt opgeruimd. .notitie levert het gele
   vlak; hier staat alleen dat de knop rechts naast de tekst komt. */
.map-waarschuwing {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.map-waarschuwing > div { flex: 1 1 18rem; }

.dash-steun { margin-block: 8px 32px; }

/* -- de beheermodules, onder de eigen lijsten van een beheerder ----------- */

.dash-beheer-kop { margin-block: 12px 24px; }

.dash-modules {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}
.dash-module {
    padding: 20px 22px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.dash-module h3 { margin: 0 0 4px; }
.dash-module:hover { background: var(--geel-t); }

/* ===========================================================================
   2. create_group.php en edit_group.php
   =========================================================================== */

/* Het formulier staat in sectiekaarten uit feest.css. Wat hier bij komt is de
   ruimte tussen die kaarten en de paar velden die een eigen maat hebben. */
.beheer-kolom,
.beheer-formulier,
.beheer-zij {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Twee kolommen op een breed scherm: het formulier links, de deellink en het
   toevoegen van een hapje rechts. */
.beheer-raster {
    display: grid;
    grid-template-columns: 1.35fr .8fr;
    gap: 28px;
    align-items: start;
    padding-block: 32px 44px;
}
.beheer-raster > * { min-width: 0; }

/* De rechterkolom loopt mee met de pagina, niet mee met de linkerkolom: die
   is een stuk langer. */
.beheer-zij { position: sticky; top: 90px; }

.beheer-titel {
    margin-top: 12px;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
}

/* De opslaanknop met de uitleg ernaast. Op edit_group staat die knop alleen
   nog in een <noscript>: daar slaan de drie blokken zichzelf op. */
.beheer-opslaan {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.beheer-opslaan .hint { flex: 1 1 16rem; }

/* -- automatisch opslaan op edit_group ------------------------------------

   Het pilletje rechts in de kop van een sectiekaart: "Opslaan..." tijdens het
   verzoek, daarna "Opgeslagen" met een vinkje dat vanzelf weer weggaat, en
   "Niet opgeslagen" in koraalrood als er iets mis is. Zonder data-stand staat
   er niets, en neemt het pilletje ook geen ruimte in. */
.sectie-stand {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 5px 10px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    font: 800 .74rem/1 var(--fd);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.sectie-stand[data-stand] {
    display: inline-flex;
    animation: stand-op .18s ease;
}
.sectie-stand[data-stand="bezig"] { background: #fff;          color: var(--ink-2); }
.sectie-stand[data-stand="klaar"] { background: var(--zee);    color: #fff; }
.sectie-stand[data-stand="fout"]  { background: var(--koraal); color: #fff; }

@keyframes stand-op {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

/* Een sectiekop die al een ondertitel heeft, duwt die naar rechts; het
   pilletje erachter hoeft dan alleen nog een beetje lucht. */
.sectie-kop .sectie-sub + .sectie-stand { margin-left: 10px; }

/* De foutmelding onder het formulier. Die blijft staan tot het is opgelost,
   dus hij mag opvallen: .notitie in koraal in plaats van geel. */
.beheer-melding {
    margin: 0;
    background: var(--koraal-t);
    border-color: var(--koraal);
    color: var(--koraal);
    font-weight: 700;
}

/* De stand van de eigen korte link, direct onder het veld. */
.korte-link-stand {
    display: block;
    margin-top: 6px;
    font-weight: 700;
}
.korte-link-stand[data-stand="bezig"] { color: var(--ink-2); }
.korte-link-stand[data-stand="klaar"] { color: var(--zee); }
.korte-link-stand[data-stand="fout"]  { color: var(--koraal); }

/* De knop in het <noscript> van de korte link staat een niveau dieper dan de
   regel hieronder verwacht. */
.beheer-zij form > noscript > .knop { margin-top: 18px; }

/* "(mag leeg)" achter een labeltekst: geen vetjes, geen nadruk. */
.veld-erbij { font-weight: 400; }

/* Twee velden onder elkaar in een sectiekaart hebben lucht nodig. .veld-groep
   uit feest.css zet alleen ruimte tussen het label, het veld en de hint. */
.beheer-raster .veld-groep + .veld-groep,
.beheer-raster .veld-rij + .veld-groep,
.beheer-raster .veld-groep + .veld-rij { margin-top: 18px; }
.beheer-zij form > .knop { margin-top: 18px; }

/* Een groepskop die niet in een tegelraster staat maar los erboven. */
.groep-los { margin-top: 0; }
.groep-kop { margin-top: 26px; }
.sectie-body > .groep-kop:first-child { margin-top: 0; }
.tegels-leeg { margin: 14px 0 0; }
.tegels:empty { display: none; }

/* De terugweg naar het dashboard, boven de kop. */
.terug-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink-2);
    margin-top: 26px;
}
.terug-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* De kopband van een lijst die je beheert. Dezelfde vorm als .dash-kop, in de
   zeegroene tint, zodat je ziet dat je een niveau dieper zit. */
.beheer-kop { background: var(--zee-t); border-bottom: 2px solid var(--ink); }
.beheer-kop .wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-block: clamp(22px, 4vw, 36px);
}
.beheer-kop h1 {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    margin: 0;
}
.beheer-kop .sub { margin: 8px 0 0; color: var(--ink-2); font-weight: 600; }

/* Een vinkje met zijn uitleg eronder, als vakje in een sectiekaart. */
.keuze {
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
}
.keuze + .keuze { margin-top: 14px; }
.keuze-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 800 1rem var(--fd);
    cursor: pointer;
    margin: 0;
}
.keuze-kop input { width: 20px; height: 20px; margin: 0; flex: none; }
.keuze p { margin: 6px 0 0 30px; color: var(--ink-2); font-size: .92rem; }
.keuze-body { margin: 12px 0 0 30px; }
.keuze-body .veld { max-width: 22rem; }

/* De twee knoppen "Nu" en "Op datum" achter het sluitvinkje. */
.keuze-rij { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.keuze-knop { cursor: pointer; }
.keuze-knop input { position: absolute; opacity: 0; pointer-events: none; }
.keuze-knop span {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 9px 16px;
    font: 800 .92rem var(--fd);
    background: #fff;
}
.keuze-knop input:checked + span { background: var(--ink); color: #fff; }
.keuze-knop input:focus-visible + span { outline: 3px solid var(--bes); outline-offset: 3px; }

/* De deellink met het vaste voorvoegsel ervoor. */
.link-voor {
    display: flex;
    align-items: stretch;
    border: 2px solid var(--ink);
    border-radius: 12px;
    overflow: hidden;
}
.link-voor span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--grijs);
    border-right: 2px solid var(--ink);
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
}
.link-voor .veld { border: 0; border-radius: 0; }

/* De regel met de deellink zelf. Gelijk aan .map-link op het dashboard, maar
   hij mag hier over twee regels breken omdat de kolom smaller is. */
.deel-regel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px 12px;
    background: var(--grijs);
    border-radius: 12px;
    border: 2px dashed var(--lijn);
    margin-bottom: 14px;
}
/* De link staat op een eigen regel, de knop eronder. In de markup zit een
   <wbr> na "/g/", zodat de link daar breekt en niet midden in de code.
   overflow-wrap is de noodrem voor een scherm waar zelfs de code niet op
   past; word-break: break-all brak overal, ook waar het niet hoefde. */
.deel-regel .url {
    font: 700 .92rem/1.4 var(--fb);
    color: var(--ink);
    width: 100%;
    overflow-wrap: anywhere;
}
.deel-regel .url .domein { color: var(--ink-3); font-weight: 600; }

/* Een uitklapper binnen een sectiekaart, voor de instellingen die zelden
   nodig zijn. */
.uitklap { margin-top: 4px; }
.uitklap > summary {
    cursor: pointer;
    font: 800 .98rem var(--fd);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}
.uitklap > summary::-webkit-details-marker { display: none; }
.uitklap > summary::before {
    content: "+";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: none;
}
.uitklap[open] > summary::before { content: "\2013"; }
.uitklap-body { padding-top: 6px; }

/* De hapjes van een lijst, als tegels. De tegel zelf komt uit feest.css; hier
   staat alleen wat de beheerder extra ziet: de knoppen rechtsonder en het
   oplichten van een tegel die net is toegevoegd. */
.tegel-acties {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    gap: 8px;
}
.tegel-voorstel { background: var(--geel-t); }
.tegel-nieuw { animation: tegel-op .5s ease; }
@keyframes tegel-op {
    0%   { transform: scale(.96); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
.tegel .wie {
    color: var(--ink-3);
    font-weight: 600;
    font-size: .92rem;
}

/* De rij met voorgestelde hapjes bij het aanmaken van een lijst. */
.voorstel-rij {
    display: grid;
    grid-template-columns: 1fr 110px auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
}

/* Het aanmaken van een lijst is één kolom: er staat niets naast. */
.maak-smal {
    max-width: 44rem;
    padding-block: 32px 44px;
}
.maak-knoppen {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.maak-waarschuwing { margin: 14px 0 0; }
/* .veld-groep zet zijn eigen ruimte niet tussen twee groepen; hier wel. */
.maak-smal .sectie-body > .veld-groep + .veld-groep { margin-top: 18px; }

/* De drie snelle knoppen onder de deellink. */
.snel-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===========================================================================
   3. profiel.php
   =========================================================================== */

.profiel-kolom {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-block: 32px 40px;
    max-width: 44rem;
}

/* De melding dat er nog een e-mailadres op bevestiging wacht. */
.wacht-mail {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.wacht-mail > div { flex: 1 1 14rem; }

/* De opsomming in de kaart "Account verwijderen". */
.gevaar-lijst { margin: 10px 0 20px; padding-left: 1.2rem; }
.gevaar-lijst li { margin-top: 4px; }

/* De formulieren in de sectiekaarten: ruimte tussen de velden en de knop. */
.profiel-kolom .sectie-body .veld-groep + .veld-groep,
.profiel-kolom .sectie-body .veld-rij { margin-bottom: 18px; }
.profiel-kolom .sectie-body .veld-groep:first-child { margin-bottom: 18px; }
.profiel-kolom .sectie-body form > .knop { margin-top: 4px; }

/* ===========================================================================
   4. De inlogpagina's
   login, register, forgot_password, reset_password, resend_activation,
   activate en verify_email: één kaart in het midden, hoogstens 480 breed.
   =========================================================================== */

.inlog {
    display: flex;
    justify-content: center;
    padding-block: clamp(30px, 6vw, 64px);
}
.inlog-kaart {
    width: 100%;
    max-width: 480px;
    padding: 30px 32px 32px;
}
.inlog-kaart h1 {
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    margin: 0;
}
.inlog-kop-na-chip { margin-top: 12px !important; }
.inlog-lead { margin: 10px 0 24px; }
.inlog-kaart .alert { margin-bottom: 20px; }

/* Het formulier: de velden onder elkaar met vaste tussenruimte, zodat de
   pagina's geen marges per veld hoeven te zetten. */
.inlog-velden {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* De hoofdknop over de volle breedte. .knop is inline-flex, dus zonder
   display:flex blijft hij zo smal als zijn tekst. */
.knop-vol {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

/* Een vinkje met zijn tekst ernaast, uitgelijnd op de eerste regel. */
.vink {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .95rem;
    font-weight: 400;
    cursor: pointer;
}
.vink input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }

.inlog-voet {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px solid var(--lijn);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .95rem;
}
.inlog-voet p { margin: 0; }

.inlog-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===========================================================================
   5. Responsief
   =========================================================================== */

@media (max-width: 1024px) {
    .beheer-raster { grid-template-columns: 1fr; }
    .beheer-zij    { position: static; }
    .dash-modules  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .dash-cijfers  { grid-template-columns: repeat(2, 1fr); }
    .voorstel-rij  { grid-template-columns: 1fr; }
    .keuze p, .keuze-body { margin-left: 0; }
    /* Vanaf hier staat een ondertitel in de sectiekop op een eigen regel.
       Het pilletje erachter komt dan ook op een eigen regel en hoort links
       uit te lijnen met de rest, niet een stukje ingesprongen. */
    .sectie-kop .sectie-sub + .sectie-stand { margin-left: 0; }
}

@media (max-width: 576px) {
    .dash-modules  { grid-template-columns: 1fr; }
    .dash-leeg     { padding: 26px 22px; }
    .inlog-kaart   { padding: 24px 20px 26px; }
    .inlog-knoppen > .knop { flex: 1; justify-content: center; }
    /* De knoppen op een lijstkaart pakken de volle breedte, anders staan ze
       met zijn drieën tegen elkaar aan geduwd. */
    .map-acties { width: 100%; }
    .map-acties > .knop, .map-acties .meer, .map-acties .meer > summary {
        flex: 1;
        justify-content: center;
    }
}