/* =========================================================================
   theme.css — site-brede opfrisser voor de VoIP-beheeromgeving.
   Bewust COSMETISCH: kleuren, typografie, spacing, knoppen en formulier-
   velden. Layout-kritische zaken van de tree-builder (.tree-level,
   .indent-wrapper, .choise-wrapper, .hidden-select, .action-select,
   .val-select) worden NIET aangeraakt, zodat de werking intact blijft.
   ========================================================================= */

:root {
    --brand:      #2563eb;
    --brand-dark: #1e40af;
    --ink:        #1f2937;
    --muted:      #6b7280;
    --bg:         #f1f5f9;
    --card:       #ffffff;
    --border:     #e2e8f0;
    --sidebar:    #0f172a;
    --sidebar-2:  #1e293b;
    --ok:         #16a34a;
    --danger:     #dc2626;
    --radius:     10px;
}

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---- Zijbalk / navigatie ---- */
nav {
    background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2)) !important;
    width: 232px !important;
    padding: 20px 14px !important;
    box-shadow: 2px 0 14px rgba(15, 23, 42, .18) !important;
}
nav::before {
    content: "VoIP beheer";
    display: block;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #64748b;
    margin: 4px 8px 18px;
}
nav ul li { margin-bottom: 4px !important; }
nav a {
    display: block;
    font-size: 15px !important;
    padding: 9px 12px;
    border-radius: 8px;
    color: #cbd5e1 !important;
    transition: background .15s, color .15s;
}
nav a:hover { background: rgba(148, 163, 184, .16); color: #fff !important; }

/* ---- Hoofdgebied ---- */
main { background: var(--bg) !important; padding: 28px 32px !important; }
main h1, main h2 { color: var(--ink); }

/* ---- Kaarten. Alle beheerpagina's gebruiken hetzelfde #createForm-id, dus die
   krijgen automatisch de kaartlook. De tree-builder gebruikt #treeForm en blijft
   dus ongemoeid. ---- */
.card, .form-card, .list-card, #createForm {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    margin-bottom: 22px;
    max-width: 680px;
}
.card h2, .form-card h2, .list-card h2 { margin: 0 0 16px; font-size: 18px; }
main > h1 { margin: 0 0 16px; }

/* ---- Formuliervelden binnen beheerformulieren ---- */
.form-card label, #createForm label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    margin: 14px 0 5px;
}
.form-card input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=hidden]):not([type=button]),
.form-card select, .form-card textarea,
#createForm input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=hidden]):not([type=button]),
#createForm select, #createForm textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
#createForm textarea, .form-card textarea { min-height: 90px; resize: vertical; }
#createForm input[type=checkbox] { width: auto; margin-right: 6px; transform: scale(1.15); }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
#createForm input:focus, #createForm select:focus, #createForm textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Cosmetische opfris van losse velden buiten de beheerformulieren (raakt de
   tree-selects niet in layout: enkel rand/afronding/padding). */
input[type="text"], input[type="number"], input[type="password"], input[type="email"] {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 14px;
}

/* ---- Knoppen ---- */
button, input[type="submit"] {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
button:hover, input[type="submit"]:hover { background: var(--brand-dark); }

/* Kleine "tree"-knoppen laten we met rust qua vorm, maar wat vriendelijker. */
.newrow-btn, .new-option-btn, .remove-btn, .remove-option-btn {
    cursor: pointer;
}

/* ---- Lijsten op beheerpagina's. De lijst is op elke pagina een directe <ul>
   in <main> (id eindigt op "List"); die krijgt de kaartlook. ---- */
.container main > ul {
    list-style: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    margin: 0 0 22px;
    max-width: 680px;
}
.container main > ul > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
}
.container main > ul > li:last-child { margin-bottom: 0; }
.container main > ul a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
.container main > ul a:hover { text-decoration: underline; }
.container main > ul button {
    background: var(--danger);
    padding: 6px 12px;
    font-size: 13px;
}
.container main > ul button:hover { background: #b91c1c; }

/* ---- Notificatie (netter, met kleur-varianten) ---- */
.notification { border-radius: 10px 10px 0 0; }

/* ---- Speech-question pagina: toon het formulier (tree.css verbergt het) ---- */
.sq-page #createForm { display: block !important; }

/* ---- Menugroep in de zijbalk ----
   Een <details> in plaats van een klapmenu met JavaScript: werkt zonder script,
   is met het toetsenbord te bedienen en onthoudt niets dat onthouden hoeft te
   worden -- header.php zet hem open als de huidige sectie erin zit.

   De inspringing moet je ZIEN, anders lijkt het een gewone lijst met een
   kopregel erboven. Vandaar de verticale draad langs de kinderen en de
   kleinere letter: twee signalen in plaats van alleen wat witruimte. ---- */
nav { overflow-y: auto; }

nav .nav-group { margin-bottom: 6px !important; }

nav .nav-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 9px 12px;
    border-radius: 8px;
    color: #94a3b8;
    transition: background .15s, color .15s;
    -webkit-user-select: none;
    user-select: none;
}
nav .nav-group summary::-webkit-details-marker { display: none; }
nav .nav-group summary::marker { content: ""; }
nav .nav-group summary:hover { background: rgba(148, 163, 184, .12); color: #e2e8f0; }
nav .nav-group summary:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

/* Het pijltje. Wijst naar beneden zodra de groep openstaat. */
nav .nav-group summary::after {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s;
}
nav .nav-group details[open] > summary::after { transform: rotate(45deg); }

/* De kinderen: ingesprongen, met een draad ernaast die laat zien waar de groep
   begint en eindigt. */
nav .nav-group details > ul {
    margin: 2px 0 4px 21px;
    padding: 2px 0 2px 11px;
    border-left: 2px solid rgba(148, 163, 184, .32);
}
nav .nav-group details > ul li { margin-bottom: 2px !important; }
nav .nav-group details > ul a {
    font-size: 14px !important;
    padding: 8px 12px;
    color: #94a3b8 !important;
}
nav .nav-group details > ul a:hover { color: #fff !important; }

/* De pagina waar je nu bent. Als klasse en niet als inline-stijl, zodat de
   opmaak hier bij elkaar blijft staan. */
nav a.is-current {
    color: #fff !important;
    background: rgba(148, 163, 184, .16);
}
nav .nav-group details > ul a.is-current {
    color: #fff !important;
    background: rgba(37, 99, 235, .22);
    box-shadow: inset 2px 0 0 var(--brand);
}

/* ---- Documentatiepagina (Telefonieketen, Ketenschema) ----
   De pagina zelf is een compleet HTML-document met eigen opmaak en staat
   daarom in een frame. Het frame vult de hoogte die main van .container krijgt;
   de pagina scrollt binnenin, zodat de zijbalk blijft staan. ---- */
main.docpage {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px 20px 20px !important;
}

.docpage__bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.docpage__bar h2 { margin: 0 !important; font-size: 19px; }

.docpage__open {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 8px;
    padding: 6px 12px;
    transition: color .15s, border-color .15s, background .15s;
}
.docpage__open:hover { color: var(--brand); border-color: #bfdbfe; background: #eff6ff; }
.docpage__open::after { content: " \2197"; }

.docpage__frame {
    flex: 1 1 auto;
    min-height: 420px;
    width: 100%;
    display: block;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.docpage__missing { color: var(--muted); font-size: 14px; }