/**
 * Repario Design System — Modals (Compact)
 *
 * Lightweight modal components for action dialogs (create, confirm, form).
 * For the full-featured ticket detail modal, use components/modal.css.
 *
 * Usage:
 *   <div class="rep-dialog-overlay" style="display:none;">
 *     <div class="rep-dialog">
 *       <div class="rep-dialog-header">
 *         <div class="rep-dialog-header-left">
 *           <span class="material-symbols-outlined rep-dialog-icon">person_add</span>
 *           <div>
 *             <h2 class="rep-dialog-title">Title</h2>
 *             <p class="rep-dialog-subtitle">Subtitle</p>
 *           </div>
 *         </div>
 *         <button class="rep-btn rep-btn-ghost rep-btn-icon rep-dialog-close">
 *           <span class="material-symbols-outlined">close</span>
 *         </button>
 *       </div>
 *       <div class="rep-dialog-body">…form fields…</div>
 *       <div class="rep-dialog-footer">
 *         <button class="rep-btn rep-btn-secondary">Cancel</button>
 *         <button class="rep-btn rep-btn-primary">Save</button>
 *       </div>
 *     </div>
 *   </div>
 *
 * Depends on: tokens.css, buttons.css
 * @package Repario_SaaS
 */

/* ── Overlay ───────────────────────────────────────────────────────────── */

.rep-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--rep-z-modal-backdrop, 9999);
    background: var(--rep-bg-overlay);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rep-space-4);
}

/* ── Dialog Container ──────────────────────────────────────────────────── */

.rep-dialog {
    width: 100%;
    max-width: 520px;
    background: var(--rep-card-bg);
    border: 1px solid var(--rep-border-default);
    border-radius: var(--rep-radius-xl);
    box-shadow: var(--rep-shadow-2xl);
    overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.rep-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rep-space-4) var(--rep-space-5);
    border-bottom: 1px solid var(--rep-border-default);
}

.rep-dialog-header-left {
    display: flex;
    align-items: center;
    gap: var(--rep-space-3);
}

.rep-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--rep-radius-lg);
    background: var(--rep-kpi-icon-primary-bg);
    color: var(--rep-color-primary-base);
    font-size: 24px;
}

.rep-dialog-title {
    font-size: var(--rep-font-size-lg);
    font-weight: var(--rep-font-weight-bold);
    color: var(--rep-text-primary);
    margin: 0;
}

.rep-dialog-subtitle {
    font-size: var(--rep-font-size-sm);
    color: var(--rep-text-muted);
    margin: var(--rep-space-0-5) 0 0;
}

/* ── Body ──────────────────────────────────────────────────────────────── */

.rep-dialog-body {
    padding: var(--rep-space-4) var(--rep-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--rep-space-3);
}

.rep-dialog-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rep-space-3);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.rep-dialog-footer {
    padding: var(--rep-space-3) var(--rep-space-5);
    border-top: 1px solid var(--rep-border-default);
    display: flex;
    justify-content: flex-end;
    gap: var(--rep-space-2);
}