/* ==========================================================
   KUNDENVERWALTUNG – DARKMODE
   ========================================================== */

:root {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background:#12171b !important;
    color:#e7edf1 !important;
}


/* ----------------------------------------------------------
   Allgemeine Flächen
   ---------------------------------------------------------- */

html[data-theme="dark"] .container,
html[data-theme="dark"] .container-wide {
    color:#e7edf1;
}

html[data-theme="dark"] main,
html[data-theme="dark"] section {
    color:#e7edf1;
}


/* ----------------------------------------------------------
   Überschriften / Texte
   ---------------------------------------------------------- */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] strong {
    color:#f3f6f8;
}

html[data-theme="dark"] p {
    color:#d8e0e5;
}


/* ----------------------------------------------------------
   Links
   ---------------------------------------------------------- */

html[data-theme="dark"] a {
    color:#7db9ff;
}

html[data-theme="dark"] a:hover {
    color:#a8d0ff;
}


/* ----------------------------------------------------------
   Karten / Boxen / Panels
   ---------------------------------------------------------- */

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .section,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .visit-card {
    background:#1c2429 !important;
    color:#e7edf1 !important;
    border-color:#39464d !important;
}


/* ----------------------------------------------------------
   Tabellen
   ---------------------------------------------------------- */

html[data-theme="dark"] table {
    background:#1c2429 !important;
    color:#e7edf1 !important;
}

html[data-theme="dark"] th {
    background:#263238 !important;
    color:#f5f7f8 !important;
    border-color:#45545c !important;
}

html[data-theme="dark"] td {
    background:#1c2429 !important;
    color:#e7edf1 !important;
    border-color:#39464d !important;
}

html[data-theme="dark"] tr:hover td {
    background:#253138 !important;
}


/* ----------------------------------------------------------
   Formulare
   ---------------------------------------------------------- */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background:#20292e !important;
    color:#f0f3f5 !important;
    border-color:#4a5961 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color:#89979e !important;
}

html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
    background:#182025 !important;
    color:#89979e !important;
}


/* ----------------------------------------------------------
   Normale Buttons
   ---------------------------------------------------------- */

html[data-theme="dark"] .button:not(.primary),
html[data-theme="dark"] button:not(.primary):not(.theme-toggle) {
    background:#29343a !important;
    color:#edf2f5 !important;
    border-color:#4b5960 !important;
}

html[data-theme="dark"] .button:not(.primary):hover,
html[data-theme="dark"] button:not(.primary):not(.theme-toggle):hover {
    background:#344149 !important;
}


/* ----------------------------------------------------------
   Navigation
   ---------------------------------------------------------- */

html[data-theme="dark"] header {
    background:#202d33 !important;
    border-color:#3d4a50 !important;
}

html[data-theme="dark"] .mobile-nav,
html[data-theme="dark"] .mobile-nav-menu,
html[data-theme="dark"] details[open] {
    background:#20292e;
    color:#edf2f5;
}

html[data-theme="dark"] .mobile-nav-link,
html[data-theme="dark"] .header-link {
    color:#edf2f5 !important;
}


/* ----------------------------------------------------------
   Wochenkalender
   ---------------------------------------------------------- */

html[data-theme="dark"] .week-day {
    background:#1c2429 !important;
    border-color:#3d494f !important;
}

html[data-theme="dark"] .week-day-header {
    background:#263238 !important;
    color:#f5f7f8 !important;
    border-color:#45545c !important;
}

html[data-theme="dark"] .week-day-content {
    background:#1c2429 !important;
}

html[data-theme="dark"] .week-empty {
    color:#8e9ba2 !important;
}

html[data-theme="dark"] .week-today {
    box-shadow:
        inset 0 0 0 2px #4d9cff !important;
}


/* Besuch MIT Bericht */

html[data-theme="dark"] .week-visit.week-visit-has-report {
    background:#173a25 !important;
    color:#e7edf1 !important;
    border-color:#2e7045 !important;
}


/* Besuch OHNE Bericht */

html[data-theme="dark"] .week-visit.week-visit-no-report {
    background:#442326 !important;
    color:#f5e8e8 !important;
    border-color:#804147 !important;
}


/* Feiertag */

html[data-theme="dark"] .week-day.week-holiday {
    background:#291b1d !important;
}

html[data-theme="dark"] .week-day.week-holiday .week-day-header {
    background:#452326 !important;
    border-bottom-color:#d85b64 !important;
}

html[data-theme="dark"] .week-holiday-name {
    color:#ff8b93 !important;
}


/* Vorrat */

html[data-theme="dark"] .week-stock,
html[data-theme="dark"] #week-stock {
    background:#1c2429 !important;
    color:#e7edf1 !important;
    border-color:#536168 !important;
}

html[data-theme="dark"] .week-stock-item {
    background:#263238 !important;
    color:#edf2f5 !important;
    border-color:#46545b !important;
}

html[data-theme="dark"] .week-stock-empty {
    color:#8e9ba2 !important;
}


/* ----------------------------------------------------------
   Sonstige typische Bereiche
   ---------------------------------------------------------- */

html[data-theme="dark"] .empty,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .meta {
    color:#94a2a9 !important;
}

html[data-theme="dark"] hr {
    border-color:#39464d !important;
}

html[data-theme="dark"] dialog,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .popup {
    background:#1c2429 !important;
    color:#e7edf1 !important;
    border-color:#45545c !important;
}


/* ----------------------------------------------------------
   DARKMODE-SCHALTER
   ---------------------------------------------------------- */

.theme-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:42px;
    min-height:38px;

    padding:6px 10px;

    border:1px solid rgba(255,255,255,.35);
    border-radius:8px;

    background:transparent;
    color:white;

    font-size:19px;
    line-height:1;

    cursor:pointer;
}

.theme-toggle:hover {
    background:rgba(255,255,255,.10);
}


/* ==========================================================
   DRUCKVORSCHAU

   Außen dunkel, Papier bleibt weiß.
   ========================================================== */

html[data-theme="dark"] body.print-preview {
    background:#111619 !important;
}

html[data-theme="dark"] body.print-preview .paper {
    background:#fff !important;
    color:#202124 !important;
}

html[data-theme="dark"] body.print-preview .paper * {
    color:inherit;
}


/* ==========================================================
   ECHTER AUSDRUCK IMMER HELL
   ========================================================== */

@media print {

    html,
    html[data-theme="dark"],
    html[data-theme="dark"] body,
    html[data-theme="dark"] body.print-preview {
        background:#fff !important;
        color:#000 !important;
    }

    html[data-theme="dark"] .paper {
        background:#fff !important;
        color:#000 !important;
    }

    .theme-toggle {
        display:none !important;
    }
}

/* === DARKMODE-FIX-20260928-V3 === */


/* ==========================================================
   1. MENÜSCHALTER
   ========================================================== */

.theme-menu-button {
    appearance:none;
    -webkit-appearance:none;
    font:inherit;
    cursor:pointer;
}

.desktop-nav .theme-menu-button {
    background:transparent;
}

html[data-theme="dark"] .theme-menu-button {
    color:#edf2f5 !important;
}

.mobile-theme-button {
    width:100%;
    text-align:left;
    cursor:pointer;
}


/* ==========================================================
   2. BADGES – NEUTRAL GRAU
   ========================================================== */

html[data-theme="dark"] .badge,
html[data-theme="dark"] .visit-rep,
html[data-theme="dark"] .plan-badge,
html[data-theme="dark"] .planning-category {
    background:#465158 !important;
    color:#f4f6f7 !important;
    border-color:#657178 !important;
}


/* Besuchsübersicht – Vertretungsbadges ausdrücklich lesbar */

html[data-theme="dark"] .visit-reps .visit-rep {
    display:inline-block;
    background:#465158 !important;
    color:#ffffff !important;
    border-color:#657178 !important;
}

html[data-theme="dark"] .visit-reps {
    color:#e7edf1 !important;
}


/* ==========================================================
   3. WOCHENANSICHT – KEIN ROT / GRÜN
   ========================================================== */

/* Mit Bericht */
html[data-theme="dark"] .week-visit.week-visit-has-report {
    background:#29343a !important;
    color:#edf2f5 !important;
    border-color:#536168 !important;
}

/* Ohne Bericht */
html[data-theme="dark"] .week-visit.week-visit-no-report {
    background:#353d42 !important;
    color:#edf2f5 !important;
    border-color:#657178 !important;
}

/*
 * Die Information "Bericht vorhanden" bleibt weiterhin
 * durch das Häkchen erhalten.
 */
html[data-theme="dark"] .week-report {
    color:#d9e0e4 !important;
}

html[data-theme="dark"] .week-visit .week-time,
html[data-theme="dark"] .week-visit .week-customer,
html[data-theme="dark"] .week-visit .week-location,
html[data-theme="dark"] .week-visit .week-owner {
    color:inherit !important;
}

html[data-theme="dark"] .week-visit .week-customer {
    color:#ffffff !important;
}

html[data-theme="dark"] .week-visit .week-location,
html[data-theme="dark"] .week-visit .week-owner {
    color:#b9c3c8 !important;
}


/* Vorratskarten ebenfalls sauber dunkel */

html[data-theme="dark"] .week-stock-item {
    background:#29343a !important;
    color:#edf2f5 !important;
    border-color:#536168 !important;
}

html[data-theme="dark"] .week-stock-item .week-customer {
    color:#ffffff !important;
}

html[data-theme="dark"] .week-stock-item .week-location {
    color:#b9c3c8 !important;
}


/* ==========================================================
   4. WOCHE PLANEN
   ========================================================== */

html[data-theme="dark"] .planning-customer {
    background:#1c2429 !important;
    color:#e7edf1 !important;
    border-color:#46535a !important;
}

html[data-theme="dark"] .planning-customer:hover {
    background:#252f34 !important;
    border-color:#6d7b82 !important;
}

html[data-theme="dark"] .planning-customer:has(
    .planning-checkbox:checked
) {
    background:#2b363c !important;
    border-color:#819098 !important;
}

html[data-theme="dark"] .planning-customer.planning-already {
    background:#181f23 !important;
    border-color:#39454b !important;
}

html[data-theme="dark"] .planning-name {
    color:#ffffff !important;
}

html[data-theme="dark"] .planning-address {
    color:#aeb9bf !important;
}

html[data-theme="dark"] .planning-target,
html[data-theme="dark"] .planning-target-stock {
    color:#cbd4d9 !important;
}

html[data-theme="dark"] .planning-status,
html[data-theme="dark"] .planning-status.planned {
    color:#aeb9bf !important;
}

html[data-theme="dark"] .planning-category {
    margin-left:5px;
    background:#465158 !important;
    color:#f4f6f7 !important;
}


/* Sticky Footer von "Woche planen" */

html[data-theme="dark"] .planning-footer {
    background:#1c2429 !important;
    color:#e7edf1 !important;
    border-color:#46535a !important;
}


/* ==========================================================
   5. WOCHENPLAN MIT BEMERKUNGEN
   ========================================================== */

html[data-theme="dark"] .plan-sheet {
    background:transparent !important;
    color:#e7edf1 !important;
}

html[data-theme="dark"] .plan-day {
    background:#1c2429 !important;
    color:#e7edf1 !important;
    border-color:#46535a !important;
}

html[data-theme="dark"] .plan-day-title {
    background:#263238 !important;
    color:#ffffff !important;
    border-color:#46535a !important;
}

html[data-theme="dark"] .plan-day-title * {
    color:#ffffff !important;
}

html[data-theme="dark"] .plan-visit {
    background:#1c2429 !important;
    color:#e7edf1 !important;
    border-color:#39464d !important;
}

html[data-theme="dark"] .plan-main {
    color:#e7edf1 !important;
}

html[data-theme="dark"] .plan-time {
    color:#c1cbd0 !important;
}

html[data-theme="dark"] .plan-customer {
    color:#ffffff !important;
}

html[data-theme="dark"] .plan-address {
    color:#aeb9bf !important;
}

html[data-theme="dark"] .plan-detail {
    color:#c2cbd0 !important;
}

html[data-theme="dark"] .plan-detail strong {
    color:#e7edf1 !important;
}

html[data-theme="dark"] .plan-badge {
    background:#465158 !important;
    color:#ffffff !important;
}

html[data-theme="dark"] .plan-note-label {
    color:#c7d0d5 !important;
}

html[data-theme="dark"] .plan-main textarea {
    width:100%;
    background:#20292e !important;
    color:#ffffff !important;
    border:1px solid #59676e !important;
    caret-color:#ffffff;
}

html[data-theme="dark"] .plan-main textarea:focus {
    background:#263238 !important;
    border-color:#87969e !important;
    outline:none;
}

html[data-theme="dark"] .plan-main textarea::placeholder {
    color:#89979e !important;
}

html[data-theme="dark"] .plan-note-readonly {
    background:#20292e !important;
    color:#edf2f5 !important;
    border-color:#59676e !important;
}


/* Sticky Speicherleiste war bisher fast weiß */

html[data-theme="dark"] .plan-save {
    background:rgba(28,36,41,.97) !important;
    color:#e7edf1 !important;
    border-top-color:#46535a !important;
}


/* ==========================================================
   6. DRUCKVORSCHAU

   Bildschirm außerhalb des Blattes dunkel.
   Das Papier selbst wird komplett aus dem Darkmode
   herausgenommen.
   ========================================================== */

html[data-theme="dark"] body.print-preview {
    background:#111619 !important;
}


/* Das Blatt */

html[data-theme="dark"] body.print-preview .paper {
    background:#ffffff !important;
    color:#202124 !important;
    color-scheme:light !important;
}


/*
 * Die allgemeinen Darkmode-Regeln für Tabellen/Karten/Formulare
 * dürfen innerhalb des Papierblatts NICHT greifen.
 */

html[data-theme="dark"] body.print-preview .paper table {
    background:transparent !important;
    color:#202124 !important;
}

html[data-theme="dark"] body.print-preview .paper th,
html[data-theme="dark"] body.print-preview .paper td {
    background:transparent !important;
    color:#202124 !important;
    border-color:revert !important;
}

html[data-theme="dark"] body.print-preview .paper tr:hover td {
    background:transparent !important;
}


/* Texte innerhalb des Blatts wieder in Druckfarben */

html[data-theme="dark"] body.print-preview .paper h1,
html[data-theme="dark"] body.print-preview .paper h2,
html[data-theme="dark"] body.print-preview .paper h3,
html[data-theme="dark"] body.print-preview .paper h4,
html[data-theme="dark"] body.print-preview .paper h5,
html[data-theme="dark"] body.print-preview .paper h6,
html[data-theme="dark"] body.print-preview .paper p,
html[data-theme="dark"] body.print-preview .paper strong,
html[data-theme="dark"] body.print-preview .paper label,
html[data-theme="dark"] body.print-preview .paper div,
html[data-theme="dark"] body.print-preview .paper span {
    color:revert;
}


/*
 * Spezifische Druckelemente behalten ihre ursprünglich
 * in drucken.py / wochenplan.py definierten Farben.
 */

html[data-theme="dark"] body.print-preview .paper .badge,
html[data-theme="dark"] body.print-preview .paper .print-rep-code,
html[data-theme="dark"] body.print-preview .paper .customer-report-badge {
    background:revert !important;
    color:revert !important;
    border-color:revert !important;
}


/* ==========================================================
   7. TATSÄCHLICHER AUSDRUCK IMMER HELL
   ========================================================== */

@media print {

    html,
    html[data-theme="dark"],
    html[data-theme="dark"] body,
    html[data-theme="dark"] body.print-preview {
        background:#ffffff !important;
        color:#000000 !important;
        color-scheme:light !important;
    }

    html[data-theme="dark"] body.print-preview .paper {
        background:#ffffff !important;
        color:#000000 !important;
        color-scheme:light !important;
    }

    html[data-theme="dark"] body.print-preview .paper table,
    html[data-theme="dark"] body.print-preview .paper th,
    html[data-theme="dark"] body.print-preview .paper td {
        background:transparent !important;
        color:#000000 !important;
    }

    .theme-toggle,
    .theme-menu-button,
    .mobile-theme-button {
        display:none !important;
    }
}

/* === Unbearbeitete Besuche deutlicher hervorheben === */

html[data-theme="dark"] .week-visit.week-visit-no-report {
    background:#59656b !important;
    color:#ffffff !important;
    border-color:#849198 !important;
}

html[data-theme="dark"] .week-visit.week-visit-no-report .week-customer {
    color:#ffffff !important;
}

html[data-theme="dark"] .week-visit.week-visit-no-report .week-time,
html[data-theme="dark"] .week-visit.week-visit-no-report .week-location,
html[data-theme="dark"] .week-visit.week-visit-no-report .week-owner {
    color:#e0e5e8 !important;
}

/* Unbearbeitete Besuche – deutlich heller */
html[data-theme="dark"] .week-visit.week-visit-no-report {
    background:#6b777d !important;
    color:#ffffff !important;
    border-color:#98a3a8 !important;
}

html[data-theme="dark"] .week-visit.week-visit-no-report .week-time,
html[data-theme="dark"] .week-visit.week-visit-no-report .week-customer {
    color:#ffffff !important;
}

html[data-theme="dark"] .week-visit.week-visit-no-report .week-location,
html[data-theme="dark"] .week-visit.week-visit-no-report .week-owner {
    color:#f0f3f4 !important;
}

/* === Mobile Druck-Navigation im Darkmode === */

html[data-theme="dark"] body.print-preview .toolbar {
    background:#202d33 !important;
    color:#edf2f5 !important;
}

html[data-theme="dark"] body.print-preview .toolbar a,
html[data-theme="dark"] body.print-preview .toolbar button {
    background:#29343a !important;
    color:#ffffff !important;
    border:1px solid #536168 !important;
}

html[data-theme="dark"] body.print-preview .toolbar a:hover,
html[data-theme="dark"] body.print-preview .toolbar button:hover {
    background:#37444b !important;
    color:#ffffff !important;
}

/* Falls die mobile Druckansicht ein Menü/Details verwendet */
html[data-theme="dark"] body.print-preview .mobile-nav,
html[data-theme="dark"] body.print-preview .mobile-nav-menu,
html[data-theme="dark"] body.print-preview .mobile-nav-button {
    background:#202d33 !important;
    color:#ffffff !important;
    border-color:#536168 !important;
}

html[data-theme="dark"] body.print-preview .mobile-nav-link {
    background:#29343a !important;
    color:#ffffff !important;
}

/* === Wochenansicht: Aktionsmenü mobil === */

@media (max-width:700px) {

    html[data-theme="dark"] .week-header,
    html[data-theme="dark"] .week-actions,
    html[data-theme="dark"] .week-toolbar,
    html[data-theme="dark"] .week-header-actions {
        background:transparent !important;
        color:#edf2f5 !important;
    }

    html[data-theme="dark"] .week-header a,
    html[data-theme="dark"] .week-actions a,
    html[data-theme="dark"] .week-toolbar a,
    html[data-theme="dark"] .week-header-actions a {
        background:#29343a !important;
        color:#ffffff !important;
        border-color:#536168 !important;
    }
}