/**
 * messages.css
 * Unified messaging system styles for all pages (Bootstrap & Tailwind compatible)
 * Provides modern styling for alert, message-error, message-warning, message-success, message-info
 */

/* ─────────────────────────────────────────────────────────────────────────── */
/* BASE MESSAGE STYLING — Works with both Bootstrap alerts and semantic classes */
/* ─────────────────────────────────────────────────────────────────────────── */

.alert {
    border-radius: 0.75rem;
    border: 1px solid;
    padding: 1rem;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    background-image: none !important;
    position: relative;
    padding-right: 2.5rem;
}

.alert .close,
.alert .alert-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    opacity: 0.6;
    font-weight: normal;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert .close:hover,
.alert .close:focus,
.alert .alert-close:hover,
.alert .alert-close:focus {
    opacity: 1;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    font-size: 15px;
}

.alert-body {
    margin: 0;
    font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* ERROR/DANGER/INVALID/INACTIVE — RED                                       */
/* ─────────────────────────────────────────────────────────────────────────── */

.alert-danger,
.alert-error,
.message-error {
    background-color: rgb(254 242 242) !important;
    border-color: rgb(254 226 226) !important;
    color: rgb(153 27 27) !important;
}

.alert-danger .alert-title,
.alert-danger .close,
.alert-error .alert-title,
.alert-error .close,
.message-error .alert-title,
.message-error .close {
    color: rgb(127 29 29) !important;
}

.alert-danger .alert-body,
.alert-danger h4,
.alert-danger p,
.alert-error .alert-body,
.alert-error h4,
.alert-error p,
.message-error .alert-body,
.message-error h4,
.message-error p {
    color: rgb(153 27 27) !important;
}

.alert-danger::before,
.alert-error::before,
.message-error::before {
    content: "\f06a" !important;
    font-family: FontAwesome, sans-serif !important;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    margin-right: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* WARNING/PENDING APPROVAL — AMBER/YELLOW                                   */
/* ─────────────────────────────────────────────────────────────────────────── */

.alert-warning,
.message-warning {
    background-color: rgb(255 251 235) !important;
    border-color: rgb(253 230 138) !important;
    color: rgb(92 51 23) !important;
}

.alert-warning .alert-title,
.alert-warning .close,
.message-warning .alert-title,
.message-warning .close {
    color: rgb(78 22 0) !important;
}

.alert-warning .alert-body,
.alert-warning h4,
.alert-warning p,
.message-warning .alert-body,
.message-warning h4,
.message-warning p {
    color: rgb(92 51 23) !important;
}

.alert-warning::before,
.message-warning::before {
    content: "\f071" !important;
    font-family: FontAwesome, sans-serif !important;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    margin-right: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SUCCESS — GREEN/EMERALD                                                   */
/* ─────────────────────────────────────────────────────────────────────────── */

.alert-success,
.message-success {
    background-color: rgb(240 253 250) !important;
    border-color: rgb(167 243 208) !important;
    color: rgb(4 120 87) !important;
}

.alert-success .alert-title,
.alert-success .close,
.message-success .alert-title,
.message-success .close {
    color: rgb(4 120 87) !important;
}

.alert-success .alert-body,
.alert-success h4,
.alert-success p,
.message-success .alert-body,
.message-success h4,
.message-success p {
    color: rgb(5 150 105) !important;
}

.alert-success::before,
.message-success::before {
    content: "\f05d" !important;
    font-family: FontAwesome, sans-serif !important;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    margin-right: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* INFO/DEFAULT — BLUE                                                       */
/* ─────────────────────────────────────────────────────────────────────────── */

.alert-info,
.message-info {
    background-color: rgb(239 246 255) !important;
    border-color: rgb(191 225 229) !important;
    color: rgb(30 64 175) !important;
}

.alert-info .alert-title,
.alert-info .close,
.message-info .alert-title,
.message-info .close {
    color: rgb(30 64 175) !important;
}

.alert-info .alert-body,
.alert-info h4,
.alert-info p,
.message-info .alert-body,
.message-info h4,
.message-info p {
    color: rgb(37 99 235) !important;
}

.alert-info::before,
.message-info::before {
    content: "\f05a" !important;
    font-family: FontAwesome, sans-serif !important;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    margin-right: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE ADJUSTMENTS                                                     */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .alert {
        font-size: 13px;
        padding: 0.75rem;
        gap: 0.5rem;
        padding-right: 2rem;
    }

    .alert-title {
        font-size: 14px;
    }

    .alert-body {
        font-size: 13px;
    }

    .alert .close,
    .alert .alert-close {
        font-size: 1rem;
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Keep typography rules scoped to alert/message components only. */
    .alert,
    .alert p,
    .alert span,
    .alert div,
    .alert a,
    .alert button,
    .alert input,
    .alert textarea,
    .alert select,
    .alert label {
        font-size: 13px !important;
    }

    .alert h1 { font-size: 2rem !important; }
    .alert h2 { font-size: 1.5rem !important; }
    .alert h3 { font-size: 1.25rem !important; }
    .alert h4 { font-size: 1.1rem !important; }
}

.app-message {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: center;
    border-radius: 18px;
    padding: 26px 72px 26px 34px;
    margin: 18px 0 32px;
    border: 1px solid;
    box-shadow: 0 18px 45px rgba(8, 37, 84, .08);
}

.app-message__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex: 0 0 auto;
}

.app-message__content h3 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 900;
}

.app-message__content p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

.app-message__close {
    position: absolute;
    top: 22px;
    right: 28px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .55);
    color: inherit;
    font-size: 32px;
    line-height: 1;
    opacity: .75;
}

.app-message__close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .9);
}

.app-message--success {
    background: #ecfff5;
    border-color: #b8efcf;
    color: #067044;
}

.app-message--success .app-message__icon {
    background: #d8f8e6;
    color: #079455;
}

.app-message--info {
    background: #eef7ff;
    border-color: #c9e5ff;
    color: #0b3d75;
}

.app-message--info .app-message__icon {
    background: #dcefff;
    color: #1f7ae0;
}

.app-message--warning {
    background: #fff8e7;
    border-color: #ffe0a3;
    color: #8a5200;
}

.app-message--warning .app-message__icon {
    background: #fff0c7;
    color: #d97706;
}

.app-message--danger,
.app-message--error {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #9f1239;
}

.app-message--danger .app-message__icon,
.app-message--error .app-message__icon {
    background: #ffe4e6;
    color: #e11d48;
}

@media (max-width: 767px) {
    .app-message {
        padding: 18px 48px 18px 16px;
        gap: 12px;
        border-radius: 16px;
    }

    .app-message__icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .app-message__content h3 {
        font-size: 18px;
    }

    .app-message__content p {
        font-size: 14px;
    }
}