/* ========================================================================
   SLMDialogShared.css -- Shared dialog layout helpers (overlays, floating surfaces)
   These classes are used by host pages for custom dialogs (event templates,
   principal picker, etc.) that do NOT use the SlmDialog component.
   Split from SLM.css 2026-07-24 to prevent cross-feature CSS corruption.
   ======================================================================== */

/* Drag-to-move handle (shared by DFormLoader + custom dialogs) */
.slm-dialog-header {
    cursor: move;
    user-select: none;
}

.slm-dialog-header:active {
    cursor: grabbing;
}

/* Resize grip (shared) */
.slm-dialog-resize-handle {
    cursor: nwse-resize;
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 16px;
    height: 16px;
    opacity: 0.7;
    border-radius: 3px;
    background:
        linear-gradient(135deg, transparent 50%, rgba(13, 110, 253, 0.40) 50%),
        linear-gradient(135deg, transparent 65%, rgba(13, 110, 253, 0.22) 65%),
        linear-gradient(135deg, transparent 80%, rgba(13, 110, 253, 0.12) 80%);
    user-select: none;
    touch-action: none;
}

.slm-dialog-resize-handle:hover {
    opacity: 0.9;
}

/* ------------------------------------------------------------------------
   Shared dialog overlay + floating surface classes
   ------------------------------------------------------------------------ */

.slm-dialog-overlay--fixed {
    position: fixed;
    inset: 0;
    z-index: 3200;
    overflow: auto;
    background: rgba(0,0,0,0.35);
}

.slm-dialog--fixed {
    position: fixed;
    left: 24px;
    top: 24px;
    z-index: 3201;
    background: var(--slm-color-surface, #fff);
    border: 1px solid var(--slm-color-border, #cdd3da);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    overflow: visible;
    resize: both;
}

.slm-dialog--lg {
    width: 1100px;
    max-width: calc(100vw - 48px);
    min-width: var(--slm-dialog-min-width, 360px);
    height: auto;
    max-height: calc(100vh - 48px);
    min-height: var(--slm-dialog-min-height, 260px);
}

.slm-dialog-header--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.slm-dialog-body--scroll {
    margin-top: 10px;
    overflow: auto;
    max-height: calc(100vh - 48px - 6.5rem);
}