/* ==========================================================================
   gc-responsive.css  -  the phone/tablet layer for the whole admin.
   Loaded LAST (after eastend-skin.css), so it wins ties without !important wars.

   The rules, in one place:
   1. The sidebar is ONE light panel at every width. Below 768px it is an off-canvas drawer.
   2. The page never scrolls sideways. Wide things scroll INSIDE their own box (tables) or wrap.
   3. A number never overflows its card: figures shrink to fit (container units + gc-responsive.js).
   4. Inputs are 16px on phones (iPhones zoom the page on smaller ones) and every tap target is >= 40px.
   5. Modals are full-width sheets on phones, footers stack.

   Utilities pages can use:  .gc-grid (auto-fit cards)  .gc-fit (shrink-to-fit number)
                             .gc-stack (table -> stacked cards on phones, labels from the header row)
                             .gc-hide-sm (hidden on phones)  .gc-only-sm (phones only)
   ========================================================================== */

:root {
    --gc-gutter: 12px;
    --gc-drawer-w: min(86vw, 300px);
}

/* ---------- 0. Never let the document scroll sideways ---------- */
html, body { max-width: 100%; }
body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
.page-wrapper, .container-fluid { min-width: 0; }

/* long words, emails, references and amounts break instead of pushing the card wider */
.card-body, .gc-panel-body, .gc-panel-row, .gc-stat, .gc-vcard, .gc-hero, td, th, .badge, .modal-body, .alert {
    overflow-wrap: anywhere;
}
.gc-panel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gc-panel-row .label { min-width: 0; flex: 1 1 auto; }
.gc-panel-row .value { min-width: 0; flex: 0 1 auto; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 1. Figures: shrink to fit, never overflow ---------- */
.gc-stat { min-width: 0; }
.gc-stat .stat-val,
.gc-hero-stat-val,
.gc-fit {
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    max-width: 100%;
    overflow-wrap: anywhere;      /* last resort when even the smallest size is too wide */
}
/* a narrow card in a 2-up phone grid gets a smaller figure; gc-responsive.js shrinks it further if it still does not fit */
.gc-stat .stat-val {
    font-size: clamp(.95rem, 4.8vw, 1.5rem) !important;
}
.gc-stat .stat-label,
.gc-stat .stat-sub { overflow-wrap: anywhere; line-height: 1.25; }
.gc-stat .stat-icon { max-width: 30%; overflow: hidden; }

/* codes (plates, licence and ID numbers, M-Pesa codes) always show in capitals */
input[name="vehicle_plate"],
input[name="plate"],
input[name="deal_vehicle_plate"],
input[name="customer_driving_license"],
input[name="customer_id_number"],
input[name="customer_guarantor_id"],
input[name="driver_license_number"],
input[name="driver_id_number"],
input[name="employee_national_id"],
input[name="employee_kra_pin"],
input[name="employee_nssf_no"],
input[name="employee_sha_no"],
input[name="mpesa_code"],
input[data-caps] { text-transform: uppercase; }

/* the summary row on a detail page's top card (Vehicle, Customer, Days booked...): normal-sized figures, not 1.5rem extra-bold */
.gc-hero-stat-val, .gc-hero-stat-val.gold { font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.3; letter-spacing: 0; }
.gc-hero-stats > div { min-width: 0; }
.gc-hero-stat-label { font-size: .7rem; letter-spacing: .06em; margin-bottom: 2px; }
/* no coloured line across the top of a card, anywhere */
.gc-hero > div[style*="height:3px"], .gc-hero > div[style*="height: 3px"] { display: none !important; }

/* ---------- 2. Cards and grids ---------- */
.gc-grid {
    display: grid;
    gap: var(--gc-gutter);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.gc-grid > * { min-width: 0; }

.card { min-width: 0; }
.gc-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ================================================================
   PHONES AND TABLETS IN PORTRAIT  (< 992px): the drawer
   ================================================================ */
@media (max-width: 991.98px) {

    /* ---- 1. the drawer: one light panel, same as the desktop sidebar ---- */
    .left-sidebar,
    .mini-sidebar .left-sidebar {
        position: fixed !important;
        top: 0 !important; bottom: 0 !important;
        left: calc(-1 * var(--gc-drawer-w) - 24px) !important;
        width: var(--gc-drawer-w) !important;
        height: 100% !important;
        background: #fff !important;
        border-right: 1px solid #e5e7eb !important;
        box-shadow: none;
        padding-top: 0 !important;
        z-index: 1060 !important;
        display: flex; flex-direction: column;
        transition: left .22s ease, box-shadow .22s ease;
        visibility: hidden;                      /* a closed drawer is not tabbable or readable */
    }
    .mini-sidebar.show-sidebar .left-sidebar,
    .show-sidebar .left-sidebar {
        left: 0 !important;
        visibility: visible;
        box-shadow: 0 0 0 100vmax rgba(17, 24, 39, .45);   /* the dimmed page behind it */
    }
    .left-sidebar .scroll-sidebar,
    .left-sidebar .sidebar-nav,
    .left-sidebar #main-scroll-sidebar {
        background: transparent !important;
        flex: 1 1 auto; min-height: 0;
        height: auto !important;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: calc(14px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom)) !important;
    }
    #sidebarnav { padding: 0 12px 24px !important; }

    /* the compact (mini) desktop rules hide labels - on a phone the drawer always shows them */
    .mini-sidebar .sidebar-nav .hide-menu,
    .mini-sidebar .sidebar-nav ul li.gc-nav-section .hide-menu,
    .mini-sidebar .sidebar-nav #sidebarnav > li > a .hide-menu,
    .mini-sidebar .sidebar-nav #sidebarnav > li > a .label {
        display: block !important;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul,
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul { position: static !important; width: auto !important; }
    .mini-sidebar .sidebar-nav ul li.gc-nav-section { display: list-item !important; padding: 18px 12px 6px; }
    .mini-sidebar .sidebar-nav ul li.gc-nav-section .hide-menu {
        display: block !important; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af;
    }
    .mini-sidebar .sidebar-nav ul li.gc-nav-section:first-child { padding-top: 10px; }
    .mini-sidebar .sidebar-nav #sidebarnav > li > a {
        width: auto !important; padding: 11px 12px !important; min-height: 44px; font-size: 15px;
        display: flex; align-items: center; gap: 12px;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a { background: #f3f4f6; }
    .sidebar-nav ul li a { min-height: 44px; display: flex; align-items: center; gap: 12px; margin-bottom: 0; }
    #sidebarnav > li { border-bottom: 0 !important; margin: 2px 0; }
    .mini-sidebar .sidebar-nav ul li.gc-nav-section { margin: 8px 4px 2px; padding: 14px 8px 4px; }

    body.show-sidebar { overflow: hidden; }

    /* ---- the shell: no sidebar column, so the bar and the page use the whole width ---- */
    .page-wrapper, .mini-sidebar .page-wrapper { margin-left: 0 !important; }
    .fix-header .topbar, .topbar { left: 0 !important; }
    .topbar .navbar-header { display: none !important; }            /* the logo block that sat above the sidebar column */
    .topbar .main-hamburger-menu, .topbar .nav-toggler { display: inline-flex !important; }
    .topbar .navbar-collapse { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ================================================================
   The theme turns every Bootstrap .d-flex into display:block below 1024px (themes/*/css/style.css), which collapses
   steppers, avatar + name rows and heading + button rows. Undo it everywhere.
   ================================================================ */
@media (max-width: 1023.98px) {
    .d-flex:not(.d-none) { display: flex !important; }
    .d-inline-flex:not(.d-none) { display: inline-flex !important; }
}

/* ================================================================
   PHONES  (< 768px): the rest of the page
   ================================================================ */
@media (max-width: 767.98px) {
    .container-fluid { padding-left: var(--gc-gutter) !important; padding-right: var(--gc-gutter) !important; }
    .page-titles { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
    .page-titles .row, .page-titles [class*="col-"] { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
    .page-titles .breadcrumb { flex-wrap: wrap; padding: 0; background: transparent; font-size: 12px; margin: 4px 0 0; }
    .page-titles .text-themecolor, .page-titles h3, .page-titles h4 { font-size: 17px; }
    .row { margin-left: -6px; margin-right: -6px; }
    .row > [class*="col"] { padding-left: 6px; padding-right: 6px; }
    .gc-stat-col { padding-left: 6px; padding-right: 6px; margin-bottom: 12px; }

    /* ---- cards ---- */
    .card { margin-bottom: 12px; border-radius: 10px; }
    .card-body { padding: 14px; }
    .card-header, .card-footer { padding: 10px 14px; }
    .gc-stat { padding: 14px 12px; min-height: 92px; border-radius: 12px; }
    .gc-stat .stat-icon { font-size: 1.8rem; right: 10px; bottom: 8px; }
    .gc-stat:hover { transform: none; }

    /* ---- filter bars and action rows stack and wrap ---- */
    .gc-filter-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; }
    /* pills wrap onto more rows instead of scrolling, so none is hidden off-screen */
    .gc-filter-bar .gc-pills { flex-wrap: wrap; gap: 6px; }
    .gc-pill { flex: 0 1 auto; }
    .gc-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .gc-filter-actions > * { flex: 1 1 100%; min-width: 0; }
    .gc-filter-actions form { display: flex !important; flex-wrap: wrap; gap: 8px; width: 100%; }
    .gc-filter-actions form > * { flex: 1 1 140px; min-width: 0; }
    .gc-filter-actions .btn, .gc-filter-actions input, .gc-filter-actions select { width: 100%; }
    .gc-filter-actions form .btn { flex: 1 1 100%; }

    /* page header buttons wrap instead of running off the edge */
    .page-titles .btn, .page-titles .btn-group { margin-top: 8px; }
    .btn-toolbar, .btn-group-responsive { flex-wrap: wrap; gap: 6px; }
    .list-page-actions, .page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

    /* ---- forms: 16px stops the iPhone zoom, 44px is a thumb ---- */
    input.form-control, select.form-control, textarea.form-control, .form-control-sm,
    input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="password"],
    input[type="date"], input[type="time"], input[type="search"], select, textarea {
        font-size: 16px !important;
    }
    .form-control, .form-control-sm, select.form-control { min-height: 42px; }
    textarea.form-control { min-height: 84px; }
    .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-sm, .btn-xs { min-height: 36px; padding-left: 12px; padding-right: 12px; }
    .form-group { margin-bottom: 14px; }
    .form-group.row > [class*="col-"], .form-group .row > [class*="col-"] { margin-bottom: 6px; }
    .form-group.row > label, .form-group.row > .col-form-label { text-align: left !important; }
    .select2-container { width: 100% !important; max-width: 100%; }
    .select2-container .select2-selection--single { min-height: 42px; display: flex; align-items: center; }
    .select2-dropdown { max-width: calc(100vw - 24px); }
    .select2-search__field { font-size: 16px !important; }
    .input-group { flex-wrap: nowrap; }
    .input-group > .form-control { min-width: 0; }

    /* ---- modals: a full-width sheet, footer buttons stack ---- */
    .modal-dialog, .modal-dialog.modal-sm, .modal-dialog.modal-lg, .modal-dialog.modal-xl {
        margin: 8px !important; max-width: none !important; width: auto !important;
    }
    /* The sheet is as tall as the screen the person can really see (100dvh leaves out the browser's address and tool bars,
       plain 100vh does not, which pushed the Save / Next buttons below the visible edge). The form scrolls inside; the buttons stay put. */
    .modal-content { border-radius: 12px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); display: flex; flex-direction: column; }
    .modal-body { flex: 1 1 auto; padding: 12px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; }
    .modal-header { flex: 0 0 auto; padding: 10px 14px; }
    .modal-footer { flex: 0 0 auto; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); flex-wrap: nowrap; gap: 8px; box-shadow: 0 -6px 12px -8px rgba(0, 0, 0, .35); }
    .modal-footer .btn { flex: 1 1 0; min-width: 0; min-height: 46px; margin: 0; padding-left: 8px; padding-right: 8px; }

    /* shorter forms in pop-ups: label right above the box, tighter gaps, so a long form (a booking) needs far less scrolling */
    #commonModal .modal-body .form-group, #commonModal .modal-body .form-group.row { margin-bottom: 9px; }
    #commonModal .modal-body .form-group.row > label, #commonModal .modal-body .form-group > label { margin-bottom: 2px; padding-top: 0; padding-bottom: 0; font-size: 12px; line-height: 1.25; }
    #commonModal .modal-body .form-control, #commonModal .modal-body .form-control-sm, #commonModal .modal-body select.form-control { min-height: 40px; }
    #commonModal .modal-body textarea.form-control { min-height: 64px; }
    #commonModal .modal-body > p, #commonModal .modal-body #js-rental-modal > p { margin-bottom: 8px; }
    /* the grey hint lines under fields are hidden on phones (the M-Pesa code help stays: it says what to type) */
    #commonModal .gc-step small.text-muted:not(.js-pay-code-help), #commonModal .gc-step .form-text:not(.js-pay-code-help) { display: none; }
    #commonModal #gc-vw-progress { margin-bottom: 10px !important; }
    #commonModal #gc-vw-progress .gc-vw-num { width: 24px; height: 24px; line-height: 24px; font-size: 12px; }
    #commonModal #gc-vw-progress .gc-vw-label { font-size: 10px; margin-top: 2px; }

    /* ---- tables: scroll inside their box, never the page ---- */
    .table-responsive, .gc-table-scroll { border: 0; }
    table.table th, table.table td { white-space: normal; }
    table.table td, table.table th { padding: 8px 10px; }
    .dataTables_wrapper { overflow-x: auto; }

    /* stacked list: each row becomes a card. Labels come from the header row (gc-responsive.js).  */
    table.gc-stack, table.gc-stack tbody, table.gc-stack tr, table.gc-stack td { display: block; width: 100%; }
    table.gc-stack thead { display: none; }
    table.gc-stack tr {
        background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; margin: 0 0 10px; padding: 6px 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }
    table.gc-stack td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
        border: 0 !important; border-bottom: 1px dashed #eef0f2 !important; padding: 8px 0 !important; text-align: right;
    }
    table.gc-stack td:last-child { border-bottom: 0 !important; }
    table.gc-stack td::before {
        content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left;
        font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9ca3af;
    }
    table.gc-stack td:not([data-label])::before, table.gc-stack td[data-label=""]::before { content: none; }
    table.gc-stack td.gc-stack-title { display: block; text-align: left; font-weight: 600; font-size: 15px; }
    table.gc-stack td.gc-stack-title::before { content: none; }
    table.gc-stack td .btn, table.gc-stack td a.btn { margin-left: 4px; }

    /* filter bar: pills and actions take the full row (the skin's margin-left:auto stopped the stretch) */
    .gc-filter-bar { min-width: 0; }
    .gc-filter-bar .gc-pills { width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; }
    .gc-filter-bar .gc-filter-actions { margin-left: 0 !important; width: 100%; }
    .gc-filter-bar { flex-wrap: nowrap; }

    /* breadcrumb links are a thumb target too */
    .page-titles .breadcrumb a { display: inline-block; padding: 8px 0; }

    /* the skin beats the shared field height inside modals */
    .modal .form-control, .modal .form-control-sm, .modal select.form-control { min-height: 44px; }
    .modal .modal-body { padding: 14px !important; }

    /* a toggle pair marked .hidden / .d-none must stay hidden even though .btn is inline-flex here */
    .btn.hidden, .btn.d-none { display: none !important; }

    /* card header: icon and title sit together on the left, any action goes to the right */
    .gc-panel-head > i:first-child + * { margin-right: auto; }

    .gc-hide-sm { display: none !important; }
}
@media (min-width: 768px) { .gc-only-sm { display: none !important; } }

/* very narrow phones */
@media (max-width: 400px) {
    :root { --gc-gutter: 10px; }
    .gc-stat { padding: 12px 10px; }
    .gc-stat .stat-label { font-size: .6rem; letter-spacing: .05em; }
}

/* tablets: two to three cards across, nothing fixed-width */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-fluid { padding-left: 16px; padding-right: 16px; }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - 32px); }
}

/* respect people who asked for less motion */
@media (prefers-reduced-motion: reduce) {
    .left-sidebar, .gc-stat { transition: none !important; }
}

/* ---- phones: list tables keep their desktop rows; the table scrolls sideways instead of turning into cards ---- */
@media (max-width: 767px) {
    html body table.gc-stack { display: block !important; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    html body table.gc-stack thead { display: table-header-group !important; }
    html body table.gc-stack tbody { display: table-row-group !important; width: auto !important; }
    html body table.gc-stack tfoot { display: table-footer-group !important; }
    html body table.gc-stack tr { display: table-row !important; width: auto !important; background: transparent; border: 0 !important; border-radius: 0; margin: 0; padding: 0 !important; box-shadow: none !important; overflow: visible; }
    html body table.gc-stack th,
    html body table.gc-stack td,
    html body table.gc-stack td.gc-stack-title,
    html body table.gc-stack td.gc-stack-wide,
    html body table.gc-stack td.gc-stack-actions,
    html body table.gc-stack td.a2-actions { display: table-cell !important; width: auto !important; max-width: none !important; text-align: left !important; white-space: nowrap !important; overflow-wrap: normal !important; padding: 8px 10px !important; border-bottom: 1px solid var(--dk-line, #eef0f2) !important; vertical-align: middle; }
    html body table.gc-stack td.text-right, html body table.gc-stack th.text-right { text-align: right !important; }
    html body table.gc-stack td::before { content: none !important; display: none !important; }
    html body table.gc-stack td .a2-cell { text-align: left !important; }
    html body table.gc-stack td.gc-stack-actions:not(:has(.btn)) { display: table-cell !important; }
    html body table.gc-stack td.gc-stack-actions .list-table-action, html body table.gc-stack td .list-table-action { display: inline-flex; flex-wrap: nowrap; gap: 6px; }
    html body .a2-list .card, html body .card.a2-list, html body .gc-fl .gc-stack-card { background: var(--dk-surface, #fff) !important; border: 0 !important; box-shadow: var(--ox-shadow, 0 1px 3px rgba(0,0,0,.5)) !important; border-radius: 4px; }
    html body table.gc-stack { border: 0 !important; }
    html body table.gc-stack tr:last-child td { border-bottom: 0 !important; }
}

/* ---- phone drawer: narrower, no white lines, logo centred at the top ---- */
.gc-drawer-logo { display: none; }
@media (max-width: 767px) {
    :root { --gc-drawer-w: min(74vw, 255px); }
    html body .left-sidebar { border: 0 !important; }
    html body .left-sidebar *,
    html body .left-sidebar *::before,
    html body .left-sidebar *::after { border-color: transparent !important; border-top-width: 0 !important; border-bottom-width: 0 !important; border-left-width: 0 !important; border-right-width: 0 !important; }
    html body .left-sidebar hr { display: none !important; }
    html body .left-sidebar .gc-drawer-logo { display: flex; justify-content: center; align-items: center; padding: 6px 16px 14px; }
    html body .left-sidebar .gc-drawer-logo img { max-width: 70%; max-height: 56px; width: auto; height: auto; object-fit: contain; }
}

/* ---- phone drawer, round 2 ---- */
@media (max-width: 767px) {
    html body .left-sidebar { background: var(--dk-surface, #313131) !important; overflow: hidden; }
    html body .left-sidebar .scroll-sidebar { width: 100% !important; box-sizing: border-box; background: transparent !important; }
    html body .left-sidebar, html body .left-sidebar .scroll-sidebar, html body .left-sidebar .sidebar-nav { outline: 0 !important; }

    /* logo: a soft rounded card instead of a white slab across the top */
    html body .left-sidebar .gc-drawer-logo { margin: 12px 14px 8px; padding: 8px 12px; background: #fff; border-radius: 10px; }
    html body .left-sidebar .gc-drawer-logo img { max-width: 100%; max-height: 52px; }

    /* breathing room between a category heading and its first module */
    html body .left-sidebar .sidebar-nav ul li.gc-nav-section { padding-bottom: 10px !important; margin-bottom: 4px !important; }

    /* scrollbar: right side, short, thin, translucent */
    html body .left-sidebar .scroll-sidebar.ps .ps__rail-y,
    html body .left-sidebar .scroll-sidebar .ps__rail-y {
        left: auto !important; right: 2px !important; width: 4px !important; background: transparent !important;
        margin: 110px 0 60px !important; opacity: 1 !important;
    }
    html body .left-sidebar .ps__thumb-y { right: 0 !important; width: 4px !important; background: rgba(255, 255, 255, .22) !important; border-radius: 4px; }
    html body .left-sidebar .ps__rail-y:hover .ps__thumb-y, html body .left-sidebar .ps__rail-y.ps--clicking .ps__thumb-y { background: rgba(255, 255, 255, .35) !important; width: 4px !important; }

    /* blur the page behind the open drawer */
    html body.show-sidebar .page-wrapper,
    html body.show-sidebar .topbar { filter: blur(5px); }
    html body .left-sidebar { box-shadow: none; }
    html body.show-sidebar .left-sidebar { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
}

/* phones: tighter gap between the top bar and the page heading */
@media (max-width: 767px) {
    html body .page-wrapper > .container-fluid { padding-top: 0 !important; }
    html body .page-titles { padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 10px !important; }
    html body .page-titles > div { padding-top: 0 !important; padding-bottom: 0 !important; }
    html body .page-titles .row { min-height: 0 !important; }
}

/* ---- phone drawer, round 3 ---- */
@media (max-width: 767px) {
    :root { --gc-drawer-w: min(64vw, 232px); }
    /* logo strip: exactly the height of the top bar, full width */
    html body .left-sidebar .gc-drawer-logo { height: var(--ee-topbar, 70px); box-sizing: border-box; margin: 0 !important; padding: 6px 14px !important; border-radius: 0 !important; background: #fff; }
    html body .left-sidebar .gc-drawer-logo img { max-height: 100%; max-width: 100%; }
    /* the blurred page fades out at its edges; keep a dark base behind it so no pale line shows beside the drawer */
    html body.show-sidebar, html body.show-sidebar #main-wrapper { background: var(--dk-page, #2a2a2a) !important; }
}

/* ---- phone drawer, round 4 ---- */
@media (max-width: 767px) {
    /* the logo file is transparent; the white was a background this stylesheet added */
    html body .left-sidebar .gc-drawer-logo { background: transparent !important; }
    /* full height even when the phone's address bar moves, and a dark ring so no pale hairline shows at its edge or foot */
    html body .left-sidebar { height: 100vh !important; height: 100dvh !important; width: var(--gc-drawer-w) !important; background: var(--dk-surface, #313131) !important; }
    html body.show-sidebar .left-sidebar { box-shadow: 0 0 0 1px var(--dk-surface, #313131), 0 0 0 100vmax rgba(0, 0, 0, .35) !important; }
    html body .left-sidebar .scroll-sidebar, html body .left-sidebar #main-scroll-sidebar { min-height: 100%; background: transparent !important; padding-bottom: 40px !important; }
    html body .left-sidebar .sidebar-nav, html body .left-sidebar #sidebarnav { background: transparent !important; }
    /* smaller module text */
    html body .mini-sidebar .sidebar-nav #sidebarnav > li > a, html body .sidebar-nav #sidebarnav > li > a { font-size: 13.5px !important; min-height: 40px; }
    html body .sidebar-nav #sidebarnav > li > a .hide-menu { font-size: 13.5px !important; }
    html body .sidebar-nav ul li.gc-nav-section .hide-menu { font-size: 10px !important; }
}

/* phone drawer: the expand arrow on menus with sub-items (Team) is drawn with borders, so give them back */
@media (max-width: 767px) {
    html body .left-sidebar .sidebar-nav .has-arrow::after {
        display: block !important;
        border-style: solid !important; border-color: rgba(255, 255, 255, .45) !important;
        border-width: 1px 0 0 1px !important; border-bottom-width: 0 !important; border-right-width: 0 !important;
    }
    html body .left-sidebar .sidebar-nav ul.collapse.in, html body .left-sidebar .sidebar-nav ul.collapse.show { display: block !important; }
    html body .left-sidebar .sidebar-nav ul.collapse > li > a { padding-left: 52px !important; font-size: 13px !important; min-height: 38px; }
}

/* touch screens: a menu item must act on the first tap. Hover styles that change on touch make phone browsers
   swallow that tap (they treat it as "show the hover state"), so on touch the hover look is the normal look. */
@media (hover: none), (max-width: 767px) {
    html body .left-sidebar .sidebar-nav ul li a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 255, 255, .08); transition: none !important; }
    html body .left-sidebar .sidebar-nav #sidebarnav > li:hover > a,
    html body .left-sidebar .sidebar-nav #sidebarnav > li.has-submenu:hover > a,
    html body .left-sidebar .sidebar-nav ul li a:not(.active):hover { background: transparent !important; width: auto !important; color: inherit !important; }
    html body .left-sidebar .sidebar-nav ul li a:not(.active):hover .hide-menu,
    html body .left-sidebar .sidebar-nav ul li a:not(.active):hover i,
    html body .left-sidebar .sidebar-nav ul li a:not(.active):hover .gc-ico { color: #c4bfba !important; -webkit-text-fill-color: #c4bfba !important; background: transparent !important; }
    html body .left-sidebar .sidebar-nav ul li a.active:hover { background: rgba(255, 255, 255, .1) !important; }
    html body .left-sidebar .sidebar-nav ul li a .waves-ripple { display: none !important; }
}

/* phones: Communications / Media lists get the same card frame and desktop-style scrolling rows as Customers */
@media (max-width: 767px) {
    html body .cm-stack-card, html body .ml-stack-card { background: var(--dk-surface, #fff) !important; border: 0 !important; border-radius: 4px; box-shadow: var(--ox-shadow, 0 1px 3px rgba(0,0,0,.5)) !important; }
    html body .cm-stack-card > .card-body { padding: 0 !important; }
    html body .cm-stack-card .table-responsive, html body .ml-stack-card .table-responsive { overflow: visible; }
    html body table.gc-stack td.cm-actions, html body table.gc-stack td.ml-row-actions { display: table-cell !important; flex-wrap: nowrap; text-align: right !important; padding-top: 8px !important; }
    html body table.gc-stack td.cm-actions > a, html body table.gc-stack td.cm-actions > form, html body table.gc-stack td.cm-actions > button,
    html body table.gc-stack td.ml-row-actions > .btn { display: inline-block; flex: none; margin: 0 2px; }
    html body table.gc-stack td.cm-actions .btn { width: auto; }
    html body table.gc-stack td.text-nowrap, html body table.gc-stack td .text-nowrap { white-space: nowrap !important; }
    html body table.gc-stack td { overflow-wrap: normal !important; }
}

/* phones: long text cells (message preview, template wording) wrap inside a fixed width instead of stretching the row */
@media (max-width: 767px) {
    html body table.gc-stack td[style*="max-width"] { white-space: normal !important; min-width: 240px; max-width: 300px !important; overflow-wrap: anywhere !important; }
}