/* ============================================================
   GutachterBook — zentrales Theme
   Alle Brand-/Status-/Severity-Farben gibt es NUR hier.
   Pages: Variablen nutzen, keine Hex-Werte hartkodieren.
   ============================================================ */

/* hidden-Attribut hat im Browser default display:none, wird aber von
   explizitem display: inline-flex/flex auf Buttons/Links überschrieben.
   !important stellt den Browser-Default global wieder her. */
[hidden] { display: none !important; }

:root {
    /* ============================================
       Neue Grünpalette (Claude-inspiriert) — 10 Stufen.
       Bestehende --brand-green-* Aliase darauf gemappt.
       ============================================ */
    --g-50:  #f2f6f3;
    --g-100: #e6efe8;
    --g-200: #cfdfd4;
    --g-300: #a8c6b3;
    --g-400: #79a589;
    --g-500: #4d8560;
    --g-600: #3a6b4a;
    --g-700: #2a5239;
    --g-800: #1c3a2a;
    --g-900: #11241a;

    /* Warme Neutrale — Cream-Hintergrund + Ink-Skala */
    --cream:    #faf9f5;
    --paper:    #f4f2ea;
    --sand:     #e8e4d5;
    --ink:      #1a1a17;
    --ink-soft: #4a4a44;
    --ink-mute: #7a7a72;

    /* Feedback (Warn/Danger/Success) — mockup-konform */
    --warn:      #b07a2b;
    --warn-bg:   #fbf3e4;
    --danger:    #a13c2e;
    --danger-bg: #fbe6e1;
    --success:   #3a6b4a;
    --success-bg:#e6efe8;

    /* Brand-Grün — Aliase auf neue Skala (Namen bleiben, Werte neu) */
    --brand-green-900: var(--g-900);
    --brand-green-800: var(--g-800);
    --brand-green-700: var(--g-700);
    --brand-green-600: var(--g-600);
    --brand-green-500: var(--g-500);
    --brand-green-300: var(--g-300);
    --brand-green-100: var(--g-100);
    --brand-green-tint:     rgba(42,82,57,.08);   /* dezenter Grün-Wash für Hover-States */

    /* Dreistufiger Brand-Gradient — kippt bei 45 % spürbar heller, wirkt lebendig. */
    --brand-gradient:        linear-gradient(135deg, var(--g-800) 0%, var(--g-700) 45%, var(--g-500) 100%);
    --brand-gradient-hover:  linear-gradient(135deg, var(--g-700) 0%, var(--g-500) 45%, var(--g-400) 100%);
    --brand-gradient-soft:   linear-gradient(135deg, var(--g-700) 0%, var(--g-500) 45%, var(--g-300) 100%);
    --brand-gradient-bar:    linear-gradient(180deg, #1f2a24 0%, #15201a 100%);

    --brand-ink:        var(--g-900);   /* Headlines */
    --brand-ink-soft:   var(--ink-soft);/* Body */
    --brand-ink-mute:   var(--ink-mute);/* Sub / Meta */
    --brand-ink-faint:  #8a9b94;        /* Labels */

    --brand-surface:        #ffffff;
    --brand-surface-alt:    #f7f6f0;
    --brand-surface-tint:   var(--g-50);
    --brand-line:           #efece2;
    --brand-line-strong:    var(--sand);

    /* Status-Farben — Termine, Buchungen, Gutachten-Status */
    --status-confirmed:     var(--g-700);
    --status-confirmed-bg:  rgba(42,82,57,.12);
    --status-confirmed-ink: var(--g-800);

    --status-completed:     #3a6b8f;
    --status-completed-bg:  rgba(58,107,143,.12);
    --status-completed-ink: #26506b;

    --status-canceled:      #c25450;
    --status-canceled-bg:   rgba(194,84,80,.12);
    --status-canceled-ink:  #a8403c;

    --status-blocked:       #6b4f3a;
    --status-blocked-bg:    rgba(107,79,58,.12);
    --status-blocked-ink:   #5a4230;

    --status-draft:         #8a9b94;
    --status-draft-bg:      rgba(138,155,148,.14);
    --status-draft-ink:     #4d5b56;

    /* Schaden-Schwere — bewusst eigene Skala (Ampel) */
    --severity-low:     var(--g-700);
    --severity-low-bg:  rgba(42,82,57,.12);
    --severity-medium:    #c79a2a;
    --severity-medium-bg: rgba(199,154,42,.14);
    --severity-high:    #c25450;
    --severity-high-bg: rgba(194,84,80,.12);

    /* Geometrie */
    --radius-card:  18px;
    --radius-pill:  999px;
    --radius-btn:   12px;
    --radius-chip:  10px;
    --radius-input: 8px;

    --shadow-card:        0 4px 18px rgba(17,36,26,.05);
    --shadow-card-hover:  0 12px 32px rgba(17,36,26,.10);
    --shadow-btn:         0 6px 16px rgba(26,58,42,.25);
    --shadow-btn-hover:   0 10px 24px rgba(26,58,42,.30);

    /* Aliase für das Style-Guide-Vokabular — gleiche Werte, klarere Namen */
    --shadow-brand:       var(--shadow-btn);
    --shadow-brand-hover: var(--shadow-btn-hover);
}

/* ============================================================
   Wiederverwendbare Bausteine — bewusst klein gehalten.
   Pages dürfen das via class="th-btn-primary" o.Ä. nutzen.
   ============================================================ */

.th-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--radius-btn);
    background: var(--brand-gradient);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(15,31,24,.35);
    text-decoration: none;
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(15,31,24,.18),
        var(--shadow-btn);
    cursor: pointer;
    transition: transform .15s, box-shadow .25s, background .3s;
    font-family: inherit;
}
.th-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px rgba(15,31,24,.22),
        var(--shadow-btn-hover);
    background: var(--brand-gradient-hover);
    color: #ffffff;
}
.th-btn-primary:active { transform: translateY(0); }
/* Kleine Primary-Buttons (z. B. in der Topbar) — Lesbarkeit kommt aus
   Kontrast, kein text-shadow. */
.th-btn-primary.th-btn-sm,
.th-btn-sm.th-btn-primary {
    padding: 7px 13px;
    font-size: 13px;
    text-shadow: none;
}

.th-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-btn);
    background: var(--brand-surface);
    color: var(--brand-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--brand-line-strong);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
    font-family: inherit;
}
.th-btn-ghost:hover {
    background: var(--brand-surface-tint);
    border-color: var(--brand-green-700);
}

.th-btn-danger {
    background: #fff;
    border: 1px solid #f0c8c8;
    color: #a8242a;
    padding: 10px 18px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}
.th-btn-danger:hover {
    background: #fde0e0;
    border-color: #dca0a0;
}

.th-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1;
}
.th-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.th-status--confirmed { background: var(--status-confirmed-bg); color: var(--status-confirmed-ink); }
.th-status--confirmed .th-status-dot { background: var(--status-confirmed); }
.th-status--completed { background: var(--status-completed-bg); color: var(--status-completed-ink); }
.th-status--completed .th-status-dot { background: var(--status-completed); }
.th-status--canceled  { background: var(--status-canceled-bg);  color: var(--status-canceled-ink); }
.th-status--canceled  .th-status-dot { background: var(--status-canceled); }
.th-status--draft     { background: var(--status-draft-bg);     color: var(--status-draft-ink); }
.th-status--draft     .th-status-dot { background: var(--status-draft); }

.th-sev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1;
}
.th-sev--low    { background: var(--severity-low-bg);    color: var(--severity-low); }
.th-sev--medium { background: var(--severity-medium-bg); color: var(--severity-medium); }
.th-sev--high   { background: var(--severity-high-bg);   color: var(--severity-high); }

/* Mobile: Schwere-Badges in Schadens-Listen ausblenden — auf engem
   Bildschirm ist die Info nicht entscheidend genug, um Platz zu rechtfertigen.
   Die Schwere bleibt im Detail-View des einzelnen Schadens sichtbar. */
@media (max-width: 600px) {
    .th-sev { display: none; }
}

.th-card {
    background: var(--brand-surface);
    border-radius: var(--radius-card);
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: var(--shadow-card);
    transition: transform .15s ease, box-shadow .25s ease;
}
.th-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.th-input,
.th-select,
.th-textarea {
    padding: 10px 12px;
    border-radius: var(--radius-input);
    border: 1.5px solid var(--brand-line-strong);
    font-size: 14px;
    color: var(--brand-ink);
    font-family: inherit;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

/* type=date / time / datetime auf iOS/Safari haben Webkit-eigene
   Innenraender + min-height, die nicht zu den anderen .th-input
   passen — Layout sieht sonst auf Mobile schief aus. Vereinheitlichen. */
.th-input[type="date"],
.th-input[type="time"],
.th-input[type="datetime-local"],
.th-input[type="month"],
.th-input[type="week"] {
    appearance: none;
    -webkit-appearance: none;
    min-height: 42px;
    line-height: 1.2;
}
.th-input:focus,
.th-select:focus,
.th-textarea:focus {
    outline: none;
    border-color: var(--brand-green-700);
    box-shadow: 0 0 0 4px rgba(45,106,79,.12);
}

/* Native <select> mit Brand-Look: eigener Caret statt Browser-Default,
   etwas mehr rechter Innenabstand für den Caret-Platz, Hover-Highlight. */
.th-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c7c6f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.th-select:hover { border-color: var(--brand-green-500); }
/* IE/Edge-Legacy: nativen Pfeil ausblenden. */
.th-select::-ms-expand { display: none; }

/* ============================================================
   th-cs: vollständig gestyltes Custom-Select (Trigger + Dropdown).
   Pattern wie cal-cs/av-cs, aber als globaler App-Standard.
   ============================================================ */
.th-cs { position: relative; width: 100%; }
.th-cs-trigger {
    width: 100%;
    /* Symmetrisches Padding: der Caret ist ein echtes Flex-Kind, kein
       Background-SVG mehr — sonst sitzt der Pfeil 36px vom rechten Rand
       weg statt am Rand. */
    padding: 10px 12px;
    border-radius: var(--radius-input);
    border: 1.5px solid var(--brand-line-strong);
    background: #fff;
    color: var(--brand-ink);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: border-color .15s, box-shadow .15s;
    line-height: 1.3;
}
.th-cs-trigger:hover { border-color: var(--brand-green-500); }
.th-cs-trigger:focus {
    outline: none;
    border-color: var(--brand-green-700);
    box-shadow: 0 0 0 4px rgba(45,106,79,.12);
}
.th-cs.is-open .th-cs-trigger {
    border-color: var(--brand-green-700);
    box-shadow: 0 0 0 4px rgba(45,106,79,.12);
}
.th-cs-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.th-cs-label.is-placeholder { color: var(--brand-ink-faint); }
.th-cs-caret { color: var(--brand-ink-mute); flex-shrink: 0; transition: transform .15s; }
.th-cs.is-open .th-cs-caret { transform: rotate(180deg); }
.th-cs-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--brand-line-strong);
    border-radius: var(--radius-input);
    box-shadow: 0 14px 40px rgba(15,31,24,.14);
    padding: 6px;
    max-height: 280px;
    overflow: auto;
    z-index: 30;
    display: none;
}
.th-cs.is-open .th-cs-dropdown { display: block; }
.th-cs-option {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--brand-ink);
    cursor: pointer;
    line-height: 1.35;
    transition: background .12s;
}
.th-cs-option:hover { background: var(--brand-surface-tint); }
.th-cs-option.is-selected {
    background: rgba(45,106,79,.1);
    color: var(--brand-green-700);
    font-weight: 600;
}
.th-cs-option-meta {
    display: block;
    font-size: 12px;
    color: var(--brand-ink-mute);
    font-weight: 400;
    margin-top: 2px;
}

/* Generische Badge — neutral grün gefüllt, runde Pille.
   Für funktionale Status-Farben bleiben die .th-status*-Klassen. */
.th-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--g-100);
    color: var(--g-800);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .15px;
    line-height: 1;
}
.th-badge--accent {
    background: var(--brand-gradient);
    color: #ffffff;
    box-shadow: var(--shadow-brand);
}

.th-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--brand-ink-faint);
    margin-bottom: 6px;
    display: block;
}

.th-empty {
    text-align: center;
    padding: 60px 28px;
    background: var(--brand-surface);
    border-radius: var(--radius-card);
    border: 1px dashed var(--brand-line-strong);
}
.th-empty-zero {
    margin: 0 auto 14px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(92,124,111,.08);
    color: var(--brand-ink-mute);
    font-size: 34px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -1px;
}
.th-empty-text {
    font-size: 16px;
    color: var(--brand-ink-mute);
    margin: 0 0 20px;
}