:root{--green:#62a052;--green-dark:#39752f;--bg:#f4f7f2;--card:#fff;--line:#e4e9e1;--text:#1f2937;--muted:#6b7280;--purple:#6d5bd0;--danger:#c23b31;--warning:#c47b18;--teal:#0f8d83;--shadow:0 12px 34px rgba(31,41,55,.07)}*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0;min-height:100vh;background:var(--bg)}button,input{font:inherit}.mp-page-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 10% 0,rgba(98,160,82,.08),transparent 34rem),linear-gradient(#fbfcfa,#f4f7f2)}.mp-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:26px 0 64px}.mp-topbar{height:72px;padding:0 max(18px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;backdrop-filter:blur(16px)}.mp-brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none}.mp-brand img{width:40px;height:40px;object-fit:contain}.mp-brand span{display:grid;line-height:1.05}.mp-brand strong{font-size:15px}.mp-brand small{font-size:10px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}.mp-top-actions{display:flex;align-items:center;gap:8px}.user-name{font-size:12px;color:var(--muted);max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-icon-button{position:relative;border:1px solid var(--line);background:white;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;cursor:pointer;color:#4b5563}.mp-bell-button>b{position:absolute;right:-5px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--danger);color:white;display:grid;place-items:center;font-size:10px;border:2px solid white}.section-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#778074;font-weight:800;margin-bottom:4px}.page-intro{margin:18px 0 22px}.page-intro h1,.installation-hero h1{font-size:clamp(26px,5vw,38px);line-height:1.05;margin:3px 0 8px;letter-spacing:-.025em}.page-intro p,.installation-hero p{margin:0;color:var(--muted);font-size:14px}.page-intro-compact{max-width:720px}.installation-list{display:grid;gap:10px}.installation-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(31,41,55,.02);transition:.16s ease}.installation-row:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:#ccd8c8}.installation-row-main{display:flex;align-items:center;gap:12px;min-width:0}.installation-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#eef6eb;color:var(--green-dark);font-weight:900}.installation-row-main div{display:grid;min-width:0}.installation-row-main strong{font-size:15px}.installation-row-main small{color:var(--muted);font-size:12px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.installation-row-stats{display:flex;gap:18px;align-items:center}.installation-row-stats>div{display:grid}.installation-row-stats span:not(.incident-chip):not(.row-arrow){font-size:9px;color:var(--muted);text-transform:uppercase}.installation-row-stats strong{font-size:12px;margin-top:2px}.status-text.ok{color:var(--green-dark)}.status-text.warning{color:var(--warning)}.status-text.bad{color:var(--danger)}.incident-chip{padding:5px 8px;border-radius:999px;background:#fff1ef;color:#a9342c;font-size:10px;font-weight:800}.row-arrow{font-size:18px;color:#a0a8a0}.back-link{display:inline-block;color:var(--green-dark);font-size:12px;font-weight:700;text-decoration:none;margin:2px 0 14px}.installation-hero{background:white;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;box-shadow:0 1px 2px rgba(31,41,55,.02)}.installation-hero-status{display:grid;justify-items:end;gap:5px}.installation-hero-status small{font-size:10px;color:var(--muted)}.availability-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800;white-space:nowrap;background:#f2f4f2;color:#606760}.availability-pill i{width:7px;height:7px;border-radius:50%;background:#9ca3af}.availability-pill.ok{background:#edf7ea;color:var(--green-dark)}.availability-pill.ok i{background:var(--green)}.availability-pill.warning{background:#fff6e8;color:#9a5b00}.availability-pill.warning i{background:#d98b24}.availability-pill.bad{background:#fff0ef;color:#ad342c}.availability-pill.bad i{background:#d64a40}.notice{margin-top:12px;padding:11px 13px;border-radius:12px;display:grid;gap:2px;font-size:12px;border:1px solid #d8e4d5;background:#f7fbf5}.notice span{color:var(--muted)}.notice.info{border-color:#d9e0ec;background:#f7f9fc}.controller-list{display:grid;gap:14px;margin-top:14px}.controller-card{background:white;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 1px 2px rgba(31,41,55,.02)}.controller-card.offline{opacity:.78}.controller-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid #edf0ec}.controller-title-row{display:flex;align-items:center;gap:8px}.controller-title-row h2{margin:0;font-size:18px}.controller-head p{font-size:11px;color:var(--muted);margin:5px 0 0}.controller-meta{display:flex;gap:8px}.controller-meta>span{display:grid;min-width:72px;background:#f7f9f6;border:1px solid #edf0ec;border-radius:10px;padding:7px 9px}.controller-meta small,.tube-info-row small,.valve-chip small,.mini-valve small{font-size:8px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.controller-meta strong{font-size:11px;margin-top:2px}.tube-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.tube-card{border:1px solid #e5e7eb;border-left:4px solid #9ca3af;border-radius:12px;padding:11px;background:#fff;min-width:0}.tube-card.filled{border-left-color:var(--green)}.tube-card.empty{border-left-color:#9ca3af}.tube-card.filling{border-left-color:#3b82f6}.tube-card.emptying{border-left-color:var(--purple)}.tube-card.fault{border-left-color:var(--danger);background:#fffafa}.tube-card-top{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:8px}.tube-number{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:#f1f3f1;font-weight:900;font-size:11px}.tube-copy{display:grid}.tube-copy>span{font-size:10px;color:var(--muted)}.tube-copy strong{font-size:12px;margin-top:1px}.tube-state{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;white-space:nowrap}.tube-state i{width:6px;height:6px;border-radius:50%;background:#9ca3af}.filled .tube-state i{background:var(--green)}.filling .tube-state i{background:#3b82f6}.emptying .tube-state i{background:var(--purple)}.fault .tube-state i{background:var(--danger)}.tube-info-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.tube-info-row>span{display:grid;min-width:54px;padding:5px 7px;border:1px solid #eef0ee;border-radius:8px;background:#fafbfa}.tube-info-row strong{font-size:10px;margin-top:1px}.mini-valve{position:relative;padding-left:18px!important}.mini-valve>i,.valve-chip>i{position:absolute;width:6px;height:6px;border-radius:50%;left:7px;top:50%;transform:translateY(-50%);background:#9ca3af}.mini-valve.opened>i,.valve-chip.opened>i{background:var(--green)}.mini-valve.closed>i,.valve-chip.closed>i{background:#687384}.mini-valve.moving>i,.valve-chip.moving>i{background:#d68a23}.mini-valve.fault>i,.valve-chip.fault>i{background:var(--danger)}.tube-action-row{margin-top:10px}.action-button{width:100%;border:0;border-radius:9px;padding:8px 10px;font-size:10px;font-weight:850;cursor:pointer}.action-button.fill{background:var(--green);color:white}.action-button.empty{background:var(--purple);color:white}.action-button.disabled{background:#f0f2f0;color:#9aa09a;cursor:default}.technical-details{margin-top:11px;border-top:1px solid #edf0ec;padding-top:10px}.technical-details summary{cursor:pointer;color:#677067;font-size:10px;font-weight:750}.valve-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-top:8px}.valve-chip{position:relative;display:grid;padding:6px 6px 6px 18px;border:1px solid #edf0ec;border-radius:8px;background:#fafbfa;min-width:0}.valve-chip strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty-state{padding:28px;text-align:center;color:var(--muted);display:grid;gap:5px}.empty-state strong{color:#4b5563}.empty-state.large{background:white;border:1px solid var(--line);border-radius:16px}.mp-drawer{position:fixed;inset:0;z-index:80;pointer-events:none;visibility:hidden}.mp-drawer.open{visibility:visible;pointer-events:auto}.mp-drawer-backdrop{position:absolute;inset:0;border:0;background:rgba(31,41,55,.35);opacity:0;transition:.18s}.mp-drawer.open .mp-drawer-backdrop{opacity:1}.mp-drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(430px,92vw);background:white;transform:translateX(100%);transition:.2s ease;box-shadow:-20px 0 50px rgba(31,41,55,.15);display:flex;flex-direction:column}.mp-drawer.open .mp-drawer-panel{transform:translateX(0)}.mp-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}.mp-drawer-head h2{margin:0;font-size:18px}.mp-incident-list{padding:10px;overflow:auto}.incident-item{padding:11px;border-bottom:1px solid #edf0ec}.incident-item-main{display:flex;gap:9px}.incident-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;background:#d98b24;flex:0 0 auto}.incident-item.critical .incident-dot{background:var(--danger)}.incident-item-main div{display:grid}.incident-item-main strong{font-size:12px}.incident-item-main small{font-size:10px;color:var(--muted);margin-top:3px}.incident-item-actions{display:flex;gap:8px;margin-top:8px}.incident-item-actions a,.incident-item-actions button{border:0;background:#f2f5f1;color:var(--green-dark);border-radius:8px;padding:6px 8px;text-decoration:none;font-size:9px;font-weight:800;cursor:pointer}.mp-toast-stack{position:fixed;right:14px;bottom:14px;z-index:100;display:grid;gap:8px}.mp-toast{padding:10px 12px;border-radius:10px;background:#263426;color:white;font-size:11px;box-shadow:0 10px 30px rgba(31,41,55,.2);opacity:0;transform:translateY(8px);transition:.2s}.mp-toast.show{opacity:1;transform:none}.mp-toast.error{background:#8f2f29}
.auth-shell{min-height:calc(100vh - 52px);display:grid;grid-template-columns:1.1fr .9fr;background:white;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.auth-visual{background:linear-gradient(140deg,#315b2b,#6aa35b);color:white;padding:42px;display:flex;flex-direction:column;justify-content:space-between}.auth-brand-lockup{display:flex;align-items:center;gap:12px}.auth-brand-lockup img{width:56px;height:56px;background:white;border-radius:14px;padding:5px}.auth-brand-lockup div{display:grid}.auth-brand-lockup span{font-size:11px;opacity:.8}.auth-visual-copy h1{font-size:clamp(34px,5vw,56px);line-height:1;margin:5px 0 16px}.auth-visual-copy p{max-width:520px;opacity:.86}.auth-trust{font-size:11px;opacity:.8}.auth-panel{display:grid;place-items:center;padding:34px}.auth-card{width:min(390px,100%)}.auth-card h2{font-size:28px;margin:3px 0 7px}.auth-intro,.auth-note{font-size:12px;color:var(--muted)}.mp-form{display:grid;gap:13px;margin-top:20px}.mp-field{display:grid;gap:5px}.mp-field span{font-size:10px;font-weight:800;color:#596159}.mp-field input{border:1px solid #dfe5dc;border-radius:10px;padding:11px 12px;outline:0}.mp-field input:focus{border-color:#8fba83;box-shadow:0 0 0 3px rgba(98,160,82,.12)}.mp-btn{border:0;border-radius:10px;padding:10px 13px;font-weight:800;cursor:pointer}.mp-btn-primary{background:var(--green);color:white}.mp-btn-wide{width:100%;display:flex;justify-content:space-between}.mp-alert{padding:10px 12px;border-radius:10px;font-size:11px}.mp-alert.is-error{background:#fff0ef;color:#a9342c}
@media(max-width:900px){.tube-grid{grid-template-columns:1fr}.valve-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.installation-row-stats>div{display:none}.auth-shell{grid-template-columns:1fr}.auth-visual{display:none}}@media(max-width:640px){.mp-shell{width:min(100% - 18px,1180px);padding-top:14px}.mp-topbar{height:60px;padding:0 10px}.mp-brand img{width:34px;height:34px}.user-name{display:none}.installation-row{padding:13px}.installation-row-stats{gap:8px}.installation-hero{padding:15px}.installation-hero-status{align-self:flex-start}.controller-card{padding:12px}.controller-head{display:grid}.controller-meta{display:grid;grid-template-columns:1fr 1fr}.controller-title-row{justify-content:space-between}.tube-card-top{grid-template-columns:auto 1fr}.tube-state{grid-column:2}.valve-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-panel{padding:22px}.mp-toast-stack{left:9px;right:9px;bottom:9px}}

/* Passwordless PWA authentication */
.auth-shell-single{min-height:calc(100vh - 52px)}
.mp-alert.is-info{background:#eef8eb;color:#315b2b;border:1px solid #d6e8d1;margin-top:14px}

.auth-secondary-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.mp-text-button{appearance:none;border:0;background:none;padding:0;color:#4f7f45;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none}
.mp-text-button:hover{text-decoration:underline}
.section-label.is-light{color:rgba(255,255,255,.78)}

/* PWA UI refresh 2026-08-25: mobile auth + cleaner authenticated controls */
.mp-icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mp-icon-button:hover{border-color:#cdd7ca;background:#f7faf6;color:var(--green-dark)}
.mp-logout-button:hover{color:#9b342d;background:#fff7f6;border-color:#efd6d3}
.incident-item-actions{justify-content:flex-end}
.incident-item-actions button{min-width:62px}
body {
    min-height: 100%;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.mp-shell {
    flex: 1 0 auto;
}

.mp-pwa-software-by {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 24px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
}
@media(max-width:900px){
    .auth-shell.auth-shell-single{
        min-height:calc(100dvh - 28px);
        display:flex;
        flex-direction:column;
        border-radius:24px;
        overflow:hidden;
        background:#fff;
    }
    .auth-shell-single .auth-visual{
        display:flex;
        min-height:43vh;
        padding:28px 28px 34px;
        justify-content:flex-start;
        gap:0;
        position:relative;
        overflow:hidden;
        background:
                radial-gradient(circle at 82% 18%,rgba(255,255,255,.10),transparent 16rem),
                linear-gradient(145deg,#2f642b 0%,#3f7b36 54%,#5d9950 100%);
    }
    .auth-shell-single .auth-visual::after{
        content:'';
        position:absolute;
        left:-12%;
        right:-12%;
        bottom:-70px;
        height:160px;
        border-radius:50%;
        border-top:1px solid rgba(255,255,255,.08);
        transform:rotate(-5deg);
        box-shadow:0 -28px 0 rgba(255,255,255,.025),0 -56px 0 rgba(255,255,255,.02);
        pointer-events:none;
    }
    .auth-shell-single .auth-brand-lockup{position:relative;z-index:1;gap:11px}
    .auth-shell-single .auth-brand-lockup img{width:50px;height:50px;border-radius:13px;padding:5px}
    .auth-shell-single .auth-brand-lockup strong{font-size:16px;line-height:1}
    .auth-shell-single .auth-brand-lockup span{font-size:10px;margin-top:4px}
    .auth-shell-single .auth-visual-copy{
        position:relative;
        z-index:1;
        margin-top:auto;
        padding-top:60px;
        max-width:520px;
    }
    .auth-shell-single .auth-visual-copy h1{
        font-size:clamp(34px,9vw,48px);
        line-height:1.02;
        letter-spacing:-.035em;
        margin:7px 0 15px;
        max-width:480px;
    }
    .auth-shell-single .auth-visual-copy p{
        font-size:14px;
        line-height:1.55;
        max-width:440px;
        margin:0;
    }
    .auth-shell-single .auth-trust{display:none}
    .auth-shell-single .auth-panel{
        display:block;
        margin-top:-18px;
        position:relative;
        z-index:3;
        padding:28px 28px 32px;
        background:#fff;
        border-radius:24px 24px 0 0;
        flex:1;
    }
    .auth-shell-single .auth-card{width:100%;max-width:520px;margin:0 auto}
    .auth-shell-single .auth-card h2{font-size:27px;line-height:1.08;margin:5px 0 10px;letter-spacing:-.025em}
    .auth-shell-single .auth-intro{font-size:13px;line-height:1.5;margin:0;color:#69736a}
    .auth-shell-single .mp-form{margin-top:22px;gap:14px}
    .auth-shell-single .mp-field span{font-size:10px}
    .auth-shell-single .mp-field input{min-height:50px;padding:13px 14px;border-radius:12px;font-size:15px;background:#fbfcfb}
    .auth-shell-single .mp-btn{min-height:48px;border-radius:12px;padding:12px 14px;font-size:14px}
    .auth-shell-single .auth-note{font-size:11px;line-height:1.5;margin:14px 0 0;padding-left:20px;position:relative;color:#6d756e}
    .auth-shell-single .auth-note::before{content:'•';position:absolute;left:5px;color:var(--green);font-size:16px;line-height:11px;top:2px}
    .auth-shell-single .auth-secondary-actions{margin-top:18px;padding-top:15px;border-top:1px solid #edf0ec}
}

@media(max-width:640px){
    body:has(.auth-shell-single) .mp-shell{width:100%;padding:0;max-width:none}
    body:has(.auth-shell-single){background:#f2f6f0}
    .auth-shell.auth-shell-single{min-height:100dvh;border:0;border-radius:0;box-shadow:none}
    .auth-shell-single .auth-visual{min-height:38vh;padding:24px 22px 34px}
    .auth-shell-single .auth-visual-copy{padding-top:50px}
    .auth-shell-single .auth-visual-copy h1{font-size:38px;max-width:350px}
    .auth-shell-single .auth-visual-copy p{font-size:13px;max-width:360px}
    .auth-shell-single .auth-panel{padding:28px 22px max(30px,env(safe-area-inset-bottom))}
    .auth-shell-single .auth-card h2{font-size:26px}
    .auth-shell-single .section-label{font-size:9px}
}
/* =========================================================
   SLURFSTATUS
   Gevuld = groen
   Leeg = grijs
   Actief proces = blauw
   ========================================================= */

.tube-card.is-full {
    border-left-color: var(--green);
}

.tube-card.is-full .tube-state {
    color: var(--green-dark);
}

.tube-card.is-full .tube-state i {
    background: var(--green);
}


.tube-card.is-empty {
    border-left-color: #9ca3af;
}

.tube-card.is-empty .tube-state {
    color: #667085;
}

.tube-card.is-empty .tube-state i {
    background: #9ca3af;
}


.tube-card.is-busy {
    border-left-color: #3b82f6;
}

.tube-card.is-busy .tube-state {
    color: #1764c0;
}

.tube-card.is-busy .tube-state i {
    background: #3b82f6;
}


/* =========================================================
   PROCESREGEL
   Zelfde hoogte als de normale Vullen/Legen-knoppen
   ========================================================= */

.process-status {
    width: 100%;
    height: 30px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 850;
}


/* Geen actie / offline */

.process-neutral {
    border: 0;
    border-radius: 9px;
    background: #f0f2f0;
    color: #9aa09a;
}


/* =========================================================
   ACTIEF PROCES
   Geen mega achtergrond meer.
   Alleen compacte blauwe pill in dezelfde regel.
   ========================================================= */

.process-status {
    width: 100%;
    height: 28px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 850;
}

.process-running {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #1764c0;
}

.process-running-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    height: 22px;
    min-height: 0;
    padding: 0 9px;

    border-radius: 999px;
    background: #eef5ff;
    border: 1px solid #c5daf8;
}

.process-spinner {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
}

.process-dots {
    gap: 2px;
}

.process-dots i {
    width: 2.5px;
    height: 2.5px;
}
.process-active-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    align-items: center;
}

.process-active-wrap .process-status {
    width: auto;
}

.action-button.reverse-action {
    width: auto;
    min-width: 72px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #a9cfa1;
    background: #f0f8ee;
    color: var(--green-dark);
    border-radius: 8px;
}

.action-button.reverse-action:hover {
    background: #e5f3e1;
    border-color: #8fbd85;
}

/* =========================================================
   PWA SLURF BEDIENING
   Vertrouwde bediening: VULLEN | LEGEN | RESET
   ========================================================= */

.tube-action-row {
    margin-top: auto;
    padding-top: 12px;
}

.tube-control-wrap {
    width: 100%;
}

/*
 * Procesmelding boven de knoppen
 * Bijvoorbeeld: "Wordt geleegd"
 */
.tube-process-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 24px;
    margin: 0 0 8px;

    font-size: 12px;
    font-weight: 700;
    color: #1757a6;
}

.process-spinner {
    display: inline-block;
    width: 9px;
    height: 9px;

    border: 2px solid rgba(59, 130, 246, 0.22);
    border-top-color: #3b82f6;
    border-radius: 50%;

    animation: mp-process-spin 0.8s linear infinite;
}

@keyframes mp-process-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   KNOPPENBALK
   ========================================================= */

.tube-control-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;
    overflow: hidden;

    border: 1px solid #d8dde3;
    border-radius: 7px;

    background: #fff;

    box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 2px 5px rgba(15, 23, 42, 0.04);
}

/*
 * Wanneer RESET aanwezig is worden het automatisch
 * drie gelijke knoppen.
 */
.tube-control-bar.has-reset {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   BASIS KNOP
   ========================================================= */

.tube-control-button {
    appearance: none;
    -webkit-appearance: none;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 38px;

    padding: 9px 10px;

    border: 0;
    border-right: 1px solid #d8dde3;
    border-radius: 0;

    background: #f8faf9;
    color: #66717d;

    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;

    cursor: pointer;

    transition:
            background-color 0.15s ease,
            color 0.15s ease,
            box-shadow 0.15s ease,
            opacity 0.15s ease;
}

.tube-control-button:last-child {
    border-right: 0;
}

.tube-control-button:hover:not(:disabled) {
    background: #f0f3f1;
}

.tube-control-button:focus-visible {
    position: relative;
    z-index: 2;

    outline: 2px solid #2563eb;
    outline-offset: -2px;
}


/* =========================================================
   VULLEN
   ========================================================= */

/*
 * Normale actieve vulknop.
 * Zelfde idee als de oude groene VULLEN knop.
 */
.tube-control-button.fill.is-primary-fill {
    background: #58a84f;
    color: #fff;
}

.tube-control-button.fill.is-primary-fill:hover:not(:disabled) {
    background: #4b9844;
}


/*
 * Tijdens legen mag VULLEN gebruikt worden om terug
 * te schakelen. Dan groen omlijnd i.p.v. volledig groen.
 */
.tube-control-button.fill.is-reverse-fill {
    background: #f7fcf5;
    color: #28751f;

    box-shadow: inset 0 0 0 1px #9bcf94;
}

.tube-control-button.fill.is-reverse-fill:hover:not(:disabled) {
    background: #edf8e9;
}


/* =========================================================
   LEGEN
   ========================================================= */

/*
 * Normale actieve leegknop.
 *
 * Ik gebruik hier paars zodat deze aansluit op je huidige
 * MegaPlatform PWA.
 */
.tube-control-button.empty.is-primary-empty {
    background: #6954d9;
    color: #fff;
}

.tube-control-button.empty.is-primary-empty:hover:not(:disabled) {
    background: #5b47c8;
}


/*
 * Tijdens vullen kan LEGEN de tegenovergestelde opdracht zijn.
 */
.tube-control-button.empty.is-reverse-empty {
    background: #f8f7ff;
    color: #5540c3;

    box-shadow: inset 0 0 0 1px #b8adef;
}

.tube-control-button.empty.is-reverse-empty:hover:not(:disabled) {
    background: #f0edff;
}


/* =========================================================
   LOPENDE ACTIE
   ========================================================= */

/*
 * De knop van het proces dat NU loopt is blauw.
 *
 * Bijvoorbeeld:
 *
 * VULLEN | LEGEN
 *          ^^^^^
 *          blauw als hij aan het legen is
 *
 * Deze knop is statusweergave en daarom disabled.
 */
.tube-control-button.is-running,
.tube-control-button.is-running:disabled {
    background: #eaf3ff;
    color: #1459ad;

    opacity: 1;

    box-shadow: inset 0 0 0 1px #b8d5fb;

    cursor: default;
}


/* =========================================================
   RESET
   ========================================================= */

/*
 * Deze wordt alleen gerenderd als reset_action bestaat.
 * Dus straks alleen bij een echte fouttoestand.
 */
.tube-control-button.reset {
    background: #b3412f;
    color: #fff;

    box-shadow: inset 0 0 0 1px #e8b7ae;
}

.tube-control-button.reset:hover:not(:disabled) {
    background: #963323;
    color: #fff;
}


/* =========================================================
   DISABLED
   ========================================================= */

/*
 * Belangrijk:
 * .is-running blijft hierboven bewust zichtbaar.
 */
.tube-control-button:disabled:not(.is-running) {
    background: #eceeef;
    color: #b5bac0;

    box-shadow: none;

    opacity: 1;
    cursor: not-allowed;
}


/* =========================================================
   BUSY CARD
   ========================================================= */

.tube-card.is-busy {
    border-left-color: #3b82f6;
}

.tube-card.is-busy .tube-state {
    color: #1757a6;
}


/* =========================================================
   FOUT CARD
   ========================================================= */

.tube-card.is-fault {
    border-left-color: #dc5546;
}

.tube-card.is-fault .tube-state {
    color: #b33b2f;
}


/* =========================================================
   GEVULD / LEEG
   ========================================================= */

.tube-card.is-full {
    border-left-color: #59a94f;
}

.tube-card.is-empty {
    border-left-color: #3b82f6;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 800px) {
    .tube-control-button {
        min-height: 36px;
        font-size: 11px;
    }

    .tube-process-label {
        font-size: 11px;
    }
}


/* =========================================================
   MOBIEL / PWA
   ========================================================= */

@media (max-width: 640px) {
    .tube-action-row {
        padding-top: 10px;
    }

    .tube-control-button {
        min-height: 44px;
        padding: 11px 8px;

        font-size: 12px;
    }

    .tube-control-bar {
        border-radius: 8px;
    }

    .tube-process-label {
        min-height: 22px;
        margin-bottom: 7px;
    }
}


/* =========================================================
   ZEER SMALLE TELEFOONS
   ========================================================= */

@media (max-width: 380px) {
    .tube-control-button {
        padding-left: 5px;
        padding-right: 5px;

        font-size: 11px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .process-spinner {
        animation: none;
    }

    .tube-control-button {
        transition: none;
    }
}

/* =========================================================
   PWA SLURF BEDIENING - compacte processtatus
   ========================================================= */

.tube-action-row {
    margin-top: 10px;
    padding-top: 0;
}

.tube-process-label {
    display: none;
}

.tube-process-chip {
    position: relative;
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    min-width: 118px !important;
    padding-left: 9px !important;
    background: #f3f7fd !important;
    border-color: #d6e3f5 !important;
}

.tube-process-chip .tube-process-spinner {
    grid-row: 1 / 3;
    align-self: center;
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1.5px solid rgba(59, 130, 246, .22);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: mp-process-spin .75s linear infinite;
}

.tube-process-chip small,
.tube-process-chip strong {
    min-width: 0;
}

.tube-process-chip strong {
    color: #1764c0;
    white-space: nowrap;
}

.tube-control-button.fill.is-running,
.tube-control-button.fill.is-running:disabled {
    position: relative;

    background: #4f9146;
    color: #fff;

    opacity: 1;
    cursor: default;

    box-shadow:
            inset 0 0 0 2px rgba(255,255,255,.18);
}

.tube-control-button.empty.is-running,
.tube-control-button.empty.is-running:disabled {
    position: relative;

    background: #5947b8;
    color: #fff;

    opacity: 1;
    cursor: default;

    box-shadow:
            inset 0 0 0 2px rgba(255,255,255,.18);
}

/* Klein bewegend puntje links van actieve actie */

.tube-control-button.is-running::before {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 7px;

    border-radius: 50%;

    background: currentColor;

    animation: tube-running-pulse 1s ease-in-out infinite;
}

@keyframes tube-running-pulse {
    0%,
    100% {
        opacity: .35;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.tube-control-button.fill.is-reverse-fill {
    background: var(--green);
    color: #fff;
    box-shadow: none;
}

.tube-control-button.fill.is-reverse-fill:hover:not(:disabled) {
    background: #4b9844;
}

.tube-control-button.empty.is-reverse-empty {
    background: var(--purple);
    color: #fff;
    box-shadow: none;
}

.tube-control-button.empty.is-reverse-empty:hover:not(:disabled) {
    background: #5b47c8;
}

@media (max-width: 640px) {
    .tube-action-row {
        padding-top: 0;
    }

    .tube-process-chip {
        min-width: 105px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tube-process-chip .tube-process-spinner {
        animation: none;
    }
}
/* =========================================================
   LOPENDE ACTIE = STATUS, GEEN KLIKBARE KNOP
   ========================================================= */

.tube-control-button.is-running,
.tube-control-button.is-running:disabled {
    position: relative;

    opacity: 1;
    cursor: default;

    color: #6f6a86;

    background:
            linear-gradient(
                    90deg,
                    #eeeaf8 0%,
                    #f5f3fa 50%,
                    #eeeaf8 100%
            );

    border-color: #d8d2ea;

    box-shadow:
            inset 0 0 0 1px rgba(109, 91, 208, .08);

    background-size: 200% 100%;

    animation: running-status-sheen 2.2s ease-in-out infinite;
}

/* Lopend vullen iets groener/grijzer */

.tube-control-button.fill.is-running,
.tube-control-button.fill.is-running:disabled {
    color: #53734d;

    background:
            linear-gradient(
                    90deg,
                    #e8f0e6 0%,
                    #f2f6f1 50%,
                    #e8f0e6 100%
            );

    border-color: #cfdccb;

    box-shadow:
            inset 0 0 0 1px rgba(98, 160, 82, .08);

    background-size: 200% 100%;
}

/* Lopend legen: rustig paars/grijs */

.tube-control-button.empty.is-running,
.tube-control-button.empty.is-running:disabled {
    color: #665e82;

    background:
            linear-gradient(
                    90deg,
                    #ece9f5 0%,
                    #f5f3f8 50%,
                    #ece9f5 100%
            );

    border-color: #d8d2e6;

    box-shadow:
            inset 0 0 0 1px rgba(109, 91, 208, .08);

    background-size: 200% 100%;
}

/* Statuspuntje */

.tube-control-button.is-running::before {
    content: "";

    width: 6px;
    height: 6px;

    margin-right: 7px;

    border-radius: 50%;

    background: currentColor;

    opacity: .75;

    animation: running-status-dot 1.1s ease-in-out infinite;
}

@keyframes running-status-sheen {
    0% {
        background-position: 100% 0;
    }

    50% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@keyframes running-status-dot {
    0%,
    100% {
        opacity: .35;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tube-control-button.is-running,
    .tube-control-button.is-running::before {
        animation: none;
    }
}

/* =========================================================
   SLURF STATUSBATTERIJ
   Vol / leeg = groen
   Tussenstatus = oranje
   Fout = rood
   ========================================================= */

.tube-process-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tube-battery-icon {
    flex: 0 0 auto;

    width: 20px;

    font-size: 14px;
    line-height: 1;

    text-align: center;
}


/* Eindstatus: VOL of LEEG */
.tube-battery-icon.is-stable {
    color: var(--green);
}


/* Actie bezig */
.tube-battery-icon.is-working {
    color: #d98b24;

    animation: tube-battery-working 1.15s ease-in-out infinite;
}


/* Fout */
.tube-battery-icon.is-fault {
    color: var(--danger);
}


/* Onbekend */
.tube-battery-icon.is-neutral {
    color: #9ca3af;
}


/* Subtiele animatie voor tussenstatus */
@keyframes tube-battery-working {
    0%,
    100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}


@media (prefers-reduced-motion: reduce) {
    .tube-battery-icon.is-working {
        animation: none;
    }
}

/* =========================================================
   Slurf status - oude app herkenbaarheid
   spinner + batterij + richting + tekst
   ========================================================= */

.tube-process-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* Batterij ongeveer formaat oude app */
.tube-battery-icon {
    display: inline-block;
    width: 20px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    flex: 0 0 auto;
}

/* Draaiend procesicoon */
.tube-process-spin {
    display: inline-block;
    width: 12px;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    flex: 0 0 auto;
}

/* Richting vullen / legen */
.tube-direction-icon {
    display: inline-block;
    width: 13px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    flex: 0 0 auto;
}

/*
 * Vol en leeg:
 * beide groen, net zoals de oude statusweergave.
 */
.tube-process-status .is-stable {
    color: #15931f;
}

/*
 * Bezig:
 * navullen / vullen / legen / verzoek.
 */
.tube-process-status .is-working {
    color: #e68a00;
}

/* Storing */
.tube-process-status .is-fault {
    color: #c83b32;
}

/* Onbekend / opstart */
.tube-process-status .is-neutral {
    color: #98a2b3;
}

/* =========================================================
   MOBILE OTP / CODE INPUT FIX
   Voorkomt dat het codeveld buiten het scherm loopt
   ========================================================= */

.auth-card,
.mp-form,
.mp-field {
    min-width: 0;
    max-width: 100%;
}

.mp-field input,
.otp-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
}

/* Codeveld */
.otp-input {
    text-align: center;

    font-size: 26px !important;
    font-weight: 800;

    letter-spacing: .20em !important;

    /*
     * Oude 1.1em padding-left eruit.
     * Gewone gelijke padding voorkomt overflow
     * en houdt de code gecentreerd.
     */
    padding-left: 14px !important;
    padding-right: 14px !important;

    font-variant-numeric: tabular-nums;
}

/* Kleinere telefoons */
@media (max-width: 480px) {
    .auth-shell-single .auth-panel {
        min-width: 0;
        overflow-x: hidden;
    }

    .auth-shell-single .auth-card {
        width: 100%;
        min-width: 0;
    }

    .otp-input {
        font-size: 23px !important;
        letter-spacing: .16em !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Heel smalle telefoons */
@media (max-width: 360px) {
    .otp-input {
        font-size: 21px !important;
        letter-spacing: .12em !important;
    }
}

/* =========================================================
   PWA WEERGAVEMODI
   Eenvoudig = boer / heftruck
   Geavanceerd = technische details
   ========================================================= */

/* Geavanceerde informatie standaard verbergen. */
[data-advanced-only] {
    display: none !important;
}

/* Eenvoudige informatie alleen tonen zolang advanced uit staat. */
.pwa-advanced-mode [data-simple-only] {
    display: none !important;
}

/* Technische blokken in advanced met hun oorspronkelijke layout herstellen. */
.pwa-advanced-mode .installation-hero[data-advanced-only] {
    display: flex !important;
}

.pwa-advanced-mode .controller-meta[data-advanced-only] {
    display: flex !important;
}

.pwa-advanced-mode .tube-info-row[data-advanced-only] {
    display: flex !important;
}

.pwa-advanced-mode details[data-advanced-only] {
    display: block !important;
}

/* Losse tekst/blokken die advanced-only zijn. */
.pwa-advanced-mode p[data-advanced-only],
.pwa-advanced-mode div[data-advanced-only]:not(.controller-meta):not(.tube-info-row) {
    display: block !important;
}

/* Advanced-toggle */
.mp-advanced-button.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.mp-advanced-button:disabled {
    opacity: .6;
    cursor: wait;
}
.tube-card {
    position: relative;
}

.tube-reset-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;

    min-height: 32px;
    padding: 0 11px;

    border: 1px solid var(--danger);
    border-radius: 8px;

    background: var(--danger);
    color: #fff;

    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
            0 1px 2px rgba(194, 59, 49, .18);

    transition:
            background-color .15s ease,
            border-color .15s ease,
            transform .15s ease;
}

.tube-reset-button:hover:not(:disabled) {
    background: #a9342c;
    border-color: #a9342c;
}

.tube-reset-button:active:not(:disabled) {
    transform: translateY(1px);
}

.tube-reset-button:disabled {
    background: #e8b5b0;
    border-color: #e8b5b0;
    color: #fff;
    opacity: .65;
    cursor: not-allowed;
}

/* =========================================================
   EENVOUDIGE MODUS - BOER / HEFTRUCK
   ========================================================= */

html:not(.pwa-advanced-mode) .mp-shell {
    padding-top: 12px;
}

html:not(.pwa-advanced-mode) .controller-list {
    gap: 10px;
    margin-top: 10px;
}

html:not(.pwa-advanced-mode) .controller-card {
    padding: 11px 12px;
    border-radius: 16px;
}

html:not(.pwa-advanced-mode) .controller-head {
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid #edf0ec;
}

html:not(.pwa-advanced-mode) .controller-title-row {
    gap: 7px;
}

html:not(.pwa-advanced-mode) .controller-title-row h2 {
    font-size: 18px;
    line-height: 1.1;
}

html:not(.pwa-advanced-mode) .tube-grid {
    gap: 8px;
    margin-top: 9px;
}

html:not(.pwa-advanced-mode) .tube-card {
    padding: 9px 11px 10px;
}

html:not(.pwa-advanced-mode) .tube-card-top {
    margin: 0;
}

html:not(.pwa-advanced-mode) .tube-action-row {
    margin-top: 8px;
    padding-top: 0;
}

html:not(.pwa-advanced-mode) .tube-control-button {
    min-height: 44px;
}

/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 640px) {
    .pwa-advanced-mode .installation-hero[data-advanced-only] {
        display: flex !important;
    }

    .pwa-advanced-mode .controller-meta[data-advanced-only] {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .pwa-advanced-mode .tube-info-row[data-advanced-only] {
        display: flex !important;
    }

    html:not(.pwa-advanced-mode) .controller-card {
        padding: 10px;
    }

    html:not(.pwa-advanced-mode) .tube-card {
        padding: 9px 10px 10px;
    }
}