/**
 * Icon Styling - Zentrale Farbsteuerung
 * Version: 3.0.0
 * Nur MDI Icons - Kein SVG Support mehr
 * Einheitliche Farben für Light/Dark Mode in allen Tabellen
 */

/* ============================================================================
   ICON BASE STYLES (MDI ONLY)
   ============================================================================ */

/**
 * Alle Icons (data-icon Attribut)
 * Basis-Styling für MDI Icons
 */
[data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color-default, #64748b); /* Hellgrau im Light Mode */
    transition: color 0.15s ease, opacity 0.15s ease;
}

/* MDI Icons */
[data-icon] .mdi,
.mdi {
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: inherit;
}

/* ============================================================================
   THEME-SPEZIFISCHE FARBEN
   ============================================================================ */

/**
 * Light Mode (Standard)
 * Icons in Hellgrau für bessere Lesbarkeit
 */
:root {
    --icon-color-default: #64748b;      /* Slate-500 - Hellgrau für Icons */
    --icon-color-hover: #475569;        /* Slate-600 - Dunkelgrau bei Hover */
    --icon-color-active: #1e293b;       /* Slate-800 - Fast schwarz wenn aktiv */
    --icon-color-muted: #94a3b8;        /* Slate-400 - Sehr hell für disabled */
}

[data-theme="light"] {
    --icon-color-default: #64748b;
    --icon-color-hover: #475569;
    --icon-color-active: #1e293b;
    --icon-color-muted: #94a3b8;
}

/**
 * Dark Mode
 * Icons heller für besseren Kontrast auf dunklem Hintergrund
 */
[data-theme="dark"] {
    --icon-color-default: #cbd5e1;      /* Slate-300 - Helles Grau */
    --icon-color-hover: #e2e8f0;        /* Slate-200 - Noch heller bei Hover */
    --icon-color-active: #f8fafc;       /* Slate-50 - Fast weiß wenn aktiv */
    --icon-color-muted: #64748b;        /* Slate-500 - Dunkler für disabled */
}

/* Smooth transition when switching themes */
[data-icon],
[data-icon] .mdi,
button,
a,
.sidebar,
.header {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* ============================================================================
   INTERACTIVE STATES
   ============================================================================ */

/**
 * Hover State
 * Icons werden dunkler (Light) oder heller (Dark) bei Hover
 */
button:hover [data-icon],
a:hover [data-icon],
.btn-icon:hover [data-icon] {
    color: var(--icon-color-hover);
}

/**
 * Active/Focus State
 * Icons haben maximalen Kontrast wenn aktiv
 */
button:active [data-icon],
button:focus [data-icon],
a.active [data-icon],
.sidebar-link.active [data-icon] {
    color: var(--icon-color-active);
}

/**
 * Disabled State
 * Icons werden sehr blass wenn disabled
 */
button:disabled [data-icon],
button[disabled] [data-icon],
.disabled [data-icon] {
    color: var(--icon-color-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   CONTEXT-SPECIFIC OVERRIDES
   ============================================================================ */

/**
 * Button Icons
 * Icons in Buttons behalten ihre Button-Farbe (primary, danger, etc.)
 */
.btn-primary [data-icon],
.btn-success [data-icon],
.btn-danger [data-icon],
.btn-warning [data-icon] {
    color: currentColor; /* Erbt die Button-Farbe */
}

/**
 * Icon Buttons (reine Icon-Buttons)
 * Verwenden die Icon-Farben, nicht die Button-Farben
 */
.btn-icon [data-icon] {
    color: var(--icon-color-default);
}

.btn-icon:hover [data-icon] {
    color: var(--icon-color-hover);
}

/* Primary Icon Button */
.btn-icon.btn-primary [data-icon] {
    color: var(--primary-color);
}

.btn-icon.btn-primary:hover [data-icon] {
    color: var(--primary-hover);
}

/* Danger Icon Button */
.btn-icon.btn-danger [data-icon] {
    color: var(--danger-color);
}

.btn-icon.btn-danger:hover [data-icon] {
    color: var(--danger-hover, #dc2626);
}

/* Success Icon Button */
.btn-icon.btn-success [data-icon] {
    color: var(--success-color);
}

.btn-icon.btn-success:hover [data-icon] {
    color: var(--success-hover, #16a34a);
}

/**
 * Menu/Sidebar Icons
 * Icons in der Sidebar haben spezielle Farben
 */
.sidebar-icon [data-icon] {
    color: var(--icon-color-default);
}

.sidebar-link:hover .sidebar-icon [data-icon] {
    color: var(--icon-color-hover);
}

.sidebar-link.active .sidebar-icon [data-icon] {
    color: var(--primary-color); /* Aktive Menu-Items in Primary-Farbe */
}

/**
 * Header Icons
 * Icons im Header (Notifications, Theme Toggle, User Menu)
 */
.header-btn [data-icon] {
    color: var(--icon-color-default);
}

.header-btn:hover [data-icon] {
    color: var(--icon-color-hover);
}

.header-btn .mdi {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

/**
 * Modal Icons
 * Icons in Modals haben eigene Farben je nach Typ
 */
.portal-modal-icon [data-icon] {
    color: currentColor; /* Erbt die inline-style Farbe */
}

/**
 * Minimal Icon Buttons
 * Für Aktions-Spalten in Tabellen - minimalistische Buttons ohne Farben
 */
.btn-icon.btn-minimal {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 1;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.btn-icon.btn-minimal:hover:not(:disabled) {
    opacity: 1;
    background: none;
}

.btn-icon.btn-minimal:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-icon.btn-minimal [data-icon] {
    color: var(--icon-color-default);
    transition: color 0.2s ease;
}

.btn-icon.btn-minimal:hover:not(:disabled) [data-icon] {
    color: var(--icon-color-hover);
}

.btn-icon.btn-minimal:disabled [data-icon] {
    color: var(--icon-color-muted);
    opacity: 0.5;
}

/**
 * Table Action Buttons (Kompakte Version für Tabellen)
 * Einheitliche Buttons für alle MQTT-Tabellen
 */
.btn-icon.btn-table-action {
    padding: 3px !important;
    min-width: 24px;
    min-height: 24px;
}

.btn-icon.btn-table-action [data-icon] {
    width: 18px;
    height: 18px;
}

/**
 * Table Action Icons
 * Icons in Tabellen-Actions - Einheitliche Farben für Light/Dark Mode
 * Alle Icons verwenden MDI Outline Varianten
 */
.dynamic-table [data-icon],
.table [data-icon],
.admin-table [data-icon] {
    color: var(--icon-color-default);
    transition: color 0.2s ease;
}

.dynamic-table [data-icon] .mdi,
.table [data-icon] .mdi,
.admin-table [data-icon] .mdi {
    color: inherit;
}

.dynamic-table button:hover [data-icon],
.table button:hover [data-icon],
.admin-table button:hover [data-icon] {
    color: var(--icon-color-hover);
}

.dynamic-table button:disabled [data-icon],
.table button:disabled [data-icon],
.admin-table button:disabled [data-icon] {
    color: var(--icon-color-muted);
    opacity: 0.5;
}

/* Table Header Icons */
.dynamic-table th [data-icon],
.table th [data-icon],
.admin-table th [data-icon] {
    color: var(--icon-color-default);
}

.dynamic-table th:hover [data-icon],
.table th:hover [data-icon],
.admin-table th:hover [data-icon] {
    color: var(--icon-color-hover);
}

/* Table Cell Icons - Einheitliche Farben */
.table td [data-icon],
.admin-table td [data-icon] {
    color: var(--icon-color-default);
    transition: color 0.2s ease;
}

.table td [data-icon] .mdi,
.admin-table td [data-icon] .mdi {
    color: inherit;
}

.table td button:hover [data-icon],
.admin-table td button:hover [data-icon] {
    color: var(--icon-color-hover);
}

/**
 * Detail Controls (Autocomplete/Search Icons)
 */
.autocomplete-icon [data-icon] {
    color: var(--icon-color-default);
}

.autocomplete-icon-plus [data-icon] {
    color: var(--success-color);
}

.autocomplete-icon-info [data-icon] {
    color: var(--primary-color);
}

/* ============================================================================
   ICON SIZES
   ============================================================================ */

/**
 * Standard Icon-Größen
 */
[data-icon] .mdi,
.mdi {
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 24px;
}

/* Klein (20px) */
[data-icon].icon-sm .mdi,
.icon-sm [data-icon] .mdi,
.icon-sm .mdi {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
}

/* Groß (28px) */
[data-icon].icon-lg .mdi,
.icon-lg [data-icon] .mdi,
.icon-lg .mdi {
    width: 28px;
    height: 28px;
    font-size: 28px;
    line-height: 28px;
}

/* Extra Groß (32px) */
[data-icon].icon-xl .mdi,
.icon-xl [data-icon] .mdi,
.icon-xl .mdi {
    width: 32px;
    height: 32px;
    font-size: 32px;
    line-height: 32px;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/**
 * Icon-Farb-Utilities
 */
.icon-primary [data-icon] {
    color: var(--primary-color) !important;
}

.icon-success [data-icon] {
    color: var(--success-color) !important;
}

.icon-danger [data-icon] {
    color: var(--danger-color) !important;
}

.icon-warning [data-icon] {
    color: var(--warning-color) !important;
}

.icon-muted [data-icon] {
    color: var(--icon-color-muted) !important;
}

/**
 * Icon-Rotation
 */
.icon-rotate-90 [data-icon] .mdi {
    transform: rotate(90deg);
}

.icon-rotate-180 [data-icon] .mdi {
    transform: rotate(180deg);
}

.icon-rotate-270 [data-icon] .mdi {
    transform: rotate(270deg);
}

/**
 * Icon-Spin-Animation
 */
.icon-spin [data-icon] .mdi {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    [data-icon] {
        color: #000 !important; /* Schwarz für Druck */
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/**
 * Reduzierte Bewegung (für Nutzer mit motion-sensitivity)
 */
@media (prefers-reduced-motion: reduce) {
    [data-icon],
    [data-icon] .mdi {
        transition: none !important;
        animation: none !important;
    }
}

/**
 * High Contrast Mode
 */
@media (prefers-contrast: high) {
    :root,
    [data-theme="light"] {
        --icon-color-default: #1e293b; /* Dunkler für besseren Kontrast */
        --icon-color-hover: #0f172a;
    }
    
    [data-theme="dark"] {
        --icon-color-default: #f8fafc; /* Heller für besseren Kontrast */
        --icon-color-hover: #ffffff;
    }
}