/* calserv webinterface
   Uitgangspunt: de chrome is grijs, alle kleur komt uit de data. De enige
   gekleurde vlakken in het scherm zijn de agenda's zelf. */

:root {
    color-scheme: light;

    --paper:   #eef1f4;
    --surface: #ffffff;
    --ink:     #16202b;
    --muted:   #5a6b7b;
    --line:    #d6dce3;
    --line-soft: #e6eaef;
    --signal:  #3a4ca8;
    --brand-green: #639827;
    --danger:  #9b2c1b;
    --ok:      #1f6b48;
    --btn-primary-hover: #0e1720;
    --danger-line: #e3c6c0;

    --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --rail: 17rem;
    --radius: 3px;
}

/* Donker. Alleen de tokens draaien om; de opbouw blijft gelijk, en kleur komt
   nog steeds uit de data en niet uit de chrome. De tekstkleur is bewust geen
   zuiver wit: dat geeft op een donker vlak te veel nagloeien. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --paper:   #10151b;
        --surface: #191f27;
        --ink:     #dfe5ec;
        --muted:   #8c9bab;
        --line:    #2d3742;
        --line-soft: #232b34;
        --signal:  #8b9ae8;
    --brand-green: #7cb83a;
        --danger:  #e0806e;
        --ok:      #58bd90;
        --btn-primary-hover: #eef1f4;
        --danger-line: #5e3b33;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --paper:   #10151b;
    --surface: #191f27;
    --ink:     #dfe5ec;
    --muted:   #8c9bab;
    --line:    #2d3742;
    --line-soft: #232b34;
    --signal:  #8b9ae8;
    --brand-green: #7cb83a;
    --danger:  #e0806e;
    --ok:      #58bd90;
    --btn-primary-hover: #eef1f4;
    --danger-line: #5e3b33;
}

* { box-sizing: border-box; }

/* Moet na de layoutregels komen: display:grid op een class wint anders van de
   browserregel voor [hidden]. */
[hidden] { display: none !important; }

html { font-size: 16px; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: 0.9375rem; }

p { margin: 0 0 0.75rem; max-width: 62ch; }
.lead { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.8125rem; }
.spaced { margin-top: 2.5rem; }

code, .mono { font-family: var(--mono); font-size: 0.8125rem; }

/* ---------------------------------------------------------------- inloggen */

.signin {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.signin-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.25rem;
    width: min(23rem, 100%);
    display: grid;
    gap: 0.875rem;
}

.signin-lead { color: var(--muted); margin: -0.5rem 0 0.75rem; font-size: 0.875rem; }

/* ----------------------------------------------------------------- topbalk */

.topbar {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 1.25rem;
    height: 3.25rem;
    position: sticky;
    top: 0;
    z-index: 5;
}

.brand { display: flex; align-items: center; gap: 0.5rem;
         font-weight: 600; letter-spacing: -0.02em; }
.brand img { display: block; width: 1.25rem; height: 1.25rem; border-radius: 4px; }

/* Woordmerk. Tekst in plaats van een afbeelding, zodat het scherp blijft op
   elk scherm en in donkere modus meekleurt in plaats van als donker blok op
   een donkere balk te liggen. */
.wordmark { display: inline-flex; align-items: baseline; gap: 0.28rem;
            font-size: 0.8125rem; white-space: nowrap; }
.wordmark .naam { color: var(--ink); font-weight: 500; }
.wordmark .stip { width: 0.3rem; height: 0.3rem; border-radius: 50%;
                  background: var(--brand-green); display: inline-block;
                  align-self: center; flex: none; }
.wordmark .inc { color: var(--muted); }

.signin-brand { display: flex; align-items: center; gap: 0.55rem; }
.signin-brand img { display: block; border-radius: 6px; }
.signin-foot { margin: 0.25rem 0 0; display: flex; justify-content: center; }

.tabs { display: flex; gap: 0.25rem; margin-right: auto; }

.tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font: inherit;
    padding: 0.9rem 0.7rem 0.75rem;
    cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); }

.who { display: flex; align-items: center; gap: 0.75rem; color: var(--muted);
       font-size: 0.875rem; }

/* ------------------------------------------------------------------ layout */

main { padding: 1.5rem; }

.two-pane {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.pane {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    min-height: 18rem;
}
.pane.narrow { max-width: 44rem; }

.empty { color: var(--muted); padding: 3rem 0; text-align: center; }
.empty p { margin-inline: auto; }

/* ------------------------------------------------------------------- rail */

.rail {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem 0 1rem;
}

.rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem 0.5rem;
}
.rail-head h2 { font-size: 0.75rem; color: var(--muted); font-weight: 600; }

.rail-list { list-style: none; margin: 0; padding: 0; }

.rail-list li {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding: 0.4rem 0.875rem 0.4rem 0.5rem;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.rail-list li:hover { background: var(--paper); }
.rail-list li.on { background: var(--paper); border-left-color: var(--ink); }
.rail-list li .count { margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.rail-list li .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-list .none { color: var(--muted); padding: 0.25rem 0.875rem; font-size: 0.8125rem;
                   cursor: default; }
.rail-list .none:hover { background: none; }

/* De enige kleur in het scherm: die van de agenda zelf. */
.dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
    background: var(--muted);
    align-self: center;
}

/* ---------------------------------------------------------------- secties */

.section { border-top: 1px solid var(--line-soft); padding: 1.25rem 0; }
.section:first-of-type { border-top: 0; padding-top: 0; }
.section h3 { margin-bottom: 0.5rem; }

.detail-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.25rem; }
.detail-head h2 { font-size: 1.25rem; }
.badge {
    font-size: 0.75rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.05rem 0.4rem;
}

.davurl {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 0.5rem 0.625rem;
    word-break: break-all;
}

/* ------------------------------------------------------- formulierelementen */

label { display: grid; gap: 0.3rem; font-size: 0.8125rem; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 0.4rem; }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input:not([type]), select {
    font: inherit;
    /* Onder 16px zoomt iOS bij het focussen van een veld in en komt er niet
       meer uit. Daarom hier expliciet 1rem in plaats van de body-grootte. */
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.4rem 0.55rem;
    min-width: 0;
}
input[type=color] { border: 1px solid var(--line); border-radius: var(--radius);
                    padding: 0.1rem; height: 2rem; width: 3rem; background: var(--surface); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

.stack { display: grid; gap: 0.75rem; justify-items: start; max-width: 24rem; }
.row-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
            margin-bottom: 1rem; }
.row-form input { flex: 1 1 9rem; }
.row-form input[type=color] { flex: 0 0 auto; }

.btn {
    font: inherit;
    font-size: 0.875rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: var(--btn-primary-hover); }
.btn.danger { color: var(--danger); border-color: var(--danger-line); }
.btn.danger:hover { border-color: var(--danger); }
.btn.quiet { border-color: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--ink); border-color: var(--line); }
.btn.small { font-size: 0.8125rem; padding: 0.2rem 0.5rem; }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* --------------------------------------------------------------- tabellen */

.grid { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.grid th {
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding: 0.4rem 0.625rem 0.4rem 0;
}
.grid td { border-bottom: 1px solid var(--line-soft); padding: 0.5rem 0.625rem 0.5rem 0; }
.grid td:last-child, .grid th:last-child { text-align: right; padding-right: 0; }
.grid .sub { color: var(--muted); font-size: 0.8125rem; }
.grid tr.clickable { cursor: pointer; }
.grid tr.clickable:hover td { background: var(--paper); }

/* ---------------------------------------------------------------- meldingen */

.msg { font-size: 0.8125rem; margin: 0; }
.msg.error { color: var(--danger); }
.msg.ok { color: var(--ok); }

.reveal {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ok);
    border-radius: var(--radius);
    padding: 0.75rem 0.875rem;
    margin-bottom: 1rem;
}
.reveal .mono { display: block; margin-top: 0.25rem; font-size: 1rem; }

.toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    z-index: 20;
}
.toast.bad { background: var(--danger); }

dialog {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 26rem;
    width: calc(100% - 2rem);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
#dialog-form { display: grid; gap: 0.875rem; }
#dialog-form .actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

@media (max-width: 48rem) {
    .two-pane { grid-template-columns: 1fr; }
    main { padding: 0.75rem; }
    .pane { padding: 1rem; }
    .topbar { gap: 0.5rem; padding: 0 0.75rem; }
    .who span { display: none; }
    .wordmark { display: none; }
    .tabs { gap: 0; }
    .tab { padding: 0.9rem 0.5rem 0.75rem; }

    /* Op een telefoon is een formulier op één regel onleesbaar. */
    .row-form { flex-direction: column; align-items: stretch; }
    /* flex: none is hier essentieel: in kolomrichting wordt flex-basis de
       hoogte, dus 'flex: 1 1 9rem' zou velden van 9rem hoog maken. */
    .row-form input, .row-form select, .row-form button { width: 100%; flex: none; }
    .row-form input[type=color] { width: 4rem; }
    .row-form label.check { flex-direction: row; justify-content: flex-start;
                            width: 100%; }
    .row-form label.check input { width: auto; flex: none; }

    /* Een leeg detailpaneel hoeft geen halve telefoon te vullen. */
    .pane { min-height: auto; }
    .empty { padding: 1.5rem 0; }
    .stack { max-width: none; width: 100%; }
    .stack label { width: 100%; }

    .enroll { flex-direction: column; align-items: center; text-align: center; }
    .enroll ol { text-align: left; }

    /* Tabellen omkantelen naar kaartjes: horizontaal scrollen op een telefoon
       is onwerkbaar. */
    .grid, .grid tbody, .grid tr, .grid td { display: block; width: 100%; }
    .grid tr:first-child:has(th) { display: none; }
    .grid th { display: none; }
    .grid tr { border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
    .grid td { border: 0; padding: 0.15rem 0; text-align: left !important; }
}

/* ------------------------------------------------------- app op iOS */

/* In standalone-modus is er geen browserbalk; de topbalk moet dan onder de
   notch en boven de home-indicator blijven. */
@supports (padding: max(0px)) {
    .topbar {
        padding-left: max(1.25rem, env(safe-area-inset-left));
        padding-right: max(1.25rem, env(safe-area-inset-right));
        height: calc(3.25rem + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }
    main {
        padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 0.75rem));
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
    .toast { bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 0.5rem)); }
}

body {
    /* Geen rubberband-scroll van de hele pagina, en geen grijze tikvlakken. */
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* Tikdoelen op minstens 44px, de ondergrens die Apple aanhoudt. */
@media (pointer: coarse) {
    .btn, .tab, .rail-list li, select { min-height: 2.75rem; }
    .btn { display: inline-flex; align-items: center; justify-content: center; }
    .btn.small { min-height: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------- enrollment */

.enroll {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ok);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
/* De SVG heeft een viewBox, dus schalen mag. Wel een vaste doos eromheen,
   anders rekt hij mee met de tekst ernaast. */
/* Altijd wit onder de QR, ook in donkere modus: een scanner heeft donkere
   modules op een lichte ondergrond nodig. */
.enroll svg { display: block; width: 11.5rem; height: 11.5rem; flex: none;
              background: #fff; border-radius: var(--radius); }
.enroll .enroll-body { flex: 1 1 16rem; }
.enroll ol { margin: 0.5rem 0 0.75rem; padding-left: 1.1rem; color: var(--muted);
             font-size: 0.8125rem; }
.enroll ol li { margin-bottom: 0.2rem; }
.enroll .davurl { font-size: 0.75rem; }

/* ---------------------------------------------------------------- thema */

.theme-toggle {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    padding: 0.35rem 0.5rem;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Welk pictogram zichtbaar is hangt af van het actieve thema. */
.theme-toggle .icon-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle .icon-light { display: block; }