/**
 * ============================================================================
 * SH24 Premium Design System V2
 * ============================================================================
 * Version: 2.0 - EXECUTIVE IDENTITY LEVEL
 * Purpose: Premium Healthcare Platform - Apple-Level Typography & Hierarchy
 *
 * Strategic Principles:
 * - Identity > Data (Hero dominates)
 * - Status visual, not textual (Badges, not prose)
 * - Executive-scan optimized (5-second comprehension)
 * - Reduction, Hierarchy, Whitespace
 * - Kontrolle, nicht Zufall (Premium = bewusste Ebenen)
 * ============================================================================
 */

/* ========== SATOSHI — SH24 Primary Font ========== */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Variable.woff2') format('woff2'),
         url('../fonts/satoshi/Satoshi-Variable.woff')  format('woff');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* ========== 0. SH24 DESIGN TOKENS — loaded globally so --sh-* vars are always available ========== */
/* Identical to the :root block in dashboard.css. sh24-design-system.css loads unconditionally, */
/* so defining tokens here ensures profile pages and non-dashboard pages can use them too.        */

:root {
    --sh-white: #ffffff;
    --sh-black: #0f172a;
    --sh-gray-50: #f8fafc;
    --sh-gray-100: #f1f5f9;
    --sh-gray-200: #e2e8f0;
    --sh-gray-300: #cbd5e1;
    --sh-gray-600: #475569;
    --sh-gray-700: #334155;
    --sh-green-50: #d1fae5;
    --sh-green-600: #059669;
    --sh-yellow-50: #fef3c7;
    --sh-yellow-600: #d97706;
    --sh-red-50: #fee2e2;
    --sh-red-600: #dc2626;
    --sh-blue-500: #3b82f6;
    --sh-blue-600: #2563eb;
    --sh-blue-900: #1e3a5f;
    --sh-gold: #FFD700;
    --sh-shadow-sm:   0 1px 4px rgba(15,23,42,0.06), 0 4px 16px rgba(15,23,42,0.04);
    --sh-shadow-md:   0 4px 12px rgba(15,23,42,0.10), 0 12px 32px rgba(15,23,42,0.08);
    --sh-card-shadow:       var(--sh-shadow-sm);
    --sh-card-shadow-hover: var(--sh-shadow-md);
    --sh-radius-lg:   14px;
    --sh-radius-md:   10px;
    --sh-radius-sm:   8px;
    --sh-radius-card: var(--sh-radius-lg);
    --sh-spacing-xs:  0.5rem;
    --sh-spacing-sm:  1rem;
    --sh-spacing-md:  1.5rem;
    --sh-spacing-lg:  2rem;
    --sh-surface-card:    #ffffff;
    --sh-surface-subtle:  #f8fafc;
    --sh-surface-hover:   #f1f5f9;
    --sh-page-bg:         #f1f5f9;
    --sh-border:          #e2e8f0;
    --sh-text-primary:    #0f172a;
    --sh-text-secondary:  #475569;
    --sh-text-tertiary:   #94a3b8;

    /* ── CEO Design System V2 aliases ── */
    --sh-primary:  #0f172a;
    --sh-accent:   #1e40af;
    --sh-bg:       #f8fafc;
    --sh-card:     #ffffff;
    --sh-text:     #0f172a;
    --sh-muted:    #64748b;
    --sh-success:  #16a34a;
    --sh-warning:  #f59e0b;

    /* ── Minor Third Type Scale (base 16 × 1.2) ── */
    --sh-text-xs:   0.694rem;   /* 11.1px — eyebrow, caption */
    --sh-text-sm:   0.833rem;   /* 13.3px — meta, label */
    --sh-text-base: 1rem;       /* 16px   — body */
    --sh-text-md:   1.2rem;     /* 19.2px — card title */
    --sh-text-lg:   1.44rem;    /* 23px   — section heading */
    --sh-text-xl:   1.728rem;   /* 27.6px — page title */
    --sh-text-2xl:  2.074rem;   /* 33.2px — display number */
    --sh-text-3xl:  2.488rem;   /* 39.8px — hero h1 */
}

/* ========== 1. GLOBAL FOUNDATION ========== */

body {
    background: var(--sh-surface-subtle, #f8fafc);
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    color: var(--sh-text-primary, #0f172a);
    line-height: 1.6;
}

/* Override Bootstrap defaults where necessary */
.container {
    max-width: 1100px;
}

/* ========== 2. SH24 CONTAINER SYSTEM ========== */

.sh24-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 24px; /* Premium = mehr Luft */
}

/* ========== 3. CARD SYSTEM ========== */

.sh24-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--sh-border, #e2e8f0); /* Feine Border statt starker Shadow */
    box-shadow: none; /* Premium = weniger Shadow, mehr Klarheit */
    padding: 32px;
    margin-bottom: 64px; /* Premium = mehr Weißraum */
}

.sh24-card:last-child {
    margin-bottom: 0;
}

/* Section within card */
.sh24-section {
    margin-bottom: 32px;
}

.sh24-section:last-child {
    margin-bottom: 0;
}

/* ========== 4. HERO IDENTITY BLOCK — EXECUTIVE BÜHNE ========== */

.sh24-hero {
    display: flex;
    gap: 48px;
    align-items: center;
    padding: 80px 64px;
    border-radius: 24px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F4F6F9 100%);
    border: 1px solid var(--sh-border, #e2e8f0);
    position: relative;
    overflow: hidden;
    margin-bottom: 80px; /* Hero muss dominieren - viel Abstand danach */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05); /* Subtile Tiefe */
}

/* Executive Accent Line (sehr subtil, links) */
.sh24-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #1E2A38;
}

/* Profile Photo — Executive Size */
.sh24-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff; /* Saubere weiße Kante */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

/* Initials Fallback */
.sh24-avatar-placeholder {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #1E2A38;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 600;
    border: 3px solid #ffffff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

/* Identity Content */
.sh24-identity {
    flex: 1;
}

/* Name — Apple-Level Typography */
.sh24-name {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.02em; /* Negative spacing = Premium */
    line-height: 1.15;
    margin-bottom: 6px;
    color: #111111;
}

/* Subtitle — Autorität statt Grau */
.sh24-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #2C3642; /* Weniger grau = mehr Autorität */
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

/* Meta — Subtil, nie dominant */
.sh24-meta {
    font-size: 14px;
    font-weight: 400;
    color: #6B7683;
    margin-bottom: 20px;
}

/* Badge Row */
.sh24-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

/* ========== 5. BADGE SYSTEM ========== */

.sh24-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: none; /* Override Bootstrap */
}

/* Badge Colors - Strategic Meaning */
.sh24-badge-navy {
    background: #1E2A38;
    color: #ffffff;
}

.sh24-badge-success {
    background: #1F8A4D;
    color: #ffffff;
}

.sh24-badge-neutral {
    background: var(--sh-gray-200, #e2e8f0);
    color: #1E2A38;
}

.sh24-badge-warning {
    background: #E6A23C;
    color: #ffffff;
}

.sh24-badge-info {
    background: #3B82F6;
    color: #ffffff;
}

/* Badge with Tooltip */
.sh24-badge-tooltip {
    position: relative;
    cursor: help;
}

.sh24-badge-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1E2A38;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.sh24-badge-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1E2A38;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sh24-badge-tooltip:hover::after,
.sh24-badge-tooltip:hover::before {
    opacity: 1;
}

/* ========== 6. TYPOGRAPHY ========== */

.sh24-section-title {
    font-size: 18px; /* Weniger groß = mehr Premium */
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sh-border, #e2e8f0); /* Visuelle Trennung */
    color: #111111;
}

.sh24-subsection-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #111111;
}

.sh24-text {
    font-size: 16px;
    color: #111111;
    line-height: 1.6;
}

.sh24-text-muted {
    color: #5A6470;
}

.sh24-text-small {
    font-size: 14px;
}

/* ========== 7. KPI BLOCKS (Market Overview) ========== */

.sh24-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Symmetrie = Premium */
    gap: 24px;
    margin-bottom: 24px;
}

.sh24-kpi {
    background: var(--sh-surface-subtle, #f8fafc); /* Leicht getönt statt rein weiß */
    border: 1px solid var(--sh-border, #e2e8f0);
    border-radius: 16px;
    padding: 28px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.sh24-kpi-value {
    font-size: 28px;
    font-weight: 600;
    color: #1E2A38;
    margin-bottom: 8px;
    line-height: 1.2;
}

.sh24-kpi-label {
    font-size: 14px;
    color: #5A6470;
}

/* ========== 8. SKILL PILL SYSTEM ========== */

.sh24-skill-pill {
    display: inline-block;
    padding: 8px 16px;
    background: var(--sh-gray-200, #e2e8f0);
    color: #1E2A38;
    border-radius: 999px;
    font-size: 14px;
    margin: 0 6px 6px 0;
    font-weight: 400;
    transition: background 0.2s ease;
}

.sh24-skill-pill:hover {
    background: var(--sh-gray-300, #cbd5e1);
}

/* Skill Container */
.sh24-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ========== 9. INFO ROW SYSTEM (Profile Details) ========== */

.sh24-info-row {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid var(--sh-border, #e2e8f0);
}

.sh24-info-row:first-child {
    padding-top: 0;
}

.sh24-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sh24-info-label {
    flex: 0 0 180px;
    font-size: 14px;
    color: #5A6470;
    font-weight: 500;
}

.sh24-info-value {
    flex: 1;
    font-size: 15px;
    color: #111111;
}

/* ========== 10. STATUS INDICATORS ========== */

.sh24-status-success {
    color: #1F8A4D;
    font-weight: 500;
}

.sh24-status-warning {
    color: #E6A23C;
    font-weight: 500;
}

.sh24-status-error {
    color: #E03E3E;
    font-weight: 500;
}

.sh24-status-neutral {
    color: #5A6470;
}

/* ========== 11. RESPONSIVE ========== */

@media (max-width: 768px) {
    .sh24-hero {
        flex-direction: column;
        text-align: center;
        gap: 32px;
        padding: 48px 32px; /* Auch mobil großzügig */
        margin-bottom: 48px;
    }

    .sh24-hero::before {
        width: 100%;
        height: 6px;
    }

    .sh24-name {
        font-size: 28px;
    }

    .sh24-subtitle {
        font-size: 16px;
    }

    .sh24-meta {
        font-size: 13px;
    }

    .sh24-badge-row {
        justify-content: center;
    }

    .sh24-kpi-grid {
        grid-template-columns: 1fr; /* Mobil = vertikal */
    }

    .sh24-info-row {
        flex-direction: column;
        gap: 4px;
    }

    .sh24-info-label {
        flex: none;
        font-weight: 600;
    }

    .sh24-container {
        padding: 48px 20px;
    }

    .sh24-card {
        padding: 24px;
        margin-bottom: 40px;
    }
}

/* ========== 12. UTILITY CLASSES ========== */

.sh24-mb-8 { margin-bottom: 8px; }
.sh24-mb-16 { margin-bottom: 16px; }
.sh24-mb-24 { margin-bottom: 24px; }
.sh24-mb-32 { margin-bottom: 32px; }
.sh24-mb-48 { margin-bottom: 48px; }

.sh24-mt-8 { margin-top: 8px; }
.sh24-mt-16 { margin-top: 16px; }
.sh24-mt-24 { margin-top: 24px; }

.sh24-gap-8 { gap: 8px; }
.sh24-gap-16 { gap: 16px; }
.sh24-gap-24 { gap: 24px; }

.sh24-d-flex { display: flex; }
.sh24-align-center { align-items: center; }
.sh24-justify-between { justify-content: space-between; }
.sh24-flex-wrap { flex-wrap: wrap; }

/* Padding Utilities - Einheitliches 2rem Padding System */
.sh24-card-body {
    padding: 2rem !important;
}

/* Nested Row Fix - Prevent margin shift in col-lg-* context */
.card-body .row,
.sh24-card-body .row,
.col-lg-8 .row,
.col-lg-8 .card .row,
div.row div.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Prevent Card Overflow */
.card {
    overflow: hidden;
    box-sizing: border-box;
}

/* Ensure Cards stay within Column bounds */
.col-lg-8 > .card,
.col-lg-4 > .card {
    max-width: 100%;
    width: 100%;
}

/* Fix Column Width Issues */
.col-lg-8,
.col-lg-4 {
    box-sizing: border-box;
}

/* DEBUG REMOVED - Layout is fixed */

/* ========== 13. OVERRIDES (Minimize Bootstrap bleed) ========== */

/* Remove Bootstrap card styling when using SH24 cards */
.sh24-card.card {
    border: none;
}

.sh24-card .card-header {
    background: transparent;
    border: none;
    padding: 0;
}

/* Remove Bootstrap badge styling when using SH24 badges */
.sh24-badge.badge {
    background: transparent;
    border: none;
}

/* ========== 14. M271a — OPH Detail-Mode (Schnell/Praezise) ========== */
/* UX-Persistenz fuer Step-3 Detailtiefe. Keine Matching-Wirkung.        */

.sh-detail-mode-toggle {
    margin: 0.5rem 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: var(--sh-gray-50, #F7F9FB);
    border: 1px solid var(--sh-gray-200, #E5E7EB);
    border-radius: var(--sh-radius-sm, 8px);
}

.sh-detail-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--sh-gray-700, #374151);
    cursor: pointer;
    margin: 0;
}

.sh-detail-mode-switch input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sh-blue-600, #2563EB);
    cursor: pointer;
}

.sh-oph-praezise-block {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--sh-white, #FFFFFF);
    border: 1px dashed var(--sh-blue-500, #3B82F6);
    border-radius: var(--sh-radius-sm, 8px);
}

.sh-oph-praezise-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sh-blue-900, #1E3A8A);
    margin: 0 0 0.5rem 0;
}

.sh-oph-praezise-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sh-oph-alias-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: var(--sh-gray-50, #F7F9FB);
    border: 1px solid var(--sh-gray-300, #D1D5DB);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--sh-gray-700, #374151);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin: 0;
}

.sh-oph-alias-chip:hover {
    background: var(--sh-blue-50, #EFF6FF);
    border-color: var(--sh-blue-500, #3B82F6);
}

.sh-oph-alias-chip input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--sh-blue-600, #2563EB);
    cursor: pointer;
    margin: 0;
}

.sh-oph-alias-chip input[type="checkbox"]:checked + span {
    color: var(--sh-blue-900, #1E3A8A);
    font-weight: 600;
}

.sh-oph-praezise-pill {
    margin-top: 0.5rem;
    padding: 0.4rem 0.7rem;
    background: var(--sh-gray-50, #F7F9FB);
    border-left: 3px solid var(--sh-blue-500, #3B82F6);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--sh-gray-700, #374151);
    line-height: 1.4;
}

.sh-oph-foundation-box {
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--sh-gray-50, #F7F9FB);
    border: 1px solid var(--sh-gray-200, #E5E7EB);
    border-radius: var(--sh-radius-sm, 8px);
}

.sh-oph-foundation-box summary {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sh-gray-700, #374151);
    cursor: pointer;
    list-style: none;
}

.sh-oph-foundation-box summary::-webkit-details-marker {
    display: none;
}

.sh-oph-foundation-list {
    list-style: none;
    padding: 0.4rem 0 0 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sh-oph-foundation-list li {
    padding: 0.25rem 0.55rem;
    background: var(--sh-white, #FFFFFF);
    border: 1px solid var(--sh-gray-300, #D1D5DB);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--sh-gray-600, #4B5563);
}

/* M271a.1 — Parent/Child Integrity Lock                                 */
/* Detail-Chip wird gesperrt, wenn seine OPH-Obergruppe nicht aktiv ist. */
.sh-oph-alias-chip.is-orphan-locked {
    background: var(--sh-gray-100, #F3F4F6);
    border-color: var(--sh-gray-200, #E5E7EB);
    color: var(--sh-gray-400, #9CA3AF);
    cursor: not-allowed;
    opacity: 0.55;
}

.sh-oph-alias-chip.is-orphan-locked:hover {
    background: var(--sh-gray-100, #F3F4F6);
    border-color: var(--sh-gray-200, #E5E7EB);
}

.sh-oph-alias-chip.is-orphan-locked input[type="checkbox"] {
    cursor: not-allowed;
}