/* ============================================================================
   LA MIDNIGHT - MyAlerts Styling
   Version: 2.1.0
   
   Passend zum LA Midnight Brutalist Theme
   
   INHALTSVERZEICHNIS:
   1. jQuery Modal Blocker (Overlay)
   2. MyAlerts Modal Container
   3. Modal Header
   4. Alert Rows
   5. Modal Footer
   6. Modal Close Button
   7. Header Icon (User Panel) - NEU!
   8. Alerts Page Styling
   9. Responsive
   10. Light Mode
   ============================================================================ */


/* ============================================================================
   1. JQUERY MODAL BLOCKER (Overlay)
   ============================================================================ */

.jquery-modal.blocker {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 99999 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}


/* ============================================================================
   2. MYALERTS MODAL CONTAINER
   ============================================================================ */

#myalerts_alerts_modal,
#myalerts_alerts_modal.modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 480px !important;
    max-height: 80vh !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
    animation: myalertsModalIn 0.25s var(--ease) !important;
}

@keyframes myalertsModalIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ============================================================================
   3. MODAL HEADER & TABELLE
   ============================================================================ */

#myalerts_alerts_modal .tborder,
#myalerts_alerts_modal table.tborder {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

#myalerts_alerts_modal .thead,
#myalerts_alerts_modal th.thead {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 1rem 1.25rem !important;
    text-align: left !important;
}

#myalerts_alerts_modal .thead strong {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    color: var(--accent) !important;
    text-transform: uppercase !important;
}

#myalerts_alerts_modal .thead strong::before {
    content: '\f0f3';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', FontAwesome;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-dim);
}

#myalerts_alerts_modal #alerts_content,
#myalerts_alerts_modal tbody#alerts_content {
    display: block !important;
    max-height: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: var(--text-dark) transparent;
}

#myalerts_alerts_modal #alerts_content::-webkit-scrollbar {
    width: 4px;
}

#myalerts_alerts_modal #alerts_content::-webkit-scrollbar-track {
    background: transparent;
}

#myalerts_alerts_modal #alerts_content::-webkit-scrollbar-thumb {
    background: var(--text-dark);
}


/* ============================================================================
   4. ALERT ROWS
   ============================================================================ */

#myalerts_alerts_modal tr.alert,
#myalerts_alerts_modal .alert,
#myalerts_alerts_modal #alerts_content tr {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    transition: background-color 0.2s var(--ease) !important;
}

#myalerts_alerts_modal tr.alert:hover,
#myalerts_alerts_modal #alerts_content tr:hover {
    background: rgba(255, 68, 34, 0.03) !important;
}

#myalerts_alerts_modal tr.alert:last-child,
#myalerts_alerts_modal #alerts_content tr:last-child {
    border-bottom: none !important;
}

/* Ungelesene Alerts */
#myalerts_alerts_modal tr.alert.alert--unread,
#myalerts_alerts_modal tr.alert:not(.alert--read),
#myalerts_alerts_modal #alerts_content tr.alert--unread {
    background: rgba(255, 68, 34, 0.05) !important;
    border-left: 2px solid var(--accent) !important;
    padding-left: calc(1.25rem - 2px) !important;
}

#myalerts_alerts_modal td,
#myalerts_alerts_modal td.trow1,
#myalerts_alerts_modal td.trow2 {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    vertical-align: top !important;
}

/* Avatar */
#myalerts_alerts_modal td.alert__avatar img,
#myalerts_alerts_modal .alert img[src*="avatar"] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid var(--border) !important;
    filter: grayscale(100%);
    transition: filter 0.3s var(--ease);
    flex-shrink: 0 !important;
}

#myalerts_alerts_modal tr.alert:hover img {
    filter: grayscale(0%);
}

/* Content */
#myalerts_alerts_modal td.alert__content,
#myalerts_alerts_modal .alert__content {
    flex: 1 !important;
    min-width: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    color: var(--text-dim) !important;
}

#myalerts_alerts_modal .alert__content a,
#myalerts_alerts_modal td a {
    color: var(--text) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s var(--ease) !important;
}

#myalerts_alerts_modal .alert__content a:hover,
#myalerts_alerts_modal td a:hover {
    color: var(--accent) !important;
}

#myalerts_alerts_modal .alert__content strong,
#myalerts_alerts_modal td strong {
    color: var(--text) !important;
    font-weight: 600 !important;
}

/* Zeit */
#myalerts_alerts_modal td.alert__time,
#myalerts_alerts_modal .alert__time {
    white-space: nowrap !important;
    font-family: var(--font-mono) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.05em !important;
    color: var(--text-dark) !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}


/* ============================================================================
   5. MODAL FOOTER
   ============================================================================ */

#myalerts_alerts_modal .tfoot,
#myalerts_alerts_modal tfoot td.tfoot {
    display: block !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    padding: 0.75rem 1.25rem !important;
}

#myalerts_alerts_modal tfoot tr {
    display: block !important;
}

#myalerts_alerts_modal .tfoot a {
    font-family: var(--font-mono) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.05em !important;
    color: var(--text-dim) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: color 0.2s var(--ease) !important;
}

#myalerts_alerts_modal .tfoot a:hover {
    color: var(--accent) !important;
}

#myalerts_alerts_modal .tfoot input[type="checkbox"] {
    accent-color: var(--accent) !important;
}


/* ============================================================================
   6. MODAL CLOSE BUTTON
   ============================================================================ */

#myalerts_alerts_modal .myalerts-close,
.myalerts-close {
    display: flex !important;
    justify-content: center !important;
    padding: 0.75rem 1.25rem !important;
    background: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
}

.myalerts-close a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.6rem 1.5rem !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
    color: var(--text-dim) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: all 0.3s var(--ease) !important;
}

.myalerts-close a:hover {
    background: rgba(255, 68, 34, 0.05) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}


/* ============================================================================
   7. HEADER ICON (User Panel) 
   ============================================================================ */

/* Alerts Link im User Panel */
.myalerts-trigger,
a.myalerts-trigger {
    position: relative !important;
}

/* Badge Styling */
.myalerts-trigger .up-badge,
.myalerts-trigger .up-badge--alerts {
    position: absolute !important;
    top: 0.2rem !important;
    right: 0.2rem !important;
    min-width: 14px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-mono) !important;
    font-size: 0.5rem !important;
    font-weight: 700 !important;
    background: var(--accent) !important;
    color: var(--bg) !important;
    border-radius: 2px !important;
    padding: 0 3px !important;
    animation: alertPulse 2s ease-in-out infinite;
}

@keyframes alertPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 68, 34, 0.4);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(255, 68, 34, 0);
    }
}

/* Icon orange bei ungelesenen Alerts */
.myalerts-trigger[data-unread]:not([data-unread="0"]):not([data-unread=""]) .up-icon {
    color: var(--accent) !important;
}

/* Kein Badge bei 0 Alerts */
.myalerts-trigger[data-unread="0"] .up-badge,
.myalerts-trigger[data-unread=""] .up-badge,
.myalerts-trigger:not([data-unread]) .up-badge {
    display: none !important;
}

/* ----- ALTES HEADER ICON (falls noch verwendet) ----- */
li.alerts {
    position: relative;
    list-style: none !important;
}

a.myalerts {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    text-decoration: none;
    transition: all 0.3s var(--ease);
    position: relative;
}

a.myalerts:hover {
    color: var(--accent);
}


/* ============================================================================
   8. ALERTS PAGE (/alerts.php)
   ============================================================================ */

.rpg-alerts-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
}

.rpg-alerts-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s var(--ease);
}

.rpg-alerts-action-btn:hover {
    background: rgba(255, 68, 34, 0.05);
    border-color: var(--accent);
    color: var(--accent);
}

.rpg-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rpg-alert-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: 1px solid var(--border);
    transition: all 0.3s var(--ease);
}

.rpg-alert-item:hover {
    background: rgba(255, 68, 34, 0.03);
    border-color: var(--accent-dim);
}

/* Ungelesene Alerts */
.rpg-alert-item.trow1 {
    background: rgba(255, 68, 34, 0.05);
    border-left: 2px solid var(--accent);
}

.rpg-alerts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    text-align: center;
    color: var(--text-dark);
}

.rpg-alerts-empty i {
    display: inline-block !important;
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}


/* ============================================================================
   9. RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .jquery-modal.blocker {
        padding: 15px !important;
    }
    
    #myalerts_alerts_modal {
        max-width: 100% !important;
        max-height: 85vh !important;
    }
    
    #myalerts_alerts_modal #alerts_content {
        max-height: 320px !important;
    }
}

@media (max-width: 480px) {
    .jquery-modal.blocker {
        padding: 10px !important;
        align-items: flex-end !important;
    }
    
    #myalerts_alerts_modal {
        max-height: 90vh !important;
    }
    
    #myalerts_alerts_modal .thead {
        padding: 0.875rem 1rem !important;
    }
    
    #myalerts_alerts_modal tr.alert,
    #myalerts_alerts_modal #alerts_content tr {
        padding: 0.75rem 1rem !important;
    }
    
    .myalerts-close a {
        width: 100% !important;
    }
}


/* ============================================================================
   10. LIGHT MODE
   ============================================================================ */

[data-theme="light"] .jquery-modal.blocker {
    background: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light"] #myalerts_alerts_modal {
    background: var(--bg) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #myalerts_alerts_modal .thead {
    background: var(--bg-card) !important;
}

[data-theme="light"] #myalerts_alerts_modal tr.alert:hover,
[data-theme="light"] #myalerts_alerts_modal #alerts_content tr:hover {
    background: rgba(255, 68, 34, 0.03) !important;
}

[data-theme="light"] #myalerts_alerts_modal tr.alert.alert--unread,
[data-theme="light"] #myalerts_alerts_modal tr.alert:not(.alert--read) {
    background: rgba(255, 68, 34, 0.05) !important;
}

[data-theme="light"] .myalerts-close a:hover {
    background: rgba(255, 68, 34, 0.05) !important;
}


/* ============================================================================
   ENDE - MyAlerts Styling (LA Midnight Edition)
   ============================================================================ */