/* ===========================================================================
   dtl.css - de gedeelde stijl van alle apps op mijndtl.nl
   ---------------------------------------------------------------------------
   Dit bestand staat op public_html/assets/dtl.css en wordt door ELKE app
   geladen, vlak voor de eigen assets/style.css van die app. Alles wat hier
   staat is chrome (zijbalk, topbar), of een bouwsteen die in meer dan een app
   voorkomt: kaart, knop, formulier, tabel, tabblad, melding.

   Waarom een gedeeld bestand: tot 9 september 2026 stond dit blok zes keer
   letterlijk hetzelfde in zes losse style.css-bestanden, plus inline in de hub,
   plus een eigen variant in de calculator. Een wijziging aan een knop kostte
   dus acht bewerkingen, en de calculator liep altijd achter. Zelfde reden als
   bij uren/private/src/auth.php: een ding hoort op een plek te staan.

   App-eigen regels horen NIET hier maar in de style.css van die app. Vuistregel:
   komt het in maar een app voor, dan hoort het daar.
   =========================================================================== */

:root {
    --bg: #f4f1ec;
    --card: #ffffff;
    --ink: #2b2620;
    --muted: #8a8275;
    --accent: #7a5c3e;          /* warm hout/eiken */
    --accent-dark: #5e4630;
    --stop: #b23b3b;
    --line: #e7e1d8;
    --ok: #3c7a4e;
    --warn: #c07a26;

    /* Breedte van de zijbalk. Wordt door .side-in op 56px gezet; alle
       regels die met de zijbalk te maken hebben rekenen hiermee, zodat
       in- en uitklappen een wijziging op een plek is. */
    --side: 220px;
    --topbar-h: 52px;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
}

/* ===========================================================================
   1. De zijbalk
   ---------------------------------------------------------------------------
   De zijbalk staat vast (position: fixed) en de body krijgt er padding voor
   in de plaats. Daardoor hoefde er in de views geen enkele wrapper-div bij:
   <header class="topbar"> en <main> blijven staan waar ze stonden.
   =========================================================================== */

.dtl-side {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--side);
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--accent-dark);
    color: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: width .15s ease;
}

.dtl-side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 0 16px;
    height: var(--topbar-h);
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dtl-logo {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
}
.dtl-collapse {
    background: none; border: none; color: #fff;
    opacity: .6; cursor: pointer;
    font-size: 1.1rem; line-height: 1;
    padding: 8px; border-radius: 8px;
    flex: 0 0 auto;
}
.dtl-collapse:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

/* Zoekveld bovenin de zijbalk. Ingeklapt wisselt het met een knop, zodat je
   ook dan kunt zoeken - zie de regels onder de 1000px-grens verderop. */
.dtl-zoek { padding: 10px 8px 4px; }
.dtl-zoek input {
    width: 100%; padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px;
    background: rgba(255, 255, 255, .1); color: #fff;
    font: inherit; font-size: .92rem;
}
.dtl-zoek input::placeholder { color: rgba(255, 255, 255, .55); }
.dtl-zoek input:focus { outline: none; border-color: rgba(255, 255, 255, .55); }
.dtl-zoek-knop { display: none; margin: 6px 8px 0; }

.dtl-apps { display: flex; flex-direction: column; padding: 10px 8px; gap: 2px; }

.dtl-app {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    opacity: .82;
    white-space: nowrap;
}
.dtl-app:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.dtl-app.is-on {
    opacity: 1;
    background: rgba(255, 255, 255, .16);
    font-weight: 600;
}
.dtl-ico { flex: 0 0 20px; width: 20px; height: 20px; display: block; }
.dtl-ico svg { width: 20px; height: 20px; display: block; }
.dtl-lbl { overflow: hidden; text-overflow: ellipsis; }

/* De pagina's van de app zelf. Op de desktop staan die in de topbar, dus daar
   is dit blok verborgen; op een smal scherm staat alles in dit ene paneel. */
.dtl-side-pages { display: none; padding: 6px 8px 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
.dtl-side-kop {
    display: block; padding: 10px 12px 6px;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; opacity: .55;
}
.dtl-side-pages a,
.dtl-side-foot a {
    display: block; padding: 10px 12px; border-radius: 10px;
    color: #fff; text-decoration: none; opacity: .82;
}
.dtl-side-pages a:hover,
.dtl-side-foot a:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

.dtl-side-foot {
    margin-top: auto;
    padding: 10px 8px 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.dtl-who {
    display: block; padding: 10px 12px 4px;
    font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dtl-backdrop {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(43, 38, 32, .45);
}
.dtl-backdrop[hidden] { display: none; }

/* ===========================================================================
   2. Topbar
   =========================================================================== */

.topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--topbar-h);
    padding: 8px 20px;
    background: var(--accent-dark);
    color: #fff;
}
.topbar .brand { font-weight: 700; letter-spacing: .3px; }
.topbar nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar .who { opacity: .85; }
.topbar a { color: #fff; text-decoration: none; opacity: .9; }
.topbar a:hover { opacity: 1; text-decoration: underline; }
.topbar a.is-on { opacity: 1; font-weight: 600; text-decoration: underline; }

/* Versiebadge: de enige manier om van buitenaf te zien of de nieuwe bestanden
   echt live staan. Bij elke deploy ophogen. */
.app-ver { font-size: .72rem; font-weight: 400; opacity: .55; margin-left: 4px; }

.nav-toggle {
    display: none;
    background: none; border: none; color: #fff;
    font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px;
    flex: 0 0 auto;
}

/* ===========================================================================
   3. Inhoud
   =========================================================================== */

main { max-width: 1120px; margin: 0 auto; padding: 20px; }
main.smal  { max-width: 760px; }   /* formulieren, instellingen, inloggen */
main.breed { max-width: none;  }   /* borden: planning, kleurenraster */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 18px;
}
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.card-head h1, .card-head h2 { margin: 0; }

h1 { margin: 0 0 8px; font-size: 1.5rem; }
h2 { margin: 0 0 12px; font-size: 1.1rem; }
h3 { margin: 16px 0 6px; font-size: .95rem; }

.hint  { color: var(--muted); margin: 6px 0 0; font-size: .9rem; }
.empty { color: var(--muted); text-align: center; padding: 18px; }
.sub   { font-weight: 400; color: var(--muted); font-size: .85rem; }
.sep   { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* ===========================================================================
   4. Meldingen
   =========================================================================== */

.error   { background: #fdecec; color: var(--stop); padding: 10px 12px; border-radius: 8px; }
.ok-msg  { background: #eaf4ec; color: #2e7d46;    padding: 10px 12px; border-radius: 8px; }
.warn    { background: #fdf4e3; color: #8a6116;    padding: 10px 12px; border-radius: 8px; }

/* ===========================================================================
   5. Knoppen
   ---------------------------------------------------------------------------
   Het formaat van vijf van de zes apps heeft gewonnen: groot genoeg om met een
   vinger te raken. .btn-primary is bewust NIET meer standaard 100% breed - dat
   was precies waarom de offerte-app ooit zijn eigen, kleinere knopstijl kreeg.
   Volle breedte vraag je nu expliciet met .btn-block (of het gebeurt vanzelf
   binnen .login).
   =========================================================================== */

.btn {
    display: inline-block; cursor: pointer; border: none; border-radius: 10px;
    padding: 14px 20px; font-size: 1rem; font-weight: 600; text-decoration: none;
    background: var(--line); color: var(--ink);
    text-align: center;
}
.btn:hover { filter: brightness(.97); }
.btn[disabled] { opacity: .5; cursor: default; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); filter: none; }
.btn-accent  { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); filter: none; }
.btn-light   { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-light:hover { border-color: var(--accent); filter: none; }
.btn-danger  { background: var(--stop); color: #fff; }
.btn-ghost   { background: transparent; color: var(--muted); border: 1px solid var(--line); }

.btn-block { display: block; width: 100%; }
.btn-sm    { padding: 10px 16px; font-size: .95rem; }
.btn-xs    { padding: 8px 12px; font-size: .85rem; }
.btn-x     { padding: 8px 12px; font-size: .9rem; color: var(--muted); background: transparent; }
.btn-x:hover { background: var(--line); }

.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

/* ===========================================================================
   6. Formulieren
   =========================================================================== */

label { display: block; margin: 12px 0 0; font-weight: 600; }
label small { font-weight: 400; color: var(--muted); }
label.inline { display: flex; align-items: center; gap: 8px; font-weight: 400; }

/* Let op de naam: NIET .field. Zo heet in de calculator het omhulsel om een
   label plus invoerveld heen, en die zou hierdoor zelf een randje en padding
   van een invoerveld krijgen. */
.dtl-input {
    width: 100%; margin-top: 5px; padding: 11px 12px;
    border: 1px solid var(--line); border-radius: 10px;
    font: inherit; background: #fff; color: var(--ink);
    min-width: 0;
}
.dtl-input:focus { outline: none; border-color: var(--accent); }

.check-label { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-2 .full { grid-column: 1 / -1; }

/* Inloggen. Dit scherm is in alle apps hetzelfde en staat daarom hier. */
.login { max-width: 380px; margin: 8vh auto 0; }
.login label { display: block; margin: 14px 0; font-weight: 600; }
.login input, .login select {
    display: block; width: 100%; margin-top: 6px; padding: 14px;
    font-size: 1.1rem; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; color: var(--ink);
}
.login .btn-primary { width: 100%; padding: 16px; font-size: 1.15rem; }

/* ===========================================================================
   7. Tabellen
   ---------------------------------------------------------------------------
   Een tabel hoort ALTIJD in een .table-wrap te staan. Zonder die wrapper duwt
   een tabel van acht kolommen de hele pagina breder dan het scherm, en dan
   schuift ook de rest mee.
   =========================================================================== */

table { width: 100%; border-collapse: collapse; }
table th, table td {
    text-align: left; padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table th {
    color: var(--muted); font-weight: 600; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .4px;
}
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.check-col { width: 36px; text-align: center; }
.check-col input { width: 18px; height: 18px; }

/* ===========================================================================
   8. Tabbladen, chips en badges
   =========================================================================== */

/* De tabbladenstrook hoort BINNEN <main> te staan, niet ernaast: dan volgt hij
   vanzelf de breedte van het scherm eronder en hoeft hij geen eigen max-width
   te herhalen. De offerte-app had daar eerst een aparte .breed-variant voor. */
.tabs {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.tab {
    padding: 10px 18px;
    border: 1px solid transparent; border-bottom: none;
    border-radius: 10px 10px 0 0;
    margin-bottom: -1px;
    color: var(--muted); text-decoration: none; font-weight: 600;
    background: #faf8f5;
}
.tab:hover { color: var(--ink); }
.tab.is-on {
    background: var(--card); border-color: var(--line);
    color: var(--accent-dark);
}

/* Zoekresultaten: per app een groepje treffers. */
.zoek-groep { margin-bottom: 22px; }
.zoek-groep h2 { margin-bottom: 8px; }
.zoek-lijst { list-style: none; margin: 0; padding: 0; }
.zoek-lijst li { border-bottom: 1px solid var(--line); }
.zoek-lijst li:last-child { border-bottom: none; }
.zoek-lijst a {
    display: block; padding: 11px 4px; text-decoration: none; color: var(--ink);
    border-radius: 8px;
}
.zoek-lijst a:hover { background: var(--bg); }
.zoek-lijst .t { font-weight: 600; }
.zoek-lijst .s { color: var(--muted); font-size: .85rem; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    display: inline-block; padding: 6px 14px; border-radius: 20px;
    border: 1px solid var(--line); background: #fff;
    color: var(--muted); text-decoration: none; font-size: .9rem;
}
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.badge {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    background: var(--line); color: var(--ink); font-size: .78rem; font-weight: 600;
}

/* ===========================================================================
   9. Smalle schermen
   ---------------------------------------------------------------------------
   Twee grenzen, en ze doen verschillende dingen:
     1000px - de zijbalk gaat van vaste kolom naar uitschuifpaneel
      720px - de topbar-navigatie verhuist naar dat paneel, en alles wordt
              compacter. 720 en niet 640, want een topbar met zes paginalinks
              is bij 700px al te vol.
   =========================================================================== */

@media (min-width: 1000px) {
    /* De klasse komt uit dtl_body_class() en staat er alleen als er ook echt
       een zijbalk is. Zonder die voorwaarde hield het inlogscherm - dat geen
       zijbalk heeft - links een lege strook van 220px over. */
    body.met-zijbalk { padding-left: var(--side); }
    .dtl-backdrop { display: none !important; }

    /* Ingeklapt: alleen de icoontjes. Deze regels staan bewust BINNEN de
       desktop-grens. Ze stonden eerst erbuiten, met een terugdraai-blok voor
       smalle schermen - maar `display: revert` valt terug op wat de browser
       zelf van een <a> vindt (inline), niet op wat hier een paar regels hoger
       staat (block). De namen in het uitschuifpaneel liepen daardoor door
       elkaar heen. Niet terugdraaien wat je ook gewoon niet kunt aanzetten. */
    .side-in { --side: 56px; }
    .side-in .dtl-lbl,
    .side-in .dtl-logo,
    .side-in .dtl-who,
    .side-in .dtl-side-kop,
    .side-in .dtl-side-foot a { display: none; }
    .side-in .dtl-side-top { justify-content: center; padding: 0; }
    .side-in .dtl-app { justify-content: center; padding: 10px 0; }
    .side-in .dtl-side-foot { padding-bottom: 8px; }

    /* Ingeklapt past er geen invoerveld meer; dan wordt het een knop naar het
       zoekscherm, dat een eigen groot veld heeft. */
    .side-in .dtl-zoek { display: none; }
    .side-in .dtl-zoek-knop { display: flex; justify-content: center; padding: 10px 0; margin: 6px 0 0; }
}

@media (max-width: 999px) {
    .dtl-side {
        transform: translateX(-100%);
        transition: transform .18s ease;
        width: 260px;
        box-shadow: 4px 0 18px rgba(0, 0, 0, .25);
    }
    .side-open .dtl-side { transform: none; }
    .dtl-collapse { display: none; }
    .nav-toggle { display: block; }
    .dtl-side-pages { display: block; }
}

@media (max-width: 720px) {
    /* De paginalinks staan nu in het paneel; de topbar houdt alleen de
       hamburger en de naam van de app over. */
    .topbar nav { display: none; }
    main { padding: 14px; }
    .card { padding: 16px; }
    .grid-2 { grid-template-columns: 1fr; }
    .tab { padding: 9px 14px; }

    /* Onder de 16px zoomt Safari op de iPhone in zodra je een veld aanraakt,
       en zoomt daarna niet vanzelf terug. Daarom hier een ondergrens voor
       alles wat invoer is, ook voor de app-eigen velden. */
    input, select, textarea { font-size: 16px; }
}

@media print {
    .dtl-side, .topbar, .tabs, .noprint { display: none !important; }
    body { padding-left: 0; }
    .card { border: none; }
}