/**
 * Glass Utilities – Wiederverwendbare Klassen
 * Ersetzt fragile Inline-Style-Attributselektoren aus glassmorphism.css.
 *
 * Nutzung: Klasse in PHP-Views statt style="background: #ffffff"
 * Damit entfallen die hundert Attribut-Selektoren am Ende von glassmorphism.css.
 */

/* ================================================
   KARTEN
   ================================================ */

/** Standard Glass-Card */
.glass-card {
    background: var(--card-glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--card-glass-border) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--glass-shadow) !important;
    color: var(--glass-text) !important;
}

/** Leichtere Variante */
.glass-card-light {
    background: var(--glass-bg-light) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
}

/** Kräftigere Variante */
.glass-card-strong {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--glass-border-strong) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--glass-shadow) !important;
}

/* Hover */
.glass-card:hover,
.glass-card-light:hover {
    border-color: var(--glass-border-light) !important;
    box-shadow: var(--glass-shadow-glow) !important;
    transform: translateY(-2px);
    transition: all var(--transition-normal);
}

/* ================================================
   HEADER-BÄNDER
   ================================================ */

/** Amber (Admin) */
.glass-header-admin {
    background: linear-gradient(135deg,
        var(--color-admin)      0%,
        var(--color-admin-dark) 100%) !important;
    border-radius: var(--radius-xl) !important;
    padding: 1.5rem 2rem !important;
    color: white !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.28) !important;
}

/** Blau (Member / Frontend) */
.glass-header-blue {
    background: linear-gradient(135deg,
        var(--color-primary)       0%,
        var(--color-primary-light) 100%) !important;
    border-radius: var(--radius-xl) !important;
    padding: 1.5rem 2rem !important;
    color: white !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 20px rgba(44, 95, 120, 0.30) !important;
}

/** Transparent Glass */
.glass-header {
    background: var(--glass-bg-medium) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    padding: 1.5rem 2rem !important;
    color: var(--glass-text) !important;
    margin-bottom: 1.5rem !important;
}

/* ================================================
   TABELLEN
   ================================================ */

.glass-table-wrap {
    background: var(--glass-bg-medium) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

.glass-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

.glass-table thead th {
    background: var(--glass-bg-light) !important;
    color: var(--glass-text-muted) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.glass-table tbody td {
    border-bottom: 1px solid var(--glass-border) !important;
    color: var(--glass-text) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
}

.glass-table tbody tr:hover td {
    background: var(--glass-bg-light) !important;
}

.glass-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ================================================
   FORMULARE
   ================================================ */

.glass-form {
    background: var(--glass-bg-medium) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    padding: 2rem !important;
}

.glass-form-section {
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.glass-form-section-title {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--glass-text-muted) !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

/* ================================================
   TEXT
   ================================================ */
.glass-text         { color: var(--glass-text) !important; }
.glass-text-muted   { color: var(--glass-text-muted) !important; }
.glass-text-subtle  { color: var(--glass-text-subtle) !important; }

/* ================================================
   DIVIDER
   ================================================ */
.glass-divider {
    border: none !important;
    border-top: 1px solid var(--glass-border) !important;
    margin: 1.5rem 0 !important;
}

/* ================================================
   BADGES (Glass-Töne)
   ================================================ */
.badge-glass-success {
    background: rgba(5, 150, 105, 0.22)   !important;
    color: #6ee7b7                         !important;
    border: 1px solid rgba(5, 150, 105, 0.4) !important;
    border-radius: var(--radius-sm)        !important;
    padding: 0.25rem 0.6rem               !important;
    font-size: 0.75rem                    !important;
    font-weight: 600                       !important;
}

.badge-glass-danger {
    background: rgba(220, 38, 38, 0.22)   !important;
    color: #fca5a5                         !important;
    border: 1px solid rgba(220, 38, 38, 0.4) !important;
    border-radius: var(--radius-sm)        !important;
    padding: 0.25rem 0.6rem               !important;
    font-size: 0.75rem                    !important;
    font-weight: 600                       !important;
}

.badge-glass-warning {
    background: rgba(245, 158, 11, 0.22)  !important;
    color: #fcd34d                         !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    border-radius: var(--radius-sm)        !important;
    padding: 0.25rem 0.6rem               !important;
    font-size: 0.75rem                    !important;
    font-weight: 600                       !important;
}

.badge-glass-info {
    background: rgba(59, 130, 246, 0.22)  !important;
    color: #93c5fd                         !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    border-radius: var(--radius-sm)        !important;
    padding: 0.25rem 0.6rem               !important;
    font-size: 0.75rem                    !important;
    font-weight: 600                       !important;
}

/* ================================================
   ALERTS (Glass)
   ================================================ */
.alert-glass {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: var(--radius-sm) !important;
    border-left: 4px solid !important;
    padding: 1rem 1.25rem !important;
    color: var(--glass-text) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

.alert-glass-success {
    background: rgba(5, 150, 105, 0.18)   !important;
    border-color: rgba(5, 150, 105, 0.55) !important;
}

.alert-glass-danger {
    background: rgba(220, 38, 38, 0.18)   !important;
    border-color: rgba(220, 38, 38, 0.55) !important;
}

.alert-glass-warning {
    background: rgba(245, 158, 11, 0.18)  !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
}

.alert-glass-info {
    background: rgba(59, 130, 246, 0.18)  !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
}

/* ================================================
   LEERER ZUSTAND
   ================================================ */
.glass-empty-state {
    text-align: center !important;
    padding: 3rem 2rem !important;
    background: var(--glass-bg-light) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
}

.glass-empty-state i {
    font-size: 3rem !important;
    color: var(--glass-text-subtle) !important;
    display: block !important;
    margin-bottom: 1rem !important;
}

.glass-empty-state h3,
.glass-empty-state h4 {
    color: var(--glass-text) !important;
    margin-bottom: 0.5rem !important;
}

.glass-empty-state p {
    color: var(--glass-text-muted) !important;
    font-size: 0.9rem !important;
}

/* ================================================
   HILFSPROGRAMME (Abstände, Radien, Hintergründe)
   ================================================ */

/* Glass-Hintergründe als Utility */
.bg-glass          { background: var(--glass-bg) !important; }
.bg-glass-light    { background: var(--glass-bg-light) !important; }
.bg-glass-medium   { background: var(--glass-bg-medium) !important; }
.bg-glass-strong   { background: var(--glass-bg-strong) !important; }

/* Blur */
.blur-sm  { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }
.blur-md  { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); }
.blur-lg  { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Borders */
.border-glass       { border: 1px solid var(--glass-border) !important; }
.border-glass-light { border: 1px solid var(--glass-border-light) !important; }
.border-glass-strong{ border: 1px solid var(--glass-border-strong) !important; }

/* Radien */
.rounded-glass-sm  { border-radius: var(--radius-sm)  !important; }
.rounded-glass-md  { border-radius: var(--radius-md)  !important; }
.rounded-glass-lg  { border-radius: var(--radius-lg)  !important; }
.rounded-glass-xl  { border-radius: var(--radius-xl)  !important; }
.rounded-glass-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-glass-full{ border-radius: var(--radius-full)!important; }

/* Schatten */
.shadow-glass      { box-shadow: var(--glass-shadow) !important; }
.shadow-glass-light{ box-shadow: var(--glass-shadow-light) !important; }
.shadow-glass-glow { box-shadow: var(--glass-shadow-glow) !important; }