/**
 * ============================================================================
 * MUAADH DIALOG — Modal system
 * ============================================================================
 *
 * Core modal/dialog component (23 rules) extracted from muaadh-core.css
 * in Phase 3 Wave 8 (2026-05-13).
 *
 * Owns:
 *   - .muaadh-dialog (overlay + state)
 *   - .muaadh-dialog__dialog (box)
 *   - .muaadh-dialog__header / __body / __footer (BEM children)
 *   - .muaadh-dialog__close (close action)
 *   - .muaadh-dialog__title
 *   - Header variant: --primary (primary-colored header with white close)
 *
 * NOT included (kept in core.css — single-rule contextual references):
 *   - .muaadh-dialog__dialog container-type rule (catalog filter modal)
 *   - .muaadh-shipping-dialog rules (in SHIPPING MODAL section below)
 *   - .muaadh-callout-dialog* rules (moved to muaadh-callouts.css earlier)
 *
 * Loaded on every page via shell layouts. Dialogs are created on demand
 * by JS (toggle via .muaadh-dialog--open) but base styles must be present
 * to avoid a flash of unstyled content on first open.
 *
 * Phase H12 (2026-05-16): a canonical <x-muaadh-dialog> Blade component
 * (resources/views/components/muaadh-dialog.blade.php) is now the single
 * way to render a dialog in the project. Hand-rolled scaffolds were
 * collapsed onto it. The CSS below stays as-is — the component just
 * renders the same BEM, with sensible defaults.
 * ============================================================================
 */

/* --- Modals --- */
/* ============================================================================
   M-MODAL: Core Modal System
   ============================================================================ */
/* Modal Overlay - starts below topbar */
.muaadh-dialog {
    display: none;
    position: fixed;
    top: var(--m-topbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    overflow: hidden;
    outline: 0;
}
.muaadh-dialog.muaadh-state--show {
    display: block;
}
/* Nested modal — opens from inside another modal. Must stack above the
   standard modal layer (1050) and above the map-picker overrides
   (1055/1056) so the user sees the inner dialog on top of the outer one.
   Replaces the old inline `style="z-index:1060"` workaround. */
.muaadh-dialog--nested {
    z-index: 1070;
}
/* Dialog */
.muaadh-dialog__dialog {
    position: relative;
    width: auto;
    margin: var(--m-modal-gap) auto;
    max-width: 560px;
    pointer-events: none;
}
.muaadh-dialog.muaadh-state--show .muaadh-dialog__dialog {
    pointer-events: auto;
}
/* Dialog Sizes — pick one based on content:
     --sm  (420px) confirms, single-action dialogs (delete, accept).
     --md  (560px) standard forms (≤ 6 inputs). Same as no modifier.
     --lg  (800px) multi-section forms, lists, side-by-side panels.
     --xl  (1100px) tables, dashboards, multi-column data grids.
   The base `.muaadh-dialog__dialog` already has max-width:560px, so `--md` is
   an alias that exists purely so size intent can be made explicit in
   markup when reviewers need to see the choice. */
.muaadh-dialog__dialog--sm { max-width: 420px; }
.muaadh-dialog__dialog--md { max-width: 560px; }
.muaadh-dialog__dialog--lg { max-width: 800px; }
.muaadh-dialog__dialog--xl { max-width: 1100px; }
/* Dialog Centered */
.muaadh-dialog__dialog--centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100% - var(--m-modal-gap) * 2);
    margin-top: 0;
    margin-bottom: 0;
}
/* Dialog Scrollable - height is globally handled by .muaadh-dialog__content max-height */
.muaadh-dialog__dialog--scrollable {
    height: calc(100% - var(--m-modal-gap) * 2);
}
.muaadh-dialog__dialog--scrollable .muaadh-dialog__content {
    overflow: hidden;
}
/* Content */
.muaadh-dialog__content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(var(--m-safe-vh)  - var(--m-modal-gap) * 2);
    max-height: calc(var(--m-safe-dvh) - var(--m-modal-gap) * 2);
    background-color: var(--surface-card);
    border: none;
    border-radius: var(--chassis-radius-card);
    box-shadow: var(--chassis-shadow-modal-deep);
    outline: 0;
}
/* Header */
.muaadh-dialog__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--chassis-border-thin) solid var(--border-default);
    gap: var(--space-2);
}
/* Title */
.muaadh-dialog__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--theme-font-semibold);
    color: var(--text-primary);
    line-height: var(--theme-line-height);
}
/* Body */
.muaadh-dialog__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-5);
    overflow-y: auto;
}
/* Footer */
.muaadh-dialog__footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-4) var(--space-5);
    border-top: var(--chassis-border-thin) solid var(--border-default);
    gap: var(--space-2);
}
/* Close Button */
.muaadh-dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--chassis-radius-sm);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--chassis-duration-fast) ease, background-color var(--chassis-duration-fast) ease;
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--theme-text-primary);
}
.muaadh-dialog__close:hover {
    opacity: 1;
    background-color: var(--theme-bg-gray);
}
/* Primary Header Variant - colored header for feature modals */
.muaadh-dialog__header--primary {
    background: var(--theme-primary);
    color: var(--theme-btn-primary-text);
    border-bottom: none;
}
.muaadh-dialog__header--primary .muaadh-dialog__title { color: inherit; }
.muaadh-dialog__header--primary .muaadh-dialog__close {
    color: var(--text-on-primary);
    opacity: 0.9;
}
.muaadh-dialog__header--primary .muaadh-dialog__close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15);
}

/* ============================================================================
 * APPENDED (Phase 13 Wave 3): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-dialog__backdrop {
    position: fixed;
    inset: 0;
    background: var(--theme-overlay-bg);
    z-index: calc(var(--chassis-z-modal) - 1);
}

.muaadh-dialog__name { font-size: var(--text-base); font-weight: var(--theme-font-semibold); color: var(--text-primary); }

.muaadh-dialog__footer small                { font-size: var(--text-xs); }