:root {
    --brand-blue: #1a5fb4;
    --brand-green: #2ec27e;
    --brand-purple: #5e3a9e;
    --sidebar-width: 250px;
}

/* System-wide size adjustment: started at a 10% reduction (zoom: 0.9),
   then increased 5% from that (0.9 × 1.05 = 0.945) per a follow-up
   request — net effect is roughly 94.5% of the original default size.
   `zoom` (not a root `font-size` change, not a CSS `transform`) is used
   deliberately: it scales literal pixel values everywhere — Bootstrap's
   rem-based type, every hardcoded `font-size:Npx` inline style scattered
   across the app's pages, icons, and paddings — as a single, uniform
   scale applied before layout, unlike a root font-size change (which
   only affects rem/em-based sizing) or a CSS transform (which breaks
   `position: fixed` children like the sidebar). Supported in
   Chrome/Edge/Safari and Firefox 126+; older Firefox simply renders at
   100% instead of erroring.

   Root font-size: separate from the zoom above, and solving a
   different problem. `zoom` rescales everything by the same fixed
   ratio, so it can never change how big generic/default text (plain
   body copy, unstyled table cells, Bootstrap's own rem-based buttons,
   inputs, and headings — none of which carry an explicit font-size in
   this file) reads *relative to* the explicit 12.5px table-header
   size elsewhere in this file — that ratio (16px ÷ 12.5px) stays fixed
   under any zoom value. Setting the root `font-size` instead brings
   that rem-inherited "everywhere else" text down to sit close to the
   table-header baseline, with a floor of +5%: 12.5 × 1.05 = 13.125px.
   Because `zoom` multiplies both this value and the table header's
   12.5px by the same factor, that 5%-or-more margin holds regardless
   of the zoom level above. Elements with their own hardcoded px
   font-size (nav links, badges, stat-card numbers, etc.) are already
   at or below this baseline and are intentionally left untouched.
   Bumped up another 5% per a follow-up request: 13.125 × 1.05 =
   13.78125px. */
html {
    zoom: 0.945;
    font-size: 13.78125px;
}

body {
    background: #f4f6f9;
    font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: #2b2b33;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #0f2a52 0%, #1a5fb4 55%, #2ec27e 100%);
    color: #fff;
    z-index: 1030;
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
}
/* Everything above the fixed Logout row lives in this scrollable pane —
   Logout itself (.sidebar-footer, below) sits outside it so it never
   moves: opening/scrolling any menu slides underneath it instead. */
.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.12);
}
.sidebar-footer a.nav-link { border-left: 3px solid transparent; }
.sidebar-footer a.nav-link:hover, .sidebar-footer a.nav-link.active {
    background: rgba(255,255,255,.12);
    border-left-color: #fff;
    color: #fff;
}
.sidebar .brand {
    display: flex; align-items: center; gap: 13px;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.sidebar .brand img { width: 58px; height: 58px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; flex-shrink: 0; }
.sidebar .brand-text { font-weight: 700; font-size: 15px; line-height: 1.2; }
.sidebar .brand-text small { display:block; font-weight: 400; opacity: .8; font-size: 11px; }

.sidebar .nav-section-title {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .06em;
    opacity: .65;
    padding: 14px 18px 4px;
}
.sidebar .nav-section-toggle {
    text-transform: uppercase;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    opacity: .85;
    padding: 13px 20px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    user-select: none;
    border-top: 1px solid rgba(255,255,255,.1);
    /* Clearly mark this as a parent item with children, distinct from a
       plain leaf .nav-link: a subtle tinted background plus the chevron
       below (visible at all times, not just on hover). */
    background: rgba(255,255,255,.05);
}
.sidebar .nav-section-toggle:hover { opacity: 1; background: rgba(255,255,255,.1); }
.sidebar .nav-section-toggle .group-ico {
    width: 15px;
    text-align: center;
    font-size: 13px;
    color: #f5a623;
    flex-shrink: 0;
}
.sidebar .nav-section-toggle span {
    flex: 1;
}
.sidebar .nav-section-toggle .toggle-icon {
    font-size: 12px;
    flex-shrink: 0;
    opacity: .85;
    transition: transform .2s ease;
}
.sidebar .nav-section-toggle.collapsed .toggle-icon {
    transform: rotate(-90deg);
}
.sidebar a.nav-link {
    color: rgba(255,255,255,.9);
    padding: 10px 18px;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
}
.sidebar a.nav-link:hover, .sidebar a.nav-link.active {
    background: rgba(255,255,255,.12);
    border-left-color: #fff;
    color: #fff;
}
.sidebar a.nav-link i { width: 18px; text-align: center; }
/* Links nested inside a collapsible group are indented further than the
   group header above them, so the grouping reads clearly at a glance
   instead of every row sitting flush against the same left edge. */
.sidebar .collapse > a.nav-link {
    padding-left: 34px;
    font-size: 14px;
}
.sidebar .collapse > a.nav-link i { width: 16px; font-size: 13px; }
/* Nested submenu (e.g. Expenses under Accounting, Warehouse under
   Inventory) — a second level of collapse inside a collapse, indented
   further still so the hierarchy stays readable at a glance. Keeps the
   same "has children" background tint and visible chevron as a
   top-level group toggle, just smaller/indented, so it's unmistakably
   still an expandable parent and not a plain link. */
.sidebar .collapse .nav-section-toggle {
    padding-left: 34px;
    font-size: 12.5px;
    margin-top: 2px;
    border-top: none;
    background: rgba(255,255,255,.08);
}
.sidebar .collapse .nav-section-toggle:hover { background: rgba(255,255,255,.14); }
.sidebar .collapse .collapse > a.nav-link {
    padding-left: 50px;
    font-size: 13.5px;
}

.main-wrap {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.topbar {
    background: #fff;
    padding: 12px 22px;
    border-bottom: 1px solid #e6e8ee;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1020;
}
/* Page locator (breadcrumbs) — sits where the plain page title used to,
   so at a glance it's clear which section/sub-section the current page
   belongs to, not just its own name. */
.page-breadcrumb { min-width: 0; }
.page-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 13px;
    color: #98a2b3;
    padding: 0;
    margin: 0;
}
.page-breadcrumb .breadcrumb-item { color: #98a2b3; }
.page-breadcrumb .breadcrumb-item a { color: #667085; text-decoration: none; }
.page-breadcrumb .breadcrumb-item a:hover { color: var(--brand-blue); }
.page-breadcrumb .breadcrumb-item.active { color: #101828; font-weight: 600; }
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #cbd2dc; }
/* Extra bottom padding so the last bit of page content never sits
   underneath the fixed .app-footer strip below. */
.content { padding: 22px; padding-bottom: 54px; flex: 1; }

/* Thin fixed footer bar for the main content area, aligned with the
   sidebar's fixed Logout row (.sidebar-footer) so both sit at the same
   height across the whole app. Page content scrolls up and slides
   underneath it rather than being pushed above it. */
.app-footer {
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 1015;
    background: #fff;
    border-top: 1px solid #e6e8ee;
    padding: 10px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11.5px;
    color: #667085;
}
.app-footer a { color: #1a5fb4; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }

.card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(20,30,60,.06); }
.stat-card { border-radius: 14px; color: #fff; padding: 20px; position: relative; overflow: hidden; }
a.stat-card-link { display: block; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.stat-card-link:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
a.stat-card-link:hover .stat-card { filter: brightness(1.06); }
.stat-card.blue { background: linear-gradient(135deg, #1a5fb4, #2a7de1); }
.stat-card.green { background: linear-gradient(135deg, #1f9d5f, #2ec27e); }
.stat-card.purple { background: linear-gradient(135deg, #4b2d81, #5e3a9e); }
.stat-card.red { background: linear-gradient(135deg, #b0233b, #e4455f); }
.stat-card h3 { font-size: 26px; font-weight: 700; margin-bottom: 2px; }
.stat-card .label { opacity: .9; font-size: 13px; }
.stat-card i.bg-icon { position: absolute; right: 12px; top: 10px; font-size: 46px; opacity: .25; }

.badge-success { background: #d7f5e6; color: #1a7a4c; }
.badge-secondary { background: #eceef1; color: #555; }
.badge-warning { background: #fff3cd; color: #8a6300; }
.badge-info { background: #d9edf7; color: #2470a0; }
.badge-primary { background: #dbe6fb; color: #1a5fb4; }
.badge-danger { background: #fbdada; color: #a11d2d; }
.badge { font-weight: 600; padding: 5px 10px; border-radius: 20px; font-size: 11.5px; }

.table thead th { background: #f7f8fb; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: #666; border-bottom: none; }
.table td, .table th { vertical-align: middle; }

.btn-brand { background: var(--brand-blue); border-color: var(--brand-blue); color:#fff; }
.btn-brand:hover { background: #144a8d; color: #fff; }

.section-title { font-weight: 700; font-size: 20px; margin-bottom: 4px; }
.section-sub { color: #888; font-size: 13.5px; margin-bottom: 20px; }

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-wrap { margin-left: 0; }
    .app-footer { left: 0; }
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 25, 45, .45);
    z-index: 1025;
}
.sidebar-backdrop.show {
    display: block;
}

.dropdown-toggle-no-caret::after {
    display: none;
}

/* Print / Document templates */
.doc-paper {
    background: #fff; max-width: 800px; margin: 0 auto; padding: 40px;
    box-shadow: 0 0 15px rgba(0,0,0,.08); border-radius: 6px;
}
.doc-header { display:flex; justify-content: space-between; align-items:flex-start; border-bottom: 3px solid var(--brand-blue); padding-bottom: 16px; margin-bottom: 20px; }
.doc-header img { height: 60px; }
.doc-title { font-size: 26px; font-weight: 800; color: var(--brand-blue); letter-spacing: .04em; }
@media print {
    .no-print { display: none !important; }
    .sidebar, .topbar, .app-footer { display: none !important; }
    .main-wrap { margin-left: 0 !important; }
    body { background: #fff; }
    .doc-paper { box-shadow: none; }
    .pwa-fab { display: none !important; }
}

/* DataTables export/print buttons — solid fill with white text so they're
   always readable regardless of what background they sit on */
.dt-buttons .btn,
.dt-button {
    background: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}
.dt-buttons .btn:hover,
.dt-button:hover {
    background: #144a8d !important;
    border-color: #144a8d !important;
    color: #fff !important;
}
.dt-buttons .btn i,
.dt-button i {
    color: #fff !important;
}

/* Floating "Install App" button — fixed to the viewport so it's always
   reachable regardless of scroll position, sitting above the sidebar
   and topbar but below Bootstrap modals (z-index 1050+). */
.pwa-fab {
    position: fixed;
    right: 22px;
    /* Sits just above the fixed .app-footer strip so the two never overlap. */
    bottom: 62px;
    z-index: 1040;
    display: none;
    align-items: center;
    gap: 9px;
    border: none;
    border-radius: 999px;
    background: #f5a623;
    color: #241605;
    padding: 13px 20px 13px 16px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(245, 166, 35, .4);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pwa-fab i { font-size: 16px; }
.pwa-fab:hover {
    background: #e0951a;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(245, 166, 35, .5);
    color: #241605;
    animation-play-state: paused;
}
.pwa-fab.show {
    display: inline-flex;
    animation: pwaFabPulse 2.2s ease-in-out infinite;
}
@keyframes pwaFabPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(245, 166, 35, .4), 0 0 0 0 rgba(46, 194, 126, .75); }
    50% { box-shadow: 0 6px 20px rgba(245, 166, 35, .4), 0 0 0 12px rgba(46, 194, 126, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .pwa-fab.show { animation: none; }
}
@media (max-width: 576px) {
    .pwa-fab { right: 16px; bottom: 58px; padding: 10px 14px; font-size: 12.5px; }
    .pwa-fab i { font-size: 14px; }
}

/* ------------------------------------------------------------------
   Drag-and-drop marketing template builder (platform/marketing_templates.php)
   ------------------------------------------------------------------ */
.palette-block {
    background: #f7f8fb;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: grab;
    font-size: 13.5px;
    color: #344054;
    user-select: none;
    transition: background .15s ease, border-color .15s ease;
}
.palette-block:hover { background: #eef4fc; border-color: var(--brand-blue); }
.palette-block:active { cursor: grabbing; }
.palette-block i { color: var(--brand-blue); width: 16px; text-align: center; }

.builder-canvas {
    border: 2px dashed #d7dce3;
    border-radius: 10px;
    min-height: 320px;
    padding: 14px;
    background: #fbfbfd;
}
.builder-empty {
    color: #98a2b3;
    font-size: 13px;
    text-align: center;
    padding: 60px 20px;
}
.builder-row {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: grab;
}
.builder-row:active { cursor: grabbing; }
.builder-row-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f7f8fb;
    border-bottom: 1px solid #eceef1;
    border-radius: 8px 8px 0 0;
    font-size: 11px;
}
.builder-drag-handle { color: #98a2b3; cursor: grab; }
.builder-row-label { text-transform: uppercase; letter-spacing: .04em; color: #667085; font-weight: 600; flex: 1; }
.builder-row-actions { display: flex; gap: 4px; }
.builder-icon-btn {
    border: none; background: none; color: #667085;
    width: 24px; height: 24px; border-radius: 5px; font-size: 11px;
    cursor: pointer;
}
.builder-icon-btn:hover { background: #eceef1; }
.builder-row-body { padding: 14px; }
.builder-editable {
    outline: none;
    border: 1px dashed transparent;
    border-radius: 4px;
    padding: 2px 4px;
}
.builder-editable:hover, .builder-editable:focus { border-color: #c7d2e0; background: #fbfdff; }
.builder-heading { font-size: 20px; font-weight: 700; color: #101828; }
.builder-paragraph { font-size: 14px; color: #344054; line-height: 1.6; }
.builder-button-preview {
    display: inline-block;
    background: var(--brand-blue);
    color: #fff;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 13.5px;
}
.builder-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; margin-bottom: 2px; }
.builder-input { font-size: 12.5px; }
.builder-image-preview { max-width: 100%; max-height: 160px; border-radius: 6px; display: block; }
.builder-image-placeholder {
    background: #f2f4f7; border-radius: 6px; padding: 30px; text-align: center; color: #98a2b3; font-size: 12.5px;
}
.builder-divider-preview { border: none; border-top: 1px solid #d7dce3; margin: 6px 0; }
.builder-spacer-preview {
    height: 32px; display: flex; align-items: center; justify-content: center;
    color: #c7ccd4; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    border: 1px dashed #e4e7ec; border-radius: 6px;
}


/* ------------------------------------------------------------------
   V6 UPDATE: global font, dark mode, mobile responsiveness, data-card
   tables, scroll-to-top, floating install button repositioning, and
   modal lock-down. See includes/footer.php for the matching JS.
   ------------------------------------------------------------------ */

/* Force Montserrat everywhere — Bootstrap components (buttons, form
   controls, dropdowns), DataTables' injected search/pagination
   controls, and SweetAlert2's popup all set their own font-family by
   default instead of inheriting the page's, so each needs to be
   named explicitly rather than relying on `body { font-family }` to
   cascade into them. */
html, body,
button, input, select, textarea, optgroup,
.btn, .form-control, .form-select, .dropdown-menu, .dropdown-item,
.modal, .modal-content, .nav-link, .breadcrumb,
table, .table, .dataTables_wrapper, .dt-buttons, .dt-button,
.swal2-popup, .swal2-title, .swal2-html-container, .swal2-styled {
    font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* --------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------- */
html[data-theme="dark"] {
    --brand-blue: #3d8bf0;
}
html[data-theme="dark"] body {
    background: #12141c;
    color: #e4e6ee;
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .app-footer,
html[data-theme="dark"] .card,
html[data-theme="dark"] .doc-paper,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    background: #1b1e29;
    color: #e4e6ee;
    border-color: #2b2f3d;
}
html[data-theme="dark"] .topbar { border-bottom-color: #2b2f3d; }
html[data-theme="dark"] .app-footer { border-top-color: #2b2f3d; }
html[data-theme="dark"] .content { background: transparent; }
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th { color: #e4e6ee; }
html[data-theme="dark"] .table thead th { background: #23273400; }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: #232734; color: #e4e6ee; }
html[data-theme="dark"] .card-table-row { background: #1b1e29; border-color: #2b2f3d; }
html[data-theme="dark"] .card-table-row td { border-bottom-color: #2b2f3d; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
    background: #12141c; color: #e4e6ee; border-color: #2b2f3d;
}
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus {
    background: #12141c; color: #e4e6ee;
}
html[data-theme="dark"] .btn-light { background: #232734; color: #e4e6ee; border-color: #2b2f3d; }
html[data-theme="dark"] .page-breadcrumb .breadcrumb-item.active { color: #e4e6ee; }
html[data-theme="dark"] .section-title { color: #e4e6ee; }
html[data-theme="dark"] .text-muted { color: #9aa0b4 !important; }
html[data-theme="dark"] .dropdown-item { color: #e4e6ee; }
html[data-theme="dark"] .dropdown-item:hover { background: #232734; color: #fff; }
html[data-theme="dark"] hr, html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom {
    border-color: #2b2f3d !important;
}

/* Theme toggle button, styled to sit next to the language dropdown */
#themeToggleBtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    border: 1px solid #dee1e6; background: #fff; color: #344054;
}
#themeToggleBtn:hover { background: #f2f4f7; }
html[data-theme="dark"] #themeToggleBtn { background: #232734; border-color: #2b2f3d; color: #e4e6ee; }
html[data-theme="dark"] #themeToggleBtn:hover { background: #2b2f3d; }

/* --------------------------------------------------------------
   Scroll-to-top button (right side) — the PWA install button moves
   to the left (below) so the two floating controls never collide.
   -------------------------------------------------------------- */
.scroll-top-fab {
    position: fixed;
    right: 22px;
    bottom: 62px;
    z-index: 1040;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 6px 18px rgba(26, 95, 180, .38);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.scroll-top-fab.show { display: inline-flex; }
.scroll-top-fab:hover { background: #144a8d; transform: translateY(-2px); }
@media (max-width: 576px) {
    .scroll-top-fab { right: 16px; bottom: 58px; width: 40px; height: 40px; font-size: 14px; }
}

/* PWA install button now floats on the LEFT, mirroring the
   scroll-to-top button on the right. */
.pwa-fab { left: 22px; right: auto; }
@media (max-width: 576px) {
    .pwa-fab { left: 16px; right: auto; }
}

/* --------------------------------------------------------------
   Mobile responsiveness
   -------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Page locator (breadcrumbs) takes up scarce top-bar width and
       duplicates what the hamburger + section headings already make
       clear on a small screen — hide it there entirely. */
    .page-breadcrumb { display: none !important; }
    .topbar { justify-content: flex-end; }

    /* With the breadcrumb hidden, `justify-content: flex-end` above
       bunches every remaining .topbar child — including the hamburger
       button — over on the right. Pull the hamburger back out of that
       flex flow and pin it to the top-left of the viewport instead, so
       it stays put on the left regardless of topbar content or scroll
       position. */
    #sidebarToggle {
        position: fixed;
        top: 12px;
        left: 16px;
        z-index: 1032;
    }

    /* Thin fixed footer strip: same fixed-to-viewport behavior as on
       desktop, just spanning the full width and using dvh-based
       inset so mobile browser chrome (address bar show/hide) never
       leaves a gap beneath it. */
    .app-footer {
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 2px;
        padding: 8px 12px;
        text-align: center;
    }
    .app-footer > div { width: 100%; text-align: center; font-size: 11px; }

    /* Sidebar's fixed Logout row: keep it pinned exactly like desktop
       while the sidebar drawer is open. */
    .sidebar { bottom: 0; height: 100dvh; }
    .sidebar-footer { position: sticky; bottom: 0; }
}

@media (max-width: 576px) {
    .app-footer > div { font-size: 10.5px; }
    .app-footer i { font-size: 10.5px; }
}

/* --------------------------------------------------------------
   Page-header action buttons (mobile) — every list/detail page in
   the app shares the same header shape: a title+subtitle block
   (`.section-title` / `.section-sub`) on the left, and one button or
   a `.d-flex` group of several on the right (e.g. Accident Reports /
   New Accident Report, or Marketing / Campaigns + New Group + Bulk
   Import + New Contact). At full width that row fits; squeezed into
   a phone viewport the button group either overflows the screen
   horizontally or crowds up against the title.
   `:has(.section-title)` scopes this to that specific header shape
   only, so it doesn't touch the many other unrelated
   `d-flex justify-content-between` rows elsewhere (alerts, card
   sub-headers, etc.) that don't contain a `.section-title`.
   Unsupported in older Firefox (<121) — those simply keep today's
   layout instead of stacking, no breakage. */
@media (max-width: 767px) {
    .d-flex.justify-content-between.mb-3:has(.section-title) {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }
    /* A single action button (e.g. "New Accident Report") — drop
       below the title block and span full width instead of hugging
       the right edge. */
    .d-flex.justify-content-between.mb-3:has(.section-title) > a.btn,
    .d-flex.justify-content-between.mb-3:has(.section-title) > button.btn {
        width: 100%;
    }
    /* A group of several action buttons — let them wrap onto as many
       rows as needed instead of overflowing, and share the row width
       evenly rather than each sizing to its own text. */
    .d-flex.justify-content-between.mb-3:has(.section-title) > .d-flex {
        flex-wrap: wrap;
    }
    .d-flex.justify-content-between.mb-3:has(.section-title) > .d-flex > .btn {
        flex: 1 1 auto;
    }

    /* All buttons, smaller on mobile — not just the header actions
       above. `.btn-sm` (already the small variant) is left alone. */
    .btn:not(.btn-sm) {
        padding: 6px 12px;
        font-size: 12.5px;
    }
}

/* Printable document pages (accident reports, invoices, quotations,
   BOLs, statements, etc. — anything using `.doc-paper`): the fixed
   40px padding and the un-wrapped logo/title header are sized for
   print and desktop, and don't leave enough room on a phone screen. */
@media (max-width: 767px) {
    .doc-paper { padding: 20px 16px; }
    .doc-header { flex-wrap: wrap; gap: 14px; }
    .doc-title { font-size: 20px; }
    /* A handful of these documents give their first table column a
       hardcoded `width="220"` HTML attribute (e.g. accident report
       date/location/vehicle rows) — on a narrow phone that alone can
       be most of the available width, squeezing the value column.
       Rebalance it proportionally instead. */
    .doc-paper table td[width] { width: 42% !important; }
}

/* --------------------------------------------------------------
   Data-card tables (mobile) — every <table> in the system is turned
   into a stack of cards below the breakpoint instead of a
   horizontally-scrolling row grid. Each <td> gets its column header
   injected as a data-label attribute by JS (see footer.php) so no
   individual list page needs to be touched for this to apply.
   -------------------------------------------------------------- */
@media (max-width: 767px) {
    table.card-table-mobile { border: none; border-collapse: collapse; width: 100%; }
    table.card-table-mobile thead { display: none; }
    table.card-table-mobile, table.card-table-mobile tbody { display: block; width: 100%; }
    table.card-table-mobile tr {
        display: block;
        background: #fff;
        border: 1px solid #e6e8ee;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(20,30,60,.05);
        margin-bottom: 12px;
        padding: 6px 12px;
    }
    table.card-table-mobile td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
        padding: 8px 2px;
        border: none;
        border-bottom: 1px solid #f0f1f5;
        font-size: 12.5px;
        white-space: normal;
        word-break: break-word;
    }
    table.card-table-mobile td:last-child { border-bottom: none; }
    table.card-table-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #667085;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .02em;
        font-size: 10.5px;
        flex-shrink: 0;
        margin-right: auto;
        padding-right: 10px;
    }
    table.card-table-mobile td[data-label=""]::before,
    table.card-table-mobile td:not([data-label])::before { content: none; }
    table.card-table-mobile td[data-label=""],
    table.card-table-mobile td:not([data-label]) {
        justify-content: flex-end;
    }
    /* DataTables' own wrapper controls (search box, length, pager)
       still render above/below the card stack as normal, just full
       width and comfortably tappable. */
    .dataTables_wrapper .dataTables_filter input { width: 100%; }
    .dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
}

/* Trip table content specifically: a bit smaller again on very
   narrow screens so more of each row's data is visible without
   crowding the card. */
@media (max-width: 576px) {
    table.card-table-mobile td { font-size: 11.5px; padding: 6px 2px; }
    table.card-table-mobile td::before { font-size: 10px; }
}