/*
 * Arc_Prod File Role: Frontend asset (CSS/JS) for tenant/admin UI behavior or styling.
 * File: public_html/assets/xhelpers/css/modules/announcements_bar.css
 */
/**
 * announcements_bar.css - Module CSS pour la barre d'annonces globale
 * 
 * Feuille de styles dédiée au composant shared announcements_bar.php
 * Utilisé sur toutes les pages car inclus dans header.php
 * 
 * @package     XHelpers_App
 * @subpackage  Styles/Modules
 * @version     1.0
 */

/* === BARRE D'ANNONCES ===
 * position: fixed → suit la navbar au scroll (comme elle).
 * Le JS dans _announcements_bar.php mesure la hauteur réelle et
 * pousse le body vers le bas via --ann-bar-height pour éviter
 * que le contenu soit caché derrière la barre.
 * Quand la navbar se cache (navbar-hidden), la barre glisse aussi vers le haut.
 */
.announcements-bar {
    position: fixed;
    top: var(--navbar-height, 68px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1035;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

/* Quand la navbar se cache au scroll (classe ajoutée par app-layout.js),
   la barre remonte avec elle */
.navbar-modern.navbar-hidden ~ .announcements-bar {
    top: 0;
}

/* Compensation du décalage du contenu (hauteur injectée par JS via --ann-bar-height).
   !important requis pour passer au-dessus des règles mobiles de base.css.
   Quand --ann-bar-height = 0px (pas d'annonce), le calc = navbar-height seul : aucun impact. */
body {
    padding-top: calc(var(--navbar-height, 68px) + var(--ann-bar-height, 0px)) !important;
}

@media (max-width: 767.98px) {
    .announcements-bar { top: 56px; }
    .navbar-modern.navbar-hidden ~ .announcements-bar { top: 0; }
    body { padding-top: calc(56px + var(--ann-bar-height, 0px)) !important; }
}

@media (max-width: 479.98px) {
    .announcements-bar { top: 52px; }
    body { padding-top: calc(52px + var(--ann-bar-height, 0px)) !important; }
}

/* === STYLE DE BASE DES ALERTES (propriétés non-colorées uniquement) === */
.announcements-bar .alert {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    color: var(--text-primary, #171717) !important;
}

/* === ACCENT DE COULEUR PAR TYPE ===
   Variables du design system : fond léger + barre d'accent à gauche.
   S'adaptent automatiquement au mode clair ET sombre (variables redéfinies en dark). */
.announcements-bar .alert-info {
    background-color: var(--info-light, #eff6ff) !important;
    border-left: 4px solid var(--info, #3b82f6) !important;
}
.announcements-bar .alert-success {
    background-color: var(--success-light, #f0fdf4) !important;
    border-left: 4px solid var(--success, #22c55e) !important;
}
.announcements-bar .alert-warning {
    background-color: var(--warning-light, #fffbeb) !important;
    border-left: 4px solid var(--warning, #f59e0b) !important;
}
.announcements-bar .alert-danger {
    background-color: var(--danger-light, #fef2f2) !important;
    border-left: 4px solid var(--danger, #ef4444) !important;
}

/* Icône en couleur d'accent selon le type */
.announcements-bar .alert-info > i    { color: var(--info-text) !important; }
.announcements-bar .alert-success > i { color: var(--success-text) !important; }
.announcements-bar .alert-warning > i { color: var(--warning-text) !important; }
.announcements-bar .alert-danger > i  { color: var(--danger-text) !important; }

/* === MISE EN FORME DU CONTENU ===
   Message centré et contraint ; croix de fermeture à l'extrême droite. */
.announcement-item {
    position: relative;
    padding: 0.6rem 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.announcement-item-text {
    text-align: center;
    min-width: 0;
}

.announcement-item-content a {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

.announcement-item .btn-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    padding: 0.5em;
    opacity: 0.55;
}

.announcement-item .btn-close:hover {
    opacity: 1;
}