/**
 * GetMarie – Branding CSS
 * Wendet CSS-Variablen aus branding.php auf das Company-Dashboard an.
 * Scoped auf [data-role="company"] (Sidebar) und body.gm-company (Seiten-Layout).
 */

/* ── Fonts ──────────────────────────────────────────────────────────────── */
body.gm-company {
    font-family: var(--gm-font-body, 'Inter'), -apple-system, sans-serif !important;
    background-color: var(--gm-bg-light, #FAF5FF) !important;
    color: var(--gm-color-body, #1A1A2E) !important;
}

/* ── Form-Elemente: immer weißer Hintergrund ─────────────────────────────── */
body.gm-company input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.gm-company textarea,
body.gm-company select {
    background-color: #fff !important;
    color: var(--gm-color-body, #1A1A2E) !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar[data-role="company"] {
    background-color: var(--gm-bg-dark, #1E0A3C) !important;
    border-right: none !important;
    box-shadow: 2px 0 16px rgba(0,0,0,0.25) !important;
}

/* Logo-Bereich */
#sidebar[data-role="company"] .gm-sidebar-header {
    background: #fff;
    height: 90px;
    box-sizing: border-box;
    border-bottom: none !important;
    display: flex;
    align-items: center;
}

/* "GetMarie" Text im Header */
#sidebar[data-role="company"] .gm-sidebar-title {
    font-family: var(--gm-font-heading, 'Plus Jakarta Sans'), sans-serif;
    font-size: calc(var(--gm-size-h1, 20px) * 0.8);
    font-weight: var(--gm-weight-h1, 700);
    color: var(--gm-color-h1, #1A1A2E);
    line-height: 1.1;
}
#sidebar[data-role="company"] .gm-sidebar-subtitle {
    font-size: calc(var(--gm-size-subtitle, 13px) * 0.8);
    font-weight: var(--gm-weight-subtitle, 400);
    color: var(--gm-color-subtitle, #6B7280);
    line-height: 1.2;
}

/* Staging-Label */
#sidebar[data-role="company"] .gm-staging-label {
    background-color: var(--gm-error, #EF4444) !important;
    color: #fff !important;
}

/* Nav-Links – inaktiv */
#sidebar[data-role="company"] nav a,
#sidebar[data-role="company"] nav button {
    color: var(--gm-color-sidebar-inactive, #B0B0C8) !important;
    font-size: var(--gm-size-sidebar-inactive, 14px) !important;
    font-weight: var(--gm-weight-sidebar-inactive, 400) !important;
    border-radius: var(--gm-radius-button, 8px) !important;
    background: transparent !important;
    transition: background 150ms, color 150ms;
    align-items: center !important;
    line-height: 1.2 !important;
}
#sidebar[data-role="company"] nav a:hover,
#sidebar[data-role="company"] nav button:hover {
    background: color-mix(in srgb, var(--gm-primary, #6B21A8) 14%, transparent) !important;
    color: var(--gm-color-sidebar-inactive, #B0B0C8) !important;
}
/* Icons: gleiche Größe wie Sidebar-Text, sauber vertikal ausgerichtet */
#sidebar[data-role="company"] nav a i,
#sidebar[data-role="company"] nav button i {
    color: inherit !important;
    opacity: 0.7;
    font-size: var(--gm-size-sidebar-inactive, 14px) !important;
    width: 16px !important;
    height: auto !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Nav-Links – aktiv */
#sidebar[data-role="company"] nav a.gm-nav-active {
    background: color-mix(in srgb, var(--gm-primary, #6B21A8) 20%, transparent) !important;
    color: var(--gm-color-sidebar, #FFFFFF) !important;
    font-size: var(--gm-size-sidebar, 14px) !important;
    font-weight: var(--gm-weight-sidebar, 700) !important;
    border-radius: var(--gm-radius-button, 8px) !important;
}
#sidebar[data-role="company"] nav a.gm-nav-active i {
    opacity: 1 !important;
}

/* Postfach-Badge */
#sidebar[data-role="company"] .gm-badge {
    background-color: var(--gm-primary, #6B21A8) !important;
    border-radius: var(--gm-radius-badge, 100px) !important;
    color: #fff !important;
}

/* Dropdown-Chevron */
#sidebar[data-role="company"] .sidebar-dropdown-chevron {
    color: color-mix(in srgb, var(--gm-color-sidebar-inactive, #B0B0C8) 60%, transparent) !important;
}
#sidebar[data-role="company"] .sidebar-dropdown.open .sidebar-dropdown-chevron {
    color: var(--gm-color-sidebar-inactive, #B0B0C8) !important;
}

/* Divider */
#sidebar[data-role="company"] nav hr {
    border-color: color-mix(in srgb, var(--gm-color-sidebar-inactive, #B0B0C8) 25%, transparent) !important;
}

/* User-Footer */
#sidebar[data-role="company"] .gm-sidebar-footer {
    background: color-mix(in srgb, var(--gm-color-sidebar-inactive, #B0B0C8) 12%, transparent) !important;
    border-top: 1px solid color-mix(in srgb, var(--gm-color-sidebar-inactive, #B0B0C8) 20%, transparent) !important;
}
#sidebar[data-role="company"] .gm-sidebar-footer p {
    color: var(--gm-color-sidebar-inactive, #B0B0C8) !important;
}
#sidebar[data-role="company"] .gm-sidebar-footer span {
    color: color-mix(in srgb, var(--gm-color-sidebar-inactive, #B0B0C8) 70%, transparent) !important;
}
#sidebar[data-role="company"] .gm-sidebar-footer a {
    color: color-mix(in srgb, var(--gm-color-sidebar-inactive, #B0B0C8) 60%, transparent) !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}
#sidebar[data-role="company"] .gm-sidebar-footer a:hover {
    color: var(--gm-error, #EF4444) !important;
    background: transparent !important;
}

/* Avatar im User-Footer */
#sidebar[data-role="company"] .gm-user-avatar {
    background-color: var(--gm-primary, #6B21A8) !important;
    border-radius: var(--gm-radius-icon, 100px) !important;
    color: #fff !important;
}

/* ── App-Header ──────────────────────────────────────────────────────────── */
body.gm-company header.gm-app-header {
    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    min-height: 90px;
    box-sizing: border-box;
}
body.gm-company header.gm-app-header h1,
body.gm-company .gm-h1 {
    font-family: var(--gm-font-heading, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: var(--gm-size-h1, 20px) !important;
    font-weight: var(--gm-weight-h1, 700) !important;
    color: var(--gm-color-h1, #1A1A2E) !important;
}
body.gm-company .gm-h2 {
    font-family: var(--gm-font-heading, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: var(--gm-size-h2, 17px) !important;
    font-weight: var(--gm-weight-h2, 700) !important;
    color: var(--gm-color-h2, #E21D6C) !important;
}
body.gm-company .gm-h2subtitle {
    font-family: var(--gm-font-body, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: var(--gm-size-h2subtitle, 13px) !important;
    font-weight: var(--gm-weight-h2subtitle, 400) !important;
    color: var(--gm-color-h2subtitle, #6B7280) !important;
}
body.gm-company header.gm-app-header p,
body.gm-company .gm-subtitle {
    font-size: var(--gm-size-subtitle, 13px) !important;
    font-weight: var(--gm-weight-subtitle, 400) !important;
    color: var(--gm-color-subtitle, #6B7280) !important;
}

/* ── Seiten-Hintergrund & Content-Bereich ────────────────────────────────── */
body.gm-company main.gm-content,
body.gm-company .gm-content {
    background-color: var(--gm-bg-light, #FAF5FF) !important;
}

/* Abschnittstitel */
body.gm-company h2.gm-section-title {
    font-family: var(--gm-font-heading, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: var(--gm-size-h2, 18px) !important;
    font-weight: var(--gm-weight-h2, 700) !important;
    color: var(--gm-color-h2, #1A1A2E) !important;
}
body.gm-company p.gm-section-subtitle {
    font-size: var(--gm-size-h2subtitle, 13px) !important;
    font-weight: var(--gm-weight-h2subtitle, 400) !important;
    color: var(--gm-color-h2subtitle, #6B7280) !important;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
body.gm-company .gm-card {
    background-color: var(--gm-neutral-light, #FAFAFA) !important;
    border-radius: var(--gm-radius-card, 16px) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Modal-Inhalt: gleiche Textregeln wie gm-card, ohne Hintergrund ── */
body.gm-company .gm-modal-body h2,
body.gm-company .gm-modal-body h3 {
    font-family: var(--gm-font-heading, 'Plus Jakarta Sans'), sans-serif !important;
    font-weight: var(--gm-weight-h3, 600) !important;
    color: var(--gm-color-h3, #1A1A2E) !important;
}
body.gm-company .gm-modal-body p,
body.gm-company .gm-modal-body .text-gray-900,
body.gm-company .gm-modal-body .text-gray-800,
body.gm-company .gm-modal-body .text-gray-700 {
    color: var(--gm-color-body, #374151) !important;
    font-family: var(--gm-font-body, 'Plus Jakarta Sans'), sans-serif !important;
}
body.gm-company .gm-modal-body .text-gray-600,
body.gm-company .gm-modal-body .text-gray-500,
body.gm-company .gm-modal-body .text-gray-400 {
    color: var(--gm-color-label, #6B7280) !important;
}

/* Card-Titel (h3) */
body.gm-company .gm-card h3,
body.gm-company .gm-card .gm-card-title {
    font-family: var(--gm-font-heading, 'Plus Jakarta Sans'), sans-serif !important;
    font-size: var(--gm-size-h3, 16px) !important;
    font-weight: var(--gm-weight-h3, 600) !important;
    color: var(--gm-color-h3, #1A1A2E) !important;
}

/* Card-Fließtext */
body.gm-company .gm-card p,
body.gm-company .gm-card .gm-body-text {
    font-size: var(--gm-size-body, 14px) !important;
    font-weight: var(--gm-weight-body, 400) !important;
    color: var(--gm-color-body, #1A1A2E) !important;
}

/* Labels / Captions */
body.gm-company .gm-label,
body.gm-company .gm-card .gm-label {
    font-size: var(--gm-size-label, 12px) !important;
    font-weight: var(--gm-weight-label, 500) !important;
    color: var(--gm-color-label, #6B7280) !important;
}

/* ── Tailwind-Farbklassen innerhalb Cards auf Branding-Variablen mappen ── */
/* Dunkler Text (Titel, Body, fettgedruckte Werte) */
body.gm-company .gm-card .text-gray-900,
body.gm-company .gm-card .text-gray-800,
body.gm-company .gm-card .text-gray-700 {
    color: var(--gm-color-body, #1A1A2E) !important;
}
/* Mittelgrauer Text (Labels, Sekundärtext, Abschnittstitel) */
body.gm-company .gm-card .text-gray-600,
body.gm-company .gm-card .text-gray-500 {
    color: var(--gm-color-label, #6B7280) !important;
}
/* Hellgrauer Text (Captions, Hinweise, Zeitstempel) */
body.gm-company .gm-card .text-gray-400,
body.gm-company .gm-card .text-gray-300 {
    color: var(--gm-color-label, #6B7280) !important;
}
/* h2/h3 immer mit Karten-Überschriften-Farbe — muss NACH text-gray stehen um zu gewinnen */
body.gm-company .gm-card h2,
body.gm-company .gm-card h3,
body.gm-company .gm-card .gm-card-title {
    color: var(--gm-color-h3, #1A1A2E) !important;
    font-family: var(--gm-font-heading, 'Plus Jakarta Sans'), sans-serif !important;
}
/* App-Header Datumstext und ähnliche Sekundärtexte außerhalb von Cards */
body.gm-company .gm-app-header .text-gray-500,
body.gm-company .gm-app-header .text-sm.text-gray-500 {
    color: var(--gm-color-subtitle, #6B7280) !important;
}
/* Abschnittstitel (h2.text-sm uppercase) außerhalb Cards aber im Content */
body.gm-company main.gm-content h2.text-gray-500,
body.gm-company main.gm-content .text-gray-500.uppercase {
    color: var(--gm-color-label, #6B7280) !important;
}
/* Card-Footer-Links haben immer Vorrang vor generischen Tailwind-Klassen */
body.gm-company .gm-card .gm-card-footer a,
body.gm-company .gm-card .gm-card-footer a.text-blue-600,
body.gm-company .gm-card .gm-card-footer a.text-blue-700 {
    color: var(--gm-color-button, #FFFFFF) !important;
}

/* Card-Footer-Link-Streifen */
body.gm-company .gm-card-footer {
    background-color: var(--gm-primary, #6B21A8) !important;
    border-radius: 0 0 var(--gm-radius-card, 16px) var(--gm-radius-card, 16px) !important;
}
body.gm-company .gm-card-footer a,
body.gm-company .gm-card-footer span {
    font-size: var(--gm-size-button, 14px) !important;
    font-weight: var(--gm-weight-button, 400) !important;
    color: var(--gm-color-button, #FFFFFF) !important;
}
body.gm-company .gm-card-footer a:hover {
    opacity: 0.85;
}

/* ── Primär-Buttons ──────────────────────────────────────────────────────── */
body.gm-company .gm-btn-primary,
body.gm-company button.gm-btn-primary {
    background-color: var(--gm-primary, #6B21A8) !important;
    color: var(--gm-color-button, #FFFFFF) !important;
    font-size: var(--gm-size-button, 14px) !important;
    font-weight: var(--gm-weight-button, 400) !important;
    border-radius: var(--gm-radius-button, 8px) !important;
    border: none !important;
    transition: background 150ms;
}
body.gm-company .gm-btn-primary:hover {
    background-color: var(--gm-primary-dark, #4C1D95) !important;
}

/* ── Team-Rolle-Badges (Pills) ───────────────────────────────────────────── */
body.gm-company .gm-badge {
    border-radius: var(--gm-radius-badge, 100px) !important;
}

/* ── Status-Badges ───────────────────────────────────────────────────────── */
body.gm-company .gm-status-published {
    background-color: color-mix(in srgb, var(--gm-success, #10B981) 15%, transparent) !important;
    color: var(--gm-success, #10B981) !important;
    border-radius: var(--gm-radius-badge, 100px) !important;
}
body.gm-company .gm-status-error {
    background-color: color-mix(in srgb, var(--gm-error, #EF4444) 15%, transparent) !important;
    color: var(--gm-error, #EF4444) !important;
    border-radius: var(--gm-radius-badge, 100px) !important;
}
body.gm-company .gm-status-draft {
    background-color: color-mix(in srgb, var(--gm-primary, #6B21A8) 12%, transparent) !important;
    color: var(--gm-primary, #6B21A8) !important;
    border-radius: var(--gm-radius-badge, 100px) !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
body.gm-company footer.gm-footer {
    background-color: var(--gm-footer-bg, #1E0A3C) !important;
    border-radius: var(--gm-radius-card, 16px) var(--gm-radius-card, 16px) 0 0 !important;
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}
body.gm-company footer.gm-footer,
body.gm-company footer.gm-footer p,
body.gm-company footer.gm-footer h3,
body.gm-company footer.gm-footer h4 {
    color: var(--gm-footer-text, #fff) !important;
}
body.gm-company footer.gm-footer a {
    color: color-mix(in srgb, var(--gm-footer-text, #fff) 70%, transparent) !important;
}
body.gm-company footer.gm-footer a:hover {
    color: var(--gm-footer-text, #fff) !important;
}
body.gm-company footer.gm-footer .text-gray-300,
body.gm-company footer.gm-footer .text-gray-400 {
    color: color-mix(in srgb, var(--gm-footer-text, #fff) 65%, transparent) !important;
}
body.gm-company footer.gm-footer .border-white {
    border-color: color-mix(in srgb, var(--gm-footer-text, #fff) 15%, transparent) !important;
}
/* Öffentliche Seiten (Login, Legal, etc.): Footer full-width ohne Seitenmargins */
body.gm-public-page footer.gm-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    flex-shrink: 0;
}

/* ── Hilfe-Button ────────────────────────────────────────────────────────── */
body.gm-company .gm-help-btn {
    background-color: var(--gm-primary, #6B21A8) !important;
    color: var(--gm-color-button, #fff) !important;
    font-size: var(--gm-size-button, 14px) !important;
    font-weight: var(--gm-weight-button, 400) !important;
    border-radius: var(--gm-radius-button, 8px) !important;
    border-color: transparent !important;
    transition: background 150ms;
}
body.gm-company .gm-help-btn:hover {
    background-color: var(--gm-primary-dark, #4C1D95) !important;
}
body.gm-company .gm-help-btn i {
    color: inherit !important;
}

/* ── Hilfe-Modal & Legende-Modal ─────────────────────────────────────────── */
#helpModal .bg-white,
#legend-modal .bg-white {
    background-color: var(--gm-neutral-light, #FAFAFA) !important;
}
#helpModal .text-gray-900, #helpModal .text-gray-800,
#legend-modal .text-gray-900, #legend-modal .text-gray-800 {
    color: var(--gm-color-body, #1A1A2E) !important;
}
#helpModal .text-gray-700, #helpModal .text-gray-600,
#legend-modal .text-gray-700, #legend-modal .text-gray-600,
#legend-modal .text-gray-500, #legend-modal .text-gray-400 {
    color: var(--gm-color-label, #6B7280) !important;
}