/*!
 * ebq-layout-fixes.css — small corrections to the vendor theme CSS that must
 * win on specificity/order. Loaded last by every Plates layout.
 */

/* ---------------------------------------------------------------------- */
/*  Modals were impossible to close on phones and small tablets
/* ---------------------------------------------------------------------- */
/*
 * styles<THEME>2.min.css carries, inside @media (max-width: 991px):
 *
 *     #app .app-content { ... position: relative; z-index: 2; }
 *
 * position + a numeric z-index creates a STACKING CONTEXT. Every modal in the
 * app is rendered inside .app-content, so below 992px their
 * `.modal { z-index: 8889 !important }` is scoped inside a context whose own
 * z-index is 2. Bootstrap appends .modal-backdrop (z-index 8888) to <body>,
 * outside that context — so the backdrop paints on top of the entire content
 * subtree, modal included.
 *
 * The modal still looks open (the backdrop is only 40% opaque) but every click
 * lands on .modal-backdrop, and in Bootstrap 3.3 the backdrop element has no
 * click handler of its own — dismissal is bound to .modal and checks
 * e.target === e.currentTarget. So the header ×, any footer Close button and
 * click-outside all silently do nothing, and the user is stuck. On the new-loan
 * page, where the loan-history modal auto-opens on load, that blocks the whole
 * application.
 *
 * Verified in headless Chrome via document.elementFromPoint over the close
 * controls: at 500px the Close button's own click resolves to .modal-backdrop;
 * at 1184px it resolves to the button. With this rule it resolves to the button
 * at both widths.
 *
 * Scoped to body.modal-open (Bootstrap sets it for the lifetime of a modal) so
 * the z-index:2 stacking stays exactly as-is for normal browsing and for the
 * off-canvas menu slide — it is only neutralised while a modal is actually up.
 */
@media (max-width: 991px) {
    body.modal-open #app .app-content {
        z-index: auto;
    }
}

/*
 * Top-menu flyout opened to the left.
 *
 * assets/js/ebq-submenu-fit.js puts .ebq-open-left on a .dropdown-submenu whose
 * flyout would run past the right edge of the window (e.g. Admin > Application
 * Settings on a laptop screen), and on the rows inside such a flyout so a third
 * level keeps going left instead of folding back over the menu it came from.
 * Mirrors the default left:100% placement in styles.css, and turns the row's
 * arrow to match.
 */
@media (min-width: 992px) {
    .dropdown-submenu.ebq-open-left > .dropdown-menu {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: -1px;
        border-radius: 6px 0 6px 6px;
    }
    .dropdown-submenu.ebq-open-left > a:after {
        float: left;
        border-width: 4px 4px 4px 0;
        border-left-color: transparent;
        border-right-color: #2C2F3B;
        margin-right: 0;
        margin-left: -10px;
    }
}
/*
 * Touch-size menu: a flyout row opened by a tap (assets/js/ebq-submenu-fit.js).
 * :hover alone is unreliable on touch, and a row that is also a link navigated
 * before what was under it could be seen.
 */
@media (max-width: 991px) {
    .horizontal-menu .dropdown-submenu.ebq-sub-open > .dropdown-menu {
        display: block;
    }
}