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

   Diese Datei enthält alle konfigurierbaren Design-Variablen für das Dashboard.
   Änderungen hier wirken sich global auf das gesamte Dashboard aus.

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

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


/* =============================================================================
   LIGHT MODE (Standard-Theme)
   ============================================================================= */
:root {
    /* -------------------------------------------------------------------------
       PRIMÄRFARBEN
       Die Hauptfarbe des Dashboards (Buttons, Links, Akzente)
       ------------------------------------------------------------------------- */
    --color-primary-50: #eff6ff;     /* Sehr heller Primärton - für Hover-Hintergründe */
    --color-primary-100: #dbeafe;    /* Heller Primärton - für leichte Akzente */
    --color-primary-200: #bfdbfe;    /* Hellerer Primärton */
    --color-primary-300: #93c5fd;    /* Mittel-heller Primärton */
    --color-primary-400: #60a5fa;    /* Mittel Primärton - für Hover-Zustände */
    --color-primary-500: #3b82f6;    /* Standard Primärfarbe - Hauptfarbe für Buttons/Links */
    --color-primary-600: #2563eb;    /* Dunklerer Primärton - für aktive Zustände */
    --color-primary-700: #1d4ed8;    /* Dunkler Primärton */
    --color-primary-800: #1e40af;    /* Sehr dunkler Primärton */
    --color-primary-900: #1e3a8a;    /* Dunkelster Primärton */

    /* -------------------------------------------------------------------------
       HINTERGRUNDFARBEN
       Farben für verschiedene Hintergrundelemente
       ------------------------------------------------------------------------- */
    --color-bg-body: #f3f4f6;        /* Haupthintergrund der Seite (body) */
    --color-bg-primary: #ffffff;     /* Primärer Hintergrund (Cards, Panels) */
    --color-bg-secondary: #f9fafb;   /* Sekundärer Hintergrund (Inputs, Tabellenzellen) */
    --color-bg-tertiary: #f3f4f6;    /* Tertiärer Hintergrund (Hover-Zustände) */
    --color-bg-hover: #e5e7eb;       /* Hover-Hintergrund für interaktive Elemente */

    /* -------------------------------------------------------------------------
       TEXTFARBEN
       Farben für verschiedene Textarten
       ------------------------------------------------------------------------- */
    --color-text-primary: #111827;   /* Primärer Text - Überschriften, wichtiger Inhalt */
    --color-text-secondary: #374151; /* Sekundärer Text - normaler Fließtext */
    --color-text-tertiary: #6b7280;  /* Tertiärer Text - Beschreibungen, Hinweise */
    --color-text-muted: #9ca3af;     /* Gedämpfter Text - Platzhalter, deaktivierter Text */
    --color-text-inverse: #ffffff;   /* Invertierter Text - Text auf dunklem Hintergrund */

    /* -------------------------------------------------------------------------
       RAHMEN UND LINIEN
       Farben für Borders, Trennlinien und Umrandungen
       ------------------------------------------------------------------------- */
    --color-border-primary: #e5e7eb;   /* Primärer Rahmen - Standard-Borders */
    --color-border-secondary: #d1d5db; /* Sekundärer Rahmen - stärkere Akzentuierung */
    --color-border-focus: #3b82f6;     /* Focus-Rahmen - für fokussierte Elemente */

    /* -------------------------------------------------------------------------
       STATUS-FARBEN
       Farben für Erfolg, Fehler, Warnung, Info
       ------------------------------------------------------------------------- */
    /* Erfolg (Grün) */
    --color-success-bg: #d1fae5;     /* Erfolg Hintergrund */
    --color-success-text: #065f46;   /* Erfolg Text */
    --color-success-border: #10b981; /* Erfolg Rahmen */

    /* Fehler (Rot) */
    --color-error-bg: #fee2e2;       /* Fehler Hintergrund */
    --color-error-text: #991b1b;     /* Fehler Text */
    --color-error-border: #ef4444;   /* Fehler Rahmen */

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

    /* Info (Blau) */
    --color-info-bg: #dbeafe;        /* Info Hintergrund */
    --color-info-text: #1e40af;      /* Info Text */
    --color-info-border: #3b82f6;    /* Info Rahmen */

    /* -------------------------------------------------------------------------
       SIDEBAR
       Farben für die Seitenleiste
       ------------------------------------------------------------------------- */
    --color-sidebar-bg: #f8fafc;           /* Sidebar Hintergrund */
    --color-sidebar-text: #374151;         /* Sidebar Text */
    --color-sidebar-text-muted: #6b7280;   /* Sidebar gedämpfter Text */
    --color-sidebar-hover: #f1f5f9;        /* Sidebar Hover-Hintergrund */
    --color-sidebar-active: #e2e8f0;       /* Sidebar aktiver Menüpunkt */
    --color-sidebar-border: #e2e8f0;       /* Sidebar Trennlinien */

    /* -------------------------------------------------------------------------
       TABELLEN
       Farben für DataTables und andere Tabellen
       ------------------------------------------------------------------------- */
    --color-table-header-bg: #f9fafb;      /* Tabellenkopf Hintergrund */
    --color-table-header-text: #374151;    /* Tabellenkopf Text */
    --color-table-row-bg: #ffffff;         /* Tabellenzeile Hintergrund */
    --color-table-row-alt-bg: #f9fafb;     /* Tabellenzeile alternierender Hintergrund */
    --color-table-row-hover: #f3f4f6;      /* Tabellenzeile Hover */
    --color-table-border: #e5e7eb;         /* Tabellen Rahmen */

    /* -------------------------------------------------------------------------
       SCROLLBAR
       Farben für die Scrollleiste
       ------------------------------------------------------------------------- */
    --color-scrollbar-track: transparent;  /* Scrollbar Schiene */
    --color-scrollbar-thumb: #cbd5e1;      /* Scrollbar Griff */
    --color-scrollbar-thumb-hover: #94a3b8;/* Scrollbar Griff Hover */

    /* -------------------------------------------------------------------------
       SCHATTEN
       Box-Shadows für verschiedene Erhebungsebenen
       ------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);                                        /* Kleiner Schatten */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);   /* Mittlerer Schatten */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Großer Schatten */
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);/* Extra großer Schatten */

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

    /* -------------------------------------------------------------------------
       SCHRIFTEN (Typography)
       Schriftarten und -größen
       ------------------------------------------------------------------------- */
    --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --font-size-xs: 0.75rem;    /* 12px - Extra klein */
    --font-size-sm: 0.875rem;   /* 14px - Klein */
    --font-size-base: 1rem;     /* 16px - Standard */
    --font-size-lg: 1.125rem;   /* 18px - Groß */
    --font-size-xl: 1.25rem;    /* 20px - Extra groß */
    --font-size-2xl: 1.5rem;    /* 24px - Überschrift */
    --font-size-3xl: 1.875rem;  /* 30px - Große Überschrift */

    /* -------------------------------------------------------------------------
       BORDER RADIUS (Eckenrundungen)
       Rundungen für verschiedene Elemente
       ------------------------------------------------------------------------- */
    --radius-sm: 0.25rem;    /* 4px - Kleine Rundung */
    --radius-md: 0.375rem;   /* 6px - Mittlere Rundung */
    --radius-lg: 0.5rem;     /* 8px - Große Rundung */
    --radius-xl: 0.75rem;    /* 12px - Extra große Rundung */
    --radius-2xl: 1rem;      /* 16px - Sehr große Rundung */
    --radius-full: 9999px;   /* Vollständig rund (Kreise, Pills) */

    /* -------------------------------------------------------------------------
       ÜBERGÄNGE (Transitions)
       Animationszeiten für sanfte Übergänge
       ------------------------------------------------------------------------- */
    --transition-fast: 150ms;    /* Schnelle Übergänge (Hover) */
    --transition-normal: 200ms;  /* Normale Übergänge */
    --transition-slow: 300ms;    /* Langsame Übergänge (Modals, Dropdowns) */

    /* -------------------------------------------------------------------------
       PORT-KATEGORIEN
       Farben für verschiedene Port-Typen in der Host-Ansicht
       ------------------------------------------------------------------------- */
    --color-port-remote-access: #ef4444;  /* Remote Access Ports (z.B. 21, 22, 23, 3389) */
    --color-port-web: #3b82f6;       /* Web-Ports (80, 443, 8080) */
    --color-port-mail: #10b981;      /* Mail-Ports (25, 587, 993) */
    --color-port-database: #8b5cf6;  /* Datenbank-Ports (3306, 5432, 27017) */
    --color-port-other: #6b7280;     /* Sonstige Ports */
}


/* =============================================================================
   DARK MODE
   Überschreibungen für den dunklen Modus
   ============================================================================= */
.dark,
html.dark {
    /* -------------------------------------------------------------------------
       PRIMÄRFARBEN (Dark Mode)
       Leicht angepasst für bessere Sichtbarkeit auf dunklem Hintergrund
       ------------------------------------------------------------------------- */
    --color-primary-50: #1e3a5f;
    --color-primary-100: #1e40af;
    --color-primary-200: #1d4ed8;
    --color-primary-300: #2563eb;
    --color-primary-400: #3b82f6;
    --color-primary-500: #60a5fa;
    --color-primary-600: #93c5fd;
    --color-primary-700: #bfdbfe;
    --color-primary-800: #dbeafe;
    --color-primary-900: #eff6ff;

    /* -------------------------------------------------------------------------
       HINTERGRUNDFARBEN (Dark Mode)
       ------------------------------------------------------------------------- */
    --color-bg-body: #111827;        /* Haupthintergrund der Seite */
    --color-bg-primary: #1f2937;     /* Primärer Hintergrund (Cards) */
    --color-bg-secondary: #374151;   /* Sekundärer Hintergrund (Inputs) */
    --color-bg-tertiary: #4b5563;    /* Tertiärer Hintergrund */
    --color-bg-hover: #4b5563;       /* Hover-Hintergrund */

    /* -------------------------------------------------------------------------
       TEXTFARBEN (Dark Mode)
       ------------------------------------------------------------------------- */
    --color-text-primary: #f9fafb;   /* Primärer Text */
    --color-text-secondary: #e5e7eb; /* Sekundärer Text */
    --color-text-tertiary: #9ca3af;  /* Tertiärer Text */
    --color-text-muted: #6b7280;     /* Gedämpfter Text */
    --color-text-inverse: #111827;   /* Invertierter Text */

    /* -------------------------------------------------------------------------
       RAHMEN UND LINIEN (Dark Mode)
       ------------------------------------------------------------------------- */
    --color-border-primary: #374151;
    --color-border-secondary: #4b5563;
    --color-border-focus: #60a5fa;

    /* -------------------------------------------------------------------------
       STATUS-FARBEN (Dark Mode)
       ------------------------------------------------------------------------- */
    /* Erfolg */
    --color-success-bg: rgba(16, 185, 129, 0.2);
    --color-success-text: #34d399;
    --color-success-border: #10b981;

    /* Fehler */
    --color-error-bg: rgba(239, 68, 68, 0.2);
    --color-error-text: #f87171;
    --color-error-border: #ef4444;

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

    /* Info */
    --color-info-bg: rgba(59, 130, 246, 0.2);
    --color-info-text: #60a5fa;
    --color-info-border: #3b82f6;

    /* -------------------------------------------------------------------------
       SIDEBAR (Dark Mode)
       ------------------------------------------------------------------------- */
    --color-sidebar-bg: #1e293b;
    --color-sidebar-text: #e2e8f0;
    --color-sidebar-text-muted: #94a3b8;
    --color-sidebar-hover: #334155;
    --color-sidebar-active: #475569;
    --color-sidebar-border: #334155;

    /* -------------------------------------------------------------------------
       TABELLEN (Dark Mode)
       ------------------------------------------------------------------------- */
    --color-table-header-bg: #374151;
    --color-table-header-text: #e5e7eb;
    --color-table-row-bg: #1f2937;
    --color-table-row-alt-bg: #111827;
    --color-table-row-hover: #374151;
    --color-table-border: #4b5563;

    /* -------------------------------------------------------------------------
       SCROLLBAR (Dark Mode)
       ------------------------------------------------------------------------- */
    --color-scrollbar-thumb: #475569;
    --color-scrollbar-thumb-hover: #64748b;

    /* -------------------------------------------------------------------------
       SCHATTEN (Dark Mode)
       Dunklere Schatten für besseren Kontrast
       ------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}