* { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    background: #f4f5f7;
    color: #1a1a1a;
}

.app-shell { min-height: 100vh; }

.login-card {
    max-width: 420px;
    margin: 10vh auto;
    padding: 2rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.login-card.kiosk { max-width: 560px; }

.login-card h1 { margin-top: 0; font-size: 1.5rem; }
.login-card .subtitel { color: #666; font-size: 0.9rem; margin-bottom: 1.5rem; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.form-group input {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.werkplek-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.werkplek-tegel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    border: 2px solid #ddd;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.werkplek-tegel input { display: none; }
/*.werkplek-tegel.geselecteerd { border-color: #2563eb; background: #eff6ff; color: #2563eb; }*/
.werkplek-tegel:has(input:checked) { border-color: #2563eb; background-color: #2563eb; color: white; }

.btn-primary {
    width: 100%;
    padding: 0.85rem;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary.btn-groot { padding: 1.1rem; font-size: 1.15rem; }
.btn-primary:hover { background: #1d4ed8; }

.fout { color: #b91c1c; font-size: 0.9rem; margin: 0.5rem 0; }
.validation-summary { color: #b91c1c; font-size: 0.9rem; }

/* --- Memo-pagina --- */

.memo-kop {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: #fff;
    border-radius: 12px;
    margin: 1rem;
    /* Blijft in beeld tijdens het scrollen (zie ook Memo2, die dezelfde class gebruikt). */
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.werkplek-titel { font-size: 1.2rem; font-weight: 600; white-space: nowrap; }

.memo-kop-bericht {
    text-align: center;
    /*font-size: 0.85rem;*/
    font-size: 1.25rem;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
}
.memo-kop-bericht a { color: #2563eb; font-weight: 600; text-decoration: none; }
.memo-kop-bericht a:hover { text-decoration: underline; }

.leeg-bericht { margin: 1rem 1.25rem; color: #666; }

.btn-klein {
    height: 34px;
    padding: 0 12px;
    font-size: 0.8rem;
    border: 1px solid #ddd;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}

.chip-rijen {
    display: flex;
    gap: 12px;
    margin: 0 1rem 1rem;
    align-items: stretch;
}

.chip-sectie { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chip-sectie-pin { flex: 0 0 33%; max-width: 33%; }
.chip-sectie-overig { flex: 1 1 auto; }

.chip-sectie-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
    padding-left: 2px;
}

.chip-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }

.order-chip {
    flex: 0 0 auto;
    position: relative;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fff;
    text-align: left;
    cursor: pointer;
    min-width: 130px;
}

.order-chip.geselecteerd { border: 2px solid #2563eb; }
.order-chip.prioriteit { border-color: #d97706; }
.order-chip.compleet { background: #ecfdf3; border-color: #86efac; }
.order-chip.compleet.geselecteerd { border: 2px solid #15803d; }
.order-chip.compleet .chip-voortgang { color: #15803d; font-weight: 600; }
.order-chip .chip-badge { position: absolute; top: -8px; right: -8px; font-size: 0.9rem; }
.order-chip .chip-ordernummer { display: block; font-size: 0.9rem; font-weight: 600; }
.order-chip .chip-voortgang { display: block; font-size: 0.75rem; color: #666; margin-top: 2px; }

.order-detail {
    margin: 0 1rem 1rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.25rem;
}

.order-detail-kop { display: flex; justify-content: space-between; align-items: flex-start; }
.order-detail-titel { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 600; }
.order-detail-omschrijving { font-size: 0.9rem; color: #666; margin: 4px 0 0; }
.order-detail-acties { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.order-detail-datum { font-size: 0.8rem; color: #888; }
.order-detail-knoppen { display: flex; gap: 8px; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 8px;
}
.badge.pin { color: #2563eb; background: #eff6ff; }

.btn-alles-compleet {
    height: 40px;
    padding: 0 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-alles-compleet.rust { background: #ecfdf3; border: 1px solid #86efac; color: #15803d; }
.btn-alles-compleet.geblokkeerd { background: #f3f4f6; border: 1px solid #ddd; color: #999; cursor: not-allowed; }
.btn-alles-compleet.bevestigbaar { background: #fffbeb; border: 1px solid #fbbf24; color: #b45309; }

.subonderdelen-lijst { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }

.subonderdeel-kaart {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    background: #fafafa;
}

.subonderdeel-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.subonderdeel-naam { font-size: 1rem; font-weight: 600; }
.subonderdeel-acties { display: flex; align-items: center; gap: 8px; }

.subonderdeel-acties .btn-compleet { background: #ecfdf3; border-color: #86efac; color: #15803d; }
.subonderdeel-acties .btn-compleet:disabled { opacity: 0.5; cursor: not-allowed; }

.opmerking-veld { margin-bottom: 12px; }
.opmerking-veld input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
}

.stepper-rij {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: center;
}

.stepper-rij button {
    height: 48px;
    font-size: 0.9rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.stepper-aantal {
    min-width: 68px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 600;
}
.stepper-aantal.compleet { color: #15803d; }

/* --- Child-niveau (voorbereiding), zie ontwerpbeslissing-parent-child-voortgang.md --- */

.subitems-lijst {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #ddd;
}

.subitem-rij {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
}

.subitem-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.subitem-naam { font-size: 0.9rem; font-weight: 600; color: #444; }

.subitem-rij .stepper-rij button { height: 38px; font-size: 0.8rem; }
.subitem-rij .stepper-aantal { font-size: 1.1rem; min-width: 56px; }


/* --- Import-pagina --- */

.import-resultaat { font-size: 0.85rem; color: #15803d; font-weight: 500; }

.import-stap-kaart {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 1rem 1rem;
}

.import-stap-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.stap-bol {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
    background: #f3f4f6; color: #999;
}
.stap-bol.actief { background: #eff6ff; color: #2563eb; }
.stap-bol.voltooid { background: #ecfdf3; color: #15803d; }
.stap-titel { font-size: 0.9rem; font-weight: 600; }
.stap-samenvatting { font-size: 0.85rem; color: #666; }
.stap-samenvatting-rechts { margin-left: auto; font-size: 0.8rem; color: #888; }
.stap-hint { font-size: 0.75rem; color: #999; margin: 8px 0; }

.import-textarea {
    width: 100%;
    padding: 0.75rem;
    font-family: monospace;
    font-size: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.import-tabel { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.import-tabel th { text-align: left; color: #888; font-weight: 500; padding: 4px 8px; }
.import-tabel td { padding: 6px 8px; border-top: 1px solid #eee; }
.import-tabel select { border: 1px solid #ddd; border-radius: 6px; padding: 4px 8px; font-size: 0.8rem; }

.tekst-secundair { color: #666; }
.tekst-vet { font-weight: 600; }
.tekst-muted { color: #999; }

.status-nieuw { color: #15803d; font-weight: 500; }
.status-gewijzigd { color: #b45309; font-weight: 500; }
.status-fout { color: #b91c1c; font-weight: 500; }

.rij-sparepart td { background: #fffbeb; }

.btn-uitklap { border: none; background: transparent; cursor: pointer; font-size: 0.8rem; }

.sparepart-paneel {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px;
    margin: 4px 0 10px;
}
.sparepart-label { font-size: 0.7rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }
.sparepart-checkboxen { display: flex; gap: 16px; margin-bottom: 10px; font-size: 0.8rem; }
.sparepart-naamveld { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.sparepart-naamveld input { flex: 1; padding: 5px 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.8rem; }

.import-acties { display: flex; justify-content: flex-end; gap: 10px; margin-top: 1rem; }

/* --- Admin-pagina's --- */

.audit-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.audit-filters .form-group { min-width: 160px; }
.audit-filters input { padding: 0.5rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.85rem; }

/* --- Dashboard --- */

.weergave-toggle { display: flex; gap: 4px; background: #f3f4f6; border-radius: 8px; padding: 3px; }
.weergave-toggle button {
    border: none; background: transparent; padding: 6px 14px; font-size: 0.8rem;
    border-radius: 6px; cursor: pointer; color: #666;
}
.weergave-toggle button.actief { background: #fff; color: #1a1a1a; font-weight: 500; }

.dashboard-tabel .centreren { text-align: center; }
.rij-prioriteit { background: #fffbeb; }

.btn-prioriteit { border: none; background: transparent; cursor: pointer; font-size: 0.95rem; opacity: 0.4; }
.btn-prioriteit:hover { opacity: 1; }

.prioriteit-badge {
    display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600;
    background: #fffbeb; border: 1px solid #fbbf24; color: #b45309; border-radius: 6px; padding: 2px 6px;
}
.btn-mini { border: none; background: transparent; cursor: pointer; font-size: 0.7rem; padding: 0 2px; color: inherit; }

.dashboard-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 1rem; }
.dashboard-kaart { margin: 0; }
.dashboard-kaart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dashboard-kaart-wp {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: #fafafa; border-radius: 8px; padding: 8px 4px; font-size: 0.8rem;
}

/* ============================================================ */
/* --- Memo2-pagina (shopfloor-kaartweergave) — begin --- */
/* De grid/kaart/overlay-classes hier zijn geprefixt met "memo2-" */
/* zodat ze nooit botsen met de chip/paneel-stijl van Memo.       */
/* De header (.memo-kop, .werkplek-titel, .memo-kop-bericht) is   */
/* bewust NIET geprefixt: Memo2.razor gebruikt letterlijk dezelfde*/
/* class als Memo.razor (zie de "Memo-pagina"-sectie hierboven),  */
/* zodat beide pagina's exact dezelfde sticky header met          */
/* feed-tekst hebben, gedefinieerd op één plek.                   */
/* Overige gedeelde atomen (.btn-klein, .badge, .badge.pin,       */
/* .btn-alles-compleet + varianten, .prioriteit-badge,             */
/* .fout, .leeg-bericht) komen ook uit de Memo-sectie en worden   */
/* hier bewust hergebruikt, niet gedupliceerd.                     */
/* ============================================================ */

.memo2-order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 1rem 1rem;
}

.memo2-order-kaart {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.memo2-order-kaart:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.memo2-order-kaart.compleet { background: #ecfdf3; border-color: #86efac; }

.memo2-order-kop {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.memo2-order-nummer { font-size: 1rem; font-weight: 600; }

.memo2-order-omschrijving { font-size: 0.85rem; color: #666; margin: 0 0 10px; }

.memo2-progress-bar {
    height: 8px;
    background: #f1f1f1;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.memo2-progress-fill { height: 100%; background: #2563eb; }
.memo2-order-kaart.compleet .memo2-progress-fill { background: #15803d; }

.memo2-order-voet {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #888;
}

.memo2-overlay-achtergrond {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 50;
}

.memo2-overlay-venster {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
}

.memo2-overlay-kop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.memo2-overlay-titel { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 600; }
.memo2-overlay-omschrijving { font-size: 0.9rem; color: #666; margin: 4px 0 0; }
.memo2-overlay-acties { display: flex; align-items: center; gap: 8px; }

.memo2-sluit-knop {
    width: 34px;
    height: 34px;
    border: 1px solid #ddd;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.memo2-overlay-lijst { display: flex; flex-direction: column; gap: 14px; }

/* --- Memo2-pagina (shopfloor-kaartweergave) — einde --- */