/* =============================================
   pmdIMS – Vollständiger Radzen Style Override
   Corporate Identity: pmd-media.com
   Farben: extrahiert aus Website-Quellcode (TCB-Vars, Inline-CSS)
   Schriften: Barlow (Headlines) + Muli (UI/Body)
   ============================================= */

/* Google Fonts einbinden */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Muli:wght@300;400;600;700&display=swap');

/* =============================================
   Radzen CSS Custom Properties Override
   Alle Variablen aus standard-base.css Referenz
   ============================================= */
:root {
    /* === pmd-media Primärblau #537ea2 (H207, S32%, L48%) === */
    --rz-primary:          #537ea2;   /* Offizielles pmd-Blau, bestätigt via tcb-color-6 */
    --rz-primary-light:    #6b92b3;   /* 7% heller */
    --rz-primary-lighter:  #dce9f2;   /* Sehr hell, für Hover-/Auswahlhintergründe */
    --rz-primary-dark:     #3d6485;   /* 10% dunkler */
    --rz-primary-darker:   #2a4f6e;   /* 18% dunkler */
    --rz-on-primary:             #ffffff;
    --rz-on-primary-light:       #ffffff;
    --rz-on-primary-lighter:     #2a4f6e;   /* Dunkle Schrift auf hell-blauem Hintergrund */
    --rz-on-primary-dark:        #ffffff;
    --rz-on-primary-darker:      #ffffff;

    /* === Sekundär: Blau-Grau (neutral/komplementär) === */
    --rz-secondary:        #637085;
    --rz-secondary-light:  #7e8ea0;
    --rz-secondary-lighter: #e8ecf0;
    --rz-secondary-dark:   #4a5568;
    --rz-secondary-darker: #2d3748;
    --rz-on-secondary:           #ffffff;
    --rz-on-secondary-light:     #ffffff;
    --rz-on-secondary-lighter:   #2d3748;
    --rz-on-secondary-dark:      #ffffff;
    --rz-on-secondary-darker:    #ffffff;

    /* === Info (klares Blau) === */
    --rz-info:             #2a8fd4;
    --rz-info-light:       #4ba5e2;
    --rz-info-lighter:     #d9eef8;
    --rz-info-dark:        #1a72ab;
    --rz-info-darker:      #0e5285;
    --rz-on-info:                #ffffff;
    --rz-on-info-light:          #ffffff;
    --rz-on-info-lighter:        #0e5285;
    --rz-on-info-dark:           #ffffff;
    --rz-on-info-darker:         #ffffff;

    /* === Erfolg (Grün) === */
    --rz-success:          #22a85a;
    --rz-success-light:    #3abd6c;
    --rz-success-lighter:  #d1f2e0;
    --rz-success-dark:     #178c49;
    --rz-success-darker:   #0d6e39;
    --rz-on-success:             #ffffff;
    --rz-on-success-light:       #ffffff;
    --rz-on-success-lighter:     #0d6e39;
    --rz-on-success-dark:        #ffffff;
    --rz-on-success-darker:      #ffffff;

    /* === Warnung (Amber) === */
    --rz-warning:          #e8a020;
    --rz-warning-light:    #f0b445;
    --rz-warning-lighter:  #fef3d5;
    --rz-warning-dark:     #c7861a;
    --rz-warning-darker:   #a56d0f;
    --rz-on-warning:             #ffffff;
    --rz-on-warning-light:       #ffffff;
    --rz-on-warning-lighter:     #a56d0f;
    --rz-on-warning-dark:        #ffffff;
    --rz-on-warning-darker:      #ffffff;

    /* === Gefahr (Rot) === */
    --rz-danger:           #dc3545;
    --rz-danger-light:     #e85462;
    --rz-danger-lighter:   #fde8eb;
    --rz-danger-dark:      #c0293a;
    --rz-danger-darker:    #9e1e2d;
    --rz-on-danger:              #ffffff;
    --rz-on-danger-light:        #ffffff;
    --rz-on-danger-lighter:      #9e1e2d;
    --rz-on-danger-dark:         #ffffff;
    --rz-on-danger-darker:       #ffffff;

    /* === Basis-Grau-Skala (leicht blaustichig, wie pmd-media BG) === */
    --rz-base-50:  #f4f8fb;   /* pmd-media Seitenhintergrund */
    --rz-base-100: #edf3f7;
    --rz-base-200: #dde8f0;
    --rz-base-300: #c8d9e6;
    --rz-base-400: #a8bfcf;
    --rz-base-500: #87a4b8;
    --rz-base-600: #63839a;
    --rz-base-700: #4a6679;
    --rz-base-800: #2d4355;
    --rz-base-900: #1a2b38;   /* Dunkel Navy für Sidebar */
    --rz-base-background-color: #ffffff;
    --rz-base-light:    #f4f8fb;
    --rz-base-lighter:  #f9fbfd;
    --rz-base-dark:     #637085;
    --rz-base-darker:   #2d4355;
    --rz-on-base:             #2d2d2d;
    --rz-on-base-light:       #2d2d2d;
    --rz-on-base-lighter:     #2d2d2d;
    --rz-on-base-dark:        #ffffff;
    --rz-on-base-darker:      #ffffff;

    /* === Text-Farben === */
    --rz-text-color:           #2d2d2d;   /* pmd-media Near-Black (tcb-color-2) */
    --rz-text-title-color:     #1a2b38;
    --rz-text-secondary-color: #637085;
    --rz-text-tertiary-color:  #a7a7a7;   /* pmd-media Muted (tcb-color-5) */
    --rz-text-disabled-color:  #c8c8c8;
    --rz-text-contrast-color:  #ffffff;

    /* === Body & Layout === */
    --rz-body-background-color: #f4f8fb;  /* pmd-media Background (tcb-color-7) */
    --rz-body-font-family: 'Muli', 'Barlow', system-ui, -apple-system, sans-serif;
    --rz-body-font-size:   0.9375rem;     /* 15px */
    --rz-body-line-height: 1.5;

    /* === Border-Radius (etwas großzügiger als Radzen-Standard 4px) === */
    --rz-border-radius: 6px;

    /* === Sidebar / Panel-Menü (dunkel-blau, wie pmd-media Header/Footer) === */
    --rz-panel-menu-item-color:                    #ffffff;
    --rz-panel-menu-item-background-color:         #1a2b38;
    --rz-panel-menu-item-hover-color:              #ffffff;
    --rz-panel-menu-item-hover-background-color:   #2d4355;
    --rz-panel-menu-item-active-color:             #ffffff;
    --rz-panel-menu-item-active-background-color:  #3d6485;
    --rz-panel-menu-item-active-indicator:         #537ea2;
    --rz-panel-menu-item-border:                   1px solid #2d4355;
    --rz-panel-menu-item-2nd-level-color:          #d0dce6;
    --rz-panel-menu-item-2nd-level-background-color:       #243748;
    --rz-panel-menu-item-2nd-level-hover-background-color: #2d4355;
    --rz-panel-menu-item-2nd-level-active-background-color: #3d6485;
    --rz-panel-menu-item-3rd-level-background-color:       #2d4355;
    --rz-panel-menu-item-3rd-level-hover-background-color: #3d6485;
    --rz-panel-menu-item-3rd-level-active-background-color:#3d6485;
    --rz-panel-menu-icon-color:                    #6b92b3;
    --rz-sidebar-background-color:                 #1a2b38;
    --rz-sidebar-color:                            #ffffff;
    --rz-sidebar-border-inline-end:                1px solid #2d4355;

    /* === App-eigene Status-Farben (für ISMS-Steuerungsklassen) === */
    --status-notimplemented: #637085;
    --status-planned:        #e8a020;
    --status-inprogress:     #2a8fd4;
    --status-implemented:    #22a85a;
    --status-reviewed:       #7c52c8;

    /* === Risk Level === */
    --risk-low:      #22a85a;
    --risk-medium:   #e8a020;
    --risk-high:     #e07020;
    --risk-critical: #dc3545;

    /* === Kompatibilitäts-Aliases (für Inline-Styles in Razor) === */
    --rz-border-color: var(--rz-base-200);          /* Alias, wird in mehreren Razor-Dateien verwendet */
    --rz-grid-stripe-background-color: #edf3f7;     /* Leicht blaustichiges Zebra-Muster */

    /* === Dashboard & KPI === */
    --dashboard-accent:  #537ea2;
    --dashboard-success: #22a85a;
    --dashboard-warning: #e8a020;
    --dashboard-danger:  #dc3545;
    --dashboard-info:    #2a8fd4;

    /* === KPI-Karten === */
    --kpi-text:       #1a2b38;
    --kpi-background: #ffffff;
    --kpi-border:     #537ea2;
}

/* =============================================
   Body & Typografie
   ============================================= */
body {
    font-family: var(--rz-body-font-family);
    background-color: var(--rz-body-background-color);
    color: var(--rz-text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Barlow für alle Überschriften */
h1, h2, h3, h4, h5, h6,
.rz-text-display-h1, .rz-text-display-h2,
.rz-text-h1, .rz-text-h2, .rz-text-h3,
.rz-text-h4, .rz-text-h5, .rz-text-h6 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 500;
    color: var(--rz-text-title-color);
    line-height: 1.3;
}

/* =============================================
   Cards
   ============================================= */
.rz-card {
    border: 1px solid var(--rz-base-200);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(83, 126, 162, 0.07),
                0 1px 2px rgba(83, 126, 162, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background-color: #ffffff;
}

.rz-card:hover {
    box-shadow: 0 8px 24px rgba(83, 126, 162, 0.13),
                0 2px 6px rgba(83, 126, 162, 0.08);
    transform: translateY(-2px);
}

/* =============================================
   Buttons
   ============================================= */
.rz-button {
    font-family: 'Muli', system-ui, sans-serif;
    font-weight: 600;
    border-radius: var(--rz-border-radius);
    letter-spacing: 0.01em;
}

/* =============================================
   DataGrid / Tabellen
   ============================================= */
.rz-grid-table thead th,
.rz-column-header-content {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

/* =============================================
   Alte floating-Eigenschaft wurde in :root verschoben
   ============================================= */

/* =============================================
   Formulare & Inputs
   ============================================= */
.rz-textbox:focus,
.rz-textarea:focus,
.rz-numeric .rz-inputtext:focus {
    box-shadow: 0 0 0 3px rgba(83, 126, 162, 0.18);
}

/* =============================================
   Tabs
   ============================================= */
.rz-tabview-nav li.rz-tabview-selected .rz-tabview-nav-link {
    font-weight: 600;
    color: var(--rz-primary-dark);
}

/* =============================================
   Alerts / Benachrichtigungen
   ============================================= */
.rz-alert {
    border-radius: var(--rz-border-radius);
    border-left-width: 4px;
    border-left-style: solid;
}

/* =============================================
   Sidebar / Navigation
   ============================================= */
.rz-sidebar-content {
    background-color: var(--rz-sidebar-background-color);
}

/* =============================================
   Header
   ============================================= */
.rz-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--rz-base-200);
    box-shadow: 0 2px 8px rgba(83, 126, 162, 0.08);
}

/* =============================================
   Landing / Hero (LandingPage)
   ============================================= */
.landing-hero {
    background: linear-gradient(135deg, #f4f8fb 0%, #dce9f2 100%);
    border: none;
    box-shadow: 0 12px 32px rgba(83, 126, 162, 0.12);
}

.final-cta {
    background: linear-gradient(135deg, var(--rz-primary), var(--rz-primary-darker));
    color: white;
    border-radius: 10px;
}

/* =============================================
   Footer
   ============================================= */
.footer-note {
    background: var(--rz-base-100);
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
    padding: 1.25rem;
    text-align: center;
    border-top: 1px solid var(--rz-base-200);
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 992px) {
    .rz-card { margin-bottom: 1.25rem; }
}

/* =============================================
   Dashboard & KPI Styling
   ============================================= */

/* KPI-Karten (große Zahlen auf Dashboard) */
.kpi-card {
    background: var(--kpi-background);
    border: 1.5px solid var(--rz-base-200);
    border-top: 3px solid var(--kpi-border);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(83, 126, 162, 0.14);
}

/* Große Zahl auf KPI-Karte */
.kpi-number {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 3rem;
    font-weight: 300;
    color: var(--dashboard-accent);
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

/* Label unter KPI-Zahl */
.kpi-label {
    font-family: 'Muli', system-ui, sans-serif;
    font-size: 0.875rem;
    color: var(--rz-text-tertiary-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Dashboard-Karte mit Status-Indikator links */
.status-card {
    border-left: 5px solid var(--status-implemented);
}

/* =============================================
   ISMS Status-Badges (Klassen für Inline-Styles
   in Razor-Komponenten)
   ============================================= */
.status-notimplemented { background-color: var(--status-notimplemented); color: white; border-radius: 4px; }
.status-planned        { background-color: var(--status-planned);        color: white; border-radius: 4px; }
.status-inprogress     { background-color: var(--status-inprogress);     color: white; border-radius: 4px; }
.status-implemented   { background-color: var(--status-implemented); color: white; }
.status-reviewed      { background-color: var(--status-reviewed); color: white; }

/* Risk Level Badges */
.risk-low      { background-color: var(--risk-low); color: white; }
.risk-medium   { background-color: var(--risk-medium); color: white; }
.risk-high     { background-color: var(--risk-high); color: white; }
.risk-critical { background-color: var(--risk-critical); color: white; }

/* Gap-Werte Hervorhebung */
.gap-positive { color: var(--dashboard-success); font-weight: 600; }   /* Gap geschlossen */
.gap-negative { color: var(--dashboard-danger); font-weight: 600; }    /* Noch Lücke */

/* Charts & Diagramme (falls du RadzenChart nutzt) */
.rz-chart {
    --rz-chart-grid: #e9ecef;
}

/* Dashboard-spezifische Erweiterungen */

.dashboard-page .kpi-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.dashboard-page .kpi-number {
    font-size: 3.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--dashboard-accent);
}

.dashboard-page .kpi-label {
    font-size: 1.15rem;
    color: var(--rz-muted-text);
    margin-top: 0.5rem;
}

/* Status-Badges im Grid */
.status-notimplemented { background-color: var(--status-notimplemented); }
.status-planned       { background-color: var(--status-planned); }
.status-inprogress    { background-color: var(--status-inprogress); }
.status-implemented   { background-color: var(--status-implemented); }
.status-reviewed      { background-color: var(--status-reviewed); }

/* Dashboard & KPI – angepasst an exaktes pmd-Blau */
.kpi-card {
    border: 2px solid var(--kpi-border);
}

.kpi-number {
    color: var(--dashboard-accent);
}

/* Hover-Effekt mit pmd-Blau */
.rz-card:hover {
    box-shadow: 0 12px 30px rgba(0, 85, 170, 0.14);
}

/* Buttons & Akzente */
.rz-button-primary {
    background-color: var(--rz-primary);
    border-color: var(--rz-primary);
}

.rz-button-primary:hover {
    background-color: var(--rz-primary-dark);
}

/* =============================================
   Setup-Progress-Banner
   Bernstein-/Amber-Farbschema, deutlich abgesetzt
   von Radzen-Alert-Stilen
   ============================================= */
.setup-progress-banner {
    background-color: #fffbeb;
    border-bottom: 2px solid #f59e0b;
    padding: 0.65rem 1.25rem;
}

.setup-progress-banner__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.setup-progress-banner__left {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex: 1 1 0;
    min-width: 0;
}

.setup-progress-banner__icon {
    color: #f59e0b;
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.setup-progress-banner__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #92400e;
    margin-bottom: 0.15rem;
}

.setup-progress-banner__body {
    font-size: 0.82rem;
    color: #78350f;
    margin-bottom: 0.4rem;
}

.setup-progress-banner__checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.78rem;
}

.setup-progress-banner__check--done {
    color: #15803d;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.setup-progress-banner__check--pending {
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.setup-progress-banner__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.setup-progress-banner__percent {
    font-size: 0.85rem;
    font-weight: 600;
    color: #b45309;
    min-width: 3rem;
    text-align: right;
}
}