/* ===== SmartService Design v2 - moderneres visuelles System: kraeftigerer Indigo-Akzent statt
   reinem Blau, groessere Radien, weichere/tiefere Schatten, getoente Icon-Badges auf den Kacheln,
   sanfte Hover-Uebergaenge. Alle Klassennamen bewusst unveraendert (siehe Grep-Audit ueber alle
   .razor-Dateien vor dem Umbau) - reines CSS-Restyling ohne Markup-Aenderungen. ===== */
:root {
    --ss-bg: #f6f7fb;
    --ss-card: #ffffff;
    --ss-border: #e7e9f2;
    --ss-text: #14162b;
    --ss-muted: #6b7089;
    --ss-accent: #4f46e5;
    --ss-accent-hover: #4338ca;
    --ss-accent-light: #eef0ff;
    --ss-accent-grad: linear-gradient(135deg, #6366f1, #4f46e5);
    --ss-danger: #e11d48;
    --ss-danger-light: #ffe4e9;
    --ss-warn: #d97706;
    --ss-warn-light: #fef3c7;
    --ss-ok: #16a34a;
    --ss-radius-sm: 10px;
    --ss-radius-md: 16px;
    --ss-radius-lg: 22px;
    --ss-shadow: 0 1px 2px rgba(20, 22, 43, .04), 0 2px 8px rgba(20, 22, 43, .04);
    --ss-shadow-md: 0 8px 24px rgba(20, 22, 43, .08), 0 2px 6px rgba(20, 22, 43, .04);
    --ss-shadow-lg: 0 16px 40px rgba(20, 22, 43, .14), 0 4px 10px rgba(20, 22, 43, .06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--ss-bg);
    color: var(--ss-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 1.1rem; letter-spacing: -.02em; }

a { color: var(--ss-accent); }

.app-shell {
    display: flex; flex-direction: column; min-height: 100vh;
    /* Sehr sanfter radialer Farbverlauf hinter dem Inhalt statt reiner Flaechenfarbe - gibt der
       Flaeche Tiefe, ohne von den Karten/Kacheln abzulenken. */
    background:
        radial-gradient(1100px 480px at 15% -8%, rgba(99, 102, 241, .06), transparent 60%),
        radial-gradient(900px 420px at 100% 0%, rgba(79, 70, 229, .04), transparent 55%),
        var(--ss-bg);
}

.app-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.4rem;
    background: linear-gradient(135deg, #14162b 0%, #1b1d3a 100%);
    color: #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--ss-shadow-md);
}
.app-header .brand {
    color: #fff; font-weight: 800; text-decoration: none; font-size: 1.05rem;
    letter-spacing: -.02em; display: flex; align-items: center; gap: .55rem; flex-shrink: 0;
}
.app-header .brand-dot {
    width: .6rem; height: .6rem; border-radius: 999px; flex-shrink: 0;
    background: linear-gradient(135deg, #818cf8, #4f46e5);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .22);
}
/* Firmenlogo statt Text-Marke (siehe Firmenprofil.razor) - Hoehe an die Kopfzeile angepasst statt
   des Icon-Punkts, Breite bewusst nicht begrenzt (Logos sind meist eher breit als hoch). */
.app-header .brand-logo { height: 1.8rem; max-width: 10rem; object-fit: contain; display: block; }
.app-header nav { display: flex; gap: .3rem; flex: 1; overflow-x: auto; }
.app-header nav a {
    color: #a3a7c2; text-decoration: none; font-size: .88rem; font-weight: 600;
    padding: .5rem .85rem; border-radius: 999px; white-space: nowrap;
    transition: background .15s, color .15s;
}
.app-header nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.app-header nav a.active { color: #fff; background: rgba(129, 140, 248, .22); }

/* Auf dem Handy quetscht sich die Text-Navigation gegen Marke+Sprachauswahl+Abmelden in eine
   viel zu schmale Zeile und wird abgeschnitten (nicht nur unschoen, sondern faktisch unbedienbar).
   Statt sie zusammenzustauchen: komplett ausblenden - jede Seite hat bereits oben einen eigenen
   "<- Menu"-Link (siehe z.B. Kunden.razor, Ersatzteile.razor), und die Kachel-Startseite deckt
   dieselbe Navigation vollstaendig ab. Auf Tablet/Desktop bleibt die Nav als Schnellzugriff
   sichtbar, dort ist genug Platz. */
@media (max-width: 720px) {
    .app-header nav { display: none; }
}

.header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.sync-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255, 255, 255, .08); color: #cbd5e1; border-radius: 999px;
    padding: .35rem .75rem; font-size: .8rem; font-weight: 600;
}
.sync-badge.pending { background: rgba(217, 119, 6, .22); color: #fde68a; }
.sync-badge .dot { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }

.icon-btn {
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); color: #a3a7c2;
    border-radius: var(--ss-radius-sm); padding: .5rem .75rem; cursor: pointer; font-size: .88rem; font-weight: 600;
    min-height: 44px; min-width: 44px; transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { border-color: rgba(255, 255, 255, .3); color: #fff; background: rgba(255, 255, 255, .08); }

.app-main { flex: 1; padding: 1.5rem 1.1rem 3rem; max-width: 720px; width: 100%; margin: 0 auto; }

.ss-card {
    background: var(--ss-card);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-md);
    padding: 1.2rem 1.35rem;
    margin-bottom: 1rem;
    box-shadow: var(--ss-shadow);
}

.ss-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ss-accent-grad);
    color: #fff;
    border: none;
    border-radius: var(--ss-radius-sm);
    padding: .75rem 1.3rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
    min-height: 48px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .28);
    transition: box-shadow .15s, opacity .15s, transform .1s, background .15s;
}
.ss-btn:hover { box-shadow: 0 6px 18px rgba(79, 70, 229, .38); transform: translateY(-1px); }
.ss-btn:active { transform: translateY(0); }
.ss-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.ss-btn.secondary {
    background: #fff; color: var(--ss-text); border: 1px solid var(--ss-border);
    box-shadow: var(--ss-shadow);
}
.ss-btn.secondary:hover { background: var(--ss-accent-light); border-color: #c7d2fe; box-shadow: var(--ss-shadow); }
.ss-btn.danger { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 4px 14px rgba(225, 29, 72, .28); }
.ss-btn.block { width: 100%; }

.ss-status-group { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; }
.ss-status-btn {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem; border-radius: var(--ss-radius-sm); border: 2px solid var(--ss-border);
    background: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; min-height: 56px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.ss-status-btn:hover { border-color: #c7d2fe; }
.ss-status-btn.active { border-color: var(--ss-accent); background: var(--ss-accent-light); color: var(--ss-accent); box-shadow: var(--ss-shadow); }

.ss-field { margin-bottom: 1rem; }
.ss-field label { display: block; font-size: .82rem; font-weight: 700; color: var(--ss-muted); margin-bottom: .4rem; }
.ss-field input, .ss-field textarea, .ss-field select {
    width: 100%; padding: .7rem .85rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm);
    font-size: 1rem; font-family: inherit; background: #fff; color: var(--ss-text);
    min-height: 48px; transition: border-color .15s, box-shadow .15s;
}
.ss-field input:focus, .ss-field textarea:focus, .ss-field select:focus {
    outline: none; border-color: var(--ss-accent); box-shadow: 0 0 0 4px rgba(79, 70, 229, .13);
}
.ss-field textarea { min-height: 6rem; resize: vertical; }

.ss-list-item {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1rem 1.2rem; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); margin-bottom: .6rem;
    text-decoration: none; color: inherit; background: #fff;
    box-shadow: var(--ss-shadow); min-height: 56px;
    transition: box-shadow .15s, transform .1s, border-color .15s;
}
.ss-list-item:hover { box-shadow: var(--ss-shadow-md); border-color: #c7d2fe; transform: translateY(-1px); }
.ss-list-item:active { transform: translateY(0); }

.ss-badge {
    display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700;
    white-space: nowrap;
}
.ss-badge.ueberfaellig { background: var(--ss-danger-light); color: var(--ss-danger); }
.ss-badge.bald { background: var(--ss-warn-light); color: var(--ss-warn); }
.ss-badge.zwei-monate { background: var(--ss-accent-light); color: var(--ss-accent); }
.ss-badge.spaeter { background: #f1f2f8; color: var(--ss-muted); }

.ss-item-sync {
    display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--ss-muted); margin-top: .3rem;
}
.ss-item-sync.pending { color: var(--ss-warn); }
.ss-item-sync .dot { width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; }

.ss-empty {
    color: var(--ss-muted); padding: 1.75rem; text-align: center;
    background: #fff; border: 1.5px dashed var(--ss-border); border-radius: var(--ss-radius-md);
}

.ss-section-title {
    font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ss-muted); margin: 1.75rem 0 .6rem;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: .5rem;
}
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    aspect-ratio: 1;
    background: var(--ss-card);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow);
    text-decoration: none;
    color: var(--ss-text);
    padding: 1rem;
    transition: border-color .18s, box-shadow .18s, transform .12s;
}
.tile:hover { border-color: #c7d2fe; box-shadow: var(--ss-shadow-lg); transform: translateY(-3px); }
.tile:active { transform: translateY(-1px); }

/* Getoente, abgerundete Icon-Flaeche statt nacktem Emoji direkt auf der Kachel - fuenf Akzentfarben
   im Wechsel (nth-child) sorgen fuer visuelle Unterscheidbarkeit zwischen den Kacheln, ganz ohne
   Markup-Aenderung in Home.razor. */
.tile-icon {
    font-size: 1.7rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    width: 3.4rem; height: 3.4rem; border-radius: 16px;
    background: var(--ss-accent-light);
}
.tile:nth-of-type(5n+1) .tile-icon { background: #eef0ff; }
.tile:nth-of-type(5n+2) .tile-icon { background: #ecfdf5; }
.tile:nth-of-type(5n+3) .tile-icon { background: #fff7ed; }
.tile:nth-of-type(5n+4) .tile-icon { background: #fdf2f8; }
.tile:nth-of-type(5n+5) .tile-icon { background: #eff6ff; }

.tile-label { font-weight: 700; font-size: .98rem; text-align: center; letter-spacing: -.01em; }
.tile-badge {
    position: absolute; top: .7rem; right: .7rem;
    background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; font-size: .75rem; font-weight: 800;
    min-width: 1.5rem; height: 1.5rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 .35rem;
    box-shadow: 0 2px 8px rgba(225, 29, 72, .35);
}

.ss-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .6rem; margin-top: .75rem; }
.ss-photo-thumb { position: relative; border-radius: var(--ss-radius-sm); overflow: hidden; aspect-ratio: 1; background: var(--ss-bg); }
.ss-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(700px 500px at 15% 10%, rgba(99, 102, 241, .35), transparent 60%),
        radial-gradient(600px 460px at 90% 90%, rgba(129, 140, 248, .25), transparent 55%),
        linear-gradient(160deg, #0c0e21 0%, #14162b 60%, #1b1d3a 100%);
}
.login-card {
    background: rgba(30, 32, 61, .72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 2.25rem 2rem;
    border-radius: var(--ss-radius-lg);
    width: min(380px, 100%);
    box-shadow: var(--ss-shadow-lg);
}
.login-card h1 {
    color: #fff; font-size: 1.4rem;
    background: linear-gradient(135deg, #fff, #c7d2fe);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.login-card .ss-field label { color: #9498ba; }
.login-card .ss-field input {
    background: rgba(12, 14, 33, .55); border-color: rgba(255, 255, 255, .12); color: #f1f5f9;
}
.login-card .ss-field input:focus { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129, 140, 248, .2); }

.culture-switcher select {
    background: rgba(255, 255, 255, .04); color: #a3a7c2; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--ss-radius-sm);
    padding: .4rem .55rem; font-size: .85rem; min-height: 40px; font-weight: 600;
}

/* Blazor-Fehler-UI: standardmaessig unsichtbar (siehe Retro-Fix im alten Projekt - ohne diese Regel
   ist der Standard-Banner permanent sichtbar statt nur bei echtem Fehler). */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fef3c7;
    color: #92400e;
    padding: .75rem 1.25rem;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, .15);
    font-size: .9rem;
}
#blazor-error-ui.show { display: block; }
#blazor-error-ui .reload { color: var(--ss-accent); font-weight: 600; margin-left: .5rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; color: #92400e; opacity: .7; }
#blazor-error-ui .dismiss:hover { opacity: 1; }

.ss-boot-splash { display: flex; align-items: center; justify-content: center; height: 100vh; }
.loading-progress { width: 4rem; height: 4rem; }
.loading-progress circle {
    fill: none; stroke: var(--ss-border); stroke-width: 0.6rem; stroke-linecap: round;
}
.loading-progress circle:last-child { stroke: var(--ss-accent); stroke-dasharray: calc(3.141 * 0.8 * 100%) calc(3.141 * 0.8 * 100%); transform-origin: 50% 50%; transform: rotate(-90deg); }

#signature-pad {
    border: 1.5px dashed var(--ss-border);
    border-radius: var(--ss-radius-sm);
    touch-action: none;
    width: 100%;
    max-width: 500px;
    height: 180px;
    background: #fff;
}

/* Kalender.razor: Wochenansicht mit 7 Tagesspalten. Horizontal scrollbar statt umbrechend, da
   .app-main auf 720px begrenzt ist (mobile-first) - auf Desktop-Breite (Disponenten-Arbeitsplatz)
   reicht das trotzdem zum Ueberblicken, auf dem Handy wischt man durch die Woche. */
.kalender-grid {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin: 0 -1.1rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}
.kalender-tag {
    flex: 0 0 200px;
    background: var(--ss-card);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-md);
    padding: .7rem;
}
.kalender-tag.heute { border-color: var(--ss-accent); background: var(--ss-accent-light); }
.kalender-tag-kopf {
    font-weight: 700; font-size: .82rem; text-transform: capitalize;
    color: var(--ss-muted); margin-bottom: .5rem;
}
.kalender-tag.heute .kalender-tag-kopf { color: var(--ss-accent); }
.kalender-karte { padding: .8rem .9rem; margin-bottom: .6rem; border-radius: var(--ss-radius-sm); }
.kalender-karte .ss-field { margin-bottom: 0; }
.kalender-karte .ss-field input, .kalender-karte .ss-field select { min-height: 38px; padding: .4rem .5rem; font-size: .88rem; }

/* Woche/Monat-Umschalter - Pill-Segmentgruppe wie schon bei der Sprachauswahl im Header. */
.kalender-ansicht-umschalter {
    display: inline-flex; background: var(--ss-card); border: 1px solid var(--ss-border);
    border-radius: 999px; padding: .2rem; margin-left: auto;
}
.kalender-ansicht-umschalter button {
    background: transparent; border: none; border-radius: 999px; padding: .5rem 1rem;
    font-size: .85rem; font-weight: 600; color: var(--ss-muted); cursor: pointer;
}
.kalender-ansicht-umschalter button.aktiv { background: var(--ss-accent-grad); color: #fff; }

/* Monatsansicht: klassisches 7-Spalten-Raster statt der horizontal scrollenden Wochenspalten -
   jede Zelle zeigt nur eine kompakte Vorschau (Chips), Details/Bearbeiten bleiben der Wochenansicht
   vorbehalten (siehe TagAuswaehlenAsync - Klick auf einen Tag springt dorthin). */
.kalender-monat-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem;
}
.kalender-monat-wochentag {
    text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    color: var(--ss-muted); padding-bottom: .3rem;
}
.kalender-monat-tag {
    background: var(--ss-card); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm);
    padding: .4rem; min-height: 5.5rem; cursor: pointer; transition: border-color .15s, box-shadow .15s;
    display: flex; flex-direction: column; gap: .2rem;
}
.kalender-monat-tag:hover { border-color: #c7d2fe; box-shadow: var(--ss-shadow); }
.kalender-monat-tag.ausserhalb { opacity: .4; }
.kalender-monat-tag.heute { border-color: var(--ss-accent); background: var(--ss-accent-light); }
.kalender-monat-tag-nummer { font-weight: 700; font-size: .82rem; }
.kalender-monat-tag.heute .kalender-monat-tag-nummer { color: var(--ss-accent); }
.kalender-chip {
    display: block; background: var(--ss-accent-light); color: var(--ss-accent);
    border-radius: 5px; padding: .1rem .35rem; font-size: .68rem; font-weight: 600;
    text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kalender-chip.tagesbericht-chip { background: transparent; color: inherit; padding: 0; font-size: .8rem; }
.kalender-chip-mehr { font-size: .68rem; color: var(--ss-muted); padding: 0 .35rem; }

@media (max-width: 640px) {
    .kalender-monat-tag { min-height: 4rem; padding: .3rem; }
    .kalender-monat-wochentag { font-size: .62rem; }
}

/* UpdateBanner.razor: erscheint, sobald der Service Worker eine neue App-Version installiert hat,
   waehrend die Seite noch offen war - ohne diesen Hinweis bemerken Nutzer ein Deployment sonst nur
   durch zufaelliges hartes Neuladen (siehe service-worker.published.js: skipWaiting/clients.claim
   uebernehmen die neue Version zwar sofort im Hintergrund, der bereits gebootete WASM-Code der
   offenen Seite laeuft aber unveraendert weiter, bis tatsaechlich neu geladen wird). */
.update-banner {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #fff; padding: .6rem 1rem; font-size: .9rem; font-weight: 600;
    box-shadow: var(--ss-shadow-md);
}
.update-banner .ss-btn { background: #fff; color: var(--ss-accent); box-shadow: none; }
.update-banner .ss-btn:hover { background: #f1f2f8; }

/* Kalender.razor: Tagesbericht-Karten optisch von den Auftrags-Karten unterscheiden (gruener statt
   neutraler Rand), damit auf einen Blick klar ist, dass es sich um eine freie Notiz statt einen
   festen Auftrag handelt. */
.tagesbericht-karte { border-left: 3px solid var(--ss-ok); }