/* ==========================================================================
   Reusable add / edit dialog (FormModal) - every class starts with "fm-"
   ========================================================================== */

dialog.fm-layer {
    --fm-brand: var(--of-brand, #0f766e);
    --fm-brand-dark: var(--of-brand-dark, #0b5d57);
    --fm-brand-soft: var(--of-brand-soft, #e6f4f2);
    --fm-ink: var(--of-ink, #1f2937);
    --fm-muted: var(--of-muted, #64748b);
    --fm-line: var(--of-line, #e2e8f0);
    --fm-surface: var(--of-surface, #ffffff);
    --fm-panel: var(--of-panel, #f7f9fb);
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fm-ink);
    overflow: hidden;
}

dialog.fm-layer[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

dialog.fm-layer::backdrop { background: transparent; }

dialog.fm-layer, dialog.fm-layer * { box-sizing: border-box; }

/* The page behind must not scroll while a dialog is open. */
body:has(dialog.fm-layer[open]) { overflow: hidden; }

.fm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(3px);
    animation: fm-fade 0.2s ease-out;
}

.fm-modal {
    --fm-w: 640px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(var(--fm-w), 100%);
    max-height: 100%;
    overflow: hidden;
    border: 1px solid var(--fm-line);
    border-radius: 16px;
    background: var(--fm-surface);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
    animation: fm-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.fm-modal--sm { --fm-w: 480px; }
.fm-modal--md { --fm-w: 640px; }
.fm-modal--lg { --fm-w: 900px; }
.fm-modal--xl { --fm-w: 1120px; }

@keyframes fm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fm-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── Header (stays in place) ── */
.fm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 14px 20px;
    border-bottom: 1px solid var(--fm-line);
    background: var(--fm-surface);
}

.fm-header__text { min-width: 0; }

.fm-eyebrow {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fm-brand);
}

.fm-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fm-ink);
}

.fm-subtitle { margin: 2px 0 0; font-size: 12px; color: var(--fm-muted); }

.fm-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--fm-line);
    border-radius: 10px;
    background: var(--fm-surface);
    color: var(--fm-muted);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.fm-close:hover:not(:disabled) { border-color: #f1a8a0; background: #fde4e1; color: #b42318; }
.fm-close:focus-visible { outline: none; border-color: var(--fm-brand); box-shadow: 0 0 0 3px var(--fm-brand-soft); }
.fm-close:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Body (the only part that scrolls) ── */
.fm-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

.fm-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
    padding: 18px 20px;
    overflow-y: auto;
    background: var(--fm-panel);
}

.fm-body .drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.fm-body .drawer-grid > .full-width,
.fm-body .drawer-grid > .span-2 { grid-column: 1 / -1; }

.fm-body .drawer-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.fm-body .drawer-field > label,
.fm-body label.form-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-muted);
}

.fm-body .form-control,
.fm-body .form-select {
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--fm-line);
    border-radius: 10px;
    background-color: var(--fm-surface);
    color: var(--fm-ink);
    font-size: 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fm-body textarea.form-control { min-height: 84px; resize: vertical; }

.fm-body .form-control:focus,
.fm-body .form-select:focus {
    outline: none;
    border-color: var(--fm-brand);
    box-shadow: 0 0 0 3px var(--fm-brand-soft);
}

.fm-body .form-control:disabled,
.fm-body .form-select:disabled { background: var(--fm-panel); color: var(--fm-muted); }

.fm-body .drawer-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-ink);
    cursor: pointer;
}

.fm-body .drawer-checkbox input { width: 16px; height: 16px; accent-color: var(--fm-brand); }

.fm-body .drawer-role-picker {
    padding: 12px 14px;
    border: 1px solid var(--fm-line);
    border-radius: 12px;
    background: var(--fm-surface);
}

.fm-body .alert { margin: 0; border-radius: 10px; font-size: 13px; }
.fm-body .searchable-dropdown-wrapper { width: 100%; }

/* ── Footer (stays in place) ── */
.fm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: none;
    padding: 12px 20px;
    border-top: 1px solid var(--fm-line);
    background: var(--fm-surface);
}

.fm-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s;
}

.fm-footer .btn-secondary,
.fm-footer .btn-outline-secondary {
    border: 1px solid var(--fm-line);
    background: var(--fm-surface);
    color: var(--fm-ink);
}

.fm-footer .btn-secondary:hover:not(:disabled),
.fm-footer .btn-outline-secondary:hover:not(:disabled) { border-color: var(--fm-brand); background: var(--fm-panel); color: var(--fm-ink); }

.fm-footer .btn-primary {
    border: 1px solid var(--fm-brand);
    background: var(--fm-brand);
    color: #fff;
}

.fm-footer .btn-primary:hover:not(:disabled) { border-color: var(--fm-brand-dark); background: var(--fm-brand-dark); }
.fm-footer .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.fm-footer .btn[hidden] { display: none; }

/* ── Phones: full-screen sheet ── */
@media (max-width: 640px) {
    dialog.fm-layer[open] { padding: 0; align-items: stretch; }
    .fm-modal { width: 100%; height: 100%; border: 0; border-radius: 0; }
    .fm-header, .fm-body, .fm-footer { padding-left: 14px; padding-right: 14px; }
    .fm-body .drawer-grid { grid-template-columns: 1fr; }
    .fm-footer .btn { flex: 1; }
}

@media (max-height: 520px) and (min-width: 641px) {
    dialog.fm-layer[open] { padding: 8px; }
}