/* ==========================================================================
   Modal / confirmation dialog — modernized & standardized
   --------------------------------------------------------------------------
   Authoritative styling for the shared modal classes (.modal_overlay, .modal,
   .modal_title_bar, .modal_body, .modal_button_bar, .modal_button) used by:
   the confirmation modals (echo_confirmation_modal), the Sort By modal, the
   Custom Columns modal, the login-failure modal and the watchlist bell modal.

   Two older stylesheets each define these classes — style.css and
   gemstone_search.css — and both load on watchlist/gemstone pages. Every rule
   here is prefixed with `body ` to raise specificity above those single-class
   definitions, so this file wins regardless of stylesheet load order. The
   inline left/transform positioning on the Sort/Custom-Columns modals is
   removed in inventory_helper.php so the flex centering below can take over.

   Centering: the backdrop is full-screen, but the dialog is centered over the
   MAIN CONTENT AREA — inset from the left by the side-menu width (mirroring
   body's padding-left) so it lines up with the page content, not the whole
   screen, and follows the menu when it expands/collapses.
   ========================================================================== */

body .modal_overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    /* Inset the centering region by the collapsed side-menu width. */
    padding-left: calc(var(--nav-width-collapsed, 0px) + 24px);
    background-color: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    overflow-y: auto;
    transition: padding-left 0.5s ease;
}

/* Follow the sidebar when it expands, matching body.sidebar-open's padding. */
body.sidebar-open .modal_overlay {
    padding-left: calc(var(--nav-width-expanded, 0px) + 24px);
}

/* The dialog box. position:static lets the flexbox center it; we explicitly
   clear the legacy fixed/left/top/transform positioning. Width can still be
   overridden inline (e.g. the 820px Custom Columns modal). */
body .modal {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 440px;
    max-width: 100%;
    min-height: 0;
    max-height: calc(100vh - 48px);
    background-color: #fff;
    border-radius: 4px;               /* match the button corner radius */
    overflow: hidden;                 /* clip title/footer to rounded corners */
    /* Layered drop shadow for a 3D "popping out" look — stacked offsets from a
       tight contact shadow to a wide soft one read as a card floating above
       the page; the thin top highlight adds a subtle raised-edge bevel. */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.16),
        0 4px 8px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.22),
        0 28px 56px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* --- Navy title bar (compact) --------------------------------------------- */
/* box-sizing:border-box is required because the legacy rules set width:100% on
   these sub-elements; without it the padding below would push them wider than
   the modal box and the content would overflow/clip at the right edge. */
body .modal_title_bar {
    box-sizing: border-box;
    height: auto;
    padding: 9px 18px;
    background-color: #002B5C;
    justify-content: flex-start;
}
body .modal_title_bar p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff;
}

/* --- White body ----------------------------------------------------------- */
body .modal_body {
    box-sizing: border-box;
    padding: 18px 22px;
    background-color: #fff;
}
body .modal_body p {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #1f2d3d;
    overflow-wrap: break-word;
}
/* Keep form controls inside the body from forcing horizontal overflow. */
body .modal_body input,
body .modal_body select,
body .modal_body textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* --- Navy footer (button bar, compact) ------------------------------------ */
/* nowrap keeps all buttons on a single row (e.g. the 3-button Sort modal). */
body .modal_button_bar {
    box-sizing: border-box;
    height: auto;
    padding: 9px 14px;
    gap: 8px;
    background-color: #002B5C;
    justify-content: center;
    flex-wrap: nowrap;
}

/* Buttons match the site's action buttons (e.g. .inventory_order_submit):
   rectangular with slightly rounded corners, a subtle drop shadow, and an FA
   icon. The base look is the outlined/secondary style; --primary fills it. */
body .modal_button {
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 96px;
    margin: 0;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    border: 1.5px solid #fff;
    border-radius: 4px;
    background-color: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: background-color 0.15s ease, color 0.15s ease;
}
body .modal_button p {
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
}
body .modal_button i {
    font-size: 14px;
}
body .modal_button:hover {
    background-color: rgba(255, 255, 255, 0.16);
}

/* Primary / affirmative action (Confirm, Apply, Save, Okay): solid white fill
   with navy text — high contrast on the navy footer. */
body .modal_button--primary {
    background-color: #fff;
    color: #002B5C;
    border-color: #fff;
}
body .modal_button--primary:hover {
    background-color: #D2E2ED;
    color: #002B5C;
}

/* Secondary action (Cancel, Decline, Reset): outlined. */
body .modal_button--secondary {
    background-color: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.85);
}
body .modal_button--secondary:hover {
    background-color: rgba(255, 255, 255, 0.16);
}