/* ═══════════════════════════════════════════════════════════════
   Drive Me — Responsive layer
   Loaded LAST, on every admin page, so it wins over both CoreUI's
   style.css and the per-page driveme.css / inline <style> blocks.

   The admin portal is used mostly on a phone. Everything below is
   written as overrides: desktop keeps the layout it has, and each
   breakpoint only relaxes what actually breaks.

   Breakpoints match CoreUI/Bootstrap 5 so the sidebar's own
   991.98px mobile switch and these rules never disagree:
     <= 991.98px  tablet and below  (sidebar becomes an overlay)
     <= 767.98px  large phone
     <= 575.98px  phone
═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   §1  DOCUMENT — never let a page scroll sideways
────────────────────────────────────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* Anything that cannot fit scrolls inside itself instead of dragging
   the whole page with it. */
img, svg, video, canvas, iframe {
    max-width: 100%;
}

.table-responsive,
.dm-scroll-x {
    -webkit-overflow-scrolling: touch;
}


/* ──────────────────────────────────────────────────────────────
   §2  SHELL — sidebar, header, content well, footer
────────────────────────────────────────────────────────────── */

/* The sidebar is position:fixed at every size; below 992px CoreUI
   slides it off-canvas until .show. It has to sit above the sticky
   header, and its backdrop above the page but below itself. */
@media (max-width: 991.98px) {
    .sidebar {
        z-index: 1035;
    }

    .sidebar-backdrop {
        z-index: 1034;
    }

    /* An open sidebar on a phone should cover most of the screen but
       still leave enough of the page visible to be dismissable. */
    .sidebar:not(.sidebar-end) {
        --cui-sidebar-width: min(16rem, 82vw);
    }
}

/* The hamburger is the only way to reach navigation on a phone, so it
   gets a real touch target instead of an icon-sized one. */
.header-toggler {
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 991.98px) {
    .header > .container-fluid,
    .sidebar-header {
        min-height: 56px;
    }

    /* The avatar/bell dropdowns are anchored to the right edge and
       otherwise spill off a narrow screen. */
    .header-nav .dropdown-menu {
        max-width: calc(100vw - 24px);
    }
}

/* The page well. container-lg + px-4 costs 48px of a 360px screen. */
@media (max-width: 767.98px) {
    .body > .container-lg,
    .container,
    .container-fluid,
    .container-lg {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 575.98px) {
    .footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: .8rem;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .footer .ms-auto {
        margin-left: 0 !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   §3  PAGE HEADERS  (.dm-page-header and its Bootstrap equivalent)

   Both are "title on the left, a row of buttons on the right". On a
   phone that becomes "title, then the buttons underneath, each wide
   enough to hit".
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dm-page {
        padding: 12px 0;
    }

    .dm-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* The action cluster — the .d-flex.gap-2 sitting beside the title. */
    .dm-page-header > .d-flex {
        flex-wrap: wrap;
    }

    .dm-page-header .dm-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* ...except small icon-only buttons, which must stay square. */
    .dm-page-header .dm-btn-icon {
        flex: 0 0 auto;
    }

    .dm-page-title {
        font-size: 1.15rem;
        word-break: break-word;
    }

    /* The Bootstrap-era headers on Orders / Settings / Admins. */
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-wrap: wrap;
        gap: .75rem;
    }

    h2 {
        font-size: 1.35rem;
    }
}


/* ──────────────────────────────────────────────────────────────
   §4  CARDS
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dm-card-header,
    .card-header {
        flex-wrap: wrap;
        gap: 8px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .dm-card-body {
        padding: 14px;
    }

    .card-body {
        padding: 14px;
    }

    .dm-card-body .row > [class^="col-"],
    .dm-card-body .row > [class*=" col-"] {
        min-width: 0;
    }
}


/* ──────────────────────────────────────────────────────────────
   §5  BUTTONS — touch targets

   ~44px of height is what makes a control reliably tappable; that
   matters here more than density does.
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dm-btn,
    .btn {
        min-height: 40px;
    }

    .dm-btn-sm,
    .btn-sm {
        min-height: 34px;
    }

    .dm-btn-icon {
        width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .dm-act {
        width: 38px;
        height: 38px;
    }

    /* Button groups that would otherwise push the page wide. */
    .btn-group {
        flex-wrap: wrap;
    }
}


/* ──────────────────────────────────────────────────────────────
   §6  FORMS
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dm-input,
    .dm-select,
    .form-control,
    .form-select,
    textarea {
        font-size: 16px;   /* stops iOS Safari zooming in on focus */
    }

    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control {
        font-size: 16px;
        min-height: 38px;
    }

    /* The search box in every dm- table header is a fixed 230px. */
    .dm-table-search {
        width: 100%;
    }

    .input-group-text {
        min-width: auto !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   §7  TABLES

   A listing sits in an overflow-x:auto wrapper, but a width:100%
   table has nothing to overflow *with*: it compresses into unreadable
   columns instead of scrolling. What turns the wrapper on is letting
   the table size to its own content.

   `width: max-content` does that per table rather than by a fixed
   number, which matters because these pages mix six-column listings
   with two-column key/value tables — a blanket min-width would force
   the narrow ones to scroll for no reason. `min-width: 100%` keeps a
   table that fits stretched across the card as before.

   Every scrollable table in the dashboard is in one of these two
   wrappers: Bootstrap's .table-responsive, or .dm-scroll-x for the
   dm- design-system tables.
────────────────────────────────────────────────────────────── */
.dm-scroll-x {
    overflow-x: auto;
}

@media (max-width: 991.98px) {
    .table-responsive > table,
    .dm-scroll-x > table {
        width: max-content;
        min-width: 100%;
    }

    /* Orders index pins its column widths with table-layout:fixed,
       which ignores content sizing entirely unless released first. */
    .table-responsive > .table-fixed {
        table-layout: auto;
    }

    /* Authored column widths (width="22%", width="140") are sized for a
       desktop table that fills its card. Against content sizing a
       percentage is circular — the browser resolves it oddly and the
       column's text spills into its neighbour. Inside a scroller the
       content decides instead; that is the whole point of scrolling. */
    .table-responsive > table > * > tr > th[width],
    .table-responsive > table > * > tr > td[width],
    .dm-scroll-x > table > * > tr > th[width],
    .dm-scroll-x > table > * > tr > td[width] {
        width: auto;
    }

    /* The upper bound on all of the above. Without it one long address
       or error message sizes the whole table to itself and the reader
       is dragged through 2000px of mostly-empty row. Past this width a
       cell wraps instead of pushing — including mid-token, since the
       worst offenders are unbreakable strings like setting keys and
       URLs. */
    .table-responsive > table > * > tr > td,
    .table-responsive > table > * > tr > th,
    .dm-scroll-x > table > * > tr > td,
    .dm-scroll-x > table > * > tr > th {
        max-width: 60vw;
        overflow-wrap: anywhere;
    }

    /* driveme.css sets nowrap on dm- table cells, which would defeat
       the cap above by overflowing rather than wrapping. */
    .dm-scroll-x > .dm-table > * > tr > td {
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    .dm-table thead th,
    .table > thead > tr > th {
        padding-left: 12px;
        padding-right: 12px;
    }

    .table > :not(caption) > * > * {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    /* A region that scrolls sideways has to look like it does — on
       touch there is no hover to reveal a scrollbar, so the bar is
       always visible and the fading right edge hints at more. */
    .table-responsive,
    .dm-scroll-x {
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }

    .table-responsive::-webkit-scrollbar,
    .dm-scroll-x::-webkit-scrollbar {
        height: 6px;
        -webkit-appearance: none;
    }

    .table-responsive::-webkit-scrollbar-thumb,
    .dm-scroll-x::-webkit-scrollbar-thumb {
        background: var(--dm-slate-300, #CBD5E1);
        border-radius: 3px;
    }
}


/* ──────────────────────────────────────────────────────────────
   §8  PAGINATION
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
    }

    .pagination .page-link {
        padding: 6px 10px;
        min-width: 34px;
        text-align: center;
    }
}


/* ──────────────────────────────────────────────────────────────
   §9  MODALS
────────────────────────────────────────────────────────────── */

/* driveme.css zeroes `.dm-modal .modal-body` because its tabbed modals
   pad their own `.dm-tab-pane` instead. But those modals put the panes
   straight into `.modal-content` — no `.modal-body` in sight — so the
   only bodies that rule ever reaches are the plain-content ones, which
   it renders edge to edge: inputs and textareas touching the modal
   border with nothing between them. Padding restored here, at every
   width, since the bug is not a mobile-only one. */
.dm-modal .modal-body {
    padding: 20px 24px;
}

/* Near full-bleed on a phone: a centred dialog with wide margins
   wastes the only screen space these forms have. */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 8px;
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: none;
    }

    .modal-header,
    .dm-modal .modal-header {
        padding: 14px 16px;
    }

    .modal-body,
    .dm-modal .modal-body {
        padding: 16px;
    }

    .modal-footer,
    .dm-modal .modal-footer {
        padding: 12px 16px;
        gap: 8px;
    }

    /* Footer buttons side by side and full width, rather than a ragged
       right-aligned row that wraps unpredictably. */
    .modal-footer > .dm-btn,
    .modal-footer > .btn {
        flex: 1 1 0;
        margin: 0;
        justify-content: center;
    }

    /* Long forms must not push the footer off-screen. */
    .modal-content {
        max-height: calc(100dvh - 16px);
    }

    .modal-body,
    .dm-modal .modal-body {
        overflow-y: auto;
    }

    .dm-tab-pane {
        padding: 16px;
    }

    .dm-modal-tabs {
        padding: 0 12px;
    }
}


/* ──────────────────────────────────────────────────────────────
   §10  DOCUMENT MANAGER  (driver detail)
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dm-doc-layout {
        flex-direction: column;
        min-height: 0;
    }

    .dm-folder-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--dm-border);
        max-height: 190px;
        overflow-y: auto;
    }

    .dm-doc-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }

    .dm-doc-toolbar {
        flex-wrap: wrap;
    }
}


/* ──────────────────────────────────────────────────────────────
   §11  TOASTS
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .dm-toast-stack {
        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;
    }

    .dm-toast {
        width: 100%;
        min-width: 0;
    }
}


/* ──────────────────────────────────────────────────────────────
   §12  PAGE-LOCAL OVERRIDES

   Fixed pixel widths declared inside individual views. Collected here
   rather than edited in place so there is one file to read when a
   phone layout misbehaves.
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* drivers/index — capability chips */
    .cap-wrap {
        max-width: 180px;
    }

    /* drivers/show — a 170px label column leaves nothing for the value */
    .info-table th {
        width: 120px !important;
        font-size: .62rem;
    }

    /* rate_cards/edit + show */
    .rc-input-wrap {
        max-width: 100% !important;
    }

    .rc-group-head {
        position: static !important;
    }

    /* drivers/map */
    .leaflet-popup-content {
        margin: 10px 12px;
    }
}

@media (max-width: 575.98px) {
    /* Label above value, rather than two cramped columns. */
    .info-table,
    .info-table tbody,
    .info-table tr,
    .info-table th,
    .info-table td {
        display: block;
        width: 100% !important;
    }

    .info-table th {
        padding-bottom: 2px !important;
    }

    .info-table td {
        padding-top: 0 !important;
        padding-bottom: 11px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   §13  DASHBOARD

   The KPI row is col-sm-6 col-xl, which is two-up from 576px and a
   single stacked column below it. Two-up all the way down reads far
   better on a phone than one full-width card per screen.
────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .row > .col-sm-6.col-xl {
        flex: 0 0 auto;
        width: 50%;
    }

    .row.g-4 {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .75rem;
    }

    .card .fs-4 {
        font-size: 1.05rem !important;
    }

    .card-body .fa-2x {
        font-size: 1.35em;
    }

    /* The icon + number + label mini-widgets (row-cols-2 on a phone).
       A p-3 icon tile plus an uppercase label does not fit half of a
       360px screen, so the tile shrinks and the label is allowed to
       wrap instead of running past the card edge. */
    .card-body.d-flex.align-items-center {
        padding: .6rem !important;
    }

    .card-body.d-flex.align-items-center > .rounded {
        padding: .55rem !important;
        margin-inline-end: .55rem !important;
    }

    .card-body.d-flex.align-items-center .fa-2x {
        font-size: 1.2em;
    }

    .card-body.d-flex.align-items-center .fs-3 {
        font-size: 1.1rem !important;
    }

    /* Without min-width:0 a flex child refuses to shrink below its
       content, which is what pushes the label out of the card. */
    .card-body.d-flex.align-items-center > div {
        min-width: 0;
    }

    .card-body.d-flex.align-items-center .text-uppercase.small {
        font-size: .6rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767.98px) {
    /* Chart canvases are sized by Chart.js; capping the height keeps a
       phone from scrolling through one graph. */
    .c-chart-wrapper,
    .chart-wrapper {
        max-height: 260px;
    }
}


/* ──────────────────────────────────────────────────────────────
   §14  CANCELLATION NOTICE  (orders/show)
   Lives here because it is the same width-constrained banner at every
   size, and it is new with the cancellation-reason field.
────────────────────────────────────────────────────────────── */
.dm-cancel-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--dm-red-200, #FECACA);
    border-left: 4px solid var(--dm-danger, #EF4444);
    border-radius: 10px;
    background: var(--dm-danger-light, #FEF2F2);
}

.dm-cancel-note-icon {
    color: var(--dm-danger, #EF4444);
    font-size: .95rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.dm-cancel-note-body {
    min-width: 0;
}

.dm-cancel-note-head {
    font-weight: 700;
    font-size: .82rem;
    color: var(--dm-danger-text, #B91C1C);
    margin-bottom: 3px;
}

.dm-cancel-note-text {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--dm-txt-2, #334155);
    white-space: pre-line;
    overflow-wrap: anywhere;
}


/* ──────────────────────────────────────────────────────────────
   §15  UTILITIES for views to opt into
   (.dm-scroll-x is declared with the table rules in §7)
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dm-stack-mobile {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .dm-full-mobile {
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    .dm-only-mobile {
        display: none !important;
    }
}