/* ============================================================================
   mobile.css — responsive overlay for FlyHouse Admin
   ----------------------------------------------------------------------------
   Loaded AFTER Content/Style.css on every page. Everything here lives inside a
   width-based media query, so the desktop rendering (>= 1025px) is byte-for-byte
   what it was before this file existed.

   Breakpoints
     <= 767px    phone   : off-canvas drawer, one column, data tables as cards
     768-1024px  tablet  : narrow persistent sidebar, data tables scroll sideways
     >= 1025px   desktop : untouched

   Specificity note: several pages carry their own <style> block in the body
   (e.g. `.acSearchinputDiv { width: 20% }`), which therefore *follows* this
   file in document order. Rules that must beat those are given an extra class
   (`.right_side .acSearchinputDiv`) rather than `!important`, so page authors
   can still override deliberately.
   ========================================================================== */


/* ==========================================================================
   0. New components — all widths
   ----------------------------------------------------------------------------
   These classes did not exist before, so unconditional rules here cannot
   regress any existing page. `.otp_input_wrap` / `.otp_input` replace the
   hard-coded `width: 80px` inline styles that OTPVerify.aspx used to carry.
   ========================================================================== */
.otp_input_wrap {
    width: 160px;
}

.otp_input {
    width: 100%;
    text-align: center;
    letter-spacing: 6px;
    font-size: 20px;
}

.otp_actions {
    gap: 12px;
}

/* The mobile chrome that Site.master always emits. Hidden by default so the
   desktop layout is untouched; the phone block below opts it back in. Without
   this, a <div> and a <label> default to `display: block` and both appear at
   desktop widths. */
.fh-topbar,
.fh-backdrop {
    display: none;
}

/* Same contract for the elements js/mobile.js injects (filter toggle, bottom
   tab bar): present in the DOM at every width, visible only on phones. */
.fh-filter-toggle,
.fh-bottomnav {
    display: none;
}


/* ==========================================================================
   1. Shared — phone + tablet
   ========================================================================== */
@media only screen and (max-width: 1024px) {

    /* Style.css sets `zoom: 90%` on <body>. Zoom scales the layout viewport out
       from under the media queries and shrinks tap targets below the 44px
       minimum, so it has to go on touch widths. */
    body {
        zoom: 1;
        -webkit-text-size-adjust: 100%;
    }

    /* Native widgets (date pickers, select sheets, scrollbars) render in their
       dark variants instead of flashing white panels over a dark app. */
    html {
        color-scheme: dark;
    }

    /* A visible focus ring tuned to the brand, replacing the outline that
       Style.css globally removes. */
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid rgba(246, 225, 0, .55);
        outline-offset: 1px;
    }

    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    img, video, canvas, svg {
        max-width: 100%;
        height: auto;
    }

    /* The app's own top bar is replaced by .fh-topbar below. The env() terms
       keep the fixed bar clear of the iPhone notch / Dynamic Island. */
    .wrapper {
        padding-top: calc(52px + env(safe-area-inset-top, 0px));
    }

    .right_side {
        float: none;
        width: 100%;
    }

    /* Standalone.master declares `.right_side_1 { width: 85% }` in an inline
       <style> that follows this file, so match it with an extra element. */
    body .right_side_1 {
        float: none;
        width: 100%;
    }

    .main_box {
        float: none;
        width: 100%;
        height: auto;
        /* Style.css:1902 pins this to `height:100vh; overflow:scroll`, which
           clips every page longer than one screen and nests a second scrollbar. */
        overflow: visible;
        min-height: calc(100vh - 52px);
    }

    /* Standalone.master has no top bar to leave room for. */
    body > form > .right_side_1 .main_box {
        min-height: 100vh;
    }

    /* Style.css:1941 sets a blanket `ul { width: 80%; background-color: white }`
       inside its 415px-portrait block. That paints the navigation list and the
       user bar solid white on a dark theme. Any class selector outranks a bare
       element selector, so naming them is enough. */
    .menu,
    .smenu,
    .topBarUserDetails,
    .Triptabs-list {
        width: auto;
        background-color: transparent;
    }

    .smenu {
        background: #282a2a;
    }

    .rightSection_outerWidth,
    .trip_outerWidth {
        box-sizing: border-box;
        width: auto;
        margin: 12px;
        padding: 12px;
    }

    /* ---- Fixed top bar (markup added in Site.master) ---------------------- */
    /* `display` is set in the phone block only — the tablet keeps its sidebar. */
    .fh-topbar {
        align-items: center;
        gap: 12px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(52px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 12px 0 12px;
        background: #1b1c1c;
        border-bottom: 1px solid #4e4e4e;
        box-shadow: 0 1px 10px rgba(0, 0, 0, .45);
        z-index: 1002;
    }

    .fh-topbar-title {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hamburger. Style.css's `.hamb` is `background:#000` on a `#1b1c1c` page —
       invisible — so it stays hidden and this one takes over. */
    .hamb {
        display: none;
    }

    .fh-hamb {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        padding: 10px;
        margin-left: -10px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .fh-hamb span {
        display: block;
        width: 22px;
        height: 2px;
        background: #f6e100;
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }

    .side-menu:checked ~ .fh-topbar .fh-hamb span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .side-menu:checked ~ .fh-topbar .fh-hamb span:nth-child(2) {
        opacity: 0;
    }

    .side-menu:checked ~ .fh-topbar .fh-hamb span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ---- Top-right identity block ---------------------------------------- */
    .topBarUserDetails {
        float: none;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 8px 12px 0 12px;
        list-style: none;
        font-size: 13px;
    }

    .topBarUserDetails li {
        float: none;
        display: inline-flex;
        align-items: center;
    }

    .topBarUserDetails img {
        width: 18px;
        margin-right: 4px;
    }

    /* ---- Forms ----------------------------------------------------------- */
    /* 16px is the threshold below which iOS Safari zooms the page on focus. */
    .acFormInputs,
    .acFormInputsSelect,
    .acFormInputsPageSelect,
    .user_input,
    .pass_input,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px;
    }

    .acFormInputs,
    .acFormInputsSelect {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .acformBtn,
    .acformBtn1,
    .acAddBtn,
    .login_btn,
    .btnListClass,
    .btnSearchClass {
        min-height: 44px;
        line-height: 1.4;
    }

    /* ---- Wide tables ----------------------------------------------------- */
    /* js/mobile.js wraps every table in this. Keeping the scroll on a wrapper
       rather than the table itself preserves `width: 100%` on the table. */
    .fh-table-scroll {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}


/* ==========================================================================
   2. Tablet — 768px to 1024px
   ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    /* Style.css:1532 already turns the sidebar back on at >=768px and hides the
       hamburger. Reclaim the space it takes: 15% of 768px is ~115px, too narrow
       for the menu labels. */
    .nav {
        width: 200px;
    }

    .right_side {
        float: right;
        width: calc(100% - 200px);
    }

    /* The tablet keeps the persistent sidebar, so there is no drawer chrome
       (`.fh-topbar` / `.fh-backdrop` stay at their default `display: none`). */
    .wrapper {
        padding-top: 0;
    }

    .main_box {
        min-height: 100vh;
    }

    .acforminputDiv {
        width: 50%;
    }

    .right_side .acSearchinputDiv {
        box-sizing: border-box;
        width: 50%;
        padding-right: 10px;
    }
}


/* ==========================================================================
   3. Phone — 767px and below
   ========================================================================== */
@media only screen and (max-width: 767px) {

    .fh-topbar {
        display: flex;
    }

    /* ---- Off-canvas drawer ------------------------------------------------ */
    /* Style.css animates `max-height`, which reflows the page and cannot slide
       in from the edge. Swap to a transform on a fixed panel. */
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 82%;
        max-width: 320px;
        height: 100%;
        max-height: none;
        padding-top: 8px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: #1b1c1c;
        transform: translateX(-102%);
        transition: transform .28s ease;
        z-index: 1003;
    }

    .side-menu:checked ~ .nav,
    .side-menu:checked ~ .left_side .nav {
        transform: translateX(0);
    }

    .nav .logo {
        display: block;
        padding: 8px 15px 4px 15px;
    }

    .nav .logo img {
        max-width: 150px;
    }

    /* Backdrop is a <label for="side-menu">, so tapping it unchecks the box and
       closes the drawer with no JavaScript. */
    .fh-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .6);
        z-index: 1001;
    }

    .side-menu:checked ~ .fh-backdrop {
        display: block;
    }

    /* Menu rows: 44px minimum touch target. */
    .menu a,
    .smenu a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 10px;
    }

    .menu a span,
    .smenu a span {
        font-size: 13px;
    }

    .menu img,
    .smenu img {
        flex: 0 0 auto;
        width: 20px;
        margin-right: 4px;
    }

    /* ---- Content ---------------------------------------------------------- */
    .rightSection_outerWidth,
    .trip_outerWidth {
        margin: 10px 8px 30px 8px;
        padding: 10px;
        border-radius: 10px;
    }

    .listOfTitle h4 {
        font-size: 16px;
        letter-spacing: 1px;
        margin: 6px auto 14px auto;
    }

    /* ---- Type scale -------------------------------------------------------- */
    /* Style.css never sizes body copy for small screens, so everything lands at
       desktop 16px Poppins with heavy 700 <b> tags. Bring content down a step
       and soften bold; controls set their own sizes and are unaffected. */
    .right_side {
        font-size: 14px;
    }

    .right_side b,
    .right_side strong {
        font-weight: 600;
    }

    /* Column headers in scrolling (non-card) tables keep their words together
       instead of stacking one word per line in a 50px column. The wrapper
       scrolls sideways, so width is free. */
    .right_side .fh-table-scroll #tableDetailWrapper:not(.fh-cardify) th {
        white-space: nowrap;
    }

    /* ---- Charter request / trip cards -------------------------------------- */
    /* Shared by ChartererRequest, PendingTrips and TripList. On desktop these
       are fixed-percentage floats (`.charter_detail_width` is 13% ≈ 48px on a
       phone) so titles like "TRANSPORTATION NEEDS?" overflow onto their
       neighbours. Rebuilt as a wrapping flex card: airports up top, a 4-up
       stat strip below. */
    .right_side .charter_adddetails_wrapper {
        box-sizing: border-box;
        width: 100%;
        margin: 8px 0;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.65;
    }

    /* Meta rows (Cancel Request / Tail No / Selected Price) stack instead of
       pulling left and right in a 350px card. */
    .right_side .contentSpan,
    .right_side .contentSpan .pull-left,
    .right_side .contentSpan .pull-right {
        float: none;
        display: block;
    }

    .right_side .contentSpan {
        margin-top: 8px;
    }

    .right_side .charter_main_box {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        margin: 8px 0;
        padding: 10px 8px;
        border-radius: 10px;
    }

    .right_side .charter_main_box > .clearfix,
    .right_side .charter_main_box > .DispalyMobileOnly {
        display: none;
    }

    /* Row 1: departure — plane — arrival. */
    .right_side .charter_main_width {
        flex: 1 1 40%;
        width: auto;
        box-sizing: border-box;
        padding-top: 6px;
    }

    .right_side .charter_dep_icon {
        flex: 0 0 40px;
        width: auto;
        padding-top: 16px;
    }

    .right_side .charter_dep_icon img {
        width: 22px;
    }

    .right_side .charter_dep_title,
    .right_side .charter_arrival_title {
        font-size: 19px;
        font-weight: 700;
        line-height: 1.2;
    }

    .right_side .charter_dep_details,
    .right_side .charter_arrival_details {
        font-size: 11px;
        color: #cfcfcf;
    }

    /* Row 2+: the stats as a 2×2 strip. Four-up leaves ~80px per column, which
       breaks "TRANSPORTATION" mid-word; at 50% every label fits on one line. */
    .right_side .charter_detail_width {
        flex: 1 1 50%;
        max-width: 50%;
        width: auto;
        box-sizing: border-box;
        margin-top: 10px;
        padding: 8px 3px 0 3px;
        border-top: 1px solid #3f3f3f;
        text-align: center;
    }

    .right_side .charter_pax_title,
    .right_side .charter_dist_title,
    .right_side .charter_ete_title {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #9a9a9a;
        line-height: 1.35;
    }

    .right_side .charter_detail_width .top {
        padding-top: 3px;
        font-size: 13px;
        font-weight: 600;
    }

    /* ---- Filter grid ------------------------------------------------------ */
    /* Two filters per row. Each cell is exactly half the width including its
       6px gutter, so a plain float wraps cleanly without a grid container —
       the pages wrap these divs in an unclassed `<div style="float:left">`
       that there is no way to select. The extra `.right_side` outranks the
       per-page `.acSearchinputDiv { width: 20%; float: left }`. */
    .right_side .acSearchinputDiv {
        box-sizing: border-box;
        float: left;
        width: calc(50% - 6px);
        margin: 0 6px 14px 0;
    }

    /* Labels wrap to two lines ("Request Created From Date") while their
       neighbours use one. Pinning the label box keeps the inputs on a shared
       baseline, which is what lets the float wrap without ragged gaps. */
    .right_side .acSearchinputDiv > label {
        display: block;
        min-height: 34px;
        margin-bottom: 2px;
        font-size: 12px;
        line-height: 1.4;
        color: #cfcfcf;
    }

    /* The markup separates label from input with a <br>; the block label
       already does that, and the extra line breaks the shared baseline. */
    .right_side .acSearchinputDiv > br {
        display: none;
    }

    .right_side .acforminputDiv,
    .right_side .acformWrapperPage,
    .right_side .acforminputPageDiv {
        box-sizing: border-box;
        float: none;
        width: 100%;
        margin-right: 0;
    }

    /* ---- Inputs ------------------------------------------------------------ */
    /* `!important` is unavoidable here: the pages set widths as *inline* styles
       on the server controls (`Style="width: 200px"`, `Width="250px"`), and an
       inline style outranks any selector. This is why the Status select and the
       Request Type select rendered at different widths. */
    .right_side .acFormInputs,
    .right_side .acFormInputsSelect,
    .right_side .acFormInputsPageSelect,
    .right_side .acSearchinputDiv select,
    .right_side .acSearchinputDiv textarea,
    .right_side .acSearchinputDiv input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0;
        margin: 0;
        min-height: 44px;
    }

    /* The page-size select holds "10"; a full-width control there reads as a
       mistake. It is not a filter, so it keeps its intrinsic size. */
    .right_side .acFormInputsPageSelect {
        width: auto !important;
        min-width: 110px;
    }

    /* Strip iOS's native bevel/inner shadow from text fields and selects. */
    .right_side .acFormInputs,
    .right_side .acFormInputsSelect,
    .right_side .acFormInputsPageSelect,
    .right_side .acSearchinputDiv select {
        -webkit-appearance: none;
        appearance: none;
        background-image: none;
    }

    /* A select with no native chrome needs its own caret. */
    .right_side .acFormInputsSelect,
    .right_side .acFormInputsPageSelect,
    .right_side .acSearchinputDiv select {
        padding-right: 34px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' fill='none' stroke='%23f6e100' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 8px;
    }

    /* ---- Checkboxes -------------------------------------------------------- */
    /* A 13px native checkbox is well under the 44px touch minimum. Scaling the
       control keeps the server-rendered <input> and its postback intact. */
    .right_side .acSearchinputDiv input[type="checkbox"],
    .right_side .mycheckbox input[type="checkbox"],
    .right_side .form-check-input {
        width: 20px;
        height: 20px;
        margin-right: 8px;
        vertical-align: -4px;
        accent-color: #f6e100;
    }

    .right_side .acSearchinputDiv label,
    .right_side .mycheckbox label {
        cursor: pointer;
    }

    /* ---- Filter sheet ------------------------------------------------------ */
    /* js/mobile.js folds 3+ filter cells behind this toggle so list pages open
       on their data. The badge shows how many filters currently hold a value. */
    .fh-filter-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        width: 100%;
        min-height: 50px;
        margin: 2px 0 12px 0;
        padding: 12px 14px;
        background: #282a2a;
        border: 1px solid #4e4e4e;
        border-radius: 12px;
        color: #fff;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .fh-filter-toggle > svg:first-child {
        flex: 0 0 auto;
        color: #f6e100;
    }

    .fh-filter-toggle .fh-chev {
        flex: 0 0 auto;
        margin-left: auto;
        color: #9a9a9a;
        transition: transform .2s ease;
    }

    .fh-filter-toggle.fh-open .fh-chev {
        transform: rotate(180deg);
    }

    .fh-filter-toggle:active {
        filter: brightness(1.2);
    }

    .fh-badge {
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        box-sizing: border-box;
        border-radius: 11px;
        background: #f6e100;
        color: #000;
        font-size: 12px;
        font-weight: 700;
        line-height: 22px;
        text-align: center;
    }

    /* The panel keeps its desktop inline style (`float:left; width:95%`), so
       both need !important when it is open on a phone. */
    .right_side .fh-filterpanel {
        float: none !important;
        width: 100% !important;
        padding: 2px 0 6px 0;
    }

    .right_side .fh-filterpanel.fh-collapsed {
        display: none;
    }

    /* ---- Card titles ------------------------------------------------------- */
    /* The first real value in each card renders as its heading — the way a
       native list shows its primary field — with the column label as a small
       eyebrow above it. */
    #tableDetailWrapper.fh-cardify tr.fh-card td.fh-card-title {
        display: block;
        width: auto !important;
        padding: 4px 0 10px 0;
        text-align: left;
        font-size: 17px;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card td.fh-card-title::before {
        display: block;
        margin-bottom: 3px;
        font-size: 10px;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card td.fh-card-title a {
        color: #fff;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card:active {
        filter: brightness(.82);
    }

    /* ---- Floating action button -------------------------------------------- */
    /* js/mobile.js tags the page's primary "Add …" link. Sits above the bottom
       tab bar; position:fixed escapes any scrolling ancestor. */
    .right_side .fh-fab {
        position: fixed;
        right: 16px;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        z-index: 1000;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: auto !important;
        padding: 15px 20px;
        border-radius: 30px;
        background: #f6e100;
        color: #000;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
    }

    .right_side .fh-fab::before {
        content: '+';
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
    }

    .right_side .fh-fab:active {
        filter: brightness(.85);
    }

    /* The button-bar slot the FAB left behind should not hold a 140px gap. */
    .right_side .fh-actions-cell > a:has(.fh-fab) {
        flex: 0 0 0;
        min-width: 0;
    }

    /* ---- Bottom tab bar ----------------------------------------------------- */
    .fh-bottomnav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(18, 18, 18, .97);
        border-top: 1px solid #333;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .fh-bottomnav a,
    .fh-bottomnav button {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        min-width: 0;
        padding: 9px 0 7px 0;
        background: none;
        border: none;
        color: #9a9a9a;
        font-family: inherit;
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .fh-bottomnav svg {
        width: 23px;
        height: 23px;
    }

    .fh-bottomnav .fh-active {
        color: #f6e100;
    }

    .fh-bottomnav a:active,
    .fh-bottomnav button:active {
        color: #fff;
    }

    /* Content must scroll clear of the tab bar and the FAB. */
    .main_box {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    /* ---- Drawer affordances -------------------------------------------------- */
    /* Section headers get a chevron so they read as expandable, not links. */
    .menu > li > a.mHeader::after {
        content: '';
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-left: auto;
        margin-right: 4px;
        border-right: 2px solid #8a8a8a;
        border-bottom: 2px solid #8a8a8a;
        transform: rotate(45deg) translateY(-2px);
    }

    .menu a:active,
    .smenu a:active {
        background-color: #3a3a3a;
    }

    .nav {
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }

    /* ---- Buttons ----------------------------------------------------------- */
    /* Native-feeling touch targets: 46px tall, softer radius, no iOS bevel,
       and a real pressed state (phones have no hover). They wrap two-up. */
    .right_side .acformBtn,
    .right_side .acformBtn1,
    .right_side .acAddBtn,
    .right_side .btnListClass,
    .right_side .btnSearchClass,
    .login_btn {
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        display: inline-block;
        width: auto;
        min-width: 44px;
        min-height: 46px;
        margin: 6px 8px 6px 0;
        padding: 12px 18px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        box-shadow: none;
        text-align: center;
        touch-action: manipulation;
        transition: filter .12s ease;
    }

    .right_side .acformBtn:active,
    .right_side .acformBtn1:active,
    .right_side .acAddBtn:active,
    .right_side .btnListClass:active,
    .login_btn:active {
        filter: brightness(.85);
    }

    /* `.btnListClass` is pinned to `width: 40px` by the page's own <style>. */
    .right_side .btnListClass {
        width: auto !important;
        padding: 12px 14px;
        font-size: 14px;
    }

    /* A cell holding only buttons (js/mobile.js tags these) takes the whole row
       and lays them out as a wrapping button bar, instead of being squeezed
       into one half-width filter column. */
    .right_side .fh-actions-cell {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        float: none !important;
        clear: both;
        width: 100%;
        margin: 4px 0 14px 0;
        text-align: left;
    }

    .right_side .fh-actions-cell .acformBtn,
    .right_side .fh-actions-cell .acformBtn1,
    .right_side .fh-actions-cell .acAddBtn,
    .right_side .fh-actions-cell .btnSearchClass {
        flex: 1 1 auto;
        min-width: 140px;
        margin: 0;
    }

    /* The <a> wrapper around `.acAddBtn` would otherwise collapse to its text. */
    .right_side .fh-actions-cell > a {
        flex: 1 1 auto;
        min-width: 140px;
    }

    .right_side .fh-actions-cell > a .acAddBtn {
        display: block;
        width: 100%;
    }

    .right_side .fh-actions-cell > br,
    .right_side .fh-actions-cell > label {
        display: none;
    }

    /* `.addMargin` exists only to drop a button level with a label above a text
       box. Once the filters stack, that 25px is dead space. */
    .right_side .addMargin {
        margin-top: 6px;
    }

    /* Anything the page floated right (Add buttons, page-size selects) should
       simply follow the content on a phone. */
    .right_side [style*="float: right"],
    .right_side [style*="float:right"] {
        float: none !important;
        clear: both;
    }

    /* ChartererRequest.aspx pulls its button row up with `margin-top: -30px` to
       sit beside the desktop filter grid. Stacked, that drags the buttons on
       top of the FriendShare checkbox label. */
    .right_side [style*="margin-top: -"] {
        margin-top: 0 !important;
    }

    /* ---- Data tables as cards -------------------------------------------- */
    /* js/mobile.js adds `.fh-cardify` to #tableDetailWrapper only when every
       body row has exactly as many cells as the header has columns, and tags
       those rows `.fh-card` with a `data-label` per cell. Tables that don't fit
       the shape (colspans, "No data available", nested layouts) keep their
       normal rendering and just scroll sideways inside .fh-table-scroll. */
    #tableDetailWrapper.fh-cardify,
    #tableDetailWrapper.fh-cardify tbody {
        display: block;
        width: 100%;
    }

    #tableDetailWrapper.fh-cardify .fh-head {
        display: none;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card {
        display: block;
        margin: 0 0 10px 0;
        padding: 4px 10px;
        border: 1px solid #4e4e4e;
        border-radius: 10px;
        background-color: #282a2a;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card:nth-child(even) {
        background-color: #1c1c1c;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        /* Several cells carry a hard `width="25%"` attribute. */
        width: auto !important;
        padding: 9px 0;
        border-bottom: 1px solid #3a3a3a;
        text-align: right;
        word-break: break-word;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card td:last-child {
        border-bottom: 0;
    }

    /* An empty cell is invisible in a wide table but becomes a labelled row
       saying nothing once stacked. Drop it. */
    #tableDetailWrapper.fh-cardify tr.fh-card td.fh-empty {
        display: none;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        color: #f6e100;
        font-weight: 600;
        text-align: left;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .5px;
    }

    /* A cell holding only action icons reads better centred with no label. */
    #tableDetailWrapper.fh-cardify tr.fh-card td.fh-actions {
        justify-content: flex-end;
        gap: 18px;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card td.fh-actions::before {
        flex: 1 1 auto;
    }

    #tableDetailWrapper.fh-cardify .editImg,
    #tableDetailWrapper.fh-cardify .deleteImg {
        width: 22px;
    }

    /* Rows the script could not map (empty-state, colspan summaries). */
    #tableDetailWrapper.fh-cardify tr:not(.fh-card):not(.fh-head) {
        display: block;
    }

    #tableDetailWrapper.fh-cardify tr:not(.fh-card):not(.fh-head) td,
    #tableDetailWrapper.fh-cardify tr:not(.fh-card):not(.fh-head) th {
        display: block;
        text-align: center;
    }

    /* ---- Pagination ------------------------------------------------------- */
    .pageActiveSpan,
    .acformWrapperPage a,
    .acformWrapperPage span {
        min-width: 38px;
        min-height: 38px;
        box-sizing: border-box;
        text-align: center;
    }

    /* ---- Dashboard tiles --------------------------------------------------- */
    .top_box {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 12px 0;
    }

    .top_box1 {
        margin: 12px 0;
    }

    .box1,
    .box23 {
        box-sizing: border-box;
        float: none;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
    }

    /* `.box88`, `.box24` and `.box22` are declared in Dashboard.aspx's own
       <style> block (450px/450px/400px, float:left), which the browser sees
       after this file. The extra `.right_side` wins on specificity. */
    .right_side .box88,
    .right_side .box24,
    .right_side .box22 {
        box-sizing: border-box;
        float: none;
        width: 100%;
        height: auto;
        margin: 0 0 10px 0;
    }

    /* Several tiles also carry inline widths (`style="width: 270px"` on the
       Aircraft tile, 275px on another). An inline style beats every class
       rule, overflows the grid track, and visually swallows the gutter —
       on phones the grid decides tile width, so strip them all. */
    .right_side .top_box > div,
    .right_side .top_box1 > div {
        width: auto !important;
        box-sizing: border-box;
        float: none;
    }

    /* `.top_box` is a grid (gap handles spacing); `.top_box1` is normal flow,
       so its tiles need their own gap. */
    .right_side .top_box1 > div {
        margin: 0 0 10px 0;
    }

    /* The wide revenue tile reads better spanning the two-column grid. */
    .right_side .top_box > .box88 {
        grid-column: 1 / -1;
    }

    /* Tile headings are sized for a 450px card. */
    .box1 h3, .box23 h3, .box88 h3, .box22 h3, .box24 h3 {
        font-size: 15px;
        word-break: break-word;
    }

    .box1 h2, .box23 h2, .box88 h2, .box22 h2, .box24 h2 {
        font-size: 20px;
        word-break: break-word;
    }

    .left_box,
    .right1_box,
    .right2_box {
        box-sizing: border-box;
        float: none;
        width: auto;
        margin: 12px 8px;
    }

    /* ---- Trip tabs --------------------------------------------------------- */
    .Triptabs .Triptabs-list {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
    }

    .Triptabs .Triptabs-list li {
        float: none;
        margin-right: 0;
        padding: 10px 12px;
    }

    /* ---- Login + OTP ------------------------------------------------------- */
    /* Style.css only stacks these at `max-width:415px and orientation:portrait`,
       which misses most phones in landscape and every 416-767px device. */
    .main_container_login {
        flex-direction: column;
        width: auto;
        height: auto;
        min-height: 0;
        margin: 16px;
    }

    .left_container {
        width: 100%;
        height: 180px;
        overflow: hidden;
        border-radius: 20px 20px 0 0;
    }

    .login_aircraftImg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .right_container {
        box-sizing: border-box;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0 4px;
    }

    .loginlogo {
        width: 70%;
        max-width: 240px;
    }

    .login_form {
        box-sizing: border-box;
        margin: 0;
        padding: 0 20px;
    }

    #input_pass {
        margin-top: 16px;
    }

    .login_btn {
        float: none;
        width: 100%;
        margin-top: 14px;
    }

    /* OTP screen: the two buttons sit in a flex row that overflows at 320px. */
    .otp_actions {
        display: flex;
        gap: 10px;
    }

    .otp_actions .login_btn {
        flex: 1 1 0;
    }

    /* `#footer` is `position: relative` with a fixed 2em height, so on a short
       viewport it lands on top of the form. */
    #footer {
        position: static;
        height: auto;
        margin: 18px 0 12px 0;
        padding: 0 16px;
        text-align: center;
        line-height: 1.5;
    }
}


/* ==========================================================================
   4. Very small phones — 360px and below
   ========================================================================== */
@media only screen and (max-width: 360px) {

    .top_box {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Two filters per row leaves ~165px per control; below that, stack them. */
    .right_side .acSearchinputDiv {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    .right_side .acSearchinputDiv > label {
        min-height: 0;
    }

    #tableDetailWrapper.fh-cardify tr.fh-card td::before {
        flex-basis: 50%;
    }

    .fh-topbar-title {
        font-size: 13px;
    }
}
