/* ===================================================
   HandwerkAI - Einfache Startseite, Freigabe, Nachrichten,
   Belege, Zugangssperre
   Zuerst für das Handy gebaut: große Flächen, klare Kontraste,
   nichts, was man mit Handschuhen nicht trifft.
   =================================================== */

/* ===== 1. FREIGABE: KI VORBEREITET → PRÜFEN → BESTÄTIGEN ===== */

.hw-freigabe {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: 14px 16px;
    margin: 16px 0 12px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.hw-freigabe-erteilt {
    border-color: var(--success);
    background: var(--success-bg);
}

.hw-freigabe-fehlt {
    border-color: var(--danger);
    animation: hw-freigabe-ruckeln 0.4s ease;
}

@keyframes hw-freigabe-ruckeln {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.hw-freigabe-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.hw-freigabe-schritt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: 5px 12px;
    white-space: nowrap;
}

.hw-freigabe-schritt-fertig {
    color: var(--success);
    border-color: var(--success);
    background: var(--success-bg);
}

.hw-freigabe-schritt-aktiv {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-light);
}

.hw-freigabe-pfeil {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.hw-freigabe-satz {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.hw-freigabe-punkte {
    margin: 0 0 12px;
    padding-left: 20px;
    font-size: 0.86rem;
    color: var(--text-secondary);
}

.hw-freigabe-punkte li { margin-bottom: 3px; }

.hw-freigabe-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
}

.hw-freigabe-check input {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    accent-color: var(--success);
    cursor: pointer;
}

.hw-btn-gesperrt,
.hw-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

.hw-btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

/* ===== 2. KUNDENNACHRICHTEN ===== */

.hw-signatur {
    background: var(--bg-surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin: 4px 0 12px;
}

.hw-signatur .hw-field-label {
    display: block;
    margin-bottom: 4px;
}

/* Karten stehen im Chat, und dort ist pre der dunkle Code-Block.
   Die Signaturvorschau ist kein Code – sie muss lesbar bleiben. */
.hw-signatur pre,
.message-content .hw-signatur pre {
    margin: 0;
    padding: 0;
    background: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    overflow-x: visible;
}

/* ===== 3. BELEGE: LOGO UND BRIEFKOPF ===== */

.hw-logo-zeile {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.hw-logo-feld {
    width: 190px;
    height: 90px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    padding: 8px;
}

.hw-logo-bild {
    /* Feste Höhe: Ein SVG mit width="100%" hätte sonst keine eigene Größe. */
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.hw-briefkopf-blatt {
    background: #fff;
    color: #111827;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 22px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.8rem;
    overflow-x: auto;
}

.hw-briefkopf-blatt .bk-oben {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 18px;
}

.hw-briefkopf-blatt .bk-logo { height: 48px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.hw-briefkopf-blatt .bk-absender { font-size: 0.75rem; color: #374151; text-align: right; line-height: 1.5; }
.hw-briefkopf-blatt .bk-absender strong { display: block; color: #111827; }
.hw-briefkopf-blatt .bk-felder { display: flex; justify-content: space-between; gap: 24px; }
.hw-briefkopf-blatt .bk-anschrift { flex: 1; line-height: 1.5; }
.hw-briefkopf-blatt .bk-rueck { font-size: 0.62rem; color: #6b7280; border-bottom: 1px solid #9ca3af; padding-bottom: 3px; margin-bottom: 8px; }
.hw-briefkopf-blatt .bk-info table { border-collapse: collapse; font-size: 0.75rem; }
.hw-briefkopf-blatt .bk-info td { padding: 1px 0; }
.hw-briefkopf-blatt .bk-info td:first-child { color: #6b7280; padding-right: 12px; }
.hw-briefkopf-blatt .bk-info td:last-child { text-align: right; font-weight: 600; }
.hw-briefkopf-blatt .bk-titel { font-size: 1.15rem; margin: 22px 0 4px; }
.hw-briefkopf-blatt .bk-betreff { font-weight: 600; margin: 0 0 14px; }
.hw-briefkopf-blatt .foot { margin-top: 22px; font-size: 0.65rem; color: #6b7280; border-top: 1px solid #e5e7eb; padding-top: 8px; }

.hw-tag-warn {
    background: var(--accent-light);
    color: #9A3412;
}

/* ===== 4. ZUGANGSSPERRE ===== */

body.hw-gesperrt { overflow: hidden; }

.hw-sperre {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: linear-gradient(160deg, #0F172A 0%, #1E293B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.hw-sperre-karte {
    width: 100%;
    max-width: 380px;
    background: var(--bg-body);
    border-radius: var(--radius-xl);
    padding: 32px 26px;
    text-align: center;
    box-shadow: var(--shadow-float);
}

.hw-sperre-karte h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin: 12px 0 4px;
    color: var(--text-primary);
}

.hw-sperre-logo { width: 54px; height: 54px; }

.hw-sperre-feld {
    margin: 18px 0 6px;
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    min-height: 52px;
}

.hw-sperre-fehler {
    min-height: 20px;
    font-size: 0.82rem;
    color: var(--danger);
    margin-bottom: 8px;
}

.hw-sperre-falsch { animation: hw-freigabe-ruckeln 0.4s ease; }

/* ===== 5. SICHERHEIT ===== */

.hw-sicherheit-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.hw-status-kachel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hw-status-kachel i { font-size: 1.1rem; color: var(--text-tertiary); margin-bottom: 4px; }
.hw-status-kachel strong { font-size: 0.92rem; color: var(--text-primary); }
.hw-status-kachel span { font-size: 0.78rem; color: var(--text-tertiary); }
.hw-status-kachel.gut { border-color: var(--success); background: var(--success-bg); }
.hw-status-kachel.gut i { color: var(--success); }
.hw-status-kachel.offen { border-color: var(--accent); background: var(--accent-light); }
.hw-status-kachel.offen i { color: var(--accent); }
.hw-status-kachel.schlecht { border-color: var(--danger); background: var(--danger-bg); }
.hw-status-kachel.schlecht i { color: var(--danger); }

.hw-transport-warnung {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: #7F1D1D;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 0.88rem;
}

.hw-transport-warnung button {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
}

/* ===== 6. EINFACHE STARTSEITE ===== */

body.hw-start-an { overflow: hidden; }

.hw-start {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Ein langer Firmenname darf die Seite nicht breiter machen als das Handy. */
    overflow-x: hidden;
}

.hw-start > * { min-width: 0; max-width: 100%; }

.hw-start-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 8px;
    flex-shrink: 0;
}

.hw-start-marke {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.hw-start-marke > div { min-width: 0; }

.hw-start-marke > i {
    font-size: 1.5rem;
    color: var(--primary);
}

.hw-start-logo {
    height: 38px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    object-position: left center;
}

.hw-start-marke strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hw-start-marke span {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.hw-start-kopf-knoepfe { display: flex; gap: 8px; flex-shrink: 0; }

.hw-start-rund {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.hw-start-rund:hover { background: var(--bg-surface-hover); }

.hw-start-flaeche {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 18px 24px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    /* Auf hohen Telefonen liegen die Kacheln in der Mitte statt oben. */
    justify-content: center;
    justify-content: safe center;
}

.hw-kachel-reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hw-kachel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 122px;
    padding: 18px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
    overflow: hidden;
}

.hw-kachel .hw-kachel-titel,
.hw-kachel .hw-kachel-text { max-width: 100%; }

.hw-kachel:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.hw-kachel:active { transform: scale(0.985); }

.hw-kachel > i {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 4px;
}

.hw-kachel-titel {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 700;
}

.hw-kachel-text {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    line-height: 1.35;
}

.hw-kachel-gross {
    min-height: 168px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-color: transparent;
    color: var(--text-on-primary);
    box-shadow: var(--shadow-primary);
}

.hw-kachel-gross > i { font-size: 2.2rem; color: var(--text-on-primary); }
.hw-kachel-gross .hw-kachel-titel { font-size: 1.6rem; }
.hw-kachel-gross .hw-kachel-text { color: rgba(255, 255, 255, 0.86); }
.hw-kachel-gross:hover { border-color: transparent; }

.hw-start-fuss {
    position: sticky;
    bottom: 0;
    display: flex;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-body);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
}

.hw-start-fuss button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.hw-start-fuss button i { font-size: 1.1rem; }
.hw-start-fuss button:hover { color: var(--primary); background: var(--bg-surface); }

/* ===== 7. LISTEN UND AUSWAHL (Start, Heute, Angebote) ===== */

.hw-wahl-liste { display: flex; flex-direction: column; gap: 8px; }

.hw-wahl {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.hw-wahl:hover { border-color: var(--primary); background: var(--primary-soft); }
.hw-wahl > span { flex: 1; }
.hw-wahl > i:first-child { color: var(--primary); width: 20px; text-align: center; }
.hw-wahl > i:last-child { color: var(--text-muted); font-size: 0.75rem; }

.hw-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.hw-listen-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.hw-listen-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hw-listen-text strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-listen-rechts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.hw-heute-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.hw-heute-zahl {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: 14px;
    text-align: center;
}

.hw-heute-zahl strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--primary);
    line-height: 1.1;
}

.hw-heute-zahl span { font-size: 0.76rem; color: var(--text-tertiary); }

.hw-foto-streifen {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 14px;
    padding-bottom: 4px;
}

.hw-foto-streifen img {
    height: 96px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

/* ===== 8. HANDY ===== */

@media (max-width: 600px) {
    .hw-start-flaeche { padding: 10px 12px 20px; gap: 10px; }
    .hw-kachel-reihe { gap: 10px; }
    .hw-kachel { min-height: 108px; padding: 14px; border-radius: var(--radius-lg); }
    .hw-kachel-gross { min-height: 150px; }
    .hw-kachel-gross .hw-kachel-titel { font-size: 1.45rem; }
    .hw-kachel-text { font-size: 0.78rem; }

    .hw-freigabe { padding: 12px; }
    .hw-freigabe-kopf { gap: 6px; }
    .hw-freigabe-schritt { font-size: 0.72rem; padding: 4px 9px; }
    .hw-freigabe-pfeil { display: none; }

    .hw-logo-feld { width: 100%; }
    .hw-sicherheit-status { grid-template-columns: 1fr; }

    .hw-listen-zeile { padding: 10px; }
    .hw-briefkopf-blatt { padding: 14px; font-size: 0.72rem; }
    .hw-briefkopf-blatt .bk-oben,
    .hw-briefkopf-blatt .bk-felder { flex-direction: column; gap: 12px; }
    .hw-briefkopf-blatt .bk-absender { text-align: left; }
    .hw-briefkopf-blatt .bk-info td:last-child { text-align: left; padding-left: 10px; }
}

/* Auf dem Rechner gibt es genug Platz für die drei Prüfschritte nebeneinander. */
@media (min-width: 900px) {
    .hw-start-flaeche { padding-top: 24px; }
}

@media print {
    .hw-start,
    .hw-sperre,
    .hw-transport-warnung,
    .hw-freigabe { display: none !important; }
}

/* Markierung des gewaehlten Farbschemas (Einstellungen -> Darstellung).
   Stand frueher fest im Stil des blauen Kreises und wanderte nie mit. */
.theme-option.active > div:first-child {
    border-color: #eff6ff !important;
    box-shadow: 0 0 0 2px var(--primary);
}

.theme-option.active > span {
    color: var(--primary) !important;
}

/* ===================================================
   DUNKELMODUS
   toggleDarkMode() in js/script.js setzt die Farbpalette auf :root und
   die Klasse body.dark-mode. Hier steht nur, was der Palette nicht von
   selbst folgt:
     1 Flaechen mit festem Weiss in der Hauptansicht und den Standardfenstern
     2 Meldungen, deren dunkelrote Schrift auf dunklem Grund verschwindet
     3 Helle Inseln: Fenster, die durchgehend mit festen Hellfarben gebaut
       sind, bekommen die helle Palette zurueck. Sonst wird die Schrift
       hell, die Flaeche bleibt weiss - und der Text ist weg.
   Fenster mit eigener fester Gestaltung (Kunden, Belege, Kalender, Mail,
   Bots ...) bleiben ohnehin hell; Baustelle und Azubihefte haben ein
   eigenes Dunkel-Design, das an body.dark-mode haengt.
   =================================================== */

body.dark-mode { color-scheme: dark; }

/* 1 Flaechen */
body.dark-mode .input-card,
body.dark-mode .tool-btn.icon-circle-btn,
body.dark-mode .quick-action-pill,
body.dark-mode .wiki-person-card,
body.dark-mode .chat-sources-attachment,
body.dark-mode .chat-source-detail-item,
body.dark-mode .hw-preis-panel,
body.dark-mode .hw-preis-kopf,
body.dark-mode .hw-preis-hinweis,
body.dark-mode .mobile-menu-btn,
body.dark-mode .message-content table,
body.dark-mode .msg-table,
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-search,
body.dark-mode .modal-categories {
    background-color: var(--bg-card);
}

body.dark-mode .tool-pill-btn,
body.dark-mode .web-search-badge,
body.dark-mode .citation-badge,
body.dark-mode .source-pill,
body.dark-mode .hw-badge-niedrig {
    background-color: var(--bg-surface);
}

/* Antworten im Hauptchat. Das Bot-Studio nutzt dieselben Klassen, bleibt
   aber hell - deshalb nur unter #chat-screen. */
body.dark-mode #chat-screen .message-content strong,
body.dark-mode #chat-screen .message-content b {
    color: var(--text-primary);
}

body.dark-mode #chat-screen .message-ai .message-text blockquote,
body.dark-mode #chat-screen .message-content blockquote {
    background-color: var(--bg-surface);
    color: var(--text-secondary);
}

body.dark-mode #chat-screen .ai-footnotes {
    background: var(--bg-surface);
    color: var(--text-tertiary);
}

body.dark-mode #chat-screen .ai-footnotes-title {
    color: var(--text-secondary) !important;
}

body.dark-mode .active-chat-input-container {
    background: rgba(17, 24, 39, 0.9);
}

/* Der schwarze Senden-Knopf verschwindet auf der dunklen Karte. */
body.dark-mode .send-btn {
    background: #F1F5F9;
    color: #0F172A;
}

body.dark-mode .send-btn:hover {
    background: #FFFFFF;
}

body.dark-mode .send-btn.disabled,
body.dark-mode .send-btn:disabled {
    background: var(--border-strong);
    color: var(--text-muted);
}

/* 2 Meldungen */
body.dark-mode .bp-error,
body.dark-mode .ws-error {
    color: #FCA5A5;
    border-color: rgba(248, 113, 113, 0.35);
}

/* 3 Helle Inseln */
body.dark-mode #account-modal .modal-content,
body.dark-mode #onboarding-modal .modal-content,
body.dark-mode #rag-modal .modal-content,
body.dark-mode #print-preview-modal .modal-content,
body.dark-mode .nt-dialog,
body.dark-mode .nt-popup {
    --bg-body: #FFFFFF;
    --bg-surface: #F8FAFC;
    --bg-surface-hover: #F1F5F9;
    --bg-sidebar: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-active-pill: #EBF3FE;
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-tertiary: #64748B;
    --text-muted: #94A3B8;
    --primary-light: #E0F2FE;
    --primary-soft: rgba(2, 132, 199, 0.08);
    --success-bg: #ECFDF5;
    --danger-bg: #FEF2F2;
    --accent-light: #FFEDD5;
    --border-subtle: #E2E8F0;
    --border-strong: #CBD5E1;
    color-scheme: light;
    background-color: #FFFFFF;
    /* Geerbte Schrift kommt sonst schon hell vom body. */
    color: #0F172A;
}