/* ══════════════════════════════════════════════════════════════════════
   CareConnect – Gemeinsames Design-Token-System
   ══════════════════════════════════════════════════════════════════════
   Einzige Quelle für Farben, Radius, Schatten, Abstände und Typografie.
   Vorher hatte praktisch jedes Modul (MedDB, Vertretung, Arztbrief,
   KI-Trainer, Kern-Admin) sein eigenes, unabhängig erfundenes Set an
   CSS-Variablen mit unterschiedlichen Namen, Werten und sogar
   unterschiedlichen Google-Fonts-Imports – das sorgte dafür, dass sich
   jedes Modul wie eine eigene kleine App anfühlte statt wie EIN Produkt.

   Diese Datei wird von jedem Modul-Stylesheet per @import eingebunden.
   Modul-eigene Variablen (z. B. --ab-blue, --cc-blue im KI-Trainer) bleiben
   aus Kompatibilitätsgründen bestehen, verweisen aber jetzt per var() auf
   genau diese gemeinsamen Werte – bestehende CSS-Regeln in den Modulen
   mussten dadurch NICHT einzeln umgeschrieben werden.

   Admin-konfigurierbare Marken-Farben (Primär/Sekundär/Akzent, siehe
   Einstellungen → Branding) überschreiben --cc-primary/--cc-secondary/
   --cc-accent zusätzlich per Inline-<style> (CareConnect::cc_admin_design_system()) –
   diese Datei liefert dafür die verlässliche Grundlage + alle übrigen Tokens.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
    /* ── Typografie: EINE Schriftfamilie fürs gesamte Backend ────────── */
    --cc-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cc-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* ── Marke (Standardwerte; per Einstellungen überschreibbar) ──────── */
    --cc-primary:       #2563eb;
    --cc-primary-dark:  #1d4ed8;
    --cc-primary-light: #eff6ff;
    --cc-secondary:     #0f172a;
    --cc-accent:        #10b981;

    /* ── Statusfarben – einheitlich für Badges/Alerts in allen Modulen ── */
    --cc-success:     #059669;
    --cc-success-bg:  #ecfdf5;
    --cc-warning:     #d97706;
    --cc-warning-bg:  #fffbeb;
    --cc-danger:      #dc2626;
    --cc-danger-bg:   #fef2f2;
    --cc-info:        #0891b2;
    --cc-info-bg:     #ecfeff;
    --cc-purple:      #7c3aed;
    --cc-purple-bg:   #f5f3ff;

    /* ── Neutrale Skala ────────────────────────────────────────────────*/
    --cc-bg:        #f8fafc;
    --cc-surface:   #ffffff;
    --cc-border:    #e2e8f0;
    --cc-border-lt: #f1f5f9;
    --cc-text:      #0f172a;
    --cc-text-2:    #475569;
    --cc-text-3:    #94a3b8;

    /* ── Radius-Skala ──────────────────────────────────────────────────*/
    --cc-radius-sm: 6px;
    --cc-radius:    10px;
    --cc-radius-lg: 12px;
    --cc-radius-xl: 16px;

    /* ── Schatten-Skala ────────────────────────────────────────────────*/
    --cc-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --cc-shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
    --cc-shadow-lg: 0 4px 16px rgba(0,0,0,.10);

    /* ── Abstands-Skala (4px-Grid) ─────────────────────────────────────*/
    --cc-space-1: 4px;
    --cc-space-2: 8px;
    --cc-space-3: 12px;
    --cc-space-4: 16px;
    --cc-space-5: 20px;
    --cc-space-6: 24px;
    --cc-space-8: 32px;

    --cc-transition: all .18s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════════════
   Komponenten-Basisklassen (Schritt 1 der Komponentenbibliothek)
   Buttons, Badges und Cards einmal sauber definiert – Module können diese
   Klassen direkt verwenden statt eigene Inline-Styles zu bauen. Bewusst
   additiv: bestehende modul-eigene .cc-card/.cc-btn-Regeln brechen nicht,
   da diese Klassen hier nur ergänzt, nicht global umbenannt werden.
   ══════════════════════════════════════════════════════════════════════ */
.cc-btn {
    font-family: var(--cc-font);
    font-size: .85rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--cc-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--cc-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.cc-btn-primary { background: var(--cc-primary); color: #fff; }
.cc-btn-primary:hover { background: var(--cc-primary-dark); }
.cc-btn-secondary { background: var(--cc-surface); color: var(--cc-text); border-color: var(--cc-border); }
.cc-btn-secondary:hover { background: var(--cc-border-lt); }
.cc-btn-danger { background: var(--cc-danger-bg); color: var(--cc-danger); }
.cc-btn-danger:hover { background: var(--cc-danger); color: #fff; }

.cc-badge {
    font-family: var(--cc-font);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.4;
}
.cc-badge-success { background: var(--cc-success-bg); color: var(--cc-success); }
.cc-badge-warning { background: var(--cc-warning-bg); color: var(--cc-warning); }
.cc-badge-danger  { background: var(--cc-danger-bg);  color: var(--cc-danger); }
.cc-badge-info    { background: var(--cc-info-bg);    color: var(--cc-info); }
.cc-badge-neutral { background: var(--cc-border-lt);  color: var(--cc-text-2); }

.cc-card {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow-sm);
    padding: var(--cc-space-4) var(--cc-space-5);
}

/* Leerer Zustand – konsistent statt leerer Fläche/Standard-alert() */
.cc-empty-state { text-align: center; padding: 40px 20px; color: var(--cc-text-3); font-family: var(--cc-font); }
.cc-empty-state .cc-empty-icon { margin-bottom: 10px; opacity: .5; }
.cc-empty-state p { font-size: .88rem; margin: 0 0 14px; }


/* CareConnect 8.0 – shared interaction states and application components */
.cc-ui-input{width:100%;box-sizing:border-box;border:1px solid var(--cc-border);background:var(--cc-surface);border-radius:var(--cc-radius-sm);padding:9px 11px;font:inherit;color:var(--cc-text);margin:6px 0 12px;}
.cc-ui-alert{border:1px solid var(--cc-border);line-height:1.5;}
.cc-ui-loading{display:flex;align-items:center;gap:10px;padding:18px;color:var(--cc-text-2);font-family:var(--cc-font);}
.cc-ui-loading::before{content:"";width:16px;height:16px;border:2px solid var(--cc-border);border-top-color:var(--cc-primary);border-radius:50%;animation:cc-spin .8s linear infinite;}
.cc-ui-error{padding:16px;border:1px solid #fecaca;background:var(--cc-danger-bg);color:var(--cc-danger);border-radius:var(--cc-radius);}
.cc-ui-empty{padding:24px;text-align:center;border:1px dashed var(--cc-border);border-radius:var(--cc-radius);color:var(--cc-text-3);}
.cc-ui-nav{display:flex;gap:8px;flex-wrap:wrap;}
.cc-ui-tabs{display:flex;gap:4px;border-bottom:1px solid var(--cc-border);margin-bottom:14px;}
.cc-ui-tabs button{border:0;background:transparent;padding:9px 12px;cursor:pointer;font:inherit;color:var(--cc-text-2);border-bottom:2px solid transparent;}
.cc-ui-tabs button.is-active{color:var(--cc-primary);border-bottom-color:var(--cc-primary);font-weight:700;}
.cc-ui-timeline{margin:0;padding-left:20px;display:grid;gap:14px;}
.cc-ui-timeline li{display:grid;gap:2px;}
@keyframes cc-spin{to{transform:rotate(360deg)}}
.cc-product-nav{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 18px;border-bottom:1px solid var(--cc-border-lt);margin-bottom:18px;}
.cc-product-nav-item{padding:8px 11px;border-radius:999px;text-decoration:none;color:var(--cc-text-2);font-weight:700;font-size:.82rem;}
.cc-product-nav-item:hover,.cc-product-nav-item.is-active{background:var(--cc-primary-light);color:var(--cc-primary);}
.cc-today-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;}
.cc-eyebrow{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cc-text-3);font-weight:800;margin-bottom:5px;}
.cc-today-header h1{margin:.1em 0 .25em;font-size:clamp(28px,4vw,42px);line-height:1.08;}
.cc-today-header p{margin:0;color:var(--cc-text-2);}
.cc-today-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:28px;}
.cc-today-card{position:relative;display:grid;gap:4px;text-decoration:none;padding:18px;border-radius:var(--cc-radius-lg);border:1px solid var(--cc-border);background:var(--cc-surface);box-shadow:var(--cc-shadow-sm);min-height:132px;transition:var(--cc-transition);}
.cc-today-card:hover{transform:translateY(-1px);box-shadow:var(--cc-shadow);}
.cc-today-card-icon{font-size:22px;}.cc-today-card-title{font-weight:800;color:var(--cc-text);}.cc-today-card strong{font-size:32px;line-height:1.1;color:var(--cc-text);}.cc-today-card small{color:var(--cc-text-2);}.cc-today-card-link{margin-top:auto;font-size:.78rem;font-weight:800;color:var(--cc-primary);}.cc-today-card-danger{border-left:4px solid var(--cc-danger);}.cc-today-card-warning{border-left:4px solid var(--cc-warning);}.cc-today-card-people{border-left:4px solid var(--cc-purple);}.cc-today-card-info{border-left:4px solid var(--cc-info);}.cc-today-card-success{border-left:4px solid var(--cc-success);}
.cc-today-section{margin-top:26px;}.cc-section-head h2{margin:0 0 12px;}.cc-quick-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}.cc-quick-action{display:grid;gap:6px;text-decoration:none;}.cc-quick-action strong{color:var(--cc-text);}.cc-quick-action span{font-size:.78rem;color:var(--cc-text-3);}
@media(max-width:1100px){.cc-today-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.cc-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.cc-today-header{flex-direction:column;}.cc-today-grid{grid-template-columns:1fr;}.cc-quick-actions{grid-template-columns:1fr;}.cc-product-nav{overflow:auto;flex-wrap:nowrap;}.cc-product-nav-item{white-space:nowrap;}}