/**
 * PF_theme_darksteel.css - Darksteel Theme für PFWS 1.4.1.3.25
 * Autor: Franz PFuisi
 * Erstellt: 24.09.2025, Update: 08.10.2025
 * Beschreibung: Dunkles Industrial-Theme mit Stahlgrau-Blau-Optik
 */

:root.theme-darksteel {
    /* 🔩 Darksteel Farbpalette - Stahlgrau-Blau */
    --pf-primary: #3d5a80;
    --pf-secondary: #4a6fa5;
    --pf-accent: #5b8fc9;
    --pf-success: #27ae60;
    --pf-warning: #f39c12;
    --pf-danger: #e74c3c;
    --pf-info: #5dade2;
    
    /* 🎨 Basis-Farben */
    --pf-bg: #1c2530;
    --pf-surface: #293342;
    --pf-card: #324054;
    --pf-text: #e8eef5;
    --pf-text-muted: #98a6b8;
    --pf-border: #3d4c5f;
    
    /* 🌙 Navigation */
    --pf-nav-bg: #1a2230;
    --pf-nav-text: #ffffff;
    --pf-nav-hover: #3d5a80;
    
    /* 🔘 Buttons */
    --pf-btn-primary: linear-gradient(135deg, #4a6fa5, #3d5a80);
    --pf-btn-hover: linear-gradient(135deg, #5b8fc9, #4a6fa5);
    
    /* ✨ Effects */
    --pf-shadow: 0 4px 12px rgba(0,0,0,0.4);
    --pf-shadow-hover: 0 6px 20px rgba(74, 111, 165, 0.3);
    --pf-radius: 6px;
    --pf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Apply theme when class is present */
body.theme-darksteel {
    background-color: var(--pf-bg);
    color: var(--pf-text);
    transition: var(--pf-transition);
}

/* Cards & Surfaces */
.theme-darksteel .pf-card,
.theme-darksteel .pf-surface {
    background-color: var(--pf-surface);
    border: 1px solid var(--pf-border);
    box-shadow: var(--pf-shadow);
    border-radius: var(--pf-radius);
}

/* Navigation */
.theme-darksteel .pf-topnav,
.theme-darksteel .pf-dashboard-topnav,
.theme-darksteel .pf-leftnav {
    background-color: var(--pf-nav-bg);
    color: var(--pf-nav-text);
    border-color: var(--pf-border);
}

.theme-darksteel .pf-nav-link:hover {
    background-color: var(--pf-nav-hover);
    color: var(--pf-nav-text);
}

/* Buttons */
.theme-darksteel .pf-btn-primary {
    background: var(--pf-btn-primary);
    border: none;
    color: white;
    transition: var(--pf-transition);
}

.theme-darksteel .pf-btn-primary:hover {
    background: var(--pf-btn-hover);
    box-shadow: var(--pf-shadow-hover);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🔷 OVERLAY BACKDROP - Kristallines Hexagon Pattern (Tech/Industrial)
   ═══════════════════════════════════════════════════════════════════════════════ */
.theme-darksteel .pf-overlay {
    background: rgba(12, 15, 22, 0.80) !important;
    backdrop-filter: blur(9px) saturate(105%) brightness(0.75) contrast(1.08) !important;
    -webkit-backdrop-filter: blur(9px) saturate(105%) brightness(0.75) contrast(1.08) !important;
}

.theme-darksteel .pf-overlay::before {
    background-image: 
        /* Kristalline Hexagon-Struktur */
        linear-gradient(30deg, transparent 74%, rgba(120, 150, 180, 0.09) 75%, rgba(120, 150, 180, 0.09) 76%, transparent 77%),
        linear-gradient(90deg, transparent 74%, rgba(120, 150, 180, 0.09) 75%, rgba(120, 150, 180, 0.09) 76%, transparent 77%),
        linear-gradient(150deg, transparent 74%, rgba(120, 150, 180, 0.09) 75%, rgba(120, 150, 180, 0.09) 76%, transparent 77%),
        /* Metallische Akzente */
        linear-gradient(30deg, transparent 73%, rgba(180, 200, 220, 0.04) 75%, transparent 77%),
        linear-gradient(90deg, transparent 73%, rgba(180, 200, 220, 0.04) 75%, transparent 77%) !important;
    background-size: 45px 78px !important;
    opacity: 0.7 !important;
}