/* ==========================================================================
   KLEINE MÜHLE - COMPONENTS CSS V9.2
   Fokus: Zero-Click-Waste, Soft UI, Glassmorphism, Typografische Hierarchie
   Outfit statt Lato durchgesetzt. Strikte Formular-Grids integriert.
   ========================================================================== */

:root {
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Outfit', sans-serif;
}

.km-relative { position: relative !important; }
.km-absolute { position: absolute !important; }

/* TYPOGRAFIE */
.km-micro-label {
    display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--theme-muted); margin-bottom: 8px;
}

.km-h1, h1 { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--theme-text); letter-spacing: -1px; margin: 0; line-height: 1.1;}
.km-h2, h2 { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--theme-text); letter-spacing: -0.5px; margin: 0; line-height: 1.2;}
.km-h3, h3 { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--theme-text); margin: 0; line-height: 1.3;}

/* LAYOUT GRIDS */
/* Responsive Grids (brechen um, wenn Platz fehlt) */
.km-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md); align-items: start; }
.km-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-md); align-items: start; }

/* STRICT GRIDS (Zwingen Elemente in eine Zeile - ideal für Modal-Formulare) */
.km-grid-strict-2 { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: var(--spacing-md); 
    align-items: start; 
}
.km-grid-strict-2 > * { min-width: 0; } /* Verhindert Grid-Blowout durch native Input-Breiten */

/* Strikte Ausrichtung des Datums-Grids */
.km-grid-date-toggle { 
    display: grid; 
    grid-template-columns: 1fr auto; 
    gap: var(--spacing-md); 
    align-items: start; /* Beide Container starten oben, das Label sorgt für den exakten Offset */
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--theme-line);
}

/* Hilfsklasse für Struktur-Spiegelung (Zero-Click-Waste) */
.km-visually-hidden {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

/* Zwingt den Toggle auf die exakte Höhe des Inputs (56px) und zentriert ihn vertikal */
.km-toggle-group .km-toggle-wrap {
    height: 56px; 
    display: flex;
    align-items: center;
}
.km-grid-date-toggle > * { min-width: 0; }

/* BENTO BOX */
.km-bento-section { 
    background: var(--theme-card); border-radius: var(--radius-lg); padding: var(--spacing-lg); 
    box-shadow: var(--shadow-soft); margin-bottom: var(--spacing-lg); 
    border: 1px solid rgba(26,58,83,0.02); transition: all 0.3s var(--ease-squishy);
}
.km-bento-section:hover { box-shadow: var(--shadow-float); }
.km-bento-section.km-flat { background: var(--theme-card-muted); border: 1px dashed var(--theme-line); box-shadow: none; }
.km-bento-header { margin-bottom: var(--spacing-md); display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 12px; border-bottom: 1px solid var(--theme-line); }
.km-bento-title { font-family: var(--font-heading); font-size: var(--text-xl); margin: 0; letter-spacing: -0.5px; color: var(--theme-ink);}

/* FORMULARE */
.km-form-group { margin-bottom: var(--spacing-md); width: 100%; min-width: 0; }
.km-input, .km-select, .km-textarea {
    width: 100%; min-height: 56px; padding: 16px 20px;
    font-size: var(--text-base); font-family: var(--font-body); font-weight: 600;
    background: var(--theme-card-muted); border: 2px solid transparent;
    border-radius: var(--radius-md); color: var(--theme-text);
    transition: all 0.3s var(--ease-squishy); -webkit-appearance: none;
    box-sizing: border-box; max-width: 100%; min-width: 0;
}
.km-textarea { resize: vertical; min-height: 120px; }
.km-input::placeholder, .km-textarea::placeholder { color: var(--theme-muted); font-weight: 400; }
.km-input:focus, .km-select:focus, .km-textarea:focus {
    outline: none; background: var(--theme-card);
    border-color: var(--theme-accent); box-shadow: var(--shadow-focus);
}
.km-select {
    cursor: pointer; padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238F9EAF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 1.2rem;
}
.km-input-wrap { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; }
.km-input-wrap input { width: 100%; padding-right: 44px; }
.km-input-wrap input[type="date"]::-webkit-calendar-picker-indicator { 
    position: absolute; right: 0; top: 0; width: 44px; height: 100%; opacity: 0; cursor: pointer; z-index: 2; 
}
.km-input-icon { position: absolute; right: 16px; color: var(--theme-muted); pointer-events: none; z-index: 1; font-size: 1.1rem; }

/* UTILITY / MODIFIER KLASSEN (Ersetzt die Inline Styles) */
.km-input-title {
    width: 100%; font-family: var(--font-heading) !important; font-size: var(--text-2xl); 
    padding: 1rem 0; background: transparent; border: none; color: var(--theme-text); 
    box-shadow: none; outline: none; border-radius: 0; min-height: auto;
}
.km-input-title::placeholder { color: var(--theme-muted); opacity: 0.5; }
.km-input-title:focus { background: transparent; border: none; box-shadow: none; }

.km-input-elevated { background-color: var(--theme-card) !important; box-shadow: var(--shadow-soft) !important; }
.km-modal-header.is-borderless { border-bottom: none; padding-bottom: 0; background: transparent; }

.km-flex-center { display: flex; align-items: center; }
.gap-8 { gap: 8px; }
.w-100 { width: 100% !important; }
.mb-0 { margin-bottom: 0 !important; }
.km-hidden-checkbox { display: none; }

.km-toggle-bottom-align { 
    height: 56px; /* Zwingt den Toggle auf die exakte Höhe des Inputs daneben */
    display: flex;
    align-items: center;
}

/* BUTTONS */
.km-btn-primary, .km-btn-outline {
    min-height: 56px; padding: 0 32px; border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 800; cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.3s var(--ease-squishy); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; font-family: var(--font-body); border: none; text-decoration: none;
}
@media (min-width: 768px) { .km-btn-primary, .km-btn-outline { width: auto; } }

.km-btn-primary { background-color: var(--theme-ink); color: var(--theme-ink-text); box-shadow: 0 8px 25px rgba(26,58,83,0.15); }
.km-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(26,58,83,0.25); }
.km-btn-primary:active { transform: scale(0.97); }
.km-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.km-btn-outline { background-color: var(--theme-card); color: var(--theme-text); border: 2px solid var(--theme-line); box-shadow: var(--shadow-soft); }
.km-btn-outline:hover { background: var(--theme-card-muted); transform: translateY(-2px); border-color: rgba(26,58,83,0.15); }
.km-btn-outline.is-inverted { background: var(--theme-card); border-color: transparent; }

.km-btn-icon {
    width: 52px; height: 52px; border-radius: var(--radius-squircle); border: none; background: var(--theme-card-muted);
    color: var(--theme-text); font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s var(--ease-squishy); flex-shrink: 0;
}
.km-btn-icon:hover { background: var(--theme-ink); color: var(--theme-ink-text); transform: scale(1.1); box-shadow: var(--shadow-float); }

.km-btn-text {
    background: transparent; border: none; padding: 8px 16px; border-radius: var(--radius-full);
    font-weight: 800; font-size: var(--text-sm); color: var(--theme-accent); font-family: var(--font-body);
    cursor: pointer; transition: all 0.3s var(--ease-squishy); display: inline-flex; align-items: center; gap: 8px;
}
.km-btn-text:hover { background: rgba(196, 163, 128, 0.1); transform: scale(1.05); }

/* CHIPS & CHECKBOXES */
.km-pill-group { display: flex; flex-wrap: wrap; gap: 10px; }
.km-chip {
    min-height: 48px; padding: 0 20px; border-radius: var(--radius-md);
    background: var(--theme-card-muted); border: 2px solid transparent;
    font-size: var(--text-sm); font-weight: 700; color: var(--theme-text);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: all 0.2s var(--ease-squishy); font-family: var(--font-body);
}
.km-chip:hover { background: var(--theme-card); border-color: var(--theme-line); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.km-chip.active { background: var(--theme-ink); color: var(--theme-ink-text); box-shadow: 0 8px 20px rgba(26,58,83,0.15); }

.km-checkbox-wrap { display: flex; align-items: center; gap: 14px; cursor: pointer; min-height: 48px; }
.km-checkbox-wrap input { display: none; }
.km-checkbox-box {
    width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--theme-muted);
    transition: all 0.2s var(--ease-squishy); display: flex; align-items: center; justify-content: center; background: var(--theme-card); flex-shrink: 0;
}
.km-checkbox-wrap:hover .km-checkbox-box { border-color: var(--theme-ink); transform: scale(1.1); }
.km-checkbox-wrap input:checked + .km-checkbox-box { background: var(--theme-ink); border-color: var(--theme-ink); }
.km-checkbox-wrap input:checked + .km-checkbox-box::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--theme-ink-text); font-size: 1rem;
}

/* MODALS */
.km-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(26, 58, 83, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; justify-content: center; align-items: center; padding: var(--spacing-lg);
}

.km-modal {
    background: var(--theme-bg); width: 100%; max-width: 680px; max-height: 90dvh;
    border-radius: var(--radius-xl); box-shadow: var(--shadow-float);
    display: flex; flex-direction: column; overflow: hidden;
    animation: modalPop 0.4s var(--ease-squishy); border: 1px solid rgba(255,255,255,0.4);
}

.km-modal-header { padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md) var(--spacing-lg); display: flex; justify-content: space-between; align-items: flex-start; background: var(--theme-card); border-bottom: 1px solid var(--theme-line); position: relative; z-index: 10; flex-shrink: 0;}
.km-modal-body { padding: var(--spacing-md) var(--spacing-lg); overflow-y: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
.km-modal-footer { padding: var(--spacing-md) var(--spacing-lg); background: var(--theme-card); border-top: 1px solid var(--theme-line); display: flex; flex-wrap: wrap; gap: 16px; position: relative; z-index: 10; flex-shrink: 0;}

@keyframes modalPop { 0% { opacity: 0; transform: scale(0.95) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

/* MOBILE MODAL OVERRIDE */
body.mobile .km-modal-overlay { align-items: flex-end; padding: 0; }
body.mobile .km-modal {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    max-height: 92dvh; animation: sheetUp 0.4s var(--ease-squishy); padding-bottom: env(safe-area-inset-bottom);
}
body.mobile .km-modal-header { padding: var(--spacing-md); }
body.mobile .km-modal-body { padding: var(--spacing-md); }
body.mobile .km-modal-footer { padding: var(--spacing-md); }

@keyframes sheetUp { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }

/* ALERTS */
.km-alert { 
    padding: 20px 24px; border-radius: var(--radius-md); font-family: var(--font-body); 
    font-size: var(--text-base); font-weight: 700; display: flex; gap: 16px; align-items: flex-start; 
    margin-bottom: var(--spacing-md); line-height: 1.5; box-shadow: var(--shadow-soft);
}
.km-alert i { font-size: 1.5rem; margin-top: 2px; flex-shrink: 0;}
.km-alert.error { background: rgba(225, 29, 72, 0.08); color: var(--theme-danger); border: 1px solid rgba(225, 29, 72, 0.15); }
.km-alert.info { background: rgba(196, 163, 128, 0.1); color: #9A7B58; border: 1px solid rgba(196, 163, 128, 0.2); }
.km-alert.success { background: rgba(22, 163, 74, 0.08); color: var(--theme-success); border: 1px solid rgba(22, 163, 74, 0.15); }

.km-alert-vertical { flex-direction: column; align-items: stretch; }
.km-alert-vertical i { margin-bottom: 8px; font-size: 1.2rem; }

/* QUICK ACTIONS */
.km-quick-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--theme-card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--theme-text); font-size: 1rem; text-decoration: none;
    box-shadow: var(--shadow-soft); transition: all 0.3s var(--ease-squishy);
    border: 1px solid var(--theme-line); margin-left: 4px;
}
.km-quick-action:hover { transform: scale(1.15); box-shadow: var(--shadow-float); color: var(--theme-accent); border-color: var(--theme-accent); }

/* TOGGLE SWITCHES */
.km-toggle-wrap { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.km-toggle-switch { position: relative; width: 56px; height: 32px; display: inline-block; cursor: pointer; flex-shrink: 0; }
.km-toggle-switch input { opacity: 0; width: 0; height: 0; }
.km-toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--theme-muted); transition: .3s var(--ease-squishy); border-radius: 30px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.km-toggle-slider:before {
    position: absolute; content: ""; height: 26px; width: 26px; left: 3px; bottom: 3px;
    background-color: white; transition: .3s var(--ease-squishy); border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.km-toggle-switch input:checked + .km-toggle-slider { background-color: var(--theme-success); }
.km-toggle-switch input:checked + .km-toggle-slider:before { transform: translateX(24px); }
.km-toggle-label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 800; color: var(--theme-ink); }

/* KM VIEW MANAGER TRANSITIONS */
#km-app-main {
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 1;
    transform: translateY(0);
    will-change: opacity, transform;
}

.km-view-fade-out {
    opacity: 0 !important;
    transform: translateY(8px) !important;
}

.km-view-fade-in {
    animation: km-fade-in-up 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* ==========================================================================
   APP SHELL & LAYOUT (Ersatz für Inline-Styles der index.html)
   ========================================================================== */

/* Fixierte Positionierung für den globalen Alert */
.km-alert-fixed {
    position: fixed;
    top: max(var(--spacing-md), env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 480px;
    z-index: 10000;
    box-shadow: var(--shadow-float);
}

/* 
   Dynamische Transparenz für den Danger-Button.
   Warum: color-mix() spart uns das Anlegen von redundanten RGB-Variablen 
   und nutzt stattdessen die saubere Hex-Variable --theme-danger. 
*/
.km-nav-link-danger {
    background-color: color-mix(in srgb, var(--theme-danger) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-danger) 10%, transparent);
}

.km-nav-link-danger .km-nav-icon {
    background-color: transparent;
}

/* Layout für den gesperrten Hauptbereich (Login-Screen) */
.km-main-locked {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-sidebar-bg); /* Nutzt den existierenden rgba-Wert */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@keyframes km-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}