/* ============================================================
   Stumpel Roosters — nieuwe look & feel ("werktijden"-stijl)
   ------------------------------------------------------------
   Losse stijllaag. Wordt in layouts/app.blade.php ná
   app.css en styles.css geladen en overschrijft die.
   Geen build-stap nodig: dit bestand wordt direct geserveerd
   vanuit /public en blijft ook na een asset-rebuild bestaan.

   Opbouw:
     1. Design-tokens (kleuren, radius, schaduw)
     2. Basis / typografie
     3. Navigatie
     4. Knoppen
     5. Kaarten & algemene chrome
     6. Formulier-elementen / toggles / alerts
   (Tabellen, overzicht en tijdlijn volgen in latere stappen.)
   ============================================================ */

:root {
    /* groen accent (uit het ontwerp) */
    --st-green:      #1f8a52;
    --st-green-600:  #18713f;
    --st-green-700:  #135c33;
    --st-green-050:  #e8f4ec;
    --st-green-100:  #d3ebdb;

    /* statuskleuren */
    --st-amber:      #c77a17;   /* ander filiaal */
    --st-amber-bg:   #fdf3e3;
    --st-amber-bd:   #f0d6a6;
    --st-red:        #c0392b;   /* ziek / vakantie */
    --st-red-bg:     #fbecec;
    --st-red-bd:     #f0c4c0;
    --st-slate:      #64748b;   /* tijd voor tijd */
    --st-slate-bg:   #eef1f5;
    --st-slate-bd:   #d4dbe4;

    /* neutralen (koel, lage chroma) */
    --st-bg:         #eef1f4;
    --st-surface:    #ffffff;
    --st-ink:        #1c2530;
    --st-ink-2:      #475467;
    --st-ink-3:      #8b97a6;
    --st-line:       #e4e8ee;
    --st-line-2:     #eef1f4;

    --st-r-sm: 6px;
    --st-r:    9px;
    --st-r-lg: 14px;
    --st-shadow-sm: 0 1px 2px rgba(20,32,48,.06), 0 1px 1px rgba(20,32,48,.04);
    --st-shadow:    0 4px 16px rgba(20,32,48,.08), 0 1px 3px rgba(20,32,48,.05);
}

/* ---- 2. basis / typografie -------------------------------------------- */
body {
    font-family: 'Mulish', system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--st-bg);
    color: var(--st-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main.py-4 { padding-top: 1.25rem; }

/* ---- 3. navigatie ------------------------------------------------------ */
.navbar-laravel {
    background-color: var(--st-surface) !important;
    border-bottom: 1px solid var(--st-line);
    box-shadow: var(--st-shadow-sm);
    min-height: 58px;
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.navbar-laravel .container { align-items: center; }

/* het merk (eerste navbar-brand) — echt Stumpel-logo */
.navbar-laravel .app-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 14px;
    padding: 4px 6px;
}
.navbar-laravel .app-brand .logo {
    height: 26px;
    width: auto;
    display: block;
}
.navbar-laravel .app-brand small {
    font-weight: 700;
    color: var(--st-ink-3);
    font-size: 12px;
    letter-spacing: .01em;
    position: relative;
    top: 4px;
}

/* de overige navigatielinks (ook navbar-brand in de bestaande markup) */
.navbar-laravel .navbar-brand:not(.app-brand) {
    color: var(--st-ink-2) !important;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--st-r-sm);
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.navbar-laravel .navbar-brand:not(.app-brand):hover,
.navbar-laravel .navbar-brand:not(.app-brand):focus {
    background: var(--st-line-2);
    color: var(--st-ink) !important;
}
.navbar-laravel .navbar-brand.active {
    color: var(--st-green-600) !important;
    background: var(--st-green-050);
}

/* gebruikers-chip rechts */
.navbar-laravel .navbar-nav .nav-link {
    color: var(--st-ink) !important;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
}
.navbar-laravel .navbar-nav .nav-link:hover,
.navbar-laravel .navbar-nav .nav-link:focus {
    background: var(--st-line-2);
    color: var(--st-ink) !important;
}
.navbar-laravel .user-avatar {
    width: 26px; height: 26px;
    border-radius: 999px;
    background: var(--st-green);
    color: #fff;
    display: inline-grid; place-items: center;
    font-size: 11px; font-weight: 800;
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35);
}
.navbar-laravel .dropdown-menu {
    border: 1px solid var(--st-line);
    border-radius: var(--st-r);
    box-shadow: var(--st-shadow);
    padding: 6px;
}
.navbar-laravel .dropdown-item {
    border-radius: var(--st-r-sm);
    font-weight: 600;
    color: var(--st-ink-2);
}
.navbar-laravel .dropdown-item:hover {
    background: var(--st-line-2);
    color: var(--st-ink);
}
.navbar-toggler { border-color: var(--st-line); }

/* ---- 4. knoppen -------------------------------------------------------- */
.btn {
    font-weight: 700;
    border-radius: var(--st-r);
    transition: background .12s, border-color .12s, color .12s;
}
.btn-primary {
    background-color: var(--st-green) !important;
    border-color: var(--st-green) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--st-green-600) !important;
    border-color: var(--st-green-600) !important;
}
.btn-success {
    background-color: var(--st-green) !important;
    border-color: var(--st-green) !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--st-green-600) !important;
    border-color: var(--st-green-600) !important;
}
.btn-secondary {
    background-color: var(--st-surface) !important;
    border-color: var(--st-line) !important;
    color: var(--st-ink) !important;
    box-shadow: var(--st-shadow-sm);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #fbfcfd !important;
    border-color: #cfd6df !important;
    color: var(--st-ink) !important;
}
.btn-outline-secondary {
    border-color: var(--st-line) !important;
    color: var(--st-ink-2) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background-color: var(--st-line-2) !important;
    border-color: #cfd6df !important;
    color: var(--st-ink) !important;
}
.btn-danger {
    background-color: var(--st-red) !important;
    border-color: var(--st-red) !important;
}
/* een nette segmented look voor de jaar-/week-knopgroepen */
.btn-group .btn-secondary { box-shadow: none; }

/* ---- 5. kaarten & chrome ---------------------------------------------- */
.card {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-lg);
    box-shadow: var(--st-shadow);
}
.card-header {
    background: var(--st-surface);
    border-bottom: 1px solid var(--st-line);
    border-top-left-radius: var(--st-r-lg) !important;
    border-top-right-radius: var(--st-r-lg) !important;
}
.card-header h2 {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--st-ink);
}

/* ---- 6. formulieren / toggles / alerts -------------------------------- */
.form-check-input { accent-color: var(--st-green); }
.form-control:focus {
    border-color: var(--st-green-100);
    box-shadow: 0 0 0 .2rem rgba(31,138,82,.15);
}
.alert-success {
    background: var(--st-green-050);
    border-color: var(--st-green-100);
    color: var(--st-green-700);
}
.alert-danger {
    background: var(--st-red-bg);
    border-color: var(--st-red-bd);
    color: var(--st-red);
}
a { color: var(--st-green-600); }

/* ============================================================
   7. Filialen-overzicht  (overview/home + overzichtTable)
   ============================================================ */

/* filiaal-balken (accordion) */
.accordion-hours { margin-bottom: 10px; }
.accordion-hours > .card {
    border: 1px solid var(--st-line);
    border-radius: var(--st-r) !important;
    box-shadow: var(--st-shadow-sm);
    overflow: hidden;
}
.accordion-hours > .card > .card-header {
    background: var(--st-surface);
    border-bottom: 1px solid var(--st-line);
    padding: .5rem .75rem;
}
.accordion-hours > .card > .card-header:hover { background: #fbfcfd; }
.accordion-hours .card-header .btn {
    font-weight: 800;
    font-size: 15px;
    color: var(--st-ink) !important;
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    letter-spacing: -.01em;
}

/* de roostertabel zelf */
#iets {
    margin-bottom: 0;
    font-size: 14px;
}
/* lichte, schone tabelkop i.p.v. donkerblauw */
#iets.table .thead-dark th,
#iets .thead-dark th {
    background: var(--st-line-2) !important;
    color: var(--st-ink-2) !important;
    border-color: var(--st-line) !important;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 10px 10px;
    vertical-align: middle;
}
#iets tbody td {
    border-color: var(--st-line-2);
    vertical-align: middle;
    padding: 5px 6px;
}
#iets tbody tr:hover > td { background: var(--st-green-050); }

/* zorg dat alle 7 dagen passen; smal scherm -> horizontaal schuiven */
.accordion-hours .card-body { overflow-x: auto; }
#iets { width: 100%; }
#iets .thead-dark th { padding: 7px 6px; }
/* kop niet 'plakkend': i.c.m. horizontaal schuiven verdween anders de
   eerste rij van elk filiaal achter de kop */
#iets.table .thead-dark th.position-sticky,
table#iets .thead-dark th.position-sticky { position: static; top: auto; }

/* naam-cel — meer ruimte nu het cijfer-veld weg is */
#iets td.name-cell {
    min-width: 150px;
    max-width: 220px;
}
#iets td.name-cell > div:first-child {
    font-weight: 800;
    color: var(--st-ink);
    line-height: 1.2;
}
#iets td.name-cell .contract { color: var(--st-ink-3); font-weight: 700; white-space: nowrap; }

/* dienst-cellen: gevulde diensten worden gekleurde chips,
   met behoud van de functie-kleur via currentColor */
#iets td .hour {
    line-height: 1.5;
}
#iets td .hour:not([style="color: "]) {
    display: block;          /* gestapeld i.p.v. naast elkaar -> smallere kolommen */
    width: max-content;
    max-width: 100%;
    margin: 1px 0;
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 11.5px;
    white-space: nowrap;
    background: color-mix(in srgb, currentColor 13%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, #fff);
}
/* lege "-" slots verbergen we voor een rustige tabel */
#iets td .hour[style="color: "] { display: none; }

/* sorteer-pijltje per dag in de kop */
#iets .thead-dark th.day-col { white-space: nowrap; }
#iets .day-sort {
    -webkit-appearance: none; appearance: none;
    border: 0; background: transparent; cursor: pointer;
    padding: 2px; margin-left: 5px; vertical-align: middle;
    line-height: 0; color: var(--st-ink-3); border-radius: 4px;
}
#iets .day-sort::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}
#iets .day-sort:hover { background: var(--st-line); color: var(--st-ink-2); }
#iets .day-sort:focus { outline: none; }
#iets .day-sort.active { color: var(--st-green); background: var(--st-green-050); }
#iets .day-sort.asc::after { transform: rotate(180deg); }

/* gewerkte-uren per dag (klein, onder de chips) */
#iets td .worked-sum {
    color: var(--st-ink-3);
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

/* totalen-kolommen + onderste regel */
#iets td.user-worked-hours,
#iets td.user-contract-hours {
    font-weight: 800;
    color: var(--st-ink);
}
#iets tr.row-hours-day td {
    border-top: 2px solid var(--st-line) !important;
    background: var(--st-line-2);
    font-weight: 800;
    color: var(--st-ink);
}

/* kleurenlegenda onderaan */
.color-explanation, .colors-explanation { font-weight: 700; }

/* ============================================================
   8. Rooster-tijdlijn  (schedule/home — cd-schedule kalender)
   ============================================================ */

/* dag-koppen */
.cd-schedule .events .events-group {
    border-color: var(--st-line);
}
.cd-schedule .events .top-info {
    border-bottom: 1px solid var(--st-line);
    background: var(--st-line-2);
}
.cd-schedule .events .top-info > span {
    font-weight: 800;
    font-size: 13px;
    color: var(--st-ink-2);
    letter-spacing: .01em;
}
/* vandaag-kop in het groen */
.cd-schedule .events .top-info.btn-primary {
    background: var(--st-green) !important;
}
.cd-schedule .events .top-info.btn-primary > span { color: #fff; }

/* roosterlijnen wat rustiger */
.cd-schedule .timeline li::after { background: var(--st-line); }
.cd-schedule .timeline li span { color: var(--st-ink-3); font-weight: 700; font-size: 12px; }

/* dienstblokken: afgerond, schone schaduw */
.cd-schedule .events .single-event {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(20,32,48,.12);
    overflow: hidden;
}
.cd-schedule .events .single-event a { padding: 10px 12px; }
.cd-schedule .event-name {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 800;
    font-style: normal;
}
.cd-schedule .event-name + .event-name,
.cd-schedule .single-event em.event-name { font-style: normal; }