/**
 * No-IP.pl Dashboard v2 - Professional Style
 * Unified color palette - no pastel/infantile colors
 * Updated: 2026-02-01
 */

/* ========================================
   CSS VARIABLES - UNIFIED COLOR PALETTE
   ======================================== */
:root {
    /* Primary Colors - Professional Dark */
    --color-primary: #2c3e50;
    --color-primary-light: #34495e;
    --color-accent: #3498db;
    --color-accent-dark: #2980b9;

    /* Semantic Colors - Strong, not pastel */
    --color-success: #27ae60;
    --color-success-dark: #1e8449;
    --color-warning: #e67e22;
    --color-warning-dark: #d35400;
    --color-danger: #e74c3c;
    --color-danger-dark: #c0392b;

    /* Backgrounds - Subtle grays, not pastels */
    --color-bg: #f5f5f5;
    --color-bg-card: #ffffff;
    --color-bg-section: #f8f9fa;
    --color-bg-dark: #2c3e50;

    /* Text */
    --color-text: #2c3e50;
    --color-text-secondary: #5d6d7e;
    --color-text-muted: #7f8c8d;
    --color-text-light: #ffffff;

    /* Borders */
    --color-border: #ddd;
    --color-border-light: #ecf0f1;
}

/* ========================================
   PAYMENT SECTIONS - Professional Style
   ======================================== */

/* Balance Card - Dark professional */
.balance-card {
    background: var(--color-primary);
    color: var(--color-text-light);
    padding: 30px;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

.balance-card .balance-label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.balance-card .balance-amount {
    font-size: 36px;
    font-weight: bold;
}

/* Payment Section - dPay (Green theme) */
.payment-section-dpay {
    background: #f0fdf4;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid #86efac;
}

.payment-section-dpay h5 {
    margin: 0 0 15px 0;
    color: var(--color-success-dark);
}

/* Payment Section - SIBS (Blue theme) */
.payment-section-sibs {
    background: #eff6ff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #93c5fd;
}

.payment-section-sibs h5 {
    margin: 0 0 15px 0;
    color: var(--color-accent-dark);
}

/* Donation Section - Warm red theme */
.donation-section {
    background: #fef2f2;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #fca5a5;
    text-align: center;
}

.donation-section h5 {
    margin: 0 0 8px 0;
    color: var(--color-danger-dark);
}

/* Quick Amount Buttons */
.quick-amount-btn {
    padding: 5px 12px;
    font-size: 13px;
    background: var(--color-bg-section);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-amount-btn:hover {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

/* Stat Cards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.stat-card {
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    background: var(--color-bg-section);
    border: 1px solid var(--color-border-light);
}

.stat-card .stat-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-primary);
}

.stat-card .stat-label {
    color: var(--color-text-secondary);
    margin-top: 5px;
}

/* Grid layouts */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .grid-2-col { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr; }
}

/* Section box */
.section-box {
    background: var(--color-bg-section);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.section-box h4 {
    margin-top: 0;
    color: var(--color-primary);
}

/* Help text */
.help-text {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 5px;
    display: block;
}

/* ========================================
   DASHBOARD CONTAINER
   ======================================== */
.noip-dashboard-v2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #f5f5f5;
    padding: 20px;
}

/* ========================================
   HEADER - Classic Professional
   ======================================== */
.dashboard-header-v2 {
    background: linear-gradient(to right, #2c3e50, #34495e);
    color: white;
    padding: 20px 30px;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dashboard-header-v2 h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
}

.dashboard-header-v2 .user-info {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 5px;
}

/* ========================================
   MAIN TABS - Classic Tab Style
   ======================================== */
.nav-tabs-classic {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 20px;
    background: white;
    padding: 0 10px;
    border-radius: 4px 4px 0 0;
}

.nav-tabs-classic .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #666;
    padding: 12px 24px;
    margin: 0 2px;
    font-weight: 500;
    transition: all 0.2s;
    background: transparent;
}

.nav-tabs-classic .nav-link:hover {
    color: #2c3e50;
    border-bottom-color: #95a5a6;
    background: #f8f9fa;
}

.nav-tabs-classic .nav-link.active {
    color: #2c3e50;
    border-bottom-color: #3498db;
    background: white;
    font-weight: 600;
}

/* ========================================
   SUB-TABS - For Hosts Sub-sections
   ======================================== */
.sub-tabs {
    background: #ecf0f1;
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
}

.sub-tabs .sub-tab-link {
    padding: 8px 16px;
    background: white;
    border: 1px solid #bdc3c7;
    border-radius: 3px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
    white-space: nowrap;
    cursor: pointer;
}

.sub-tabs .sub-tab-link:hover {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.sub-tabs .sub-tab-link.active {
    background: #2c3e50;
    color: white;
    border-color: #2c3e50;
    font-weight: 500;
}

/* ========================================
   CONTENT PANEL
   ======================================== */
.content-panel {
    background: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.content-panel h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 10px;
}

/* ========================================
   EDITABLE TABLE - Inline Editing
   ======================================== */
.records-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.records-table thead {
    background: #ecf0f1;
}

.records-table th {
    padding: 10px;
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    font-size: 13px;
    border-bottom: 2px solid #bdc3c7;
}

.records-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #ecf0f1;
    vertical-align: middle;
}

.records-table tbody tr:hover {
    background: #f8f9fa;
}

/* Editable fields in table */
.records-table input[type="text"],
.records-table select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
}

.records-table input[type="text"]:focus,
.records-table select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.records-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Action buttons in table */
.action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    transition: all 0.2s;
}

.action-btn.save {
    color: #27ae60;
}

.action-btn.save:hover {
    color: #229954;
    transform: scale(1.1);
}

.action-btn.delete {
    color: #e74c3c;
}

.action-btn.delete:hover {
    color: #c0392b;
    transform: scale(1.1);
}

.action-btn.edit {
    color: #3498db;
}

.action-btn.edit:hover {
    color: #2980b9;
    transform: scale(1.1);
}

/* ========================================
   ADD NEW RECORD SECTION
   ======================================== */
.add-record-section {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    border: 1px dashed #bdc3c7;
    margin-top: 15px;
}

.add-record-section h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.add-record-form {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr auto auto;
    gap: 10px;
    align-items: end;
}

.add-record-form input,
.add-record-form select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
}

.add-record-form .btn-add {
    background: #27ae60;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.add-record-form .btn-add:hover {
    background: #229954;
}

/* ========================================
   BUTTONS - Professional Style
   ======================================== */
.btn-primary-classic {
    background: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary-classic:hover {
    background: #2980b9;
}

.btn-secondary-classic {
    background: #95a5a6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary-classic:hover {
    background: #7f8c8d;
}

/* ========================================
   FORMS - Contact, Search, etc.
   ======================================== */
.form-group-classic {
    margin-bottom: 15px;
}

.form-group-classic label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #2c3e50;
    font-size: 13px;
}

.form-group-classic input[type="text"],
.form-group-classic input[type="email"],
.form-group-classic textarea,
.form-group-classic select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}

.form-group-classic input:focus,
.form-group-classic textarea:focus,
.form-group-classic select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* ========================================
   INFO BOXES
   ======================================== */



/* ========================================
   DOMAIN SEARCH
   ======================================== */
.domain-search {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.domain-search input {
    flex: 1;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}

.domain-search button {
    padding: 12px 30px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
}

.domain-search button:hover {
    background: #2980b9;
}

/* ========================================
   ACCESSIBILITY - Focus Indicators (WCAG 2.4.7)
   ======================================== */

/* Skip Link - Hidden until focused */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Global focus indicator for interactive elements */
*:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Buttons focus */
.btn-primary-classic:focus,
.btn-primary-classic:focus-visible,
.btn-secondary-classic:focus,
.btn-secondary-classic:focus-visible,
.btn-add:focus,
.btn-add:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.3);
}

/* Tab navigation focus */
.nav-tabs-classic .nav-link:focus,
.nav-tabs-classic .nav-link:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
    background: #f0f7ff;
}

/* Sub-tab focus */
.sub-tabs .sub-tab-link:focus,
.sub-tabs .sub-tab-link:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.3);
}

/* Action buttons focus */
.action-btn:focus,
.action-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Links focus */
a:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Checkbox focus */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Domain search button focus */
.domain-search button:focus,
.domain-search button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.3);
}

/* Quick amount buttons focus */
.quick-amount-btn:focus,
.quick-amount-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Screen reader only utility class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .add-record-form {
        grid-template-columns: 1fr;
    }

    .sub-tabs {
        flex-wrap: wrap;
    }

    .nav-tabs-classic {
        padding: 0;
    }

    .nav-tabs-classic .nav-link {
        padding: 10px 15px;
        font-size: 13px;
    }
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */




/* =========================================
   IMPROVED TOAST STYLES - lepszy kontrast
   ========================================= */

.toast-classic {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    min-width: 350px;
    max-width: 500px;
    z-index: 9999;
    animation: slideIn 0.3s ease-out;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    font-size: 14px;
    line-height: 1.5;
}

/* SUKCES - zielone tło, białe litery */
.toast-classic.success {
    background: #27ae60;  /* Zielone tło */
    color: #ffffff !important;       /* Białe litery - WAŻNE! */
    border: 2px solid #1e8449;
}

/* Wszystkie elementy w toaście sukcesu także białe */
.toast-classic.success * {
    color: #ffffff !important;
}

/* BŁĄD - czerwone tło, białe litery */
.toast-classic.error {
    background: #e74c3c;  /* Czerwone tło */
    color: #ffffff !important;       /* Białe litery - WAŻNE! */
    border: 2px solid #c0392b;
}

/* Wszystkie elementy w toaście błędu także białe */
.toast-classic.error * {
    color: #ffffff !important;
}

/* Animacja wjazdu */
@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Container dla toastów */
#toastContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

#toastContainer .toast-classic {
    pointer-events: all;
    margin-bottom: 10px;
}
/* =========================================
   ALERT & MESSAGE VISIBILITY FIXES
   Wszystkie komunikaty muszą mieć dobry kontrast!
   ========================================= */

/* Info boxes - JASNE TŁO + CIEMNY TEKST */
.info-box {
    background: #e8f4f8;
    border-left: 4px solid #3498db;
    padding: 15px;
    margin: 15px 0;
    border-radius: 3px;
    color: #2c3e50 !important;  /* Ciemny tekst */
}

.info-box * {
    color: #2c3e50 !important;  /* Wszystkie elementy wewnątrz */
}

.info-box-warning {
    background: #fef5e7;
    border-left-color: #f39c12;
    color: #7d6608 !important;  /* Ciemnobrązowy tekst */
}

.info-box-warning * {
    color: #7d6608 !important;
}

.info-box-success {
    background: #eafaf1;
    border-left-color: #27ae60;
    color: #1e7e34 !important;  /* Ciemnozielony tekst */
}

.info-box-success * {
    color: #1e7e34 !important;
}

.info-box-error,
.info-box-danger {
    background: #ffebee;
    border-left-color: #e74c3c;
    color: #c0392b !important;  /* Ciemnoczerwony tekst */
}

.info-box-error *,
.info-box-danger * {
    color: #c0392b !important;
}

/* Bootstrap alert classes (jeśli używane) */
.alert {
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    border: 1px solid transparent;
}

.alert-info {
    background: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460 !important;  /* Ciemny tekst */
}

.alert-info * {
    color: #0c5460 !important;
}

.alert-warning {
    background: #fff3cd;
    border-color: #ffeeba;
    color: #856404 !important;  /* Ciemny tekst */
}

.alert-warning * {
    color: #856404 !important;
}

.alert-success {
    background: #d4edda;
    border-color: #c3e6cb;
    color: #155724 !important;  /* Ciemny tekst */
}

.alert-success * {
    color: #155724 !important;
}

.alert-danger,
.alert-error {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24 !important;  /* Ciemny tekst */
}

.alert-danger *,
.alert-error * {
    color: #721c24 !important;
}

/* Generic alert-message class */
.alert-message {
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    background: #e8f4f8;
    border-left: 4px solid #3498db;
    color: #2c3e50 !important;
}

.alert-message * {
    color: #2c3e50 !important;
}

/* Error messages in forms */
.error-message,
.form-error {
    background: #ffebee;
    border-left: 4px solid #e74c3c;
    padding: 12px 15px;
    margin: 10px 0;
    border-radius: 3px;
    color: #c0392b !important;
    font-weight: 500;
}

.error-message *,
.form-error * {
    color: #c0392b !important;
}

/* Success messages in forms */
.success-message,
.form-success {
    background: #eafaf1;
    border-left: 4px solid #27ae60;
    padding: 12px 15px;
    margin: 10px 0;
    border-radius: 3px;
    color: #1e7e34 !important;
    font-weight: 500;
}

.success-message *,
.form-success * {
    color: #1e7e34 !important;
}

/* =========================================
   UNIVERSAL ALERT FIX - All Joomla Messages
   Ensures dark text on light background
   ========================================= */

/* Joomla system messages */
.joomla-alert,
.system-message,
#system-message,
.system-message-container,
div[class*="joomla-alert"] {
    background: #e8f4f8 !important;
    color: #2c3e50 !important;
    border: 1px solid #3498db !important;
    padding: 12px 15px !important;
    margin: 10px 0 !important;
    border-radius: 4px !important;
}

/* All child elements in Joomla alerts */
.joomla-alert *,
.system-message *,
#system-message *,
.system-message-container *,
div[class*="joomla-alert"] * {
    color: #2c3e50 !important;
}

/* Joomla alert variants - SUCCESS */
.joomla-alert-success,
.alert-success,
.system-message.success,
div[class*="joomla-alert-success"],
div[class*="alert-success"] {
    background: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.joomla-alert-success *,
.alert-success *,
.system-message.success *,
div[class*="joomla-alert-success"] *,
div[class*="alert-success"] * {
    color: #155724 !important;
}

/* Joomla alert variants - ERROR/DANGER */
.joomla-alert-error,
.joomla-alert-danger,
.alert-error,
.alert-danger,
.system-message.error,
.system-message.danger,
div[class*="joomla-alert-error"],
div[class*="joomla-alert-danger"],
div[class*="alert-error"],
div[class*="alert-danger"] {
    background: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

.joomla-alert-error *,
.joomla-alert-danger *,
.alert-error *,
.alert-danger *,
.system-message.error *,
.system-message.danger *,
div[class*="joomla-alert-error"] *,
div[class*="joomla-alert-danger"] *,
div[class*="alert-error"] *,
div[class*="alert-danger"] * {
    color: #721c24 !important;
}

/* Joomla alert variants - WARNING */
.joomla-alert-warning,
.alert-warning,
.system-message.warning,
div[class*="joomla-alert-warning"],
div[class*="alert-warning"] {
    background: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeaa7 !important;
}

.joomla-alert-warning *,
.alert-warning *,
.system-message.warning *,
div[class*="joomla-alert-warning"] *,
div[class*="alert-warning"] * {
    color: #856404 !important;
}

/* Joomla alert variants - INFO */
.joomla-alert-info,
.alert-info,
.system-message.info,
div[class*="joomla-alert-info"],
div[class*="alert-info"] {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

.joomla-alert-info *,
.alert-info *,
.system-message.info *,
div[class*="joomla-alert-info"] *,
div[class*="alert-info"] * {
    color: #0c5460 !important;
}

/* Close buttons in alerts */
.joomla-alert .close,
.alert .close,
.system-message .close,
button.close {
    color: inherit !important;
    opacity: 0.7 !important;
}

.joomla-alert .close:hover,
.alert .close:hover,
.system-message .close:hover,
button.close:hover {
    opacity: 1 !important;
}

/* Login/Logout specific messages */
.login-message,
.logout-message,
div[class*="login-message"],
div[class*="logout-message"] {
    background: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
    padding: 12px 15px !important;
    margin: 15px 0 !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

.login-message *,
.logout-message *,
div[class*="login-message"] *,
div[class*="logout-message"] * {
    color: #155724 !important;
}

/* Bootstrap alerts override */
.alert.alert-dismissible {
    background: #e8f4f8 !important;
    color: #2c3e50 !important;
}

.alert.alert-dismissible * {
    color: #2c3e50 !important;
}

/* Ensure all heading elements in alerts are visible */
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
.joomla-alert h1, .joomla-alert h2, .joomla-alert h3, .joomla-alert h4, .joomla-alert h5, .joomla-alert h6,
.system-message h1, .system-message h2, .system-message h3, .system-message h4, .system-message h5, .system-message h6 {
    color: inherit !important;
    font-weight: 600 !important;
}

/* Ensure all link elements in alerts are visible */
.alert a,
.joomla-alert a,
.system-message a {
    color: #004085 !important;
    text-decoration: underline !important;
}

.alert a:hover,
.joomla-alert a:hover,
.system-message a:hover {
    color: #002752 !important;
}

/* =========================================
   AGGRESSIVE FIX FOR LOGOUT MESSAGE
   Force visibility with maximum specificity
   ========================================= */

/* Target ALL possible alert containers */
body .alert,
body .joomla-alert,
body .system-message,
body #system-message,
body div[class*="alert"],
body div[class*="joomla-alert"],
body div[id*="system-message"] {
    background-color: #e8f4f8 !important;
    color: #2c3e50 !important;
    border: 1px solid #3498db !important;
    padding: 12px 20px !important;
    margin: 10px 0 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Force text color on ALL children */
body .alert *,
body .joomla-alert *,
body .system-message *,
body #system-message *,
body div[class*="alert"] *,
body div[class*="joomla-alert"] *,
body div[id*="system-message"] * {
    color: #2c3e50 !important;
    background: transparent !important;
}

/* Specific override for INFO type (logout message) */
body .alert-info,
body .joomla-alert.info,
body .joomla-alert-info,
body .system-message.info,
body div[class*="alert-info"],
body div[class*="joomla-alert"].info,
html body .alert.alert-info,
html body div.joomla-alert.info {
    background-color: #cfe2ff !important;
    color: #084298 !important;
    border-color: #9ec5fe !important;
}

body .alert-info *,
body .joomla-alert.info *,
body .joomla-alert-info *,
body .system-message.info *,
body div[class*="alert-info"] *,
html body .alert.alert-info *,
html body div.joomla-alert.info * {
    color: #084298 !important;
    background: transparent !important;
}

/* SUCCESS messages (login) */
body .alert-success,
body .joomla-alert.success,
body .joomla-alert-success,
body .system-message.success,
body div[class*="alert-success"],
html body .alert.alert-success,
html body div.joomla-alert.success {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    border-color: #a3cfbb !important;
}

body .alert-success *,
body .joomla-alert.success *,
body .joomla-alert-success *,
body .system-message.success *,
body div[class*="alert-success"] *,
html body .alert.alert-success *,
html body div.joomla-alert.success * {
    color: #0f5132 !important;
    background: transparent !important;
}

/* ERROR/DANGER messages */
body .alert-danger,
body .alert-error,
body .joomla-alert.error,
body .joomla-alert.danger,
body .joomla-alert-danger,
body .joomla-alert-error,
body .system-message.error,
body .system-message.danger,
body div[class*="alert-danger"],
body div[class*="alert-error"],
html body .alert.alert-danger,
html body .alert.alert-error {
    background-color: #f8d7da !important;
    color: #842029 !important;
    border-color: #f1aeb5 !important;
}

body .alert-danger *,
body .alert-error *,
body .joomla-alert.error *,
body .joomla-alert.danger *,
body .system-message.error *,
body div[class*="alert-danger"] *,
body div[class*="alert-error"] *,
html body .alert.alert-danger *,
html body .alert.alert-error * {
    color: #842029 !important;
    background: transparent !important;
}

/* WARNING messages */
body .alert-warning,
body .joomla-alert.warning,
body .joomla-alert-warning,
body .system-message.warning,
body div[class*="alert-warning"],
html body .alert.alert-warning {
    background-color: #fff3cd !important;
    color: #997404 !important;
    border-color: #ffe69c !important;
}

body .alert-warning *,
body .joomla-alert.warning *,
body .joomla-alert-warning *,
body .system-message.warning *,
body div[class*="alert-warning"] *,
html body .alert.alert-warning * {
    color: #997404 !important;
    background: transparent !important;
}

/* Container that might wrap messages */
.container-fluid .alert,
.container .alert,
main .alert,
#content .alert,
.site-content .alert {
    background-color: inherit !important;
    color: inherit !important;
}

/* Force visibility for message container */
.message-container,
#message-container,
.system-message-container,
#system-message-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}