/* Ergänzungen zu Framework7 (iOS-Theme) */
:root {
    --f7-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}


.sync-status {
    display: flex; align-items: center; gap: 6px;
    margin: 0 calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left)) 4px;
    font-size: 13px; color: var(--f7-block-footer-text-color, #8e8e93);
}
.sync-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; }
.sync-status .dot.bad { background: #ff3b30; }

.block-segmented { margin-top: 12px; margin-bottom: 4px; }

/* Datums-Kachel links in Listen */
.date-badge {
    width: 44px; padding: 5px 0; border-radius: 10px; text-align: center; line-height: 1.05;
    background: rgba(120, 120, 128, .12);
}
.date-badge .wd { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #8e8e93; }
.date-badge .day { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.date-badge .mon { display: block; font-size: 11px; color: #8e8e93; font-variant-numeric: tabular-nums; }
.date-badge.today { background: #c8102e; color: #fff; }
.date-badge.today .wd, .date-badge.today .mon { color: rgba(255, 255, 255, .8); }

.media-list .item-media { align-self: flex-start; padding-top: 10px; }
.item-title .code, .detail-hero .code { color: var(--f7-theme-color); font-weight: 700; }
.item-title .code { margin-right: 4px; }
.media-list .item-text { -webkit-line-clamp: 3; }
.item-text .badge { margin-right: 4px; vertical-align: 1px; }
.item-subtitle sup { font-size: 10px; }
.note-dot { color: #ff9500; margin-right: 6px; font-weight: 700; }
li.is-removed .item-title { text-decoration: line-through; opacity: .6; }

/* Detailansicht */
.detail-hero { text-align: center; padding: 18px 16px 6px; }
.detail-hero .code { font-size: 15px; letter-spacing: .02em; }
.detail-hero .where { font-size: 24px; font-weight: 700; margin-top: 2px; }
.detail-hero .when { font-size: 17px; color: #8e8e93; margin-top: 4px; font-variant-numeric: tabular-nums; }
.detail-hero .badges { margin-top: 8px; display: flex; gap: 6px; justify-content: center; }
.remark { font-size: 14px; }
.list .item-after { white-space: normal; text-align: right; max-width: 65%; }

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(180deg, #a1a1aa, #71717a); color: #fff;
    font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.avatar.large { width: 48px; height: 48px; font-size: 18px; }

.note-form textarea { min-height: 96px; }

.empty { text-align: center; color: #8e8e93; padding-top: 40px; }
.empty-icon { font-size: 40px; margin-bottom: 8px; }
.toast-check { font-size: 34px; line-height: 1; }

/* Login-Seite (ohne Framework7-JS) */
.login-page { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.login-logo { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 12px; display: block; box-shadow: 0 6px 20px rgba(200, 16, 46, .25); }
.login-title { text-align: center; font-size: 28px; font-weight: 700; }
.login-sub { text-align: center; color: #8e8e93; margin-bottom: 8px; }
.login-error { color: #ff3b30; text-align: center; font-size: 14px; }
.hidden { display: none !important; }

.badge.badge-gray, .badge.color-muted { background: #8e8e93; color: #fff; }

.alarm-text { white-space: pre-wrap; font-size: 16px; line-height: 1.45; }

/* Tab-Leiste: Layout komplett Framework7 überlassen, nur Größen über dessen Variablen.
   SVG-Icons übernehmen die F7-Icongröße (F7 erwartet sonst Icon-Fonts). */
.ios {
    --f7-tabbar-icon-size: 26px;
    --f7-tabbar-label-font-size: 10px;
    --f7-tabbar-label-tablet-font-size: 11px;
    --f7-tabbar-label-font-weight: 500;
}
.tabbar i.icon svg { width: var(--f7-tabbar-icon-size); height: var(--f7-tabbar-icon-size); display: block; }
/* Breite Bildschirme: F7 zeigt die Aktiv-Markierung als 1/n der Leiste -> Tabs gleich breit machen */
@media (min-width: 768px) {
    .ios .tabbar .tab-link { width: 92px; min-width: 92px; flex: 0 0 92px; padding-left: 0; padding-right: 0; }
}

.list-button.passkey-add { color: var(--f7-theme-color); }

/* Hauptseiten mit großem Titel: leere Navbar-Zeile (F7 v9: 76px) auf klassisches iOS-Maß kürzen.
   Detailseiten (Zurück-Knopf) bleiben unverändert. */
.ios .page:has(> .navbar-large) { --f7-navbar-height: 44px; }
.ios .navbar-large .navbar-inner { padding-top: var(--f7-safe-area-top); padding-bottom: 0; }
/* Scroll-Kante (iOS-26-Stil) etwas kräftiger, damit der kleine Titel über Inhalt lesbar bleibt */
.ios .navbar-bg::before { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ios .navbar-bg::after {
    background-image: linear-gradient(to bottom,
        var(--f7-navbar-bg-color, var(--f7-bars-bg-color)) calc(60% + var(--f7-safe-area-top, 0px)),
        transparent 100%);
}

/* ===================== Jury-Runde 1 ===================== */

/* Akzentrot: hell Markenrot, dunkel aufgehellt (Kontrast ≥ 4.5:1 auf #1c1c1e/#3a3a3c) */
html.dark { --f7-theme-color: #ff5a67 !important; --f7-theme-color-rgb: 255, 90, 103 !important; }
/* Sekundärtexte mit tragender Info: dunkler als F7-Standard */
:root { --sec-text: #6c6c70; --tag-fs: 12px; }
html.dark { --sec-text: #aeaeb2; }

/* Dienstcode als neutraler Chip statt Rot (Rot = Aktion) */
.code-chip {
    display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px;
    font-size: 13px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums;
    background: rgba(120,120,128,.14); color: inherit; vertical-align: 1px;
}
html.dark .code-chip { background: rgba(120,120,128,.32); }
.code-chip-lg { font-size: 15px; padding: 2px 9px; margin: 0 0 6px; }
.item-title .code { color: inherit; }

/* Getönte Abzeichen (iOS-Stil): farbige Schrift auf 14–16 % Farbfläche */
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tags-center { justify-content: center; margin-top: 10px; }
.tag { display: inline-block; font-size: var(--tag-fs); line-height: 16px; font-weight: 600; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.tag-blue   { background: rgba(0,122,255,.13);  color: #0058c4; }
.tag-green  { background: rgba(52,199,89,.16);  color: #1b7a32; }
.tag-orange { background: rgba(255,149,0,.17);  color: #a85400; }
.tag-red    { background: rgba(255,59,48,.13);  color: #c41e14; }
.tag-gray   { background: rgba(120,120,128,.14); color: #48484a; }
html.dark .tag-blue   { background: rgba(10,132,255,.22);  color: #64a8ff; }
html.dark .tag-green  { background: rgba(48,209,88,.20);   color: #4ade80; }
html.dark .tag-orange { background: rgba(255,159,10,.22);  color: #ffb340; }
html.dark .tag-red    { background: rgba(255,69,58,.22);   color: #ff7a70; }
html.dark .tag-gray   { background: rgba(120,120,128,.30); color: #d1d1d6; }

/* Listenzeilen: klare Abstufung 17 / 15 / 13 pt, saubere Ellipsen */
.media-list .item-title { font-size: 17px; font-weight: 600; }
.media-list .item-subtitle { font-size: 15px; color: var(--f7-list-item-subtitle-text-color, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-line { margin-top: 4px; font-size: 13px; line-height: 17px; color: var(--sec-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crew-line span + span::before { content: " · "; }
.crew-mates { color: var(--f7-text-color, inherit); font-weight: 500; }
.media-list .item-title-row .item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.note-dot { color: #ff9500; display: inline-flex; }
.ico { width: 22px; height: 22px; }
.ico-sm { width: 16px; height: 16px; flex-shrink: 0; }

/* Karte „Nächster Dienst“ */
.next-card {
    display: block; margin: 8px calc(16px + var(--f7-safe-area-left)) 4px; padding: 14px 16px;
    border-radius: 22px; background: var(--f7-list-strong-bg-color, #fff); color: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
html.dark .next-card { background: #1c1c1e; }
.next-eyebrow { font-size: 13px; font-weight: 600; color: var(--f7-theme-color); text-transform: uppercase; letter-spacing: .03em; }
.next-when { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.next-when sup { font-size: 12px; }
.next-where { font-size: 17px; font-weight: 600; margin-top: 2px; }
.next-extra { font-weight: 400; color: var(--sec-text); }
.next-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 15px; color: var(--sec-text); }
.next-row b { color: var(--f7-text-color, inherit); font-weight: 600; }

/* Detail-Kopf */
.detail-hero .eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--f7-theme-color); }
.detail-hero .code { color: inherit; }
.comment-block { font-size: 15px; }
.block-tight { margin-top: 12px; margin-bottom: 8px; }

/* Leerzustände im Stil von ContentUnavailableView */
.empty-state { text-align: center; padding: 56px 32px 24px; color: var(--sec-text); }
.empty-ico { width: 48px; height: 48px; color: #aeaeb2; }
.empty-title { font-size: 22px; font-weight: 700; color: var(--f7-text-color, inherit); margin-top: 10px; }
.empty-text { font-size: 15px; margin-top: 6px; line-height: 1.35; }

/* Symbol-Kachel wie in den Einstellungen */
.icon-tile { display: inline-flex; width: 29px; height: 29px; border-radius: 7px; background: #8e8e93; color: #fff; align-items: center; justify-content: center; }
.ico-tile { width: 18px; height: 18px; }
.list-button.destructive { color: #ff3b30; }
html.dark .list-button.destructive { color: #ff453a; }

/* Kompakte Formulare (44pt-Zeilen, nur Platzhalter) */
.form-compact .item-input .item-inner { padding-top: 0; padding-bottom: 0; min-height: 44px; }
.form-compact input { height: 44px; }

/* Login */
.btn-secondary { background: rgba(120,120,128,.16) !important; color: var(--f7-text-color, #000) !important; }
html.dark .btn-secondary { background: rgba(120,120,128,.32) !important; color: #fff !important; }
.or-divider { display: flex; align-items: center; gap: 12px; margin: 6px 32px 2px; color: var(--sec-text); font-size: 13px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: .5px; background: rgba(60,60,67,.29); }

/* Scroll-Kante oben: Unschärfe-Material in Seitenfarbe – nur wenn Inhalt darunter liegt
   (Hauptseiten: erst im eingeklappten Zustand; Detailseiten: immer, aber in Seitenfarbe) */
.ios .navbar-bg::before {
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    mask-image: linear-gradient(to bottom, #000 calc(70% + var(--f7-safe-area-top, 0px)), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(70% + var(--f7-safe-area-top, 0px)), transparent 100%);
}
.ios .navbar-bg::after {
    background-image: linear-gradient(to bottom,
        color-mix(in srgb, var(--f7-page-bg-color, #f2f2f7) 86%, transparent) calc(55% + var(--f7-safe-area-top, 0px)),
        color-mix(in srgb, var(--f7-page-bg-color, #f2f2f7) 0%, transparent) 100%);
}
.ios .navbar-large:not(.navbar-large-collapsed) .navbar-bg { opacity: 0 !important; }


/* ===================== Jury-Runde 2 ===================== */
/* Akzent getrennt: Text/Icons hell im Dark Mode, gefüllte Flächen bleiben Markenrot (Weiß darauf ≥ 5:1) */
html.dark { --f7-theme-color: #ff7a84 !important; --f7-theme-color-rgb: 255, 122, 132 !important; }
html.dark .button-fill, html.dark .button.button-fill { background-color: #c8102e !important; color: #fff !important; }
/* Werte in Listen und Zeitzeilen: dunkler als F7-Grau */
.list .item-after, .detail-hero .when, .crew-list .item-footer { color: var(--sec-text); }
.crew-list .item-footer { font-size: 13px; margin-top: 2px; }
.tag-orange { color: #8f4700; }
.tag-note { font-size: 13px; color: var(--sec-text); align-self: center; }
html.dark .or-divider::before, html.dark .or-divider::after { background: #48484a; }
.eyebrow-muted { color: var(--sec-text) !important; }
.read-only-note { margin-top: 4px; text-align: center; }
/* Personen-Segmente nur zwischen den Teilen umbrechen (keine verwaisten „· an“) */
.crew-line span { white-space: nowrap; }
/* Karte „Nächster Dienst“ als antippbar kennzeichnen */
.next-card { position: relative; }
.next-chevron { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; line-height: 1; color: #c7c7cc; }
/* Segment-Umschalter kompakter (iOS ~32pt, 15pt) */
.block-segmented .segmented .button { height: 32px; line-height: 32px; font-size: 15px; }
/* Inline-Labels (Einstellungen-Stil) */
.inline-labels .item-label { width: 30%; min-width: 96px; font-size: 17px; color: var(--f7-text-color, inherit); }
/* Weicher Übergang reicht unter die Navigationsleiste hinaus (wie F7-Toolbars) */
.ios .navbar-large-collapsed .navbar-bg::before, .ios .navbar-large-collapsed .navbar-bg::after { bottom: -28px; }
/* Personenzeilen: „Mit …“ und Übergaben je eigene Zeile, ohne Trennpunkt am Zeilenanfang */
.crew-line span { display: block; overflow: hidden; text-overflow: ellipsis; }
.crew-line span + span::before { content: none; }
/* Inline-Labels erzwingen (Label links, Eingabe rechts) */
.inline-labels .item-input .item-inner { display: flex; flex-direction: row; align-items: center; }
.inline-labels .item-input .item-label { margin: 0; flex-shrink: 0; }
.inline-labels .item-input .item-input-wrap { flex: 1; margin: 0; }


.inline-labels .item-input .item-label { width: 118px; min-width: 118px; padding-right: 8px; }


/* ===================== Jury-Runde 3 ===================== */
.next-eyebrow { color: var(--sec-text); }
.next-rel { color: var(--f7-theme-color); }
.next-chevron { position: absolute; right: 16px; top: 18px; transform: none; width: 8px; height: 14px; color: #c4c4c7; font-size: 0; }
html.dark .next-chevron { color: #5a5a5e; }
.list .item-inner .item-after { color: var(--sec-text) !important; }
.stacked { flex-direction: column; align-items: flex-start !important; padding-top: 10px; padding-bottom: 10px; }
.stacked-label { font-size: 13px; color: var(--sec-text); }
.stacked-value { font-size: 17px; margin-top: 2px; }
/* weicherer Auslauf der Unschärfe-Zone, ohne sichtbare Abschlusslinie */
.ios .navbar-large-collapsed .navbar-bg::after {
    background-image: linear-gradient(to bottom,
        color-mix(in srgb, var(--f7-page-bg-color, #f2f2f7) 92%, transparent) calc(35% + var(--f7-safe-area-top, 0px)),
        color-mix(in srgb, var(--f7-page-bg-color, #f2f2f7) 0%, transparent) 100%);
}
.ios .navbar-large-collapsed .navbar-bg::before {
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(55% + var(--f7-safe-area-top, 0px)), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(55% + var(--f7-safe-area-top, 0px)), transparent 100%);
}