/**
 * KoSch Design System – Theme Tokens & Components
 * Phase 4A: Zentrale Design-Token-Datei
 *
 * Primary: #194d85 (KoSch Blau)
 * Accent:  #F5A623 (KoSch Orange)
 *
 * Farbskala 50-900 algorithmisch abgeleitet.
 * Alle Komponenten nutzen ausschließlich --kosch-* Variablen.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS – Light Mode (Default)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Primary Farbskala (Blau #194d85) ───────────────────────────── */
    --kosch-primary-50:  #e8eef6;
    --kosch-primary-100: #c5d5e8;
    --kosch-primary-200: #9fb8d8;
    --kosch-primary-300: #789bc8;
    --kosch-primary-400: #5b85bc;
    --kosch-primary-500: #3e6fb0;
    --kosch-primary-600: #2d5d9b;
    --kosch-primary-700: #194d85;
    --kosch-primary-800: #123c6a;
    --kosch-primary-900: #0b2b4f;

    /* ── Accent Farbskala (Orange #F5A623) ──────────────────────────── */
    --kosch-accent-50:  #fef6e6;
    --kosch-accent-100: #fde8bf;
    --kosch-accent-200: #fbd895;
    --kosch-accent-300: #f9c86a;
    --kosch-accent-400: #f7b847;
    --kosch-accent-500: #F5A623;
    --kosch-accent-600: #e8940f;
    --kosch-accent-700: #d4800a;
    --kosch-accent-800: #b36b08;
    --kosch-accent-900: #875006;

    /* ── Semantic Tokens ────────────────────────────────────────────── */
    --kosch-primary:   var(--kosch-primary-700);
    --kosch-accent:    var(--kosch-accent-500);
    --kosch-bg:        #f8f9fa;
    --kosch-surface:   #ffffff;
    --kosch-text:      #2c3e50;
    --kosch-muted:     #5a6c7d;
    --kosch-border:    #e0e4e8;
    --kosch-radius:    0.5rem;
    --kosch-radius-lg: 0.75rem;
    --kosch-shadow:    0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
    --kosch-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);

    /* ── Status / Feedback ──────────────────────────────────────────── */
    --kosch-success:   #28a745;
    --kosch-warning:   #ffc107;
    --kosch-danger:    #dc3545;
    --kosch-info:      #17a2b8;

    /* ── Typography ─────────────────────────────────────────────────── */
    --kosch-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --kosch-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --kosch-fs-xs:     0.75rem;
    --kosch-fs-sm:     0.875rem;
    --kosch-fs-base:   1rem;
    --kosch-fs-lg:     1.125rem;
    --kosch-fs-xl:     1.25rem;
    --kosch-fs-2xl:    1.5rem;
    --kosch-fs-3xl:    2rem;

    /* ── Spacing ────────────────────────────────────────────────────── */
    --kosch-space-1:   0.25rem;
    --kosch-space-2:   0.5rem;
    --kosch-space-3:   0.75rem;
    --kosch-space-4:   1rem;
    --kosch-space-5:   1.25rem;
    --kosch-space-6:   1.5rem;
    --kosch-space-8:   2rem;
    --kosch-space-10:  2.5rem;
    --kosch-space-12:  3rem;

    /* ── Transitions ────────────────────────────────────────────────── */
    --kosch-transition: 0.2s ease;

    /* ── Backward-compat: map old variable names ────────────────────── */
    --primary-color:   var(--kosch-primary);
    --secondary-color: var(--kosch-accent);
    --accent-color:    var(--kosch-primary-900);
    --text-color:      var(--kosch-text);
    --text-light:      var(--kosch-muted);
    --bg-light:        var(--kosch-bg);
    --border-color:    var(--kosch-border);
    --shadow:          var(--kosch-shadow);
    --shadow-hover:    var(--kosch-shadow-lg);
    --border-radius:   var(--kosch-radius);
    --transition:      all var(--kosch-transition);
    --success-color:   var(--kosch-success);
    --warning-color:   var(--kosch-warning);
    --danger-color:    var(--kosch-danger);
    --info-color:      var(--kosch-info);
}


/* ═══════════════════════════════════════════════════════════════════════
   2. DARK MODE – via data-attribute oder prefers-color-scheme
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="dark"],
html[data-theme="dark"] {
    --kosch-bg:        #121820;
    --kosch-surface:   #1a2332;
    --kosch-text:      #e0e4e8;
    --kosch-muted:     #8899aa;
    --kosch-border:    #2a3545;
    --kosch-shadow:    0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    --kosch-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);

    /* Helle Variante der Primärfarbe für dunklen Hintergrund */
    --kosch-primary:   var(--kosch-primary-400);
    --kosch-accent:    var(--kosch-accent-400);

    /* Backward-compat */
    --primary-color:   var(--kosch-primary);
    --secondary-color: var(--kosch-accent);
    --accent-color:    var(--kosch-primary-200);
    --text-color:      var(--kosch-text);
    --text-light:      var(--kosch-muted);
    --bg-light:        var(--kosch-bg);
    --border-color:    var(--kosch-border);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --kosch-bg:        #121820;
        --kosch-surface:   #1a2332;
        --kosch-text:      #e0e4e8;
        --kosch-muted:     #8899aa;
        --kosch-border:    #2a3545;
        --kosch-shadow:    0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
        --kosch-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
        --kosch-primary:   var(--kosch-primary-400);
        --kosch-accent:    var(--kosch-accent-400);

        color-scheme: dark;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   3. MULTI-TENANT OVERRIDES (domain-based)
   ═══════════════════════════════════════════════════════════════════════ */

/* KoSch Holding – Orange Theme */
body[data-domain*="holding"],
html[data-domain*="holding"] {
    --kosch-primary-700: #F5A623;
    --kosch-primary-800: #d4800a;
    --kosch-primary-900: #b36b08;
    --kosch-primary:     #F5A623;
    --kosch-accent:      #194d85;
    --primary-color:     #F5A623;
    --secondary-color:   #194d85;
    --accent-color:      #e8940f;
}

/* KoSch Services – Blue Theme (default) */
body[data-domain*="services"],
html[data-domain*="services"] {
    --kosch-primary:     #194d85;
    --kosch-accent:      #F5A623;
    --primary-color:     #194d85;
    --secondary-color:   #F5A623;
}

/* KoSch Dienstleistungen – Blue Theme */
body[data-domain*="dienstleistungen"],
html[data-domain*="dienstleistungen"] {
    --kosch-primary:     #194d85;
    --kosch-accent:      #F5A623;
    --primary-color:     #194d85;
    --secondary-color:   #F5A623;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. BASE STYLES
   ═══════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--kosch-font);
    font-size: var(--kosch-fs-base);
    line-height: 1.6;
    color: var(--kosch-text);
    background-color: var(--kosch-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   5. COMPONENT: Buttons
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kosch-space-2);
    padding: 0.625rem 1.25rem;
    font-family: var(--kosch-font);
    font-size: var(--kosch-fs-sm);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--kosch-radius);
    transition: background-color var(--kosch-transition),
                border-color var(--kosch-transition),
                color var(--kosch-transition),
                box-shadow var(--kosch-transition),
                transform var(--kosch-transition);
}

.kosch-btn:hover,
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--kosch-shadow);
}

.kosch-btn:active,
.btn:active {
    transform: translateY(0);
}

.kosch-btn:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--kosch-accent);
    outline-offset: 2px;
}

/* Button variants */
.kosch-btn-primary,
.btn-primary {
    background-color: var(--kosch-primary);
    border-color: var(--kosch-primary);
    color: #ffffff;
}

.kosch-btn-primary:hover,
.btn-primary:hover {
    background-color: var(--kosch-primary-800);
    border-color: var(--kosch-primary-800);
    color: #ffffff;
}

.kosch-btn-accent,
.btn-accent {
    background-color: var(--kosch-accent);
    border-color: var(--kosch-accent);
    color: var(--kosch-primary-900);
}

.kosch-btn-accent:hover,
.btn-accent:hover {
    background-color: var(--kosch-accent-600);
    border-color: var(--kosch-accent-600);
    color: #ffffff;
}

.kosch-btn-secondary,
.btn-secondary {
    background-color: var(--kosch-accent);
    border-color: var(--kosch-accent);
    color: var(--kosch-primary-900);
}

.kosch-btn-secondary:hover,
.btn-secondary:hover {
    background-color: var(--kosch-accent-600);
    border-color: var(--kosch-accent-600);
    color: #ffffff;
}

.kosch-btn-outline,
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--kosch-primary);
    color: var(--kosch-primary);
}

.kosch-btn-outline:hover,
.btn-outline-primary:hover {
    background-color: var(--kosch-primary);
    border-color: var(--kosch-primary);
    color: #ffffff;
}

.kosch-btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--kosch-primary);
}

.kosch-btn-ghost:hover {
    background-color: var(--kosch-primary-50);
}

.btn-success {
    background-color: var(--kosch-success);
    border-color: var(--kosch-success);
    color: #ffffff;
}

.btn-warning {
    background-color: var(--kosch-warning);
    border-color: var(--kosch-warning);
    color: var(--kosch-text);
}

.btn-danger {
    background-color: var(--kosch-danger);
    border-color: var(--kosch-danger);
    color: #ffffff;
}

.btn-info {
    background-color: var(--kosch-info);
    border-color: var(--kosch-info);
    color: #ffffff;
}

/* Button sizes */
.kosch-btn-sm, .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--kosch-fs-xs);
}

.kosch-btn-lg, .btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--kosch-fs-lg);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. COMPONENT: Cards
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-card,
.card {
    background-color: var(--kosch-surface);
    border: 1px solid var(--kosch-border);
    border-radius: var(--kosch-radius-lg);
    box-shadow: var(--kosch-shadow);
    overflow: hidden;
    transition: box-shadow var(--kosch-transition), transform var(--kosch-transition);
}

.kosch-card:hover,
.card:hover {
    box-shadow: var(--kosch-shadow-lg);
    transform: translateY(-2px);
}

.kosch-card-header,
.card-header {
    background-color: var(--kosch-primary-50);
    border-bottom: 1px solid var(--kosch-border);
    padding: var(--kosch-space-4) var(--kosch-space-6);
    font-weight: 600;
    color: var(--kosch-primary);
}

.kosch-card-body,
.card-body {
    padding: var(--kosch-space-6);
}

.kosch-card-footer,
.card-footer {
    background-color: var(--kosch-bg);
    border-top: 1px solid var(--kosch-border);
    padding: var(--kosch-space-4) var(--kosch-space-6);
}


/* ═══════════════════════════════════════════════════════════════════════
   7. COMPONENT: Tables
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-table,
.table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--kosch-surface);
    border-radius: var(--kosch-radius-lg);
    overflow: hidden;
    box-shadow: var(--kosch-shadow);
}

.kosch-table thead th,
.table thead th {
    background-color: var(--kosch-primary);
    color: #ffffff;
    font-weight: 600;
    padding: var(--kosch-space-3) var(--kosch-space-4);
    text-align: left;
    border: none;
    font-size: var(--kosch-fs-sm);
    letter-spacing: 0.02em;
}

.kosch-table tbody td,
.table tbody td {
    padding: var(--kosch-space-3) var(--kosch-space-4);
    border-bottom: 1px solid var(--kosch-border);
    vertical-align: middle;
    font-size: var(--kosch-fs-sm);
}

.kosch-table tbody tr:hover,
.table tbody tr:hover {
    background-color: var(--kosch-primary-50);
}

.kosch-table tbody tr:last-child td,
.table tbody tr:last-child td {
    border-bottom: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   8. COMPONENT: Badges
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-badge,
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.625em;
    font-size: var(--kosch-fs-xs);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--kosch-radius);
}

.kosch-badge-primary, .badge-primary {
    background-color: var(--kosch-primary);
    color: #ffffff;
}

.kosch-badge-accent, .badge-secondary {
    background-color: var(--kosch-accent);
    color: var(--kosch-primary-900);
}

.kosch-badge-success, .badge-success {
    background-color: var(--kosch-success);
    color: #ffffff;
}

.kosch-badge-warning, .badge-warning {
    background-color: var(--kosch-warning);
    color: var(--kosch-primary-900);
}

.kosch-badge-danger, .badge-danger {
    background-color: var(--kosch-danger);
    color: #ffffff;
}

.kosch-badge-info, .badge-info {
    background-color: var(--kosch-info);
    color: #ffffff;
}

.kosch-badge-muted {
    background-color: var(--kosch-border);
    color: var(--kosch-muted);
}


/* ═══════════════════════════════════════════════════════════════════════
   9. COMPONENT: Alerts
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-alert,
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--kosch-space-3);
    padding: var(--kosch-space-4) var(--kosch-space-6);
    margin-bottom: var(--kosch-space-6);
    border: 1px solid transparent;
    border-radius: var(--kosch-radius-lg);
    font-size: var(--kosch-fs-sm);
    font-weight: 500;
}

.kosch-alert-success, .alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
    border-left: 4px solid var(--kosch-success);
}

.kosch-alert-warning, .alert-warning {
    background-color: #fff3cd;
    color: #664d03;
    border-color: #ffecb5;
    border-left: 4px solid var(--kosch-warning);
}

.kosch-alert-danger, .alert-danger {
    background-color: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
    border-left: 4px solid var(--kosch-danger);
}

.kosch-alert-info, .alert-info {
    background-color: #cff4fc;
    color: #055160;
    border-color: #b6effb;
    border-left: 4px solid var(--kosch-info);
}


/* ═══════════════════════════════════════════════════════════════════════
   10. COMPONENT: Forms
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-input,
.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: var(--kosch-font);
    font-size: var(--kosch-fs-sm);
    line-height: 1.5;
    color: var(--kosch-text);
    background-color: var(--kosch-surface);
    border: 2px solid var(--kosch-border);
    border-radius: var(--kosch-radius);
    transition: border-color var(--kosch-transition), box-shadow var(--kosch-transition);
}

.kosch-input:focus,
.form-control:focus {
    border-color: var(--kosch-primary);
    box-shadow: 0 0 0 3px rgba(25, 77, 133, 0.15);
    outline: 0;
}

.kosch-input::placeholder,
.form-control::placeholder {
    color: var(--kosch-muted);
    opacity: 0.7;
}

.kosch-label,
.form-label {
    display: block;
    margin-bottom: var(--kosch-space-2);
    font-weight: 600;
    font-size: var(--kosch-fs-sm);
    color: var(--kosch-text);
}

.kosch-select,
.form-select {
    width: 100%;
    padding: 0.625rem 2.25rem 0.625rem 0.875rem;
    font-family: var(--kosch-font);
    font-size: var(--kosch-fs-sm);
    color: var(--kosch-text);
    background-color: var(--kosch-surface);
    border: 2px solid var(--kosch-border);
    border-radius: var(--kosch-radius);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6c7d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    transition: border-color var(--kosch-transition), box-shadow var(--kosch-transition);
}

.kosch-select:focus,
.form-select:focus {
    border-color: var(--kosch-primary);
    box-shadow: 0 0 0 3px rgba(25, 77, 133, 0.15);
    outline: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   11. LAYOUT: Header & Navigation
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-header {
    background-color: var(--kosch-surface);
    box-shadow: var(--kosch-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--kosch-primary);
}

.kosch-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--kosch-space-4) var(--kosch-space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kosch-logo {
    display: flex;
    align-items: center;
    gap: var(--kosch-space-4);
    text-decoration: none;
    color: var(--kosch-primary);
}

.kosch-logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--kosch-primary), var(--kosch-primary-900));
    border-radius: var(--kosch-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: var(--kosch-shadow);
}

.kosch-logo-text {
    font-size: var(--kosch-fs-xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--kosch-primary), var(--kosch-primary-900));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kosch-nav {
    display: flex;
    list-style: none;
    gap: var(--kosch-space-2);
    align-items: center;
    margin: 0;
    padding: 0;
}

.kosch-nav-link {
    color: var(--kosch-text);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--kosch-fs-sm);
    padding: var(--kosch-space-2) var(--kosch-space-4);
    border-radius: var(--kosch-radius);
    transition: background-color var(--kosch-transition), color var(--kosch-transition);
}

.kosch-nav-link:hover {
    color: var(--kosch-primary);
    background-color: var(--kosch-primary-50);
}

.kosch-nav-link.active {
    background-color: var(--kosch-primary);
    color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════
   12. LAYOUT: Page content
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--kosch-space-8);
    min-height: calc(100vh - 140px);
}

.kosch-page-header {
    background: linear-gradient(135deg, var(--kosch-primary), var(--kosch-primary-900));
    color: #ffffff;
    padding: var(--kosch-space-12) var(--kosch-space-8);
    margin: calc(-1 * var(--kosch-space-8)) calc(-1 * var(--kosch-space-8)) var(--kosch-space-8);
    border-radius: 0 0 var(--kosch-radius-lg) var(--kosch-radius-lg);
    text-align: center;
}

.kosch-page-header h1 {
    font-size: var(--kosch-fs-3xl);
    font-weight: 700;
    margin: 0 0 var(--kosch-space-2);
}

.kosch-page-header p {
    font-size: var(--kosch-fs-lg);
    opacity: 0.9;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   13. LAYOUT: Footer
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-footer {
    background-color: var(--kosch-primary);
    color: #ffffff;
    padding: var(--kosch-space-8) 0;
    margin-top: var(--kosch-space-12);
    text-align: center;
}

.kosch-footer p {
    margin: 0;
    opacity: 0.85;
    font-size: var(--kosch-fs-sm);
}


/* ═══════════════════════════════════════════════════════════════════════
   14. DASHBOARD: Stat widgets
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--kosch-space-6);
    margin-bottom: var(--kosch-space-8);
}

.kosch-stat-card {
    background-color: var(--kosch-surface);
    border-radius: var(--kosch-radius-lg);
    padding: var(--kosch-space-6);
    text-align: center;
    box-shadow: var(--kosch-shadow);
    position: relative;
    overflow: hidden;
    transition: transform var(--kosch-transition), box-shadow var(--kosch-transition);
}

.kosch-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kosch-primary), var(--kosch-accent));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.kosch-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--kosch-shadow-lg);
}

.kosch-stat-card:hover::before {
    transform: scaleX(1);
}

.kosch-stat-icon {
    font-size: 2.5rem;
    color: var(--kosch-primary);
    margin-bottom: var(--kosch-space-3);
}

.kosch-stat-value {
    font-size: var(--kosch-fs-3xl);
    font-weight: 800;
    color: var(--kosch-primary);
    margin-bottom: var(--kosch-space-1);
}

.kosch-stat-label {
    color: var(--kosch-muted);
    font-weight: 500;
    font-size: var(--kosch-fs-sm);
}


/* ═══════════════════════════════════════════════════════════════════════
   15. STATUS INDICATORS
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-status {
    display: inline-flex;
    align-items: center;
    gap: var(--kosch-space-2);
    font-size: var(--kosch-fs-sm);
    font-weight: 500;
}

.kosch-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.kosch-status-active  .kosch-status-dot { background-color: var(--kosch-success); }
.kosch-status-pending .kosch-status-dot { background-color: var(--kosch-warning); }
.kosch-status-error   .kosch-status-dot { background-color: var(--kosch-danger); }
.kosch-status-muted   .kosch-status-dot { background-color: var(--kosch-muted); }


/* ═══════════════════════════════════════════════════════════════════════
   16. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .kosch-card, .card {
        border: 2px solid var(--kosch-text);
    }
    .kosch-btn, .btn {
        border-width: 2px;
    }
}

/* Focus ring for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--kosch-accent);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════
   17. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .kosch-page {
        padding: var(--kosch-space-6);
    }
    .kosch-header-inner {
        padding: var(--kosch-space-4) var(--kosch-space-6);
    }
}

@media (max-width: 768px) {
    .kosch-header-inner {
        flex-direction: column;
        gap: var(--kosch-space-4);
        padding: var(--kosch-space-3) var(--kosch-space-4);
    }
    .kosch-nav {
        gap: var(--kosch-space-1);
        flex-wrap: wrap;
        justify-content: center;
    }
    .kosch-page {
        padding: var(--kosch-space-4);
    }
    .kosch-page-header {
        margin: calc(-1 * var(--kosch-space-4)) calc(-1 * var(--kosch-space-4)) var(--kosch-space-6);
        padding: var(--kosch-space-8) var(--kosch-space-4);
    }
    .kosch-page-header h1 {
        font-size: var(--kosch-fs-2xl);
    }
    .kosch-stat-grid {
        grid-template-columns: 1fr;
        gap: var(--kosch-space-4);
    }
}

@media (max-width: 480px) {
    .kosch-btn, .btn {
        padding: 0.5rem 0.875rem;
        font-size: var(--kosch-fs-xs);
    }
    .kosch-stat-value {
        font-size: var(--kosch-fs-2xl);
    }
    .kosch-nav-link {
        padding: var(--kosch-space-2) var(--kosch-space-3);
        font-size: var(--kosch-fs-xs);
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   18. PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
    .kosch-header,
    .kosch-footer,
    .kosch-nav,
    .btn,
    .no-print {
        display: none !important;
    }
    .kosch-card, .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    body {
        background: #fff;
        color: #000;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   19. UTILITY: Theme Toggle Helper
   ═══════════════════════════════════════════════════════════════════════ */

.kosch-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--kosch-space-2);
    padding: var(--kosch-space-2);
    background: var(--kosch-surface);
    border: 1px solid var(--kosch-border);
    border-radius: var(--kosch-radius);
    cursor: pointer;
    color: var(--kosch-muted);
    font-size: var(--kosch-fs-sm);
    transition: color var(--kosch-transition), border-color var(--kosch-transition);
}

.kosch-theme-toggle:hover {
    color: var(--kosch-primary);
    border-color: var(--kosch-primary);
}