/* =============================================================================
   OTI Grid - SOC Theme Variables (CSS Custom Properties)
   =============================================================================

   Dark Cybersecurity Theme basierend auf dem SOC Analytics Design.
   Charakteristik: Sehr dunkle Hintergründe, Blau-Violett Akzente,
   minimalistisches Design mit scharfen Kanten.

   Verwendung: var(--variable-name)
   Beispiel:   background-color: var(--color-bg-primary);

   ============================================================================= */


/* =============================================================================
   LIGHT MODE (Basis - aber SOC ist primär dark)
   Bei SOC Theme ist Light Mode eine hellere Variante des Dark Designs
   ============================================================================= */
:root {
    /* -------------------------------------------------------------------------
       PRIMÄRFARBEN
       Blau-Violett Palette (basierend auf #5c7cfa)
       ------------------------------------------------------------------------- */
    --color-primary-50: #eef2ff;
    --color-primary-100: #e0e7ff;
    --color-primary-200: #c7d2fe;
    --color-primary-300: #a5b4fc;
    --color-primary-400: #818cf8;
    --color-primary-500: #5c7cfa;     /* Haupt-Akzentfarbe */
    --color-primary-600: #4f46e5;
    --color-primary-700: #4338ca;
    --color-primary-800: #3730a3;
    --color-primary-900: #312e81;

    /* -------------------------------------------------------------------------
       HINTERGRUNDFARBEN (Light Mode - heller aber kühl)
       ------------------------------------------------------------------------- */
    --color-bg-body: #e8eaed;
    --color-bg-primary: #f5f6f8;
    --color-bg-secondary: #ebedf0;
    --color-bg-tertiary: #e0e3e7;
    --color-bg-hover: #d5d9df;

    /* -------------------------------------------------------------------------
       TEXTFARBEN (Light Mode)
       ------------------------------------------------------------------------- */
    --color-text-primary: #0b0e14;
    --color-text-secondary: #1e2230;
    --color-text-tertiary: #4a5168;
    --color-text-muted: #7f8697;
    --color-text-inverse: #f5f6f8;

    /* -------------------------------------------------------------------------
       RAHMEN UND LINIEN (Light Mode)
       ------------------------------------------------------------------------- */
    --color-border-primary: #d1d5db;
    --color-border-secondary: #b8bfc9;
    --color-border-focus: #5c7cfa;

    /* -------------------------------------------------------------------------
       STATUS-FARBEN (Light Mode)
       ------------------------------------------------------------------------- */
    /* Erfolg (Grün) */
    --color-success-bg: #d1fae5;
    --color-success-text: #065f46;
    --color-success-border: #10b981;

    /* Fehler (Rot - SOC verwendet #ff6c6c) */
    --color-error-bg: #fee2e2;
    --color-error-text: #991b1b;
    --color-error-border: #ff6c6c;

    /* Warnung (Gelb/Orange) */
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;
    --color-warning-border: #f59e0b;

    /* Info (Blau-Violett passend zum Theme) */
    --color-info-bg: #e0e7ff;
    --color-info-text: #3730a3;
    --color-info-border: #5c7cfa;

    /* -------------------------------------------------------------------------
       SIDEBAR (Light Mode - helle Variante)
       ------------------------------------------------------------------------- */
    --color-sidebar-bg: #f0f2f5;
    --color-sidebar-text: #1e2230;
    --color-sidebar-text-muted: #6b7280;
    --color-sidebar-hover: #e4e7eb;
    --color-sidebar-active: #d8dce3;
    --color-sidebar-border: #d1d5db;

    /* -------------------------------------------------------------------------
       TABELLEN (Light Mode)
       ------------------------------------------------------------------------- */
    --color-table-header-bg: #e0e3e7;
    --color-table-header-text: #4a5168;
    --color-table-row-bg: #f5f6f8;
    --color-table-row-alt-bg: #ebedf0;
    --color-table-row-hover: #d5d9df;
    --color-table-border: #d1d5db;

    /* -------------------------------------------------------------------------
       SCROLLBAR (Light Mode)
       ------------------------------------------------------------------------- */
    --color-scrollbar-track: transparent;
    --color-scrollbar-thumb: #b8bfc9;
    --color-scrollbar-thumb-hover: #9ca1ad;

    /* -------------------------------------------------------------------------
       SCHATTEN (Light Mode)
       ------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);

    /* -------------------------------------------------------------------------
       ABSTÄNDE (Spacing)
       Standard-Abstände für konsistentes Layout
       ------------------------------------------------------------------------- */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */

    /* -------------------------------------------------------------------------
       SCHRIFTEN (Typography)
       SOC verwendet Inter und Roboto Mono
       ------------------------------------------------------------------------- */
    --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.8125rem;  /* 13px - SOC Standard */
    --font-size-base: 0.875rem; /* 14px */
    --font-size-lg: 1rem;       /* 16px */
    --font-size-xl: 1.125rem;   /* 18px */
    --font-size-2xl: 1.25rem;   /* 20px */
    --font-size-3xl: 1.625rem;  /* 26px - Big Numbers */

    /* -------------------------------------------------------------------------
       BORDER RADIUS (Eckenrundungen)
       SOC Design: Minimalistisch mit sehr kleinen Rundungen (2px)
       ------------------------------------------------------------------------- */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-xl: 4px;
    --radius-2xl: 6px;
    --radius-full: 9999px;

    /* -------------------------------------------------------------------------
       ÜBERGÄNGE (Transitions)
       ------------------------------------------------------------------------- */
    --transition-fast: 150ms;
    --transition-normal: 200ms;
    --transition-slow: 300ms;

    /* -------------------------------------------------------------------------
       PORT-KATEGORIEN
       Angepasst für SOC Theme
       ------------------------------------------------------------------------- */
    --color-port-remote-access: #ff6c6c;  /* SOC Alert-Rot */
    --color-port-web: #5c7cfa;       /* SOC Primary */
    --color-port-mail: #10b981;      /* Grün */
    --color-port-database: #91a7ff;  /* SOC Secondary */
    --color-port-other: #7f8697;     /* SOC Muted */
}


/* =============================================================================
   DARK MODE
   Das Hauptdesign des SOC Themes - basierend auf new-design Vorlagen
   ============================================================================= */
.dark,
html.dark {
    /* -------------------------------------------------------------------------
       PRIMÄRFARBEN (Dark Mode)
       Invertierte Palette für dunklen Hintergrund
       ------------------------------------------------------------------------- */
    --color-primary-50: #1a1d2e;
    --color-primary-100: #252942;
    --color-primary-200: #333a5c;
    --color-primary-300: #4b5580;
    --color-primary-400: #5c7cfa;
    --color-primary-500: #5c7cfa;     /* Haupt-Akzentfarbe */
    --color-primary-600: #91a7ff;
    --color-primary-700: #b8c6ff;
    --color-primary-800: #d8e0ff;
    --color-primary-900: #eef1ff;

    /* -------------------------------------------------------------------------
       HINTERGRUNDFARBEN (Dark Mode)
       Sehr dunkle Navy/Anthrazit Töne (aus new-design)
       ------------------------------------------------------------------------- */
    --color-bg-body: #0b0e14;        /* Haupthintergrund */
    --color-bg-primary: #10121a;     /* Cards, Panels (--panel) */
    --color-bg-secondary: #121421;   /* Inputs (--panel-soft) */
    --color-bg-tertiary: #181b26;    /* Hover-Zustände */
    --color-bg-hover: #1e2230;       /* Aktive Hover */

    /* -------------------------------------------------------------------------
       TEXTFARBEN (Dark Mode)
       Hell auf dunklem Hintergrund
       ------------------------------------------------------------------------- */
    --color-text-primary: #e6e8eb;   /* Haupttext (--text) */
    --color-text-secondary: #c4c8d0;
    --color-text-tertiary: #9ca1ad;
    --color-text-muted: #7f8697;     /* (--muted) */
    --color-text-inverse: #0b0e14;   /* Für Text auf hellen Buttons */

    /* -------------------------------------------------------------------------
       RAHMEN UND LINIEN (Dark Mode)
       Subtile weiße Transparenz
       ------------------------------------------------------------------------- */
    --color-border-primary: rgba(255,255,255,0.08);   /* (--border) */
    --color-border-secondary: rgba(255,255,255,0.12);
    --color-border-focus: #5c7cfa;

    /* -------------------------------------------------------------------------
       STATUS-FARBEN (Dark Mode)
       Mit Transparenz für dunklen Hintergrund
       ------------------------------------------------------------------------- */
    /* Erfolg */
    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-success-text: #34d399;
    --color-success-border: #10b981;

    /* Fehler (SOC verwendet #ff6c6c als Alert-Farbe) */
    --color-error-bg: rgba(255, 108, 108, 0.15);
    --color-error-text: #ff6c6c;
    --color-error-border: #ff6c6c;

    /* Warnung */
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-warning-text: #fbbf24;
    --color-warning-border: #f59e0b;

    /* Info (Blau-Violett passend zum Theme) */
    --color-info-bg: rgba(92, 124, 250, 0.15);
    --color-info-text: #91a7ff;
    --color-info-border: #5c7cfa;

    /* -------------------------------------------------------------------------
       SIDEBAR (Dark Mode)
       Gleiche dunkle Farben wie Hauptbereich
       ------------------------------------------------------------------------- */
    --color-sidebar-bg: #10121a;
    --color-sidebar-text: #e6e8eb;
    --color-sidebar-text-muted: #7f8697;
    --color-sidebar-hover: #181b26;
    --color-sidebar-active: #1e2230;
    --color-sidebar-border: rgba(255,255,255,0.08);

    /* -------------------------------------------------------------------------
       TABELLEN (Dark Mode)
       Konsistent mit dem dunklen Design
       ------------------------------------------------------------------------- */
    --color-table-header-bg: #121421;
    --color-table-header-text: #7f8697;
    --color-table-row-bg: #10121a;
    --color-table-row-alt-bg: #0b0e14;
    --color-table-row-hover: #181b26;
    --color-table-border: rgba(255,255,255,0.08);

    /* -------------------------------------------------------------------------
       SCROLLBAR (Dark Mode)
       ------------------------------------------------------------------------- */
    --color-scrollbar-track: transparent;
    --color-scrollbar-thumb: #333a5c;
    --color-scrollbar-thumb-hover: #4b5580;

    /* -------------------------------------------------------------------------
       SCHATTEN (Dark Mode)
       Stärkere Schatten für Tiefe auf dunklem Hintergrund
       ------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);

    /* -------------------------------------------------------------------------
       PORT-KATEGORIEN (Dark Mode)
       ------------------------------------------------------------------------- */
    --color-port-remote-access: #ff6c6c;
    --color-port-web: #5c7cfa;
    --color-port-mail: #34d399;
    --color-port-database: #91a7ff;
    --color-port-other: #7f8697;
}