/**
 * ============================================================================
 * MUAADH NOTICE — Alert/banner component (base + floating toast chrome)
 * ============================================================================
 *
 * Consolidated 2026-05-13 (Phase 3 Wave 13).
 *
 * Before this wave, the base .muaadh-notice (inline alerts, banners,
 * status variants) lived in muaadh-core.css and this file only carried
 * the floating-toast chrome added in Phase 1 of library removal
 * (2026-05-09, Toastr v2.1.3 replacement). After Wave 13 both layers
 * live here in one file.
 *
 * Sections in order:
 *   1. BASE NOTICE — inline alerts with status variants
 *      (.muaadh-notice + --success/--info/--warning/--danger)
 *   2. DISMISSIBLE EXTRAS — close button + dismissible modifier
 *   3. FLOATING TOAST CHROME — bottom-center stack (Phase 1, 2026-05-09)
 *
 * JS:  public/assets/js/muaadh-notice.js
 * API: window.muaadhNotice.{success,error,warning,info,clear}
 * ============================================================================
 */

/* ============================================================================
 * SECTION 1: BASE NOTICE (inline alerts + status variants)
 * Extracted from muaadh-core.css §SECTION 8: ALERT COMPONENT
 * ============================================================================ */

.muaadh-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    position: relative;
    margin-bottom: var(--space-4);
    border: var(--chassis-border-thin) solid transparent;
    line-height: var(--theme-line-height);
}
/* Compact variant — tighter padding for inline banners (e.g. VIN prompt).
   Added 2026-05-19 to replace inline style="padding: 10px 16px;". */
.muaadh-notice--compact {
    padding: var(--space-2) var(--space-3);
}
/* Banner variant — used by the operator-impersonation strip in
   shell layouts. Different layout from a standard notice (centered
   row with a CTA on the far end), so it sits next to .muaadh-notice. */
.muaadh-notice--banner {
    margin: var(--space-2) var(--space-4) 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
/* Alert Variants */
.muaadh-notice--info {
    background-color: var(--action-info-light);
    color: var(--theme-info-hover);
    background: var(--theme-info-light);
    border-left: var(--chassis-border-accent) solid var(--theme-info);
}
.muaadh-notice--success {
    background-color: var(--theme-success-light);
    color: var(--theme-success-hover);
    border-color: var(--theme-success-light);
    background: var(--theme-success-light);
    border-left: var(--chassis-border-accent) solid var(--theme-success);
}
.muaadh-notice--warning {
    background-color: var(--action-warning-light);
    color: var(--theme-warning-hover);
    background: var(--theme-warning-light);
    border-left: var(--chassis-border-accent) solid var(--theme-warning);
}
.muaadh-notice--danger {
    background-color: var(--theme-danger-light);
    color: var(--action-danger-hover);
    border-color: var(--theme-danger-light);
    background: var(--action-danger-light);
    border-left: var(--chassis-border-accent) solid var(--action-danger);
}


/* ============================================================================
 * SECTION 2: NOTICE COLOR VARIANTS (primary/secondary/light)
 * Extracted from muaadh-core.css (after the link-component section)
 *
 * NOTE: The .muaadh-notice__close and .muaadh-notice--dismissible rules
 * were removed 2026-05-18. The toast system (muaadh-notice.js) no longer
 * renders a close button — toasts auto-dismiss and accept click-anywhere
 * to dismiss. Inline alert blades (resources/views/alerts/) were also
 * stripped of their close buttons in the same sweep.
 * ============================================================================ */

/* Alert Variants - Using theme variables */
.muaadh-notice--primary {
    background: var(--theme-primary-light);
    color: var(--theme-primary-hover);
    border-left: var(--chassis-border-accent) solid var(--theme-primary);
}
/* Outlined Alerts */
/* Alert Variants */
.muaadh-notice--secondary {
    background: var(--surface-elevated);
    color: var(--text-secondary);
    border-left: var(--chassis-border-accent) solid var(--border-default);
}
.muaadh-notice--light {
    background: var(--surface-card);
    color: var(--text-primary);
    border-left: var(--chassis-border-accent) solid var(--border-light);
}


/* ============================================================================
 * SECTION 3: FLOATING TOAST CHROME (Phase 1, 2026-05-09 Toastr replacement)
 * ============================================================================ */

/* Fixed-position stack at bottom-center (newest on top via column-reverse). */
.muaadh-notice-container {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--chassis-z-tooltip);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-3);
    pointer-events: none;
    width: min(440px, calc(100vw - var(--space-8)));
}

/* Toast modifier — applies to .muaadh-notice when used as a floating overlay.
   Cancels the inline-form margin-bottom and adds entrance/exit animation. */
.muaadh-notice--toast {
    pointer-events: auto;
    margin-bottom: 0;
    box-shadow: var(--chassis-shadow-sm);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--chassis-duration-normal) ease,
                transform var(--chassis-duration-normal) ease;
}

.muaadh-notice--toast.muaadh-notice--visible {
    opacity: 1;
    transform: translateY(0);
}

.muaadh-notice--toast.muaadh-notice--dismissing {
    opacity: 0;
    transform: scale(0.98);
}

/* ============================================================================
 * APPENDED (Phase 13 Wave 4 — 2026-05-13): rule pulled from muaadh-core.css
 * ============================================================================ */
/* Closed / disabled notice */
.muaadh-notice--closed { background: var(--surface-page); border-radius: var(--chassis-radius); text-align: center; color: var(--text-muted); }