/* ================================================================
   MESSAGE SYSTEM STYLES
   File    : CssStyles/CssMessages.css
   Covers  : Flash messages, alerts, banners, confirmations.
   Used by : All pages via FreHeader.php
   ================================================================ */


/* ----------------------------------------------------------------
   MESSAGE CONTAINER
   Fixed banner that appears below the topbar
   ---------------------------------------------------------------- */
.msg-container {
    position:     fixed;
    top:          calc(var(--topbar-height) + 8px);  /* Just below the topbar */
    left:         50%;
    transform:    translateX(-50%);
    z-index:      9999;
    width:        auto;
    min-width:    320px;
    max-width:    680px;
    padding:      0 16px;
    pointer-events: none;   /* Let clicks pass through the container */
}

/* ----------------------------------------------------------------
   INDIVIDUAL MESSAGE CARD
   Each message appears as a floating card
   ---------------------------------------------------------------- */
.msg-card {
    display:       flex;
    align-items:   flex-start;
    gap:           14px;
    padding:       14px 18px;
    margin-bottom: 10px;
    border-radius: 8px;
    border-left:   5px solid;
    box-shadow:    0 4px 20px rgba(0,0,0,0.15);
    font-size:     14.5px;
    font-weight:   500;
    color:         #111111;
    pointer-events: all;
    animation:     msgSlideIn 0.3s ease forwards;
    position:      relative;
}

/* Slide-in animation from top */
@keyframes msgSlideIn {
    from {
        opacity:   0;
        transform: translateY(-16px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

/* Slide-out animation when dismissed */
@keyframes msgSlideOut {
    from {
        opacity:   1;
        transform: translateY(0);
        max-height: 100px;
    }
    to {
        opacity:   0;
        transform: translateY(-10px);
        max-height: 0;
        margin:    0;
        padding:   0;
    }
}

.msg-card.dismissing {
    animation: msgSlideOut 0.25s ease forwards;
}


/* ----------------------------------------------------------------
   MESSAGE ICON
   ---------------------------------------------------------------- */
.msg-icon {
    font-size:   20px;
    flex-shrink: 0;
    margin-top:  1px;
}

/* ----------------------------------------------------------------
   MESSAGE BODY
   ---------------------------------------------------------------- */
.msg-body {
    flex:        1;
    line-height: 1.45;
}

.msg-title {
    font-size:   14.5px;
    font-weight: 700;
    margin-bottom: 2px;
    color:       #111111;
}

.msg-text {
    font-size:   14px;
    color:       #111111;
}

/* ----------------------------------------------------------------
   CLOSE BUTTON
   ---------------------------------------------------------------- */
.msg-close {
    background:  transparent;
    border:      none;
    cursor:      pointer;
    font-size:   18px;
    line-height: 1;
    padding:     0 0 0 8px;
    color:       #333333;
    flex-shrink: 0;
    opacity:     0.6;
    transition:  opacity 0.15s;
}

.msg-close:hover {
    opacity: 1;
}


/* ----------------------------------------------------------------
   MESSAGE TYPES — Color themes
   ---------------------------------------------------------------- */

/* SUCCESS — Green */
.msg-success {
    background:   #F0FAF0;
    border-left-color: #1B8A1B;
}
.msg-success .msg-title {
    color: #1B5E20;
}

/* ERROR — Red */
.msg-error {
    background:   #FFF0F0;
    border-left-color: #C62828;
}
.msg-error .msg-title {
    color: #B71C1C;
}

/* WARNING — Amber */
.msg-warning {
    background:   #FFFBF0;
    border-left-color: #E65100;
}
.msg-warning .msg-title {
    color: #BF360C;
}

/* INFO — Blue */
.msg-info {
    background:   #F0F6FF;
    border-left-color: #1565C0;
}
.msg-info .msg-title {
    color: #0D47A1;
}


/* ----------------------------------------------------------------
   AUTO-DISMISS PROGRESS BAR
   Thin bar at bottom of card that shrinks over 4 seconds
   ---------------------------------------------------------------- */
.msg-progress {
    position:      absolute;
    bottom:        0;
    left:          0;
    height:        3px;
    border-radius: 0 0 0 3px;
    animation:     msgProgress 4s linear forwards;
}

@keyframes msgProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

.msg-success .msg-progress { background: #1B8A1B; }
.msg-error   .msg-progress { background: #C62828; }
.msg-warning .msg-progress { background: #E65100; }
.msg-info    .msg-progress { background: #1565C0; }


/* ----------------------------------------------------------------
   INLINE ALERTS
   Used within page content (not fixed position)
   ---------------------------------------------------------------- */
.alert-inline {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       12px 16px;
    border-radius: 6px;
    border-left:   4px solid;
    margin-bottom: 14px;
    font-size:     14.5px;
    font-weight:   500;
    color:         #111111;
}

.alert-inline-success {
    background:        #F0FAF0;
    border-left-color: #1B8A1B;
}

.alert-inline-error {
    background:        #FFF0F0;
    border-left-color: #C62828;
}

.alert-inline-warning {
    background:        #FFFBF0;
    border-left-color: #E65100;
}

.alert-inline-info {
    background:        #F0F6FF;
    border-left-color: #1565C0;
}