/* a-alerts.nl/status */
:root { --ok: #16A34A; --ok-t: #15803D; --warn: #F59E0B; --warn-t: #B45309; --down: #DC2626; --down-t: #B91C1C; --maint: #3B82F6; --maint-t: #1D4ED8; --geen: #d4d4dc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok-t: #4ADE80; --warn-t: #FBBF24; --down-t: #F87171; --maint-t: #93C5FD; --geen: #33333d; } }
:root[data-theme="dark"] { --ok-t: #4ADE80; --warn-t: #FBBF24; --down-t: #F87171; --maint-t: #93C5FD; --geen: #33333d; }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.st-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.st-head .wrap { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand b { font-family: var(--display); font-weight: 900; font-size: 1.35rem; }
.brand .sub { color: var(--muted); font-weight: 500; }
.brand .shield img { border-radius: 9px; display: block; }
.st-head nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.st-head nav a { font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--text); padding: 10px 14px; border-radius: 999px; }
.st-head nav a.pill-dark { background: var(--text); color: var(--bg); }

.st-main { padding-top: 28px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 26px; }
h2 { margin: 0 0 12px; font-size: 1.2rem; }

.hero { border-radius: 22px; padding: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: #fff; background: #6b6b78; }
.hero[data-staat="ok"] { background: #15803D; }
.hero[data-staat="warn"] { background: #B45309; }
.hero[data-staat="down"] { background: #B91C1C; }
.hero[data-staat="maint"] { background: #1D4ED8; }
.hero-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.18) center / 28px no-repeat; flex: none; }
.hero[data-staat="ok"] .hero-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.hero:not([data-staat="ok"]):not([data-staat="laden"]) .hero-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.hero-text { flex: 1 1 300px; min-width: 0; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; }
.hero p { margin: 6px 0 0; opacity: .92; }
.hero-tijd { font-size: .82rem; opacity: .9; text-align: right; }
.hero-tijd b { font-size: .95rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.inc { padding: 22px 24px; }
.inc + .inc { margin-top: 12px; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.tag.storing { color: #991B1B; background: #FEE2E2; }
.tag.vertraagd { color: #92400E; background: #FEF3C7; }
.tag.onderhoud { color: #1E40AF; background: #DBEAFE; }
.tag.opgelost { color: #166534; background: #DCFCE7; }
.inc .betreft { font-size: .85rem; color: var(--muted); margin-left: 8px; }
.inc h3 { margin: 10px 0 12px; font-size: 1.2rem; }
.inc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.inc li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
.inc li p { margin: 0; }
.inc li small { color: var(--muted); }

.ond-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ond-head h2 { margin: 0; }
.legenda { margin-left: auto; font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
i.ok, .bar span.ok, .dot.ok { background: var(--ok); }
i.warn, .bar span.warn, .dot.warn { background: var(--warn); }
i.down, .bar span.down, .dot.down { background: var(--down); }
i.maint, .bar span.maint, .dot.maint { background: var(--maint); }
i.geen, .bar span.geen { background: var(--geen); }
.groep { overflow: hidden; margin-bottom: 14px; }
.groep h3 { margin: 0; padding: 12px 20px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.comp { padding: 14px 20px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.comp:last-child { border-bottom: 0; }
.comp-top { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.comp-top b { font-weight: 600; }
.comp-top .detail { font-size: .85rem; color: var(--muted); }
.comp-top .st { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.st.ok { color: var(--ok-t); } .st.warn { color: var(--warn-t); } .st.down { color: var(--down-t); } .st.maint { color: var(--maint-t); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.bar { display: flex; gap: 2px; height: 28px; }
.bar span { flex: 1 1 0; min-width: 1px; border-radius: 2px; }
.bar-foot { display: flex; font-size: .75rem; color: var(--muted); }
.bar-foot b { margin: 0 auto; color: var(--text); font-weight: 600; }
@media (max-width: 600px) { .bar span:nth-child(-n+60) { display: none; } .bar-foot .van::before { content: "30 dagen geleden"; } .bar-foot .van span { display: none; } }

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tegel { padding: 14px 18px; }
.tegel small { color: var(--muted); font-size: .82rem; }
.tegel div { font-family: var(--display); font-weight: 900; font-size: 1.8rem; line-height: 1.2; }

.hist { padding: 14px 20px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
.hist + .hist { margin-top: 10px; }
.hist h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.hist p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.leeg { padding: 16px 20px; color: var(--muted); }
@media (max-width: 600px) { .inc li, .hist { grid-template-columns: 1fr; gap: 2px; } .hero-tijd { text-align: left; } }

.st-foot { border-top: 1px solid var(--line); background: var(--surface); }
.st-foot .wrap { padding-top: 20px; padding-bottom: 20px; display: flex; gap: 10px 18px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.st-foot .right { margin-left: auto; }