/* =============================================================================
   app-modals.css
   Shared modal styling for FSCommon MudBlazor dialog infrastructure.
   ============================================================================= */

/* =============================================================================
   Z-INDEX LAYERS
   ============================================================================= */

.mud-dialog-container {
    z-index: 30000 !important;
}

/* MessageBoxService dialogs (confirmations/errors) are almost always popped from inside another
   already-open modal — that modal's own backdrop is already dimming the page, so this one's own
   backdrop just stacks on top of it, compounding to near-black. DialogOptions.BackgroundClass
   (see MessageBoxService.cs) puts this class on THIS dialog's own backdrop only, leaving every
   other dialog's backdrop (including the one already behind it) untouched. */
.fs-messagebox-no-dim {
    background: transparent !important;
}

.mud-overlay {
    z-index: 29900 !important;
}

.mud-snackbar-location {
    z-index: 31000 !important;
}

.mud-popover-provider,
.mud-popover {
    z-index: 30500 !important;
}

/* =============================================================================
   MESSAGE BOX CONTAINER
   ============================================================================= */

.mod-dialog {
    display: flex;
    flex-direction: column;
    min-width: min(560px, 92vw);
    max-width: 92vw;
    background: var(--modal-background, #CCCCCC);
    color: var(--modal-title-text, #333333);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--modal-border, #8FAAEA);
    box-shadow: 0 0.5rem 1rem var(--modal-shadow, rgba(0, 0, 0, 0.35));
}

/* =============================================================================
   MESSAGE BOX HEADER
   ============================================================================= */

.mod-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 18px;
    background: linear-gradient( to bottom, var(--modal-header-background-start, #F6F7F6), var(--modal-header-background-end, #DAD9D9) ) !important;
    border-bottom: 1px solid var(--modal-header-border, #6B6B6B);
}

.mod-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--modal-title-text, #333333);
    line-height: 1.2;
}

.mod-x {
    appearance: none;
    border: 1px solid var(--modal-close-button-border, #6B6B6B);
    background: var(--modal-close-button-background, #FAFAFA);
    color: var(--modal-close-button-text, #333333);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 7px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mod-x:hover {
        background: var(--modal-close-button-hover-background, #E8E8E8);
    }

/* =============================================================================
   MESSAGE BOX BODY
   ============================================================================= */

.mod-body {
    display: grid;
    grid-template-columns: 82px 1fr;
    align-items: center;
    column-gap: 24px;
    padding: 24px 34px;
    background: var(--modal-background, #CCCCCC);
    min-height: 132px;
}

    .mod-icon,
    .mod-body .mod-icon,
    .mod-body img.mod-icon,
    .mod-body .mod-icon img,
    .mod-body .mod-icon > img,
    .mod-body .mod-icon svg {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        justify-self: center;
        align-self: center;
        object-fit: contain;
        display: block;
    }

span.mod-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 72px !important;
    line-height: 1 !important;
}

.mod-text {
    margin: 0;
    line-height: 1.42;
    font-size: 1.2rem;
    color: var(--text-primary, #2B2B2B);
}

/* =============================================================================
   MESSAGE BOX FOOTER
   ============================================================================= */

.mod-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: linear-gradient( to bottom, var(--modal-footer-background-start, #F6F7F6), var(--modal-footer-background-end, #DAD9D9) ) !important;
    border-top: 1px solid var(--modal-footer-border, #6B6B6B);
    min-height: 66px;
}

/* =============================================================================
   MESSAGE BOX BUTTONS
   ============================================================================= */

.mod-btn {
    min-width: 118px;
    height: 42px;
    padding: 0 22px;
    border-radius: 9px;
    border: 1px solid var(--modal-button-border, #A7A7A7);
    background: var(--modal-button-background, #F4F4F4);
    color: var(--modal-button-text, #666666);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

    .mod-btn:hover {
        background: var(--modal-button-hover-background, #E8E8E8);
        border-color: var(--modal-button-hover-border, #8F8F8F);
    }

    .mod-btn:active {
        background: var(--modal-button-active-background, #DDDDDD);
    }

.mod-ok {
    color: var(--modal-button-text, #666666);
}

.is-danger.mod-ok {
    background: var(--button-delete-color, #DC3545);
    border-color: var(--button-delete-color, #DC3545);
    color: white;
}

/* =============================================================================
   MUD DIALOG BACKDROP
   ============================================================================= */

/* Scoped to .mud-dialog-container — MudBlazor reuses the same .mud-overlay element/class for
   the popover provider's own inert click-outside layer (MudAutocomplete/MudSelect dropdowns),
   which has pointer-events:none and should stay invisible. An unscoped rule here darkens the
   whole page every time any dropdown opens, not just real dialogs. */
.mud-dialog-container .mud-overlay,
.mud-overlay-scrim {
    background-color: rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: none !important;
}

/* =============================================================================
   MODLOGIN SPECIAL SHELL
   ============================================================================= */

.mud-dialog:has(.mod-login-frame) {
    border: 3px solid #0879F4 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: rgba(237, 237, 245, 0.35) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

    .mud-dialog:has(.mod-login-frame) .mud-dialog-content {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .mud-dialog:has(.mod-login-frame).mud-paper,
    .mud-dialog:has(.mod-login-frame) .mud-paper {
        border-radius: 18px !important;
        overflow: hidden !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

/* =============================================================================
   GENERIC MOD DIALOG SHELL
   ============================================================================= */

.mud-dialog:has(.mod-dialog):not(:has(.mod-login-frame)) {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

    .mud-dialog:has(.mod-dialog):not(:has(.mod-login-frame)).mud-paper,
    .mud-dialog:has(.mod-dialog):not(:has(.mod-login-frame)) .mud-paper {
        border-radius: 16px !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mud-dialog:has(.mod-dialog):not(:has(.mod-login-frame)) .mud-dialog-content {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    .mod-dialog {
        min-width: 95vw;
        max-width: 95vw;
        margin: 1rem;
    }

    .mod-header,
    .mod-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mod-body {
        grid-template-columns: 62px 1fr;
        padding: 22px;
        column-gap: 18px;
    }

    .mod-title {
        font-size: 1.125rem;
    }

    .mod-icon,
    .mod-body .mod-icon,
    .mod-body img.mod-icon,
    .mod-body .mod-icon img,
    .mod-body .mod-icon > img,
    .mod-body .mod-icon svg {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
    }

    .mod-text {
        font-size: 1.05rem;
    }

    .mod-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

        .mod-footer .mod-btn {
            width: 100%;
        }
}
/* =============================================================================
   Mud dialog internal layering fix
   Keeps Mud backdrop behind the actual dialog content.
   ============================================================================= */

.mud-dialog-container {
    z-index: 30000 !important;
}

    .mud-dialog-container .mud-overlay {
        z-index: 0 !important;
    }

    .mud-dialog-container .mud-dialog {
        position: relative !important;
        z-index: 1 !important;
    }

    .mud-dialog-container .mud-dialog-content {
        position: relative !important;
        z-index: 2 !important;
    }

.fs-modal-shell {
    background: var(--modal-background);
    border-radius: 15px;
    border: 2px solid var(--modal-border);
    box-shadow: 0 8px 24px var(--modal-shadow);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.fs-modal-window {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /* Without this, flexbox's default min-height:auto refuses to shrink this below its content's
       intrinsic height, so tall content just grows the window past .fs-modal-shell's capped
       height instead of triggering .fs-modal-body's own overflow-y:auto scroll — the window grows,
       the shell clips it (overflow:hidden), and the excess is silently cut off with no scrollbar.
       Confirmed real bug (2026-08-07): first modal tall enough to actually hit it was
       ModInspectorSchedule; every fs-modal-* consumer shares this rule and was equally exposed. */
    min-height: 0;
}

/* Double-click any .fs-modal-header to toggle this (modalChrome.js, delegated off document -
   no per-modal wiring needed). !important because every modal sets its own width/height on its
   own scoped .xxx-modal-shell class, which this needs to reliably override regardless of that
   rule's specificity.

   Every .fs-modal-shell is hosted inside MudBlazor's own .mud-dialog Paper wrapper, which caps
   itself at max-width: calc(100% - 64px) even with DialogOptions.MaxWidth = MaxWidth.False (see
   MudBlazor.min.css's .mud-dialog-width-false) and max-height: calc(100vh - var(--mud-appbar-
   height)). Confirmed real bug (2026-08-07): an earlier 98vw/94vh here exceeded that cap, so the
   shell overflowed its own MudBlazor wrapper and the close "X" (positioned absolute within the
   header) ended up clipped outside the visible dialog entirely. Matching MudBlazor's own cap
   exactly - not a value chosen independently of it - is what keeps the shell's own bounds
   (and everything absolutely positioned within them) inside what MudBlazor actually renders. */
.fs-modal-shell-fullscreen {
    width: calc(100vw - 64px) !important;
    height: calc(100vh - var(--mud-appbar-height, 0px)) !important;
    max-height: calc(100vh - var(--mud-appbar-height, 0px)) !important;
}

.fs-modal-header {
    position: relative;
    height: 48px;
    padding: 10px 16px;
    background: linear-gradient(to bottom, var(--modal-header-background-start), var(--modal-header-background-end));
    border-bottom: 1px solid var(--modal-header-border);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    user-select: none;
    /* Draggable via modalChrome.js (Pointer Events) - move cursor is the affordance, touch-action
       stops a tablet's own scroll/pinch gesture from competing with the drag on the one part of
       the modal that never needs native touch scrolling anyway. */
    cursor: move;
    touch-action: none;
}

.fs-modal-title {
    font-family: Calibri, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--modal-title-text);
}

.fs-modal-close {
    position: absolute;
    right: 12px;
    top: 8px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--modal-close-button-border);
    border-radius: 5px;
    background-color: var(--modal-close-button-background);
    color: var(--modal-close-button-text);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

    .fs-modal-close:hover {
        background-color: var(--modal-close-button-hover-background);
    }

.fs-modal-body {
    flex: 1;
    padding: 16px 24px;
    background-color: var(--modal-background);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fs-modal-footer {
    height: 56px;
    padding: 8px 24px;
    background: linear-gradient(to top, var(--modal-footer-background-start), var(--modal-footer-background-end));
    border-top: 1px solid var(--modal-footer-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
}

.fs-btn {
    min-width: 215px;
    padding: 4px 18px;
    border-radius: 8px;
    border: 1px solid var(--modal-button-border);
    font-family: "Segoe UI", Calibri, sans-serif;
    font-size: 14px;
    cursor: pointer;
    background-color: var(--modal-button-background);
    color: var(--modal-button-text);
}

    .fs-btn:hover {
        background-color: var(--modal-button-hover-background);
        border-color: var(--modal-button-hover-border);
    }

    .fs-btn:active {
        background-color: var(--modal-button-active-background);
    }

.fs-btn-ok {
    font-weight: 700;
}

.fs-btn-cancel {
    font-weight: 400;
}

/* Global numeric-input convention: apply to any MudNumericField/MudTextField (or plain <input>)
   showing a number — always right-justified, never left-aligned like ordinary text. Covers both
   shapes: .numeric-right on a wrapper around a MudBlazor field's inner <input>, or directly on a
   raw <input> itself. */
.numeric-right input,
input.numeric-right {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.mud-dialog:has(.fs-modal-shell) {
    border-radius: 15px !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

    .mud-dialog:has(.fs-modal-shell).mud-paper,
    .mud-dialog:has(.fs-modal-shell) .mud-paper {
        border-radius: 15px !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mud-dialog:has(.fs-modal-shell) .mud-dialog-content {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

.maep-planname-select {
    max-width: 155px;
    border-radius: 5px;
}

.maep-tabs {
    margin-left: 47px;
    margin-bottom: 0;
    gap: 0;
}

.maep-tab-active {
    border-bottom: 1px solid #fdfffc;
    background: #fdfffc;
}

.maep-tab {
    border-top: 1px solid #346807;
    border-right: 1px solid #346807;
    border-left: 1px solid #346807;
}