/* RC11: klokscherm (leesbare status, extra regel na een scan), digitaal klokken in het portaal en beheeronderdelen. */

/* Klokscherm: de verbindingsstatus blijft ook op het kleine scherm als tekst leesbaar. */
@media(max-width:800px){.kiosk-page .connection{font-size:12px;padding:7px 11px}}
.kiosk-page .connection.offline{border-color:#dfaaa5;background:var(--red-soft);color:var(--red);font-weight:750}
/* RC12: het TVT-saldo is op het kleine scherm goed leesbaar. */
.scan-extra{display:block;margin-top:12px;color:var(--ink);font-size:1.05em;font-weight:800;font-variant-numeric:tabular-nums}
.scan-card.checkout .scan-extra{color:var(--ink);font-size:.95em}
.kiosk-page footer{justify-content:flex-start}

/* Portaal: digitaal in- en uitklokken bij thuiswerken. */
.rc11-clock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;border-left:5px solid var(--green)}
.rc11-clock h2{margin-bottom:4px}.rc11-clock p{margin:0}
.rc11-clock-state{font-size:18px;font-weight:750}
.rc11-clock .button{min-width:190px;min-height:56px;font-size:18px}
.rc11-clock .button[disabled]{opacity:.55;cursor:not-allowed}
.rc11-clock-message{grid-column:1/-1;min-height:20px;font-weight:650;color:var(--green)}
.rc11-clock-message.problem{color:var(--red)}
.rc11-clock.office{border-left-color:var(--blue)}.rc11-clock.stale{border-left-color:var(--amber)}
.rc11-notice{grid-column:1/-1;padding:10px 12px;border-radius:10px;background:var(--amber-soft);color:var(--amber);font-weight:650}
@media(max-width:700px){.rc11-clock{grid-template-columns:1fr}.rc11-clock .button{width:100%}}

/* Beheer: instellingen van de klok, kantooradres en toestand van de klok. */
.rc11-settings{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.rc11-settings h3{margin:0 0 4px}
.rc11-devices{display:grid;gap:8px;margin-top:10px}
.rc11-device{padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.rc11-device strong{font-size:13px}.rc11-device.problem{border-color:#dfaaa5;background:var(--red-soft)}
.rc11-employment{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#faf9f5}
.rc11-employment h3{margin:0 0 4px}.rc11-employment form{margin-top:12px}
.rc11-end-badge{margin-left:6px}
.badge.rc11-remote{margin-left:6px;background:var(--blue-soft);color:var(--blue)}
.form-message.problem{color:var(--red)}
.record-item.rc11-warning-high{border-left:4px solid var(--red)}
.record-item.rc11-warning-medium{border-left:4px solid var(--amber)}