/* Mobile first fürs Portal (docs/mobil-pwa-benachrichtigungen.md): Grundregeln gelten für das Handy, ab lg (64rem,
   Seitenleiste fest) wird zurückgenommen. Leiste unten: resources/views/filament/leiste-unten.blade.php. */
:root { --ok-leiste: 3.6rem; }

/* Kein Hineinzoomen am iPhone beim Antippen eines Feldes: Eingaben mindestens 16 px */
input, select, textarea { font-size: max(16px, 1em); }

/* Tippziele mindestens 44 px (WCAG 2.5.5): Symbolknöpfe in Tabellen, Kopfzeile und Seitenleiste */
.fi-ta-actions .fi-icon-btn, .uge-kopfknopf, .uge-glocke, .uge-fuss-knopf { min-width: 2.75rem; min-height: 2.75rem; }

/* Sichere Ränder (Notch, Home-Leiste) bei viewport-fit=cover */
.fi-topbar { padding-top: env(safe-area-inset-top); }
.fi-sidebar { padding-bottom: env(safe-area-inset-bottom); }

/* Leiste unten */
.ok-leiste {
    position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: calc(var(--ok-leiste) + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(17, 24, 39, .08);
}
.dark .ok-leiste { background: rgba(17, 24, 39, .92); border-top-color: rgba(255, 255, 255, .08); }
.ok-leiste-punkt {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-height: 2.75rem; border: 0; background: transparent; color: #6B7280; font: inherit; font-size: .68rem; font-weight: 500;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ok-leiste-punkt .bi { font-size: 1.3rem; line-height: 1; }
.ok-leiste-punkt[aria-current="page"] { color: var(--primary-600, #1E4034); font-weight: 700; }
.dark .ok-leiste-punkt { color: #9CA3AF; }
.dark .ok-leiste-punkt[aria-current="page"] { color: #fff; }
.ok-leiste-punkt:active { transform: scale(.94); }
.ok-leiste-zahl {
    position: absolute; top: .3rem; left: calc(50% + .35rem); min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 999px;
    background: var(--uge-akzent, #D9A441); color: var(--uge-akzent-text, #15201B); font-size: .65rem; line-height: 1.1rem; font-weight: 700;
}
/* Platz für die Leiste: Inhalt, Fußzeile und Hinweisfenster rutschen darüber */
.fi-main-ctn { padding-bottom: calc(var(--ok-leiste) + env(safe-area-inset-bottom)); }
.uge-toast { bottom: calc(var(--ok-leiste) + env(safe-area-inset-bottom) + .75rem); right: .75rem; width: calc(100vw - 1.5rem); }
/* Der Menüknopf oben ist neben der Leiste doppelt */
.fi-topbar .fi-topbar-open-sidebar-btn { display: none; }

@media (min-width: 64rem) {
    .ok-leiste { display: none; }
    .fi-main-ctn { padding-bottom: 0; }
    .uge-toast { bottom: 1rem; right: 1rem; width: min(24rem, calc(100vw - 2rem)); }
    .fi-topbar .fi-topbar-open-sidebar-btn { display: revert; }
}
@media print { .ok-leiste { display: none; } }

/* Einhändig mit rechts: Der Daumen erreicht rechts unten am besten, oben links am schlechtesten. Deshalb am Handy
   Menü von rechts mit den Einträgen unten, Knöpfe rechtsbündig (Hauptknopf ganz rechts, AppServiceProvider),
   Dialoge als Blatt von unten, Formularknöpfe beim Scrollen fest über der Leiste. */
@media (max-width: 63.99rem) {
    .fi-sidebar { inset-inline-start: auto; inset-inline-end: 0; flex-direction: column-reverse; padding-bottom: calc(var(--ok-leiste) + env(safe-area-inset-bottom)); }
    .fi-sidebar:not(.fi-sidebar-open) { translate: 100% 0; }
    .fi-sidebar-nav > :first-child { margin-top: auto; }
    .fi-header-actions-ctn { margin-inline-start: auto; }
    .fi-header-actions-ctn > .fi-ac { justify-content: flex-end; }
    .fi-sc-actions.fi-sticky .fi-ac { bottom: calc(var(--ok-leiste) + env(safe-area-inset-bottom)); }
}
@media (max-width: 39.99rem) {
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn {
        grid-template-rows: 1fr auto 0; padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
    }
}

/* Seite Benachrichtigungen: Schalter für dieses Gerät und Geräteliste */
.ok-push-schalter {
    display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 3rem; padding: .6rem 1.25rem;
    border-radius: 999px; border: 2px solid var(--primary-600, #1E4034); background: transparent; color: var(--primary-600, #1E4034);
    font: inherit; font-weight: 600; cursor: pointer;
}
.ok-push-schalter[data-stand="an"] { background: var(--primary-600, #1E4034); color: #fff; }
.ok-push-schalter[data-stand="gesperrt"] { border-color: #b91c1c; color: #b91c1c; }
.ok-push-schalter[data-stand="arbeitet"] { opacity: .6; cursor: progress; }
.dark .ok-push-schalter { border-color: #fff; color: #fff; }
.dark .ok-push-schalter[data-stand="an"] { background: #fff; color: #111827; }
@media (min-width: 40rem) { .ok-push-schalter { width: auto; } }
.ok-geraete-liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ok-geraete-liste li { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: .75rem; background: rgba(17, 24, 39, .04); }
.dark .ok-geraete-liste li { background: rgba(255, 255, 255, .05); }
.ok-geraete-liste li > .bi { font-size: 1.25rem; opacity: .7; }
.ok-geraet-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ok-geraet-text small { opacity: .65; }
.ok-geraet-weg { min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; opacity: .6; }
.ok-geraet-weg:hover { opacity: 1; color: #b91c1c; background: rgba(185, 28, 28, .08); }
.ok-geraete-leer { margin: .75rem 0 0; opacity: .65; font-size: .9rem; }

/* Seite AV-Vertrag: Stand, Liste der Abschlüsse */
.ok-av { display: grid; gap: 1rem; }
.ok-av-stand { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: .75rem; background: rgba(17, 24, 39, .04); }
.ok-av-stand p { margin: .25rem 0 0; }
.ok-av-offen { background: rgba(217, 119, 6, .1); }
.ok-av-ok { background: rgba(22, 163, 74, .08); }
.dark .ok-av-stand { background: rgba(255, 255, 255, .05); }
.ok-av-symbol { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.ok-av-titel { margin: .5rem 0 0; font-weight: 600; }
.ok-av-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ok-av-liste li { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: .75rem; background: rgba(17, 24, 39, .04); }
.dark .ok-av-liste li { background: rgba(255, 255, 255, .05); }
.ok-av-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ok-av-text small { opacity: .65; }
.ok-av-laden { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--primary-600, #1E4034); cursor: pointer; }
.ok-av-laden:hover { background: rgba(17, 24, 39, .06); }