/**
 * No-IP.pl Custom Template - Main User CSS
 * This file imports all custom CSS modules for No-IP template
 */

/* Import CSS Modules - cache bust v20260209 */
@import url('variables.css?v=20260209e');
@import url('reset.css?v=20260209e');
@import url('layout.css?v=20260209e');
@import url('components.css?v=20260209e');
@import url('responsive.css?v=20260209e');

/* Additional No-IP specific overrides */
/* These styles ensure our customizations work well with Cassiopeia base */

/* =========================================
   SYSTEM MESSAGE VISIBILITY FIX

   CRITICAL: Logout message appears on homepage (index.php)
   which doesn't load component CSS (dashboard_v2.css).
   These styles MUST be in template's global CSS.

   Problem: var(--gray-dark) = #555 on white background
   Solution: Force high-contrast colors for all alerts
   ========================================= */

/* Override CSS variable for better default contrast */
:root {
    --alert-text-dark: #000000;
    --alert-bg-info: #cfe2ff;
    --alert-bg-success: #d1e7dd;
    --alert-bg-danger: #f8d7da;
    --alert-bg-warning: #fff3cd;
}

/* Force visibility on ALL alert containers */
.alert-wrapper,
.alert-message,
.joomla-alert,
.system-message,
#system-message,
div[class*="alert"],
div[class*="joomla-alert"],
div[id*="system-message"] {
    background-color: #e8f4f8 !important;
    color: #000000 !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;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force black text on ALL children (override var(--gray-dark)) */
.alert-wrapper *,
.alert-message *,
.joomla-alert *,
.system-message *,
#system-message *,
div[class*="alert"] *,
div[class*="joomla-alert"] *,
div[id*="system-message"] * {
    color: #000000 !important;
    background: transparent !important;
}

/* INFO type (logout message: 'Wylogowano pomyślnie.') */
.alert-info,
.joomla-alert.info,
.joomla-alert-info,
.system-message.info,
.alert-wrapper.info,
.alert-message.info,
div[class*="alert-info"],
div[class*="joomla-alert"].info {
    background-color: #cfe2ff !important;
    color: #000000 !important;
    border-color: #084298 !important;
}

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

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

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

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

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

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

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

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




/* Ostateczna naprawa t??a komunikat??w sukcesu Joomla (joomla-alert) */
#system-message-container joomla-alert {
    background-color: #d4edda !important;  /* jasnozielone t??o */
    border-color: #c3e6cb !important;
    color: #155724 !important;  /* ciemnozielony tekst */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15) !important;
}

#system-message-container joomla-alert[type="success"],
#system-message-container joomla-alert[type="message"] {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

#system-message-container joomla-alert .alert-heading,
#system-message-container joomla-alert .alert-message {
    color: #155724 !important;
}

#system-message-container joomla-alert .joomla-alert--close {
    color: #155724 !important;
}

/* =========================================

/* =========================================
   MENU HOVER EFFECT
   Efekt przesunięcia w menu głównym
   ========================================= */

.nav-menu a {
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.nav-menu a:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.15);
}