/* ═══════════════════════════════════════════════════════════════════
   Homeo Cloud — Global Responsive Hardening Layer
   Loaded by _DashboardLayout, _AdminLayout, _AuthLayout, _LandingLayout
   AFTER each layout's own <style> block, so it wins on equal specificity.

   Breakpoints (Bootstrap 5 aligned):
     <  576px  → phone (small)
     <  768px  → phone / phablet
     <  992px  → tablet
     >= 992px  → desktop

   ─────────────────────────────────────────────────────────────────
   CASCADE RULE — READ BEFORE EDITING A VIEW'S OWN STYLE BLOCK
   ─────────────────────────────────────────────────────────────────
   This file is linked in the document head, so it beats each LAYOUT's
   inline style block. It does NOT beat a VIEW's inline style block:
   a view's markup (and therefore its style element) is emitted by
   RenderBody() further down the page, so it comes later in source
   order and wins every equal-specificity tie.

   Consequence: a view rule written WITHOUT a media query is a desktop
   value that silently overrides this file's mobile value.

     BAD  — kills the shared mobile rule on phones:
       .lp-feat { padding: 26px; border-radius: 18px; }

     GOOD — desktop value scoped so it cannot collide:
       @media (min-width: 768px) { .lp-feat { padding: 26px; } }

   So: in a view style block, put desktop-only geometry (padding,
   width, height, font-size, border-radius, margin) inside
   @media (min-width: 768px) and let this file own everything below
   768px. Remember that inside a .cshtml the at-rule must be written
   @@media — a single @ is a Razor compile error.

   Views that currently depend on this file for their phone geometry
   include Home/Index.cshtml (the whole lp-* system). Renaming or
   removing the section 10 rules will strip those elements' mobile
   sizing.

   Documents with Layout = null (the print/receipt/ledger views) never
   load this file at all — they carry their own screen-only media
   block AND must declare their own viewport meta tag, or that block
   never matches on a phone.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   0. Global overflow guards
   The layouts set body{overflow-x:hidden}, which HIDES horizontal
   overflow rather than fixing it — content became unreachable.
   These rules make content fit instead of being clipped.
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

/* Long words, URLs, emails and Bangla strings must never blow out a box.

   overflow-wrap:break-word is safe at every width: it only introduces a break
   when the word would otherwise overflow, and the resulting break points are
   NOT counted when the box's min-content size is calculated.

   word-break:break-word is the legacy alias for overflow-wrap:anywhere, whose
   break points ARE counted in min-content. Applied globally that re-prices the
   automatic minimum of every table cell, flex item and `fr` grid track on the
   page, which can re-distribute desktop column widths. It stays below the
   desktop range so >=992px keeps its pre-existing intrinsic sizes. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, label, small, strong, b, span, td, th, .badge, .alert {
    overflow-wrap: break-word;
}
@media (max-width: 991.98px) {
    h1, h2, h3, h4, h5, h6,
    p, li, dd, dt, label, small, strong, b, span, td, th, .badge, .alert {
        word-break: break-word;
    }
}

/* Media never exceeds its container */
img, svg, video, canvas, iframe, embed, object {
    max-width: 100%;
}
img, svg, video { height: auto; }

/* Bootstrap containers must not add width on tiny screens */
@media (max-width: 575.98px) {
    .container, .container-fluid,
    .container-sm, .container-md, .container-lg, .container-xl {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   1. CRITICAL FIX — "mini sidebar" must never apply on mobile
   ─────────────────────────────────────────────────────────────────
   Bug: `.mini-sidebar .main-content` (specificity 0-2-0) beat the
   mobile rule `.main-content { margin-left:0 }` (0-1-0). Media queries
   add NO specificity, so a user who collapsed the sidebar on desktop
   (persisted in localStorage) opened the site on a phone and got the
   whole page shifted 70px right with the topbar detached.
   Affected both _DashboardLayout and _AdminLayout.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .mini-sidebar .main-content { margin-left: 0 !important; }
    .mini-sidebar .topbar       { left: 0 !important; }
    .mini-sidebar .sidebar      { width: 260px !important; }

    /* Restore the labels that mini-mode hides, so the mobile drawer is usable */
    .mini-sidebar .sidebar .sidebar-brand h5,
    .mini-sidebar .sidebar .sidebar-brand span,
    .mini-sidebar .sidebar .menu-header,
    .mini-sidebar .sidebar a span,
    .mini-sidebar .sidebar .has-sub > a::after {
        display: revert !important;
    }
    .mini-sidebar .sidebar .sidebar-brand {
        justify-content: flex-start !important;
        padding: 0 16px !important;
    }
    .mini-sidebar .sidebar a {
        justify-content: flex-start !important;
        padding: 9px 20px !important;
        border-left: none;
    }
    .mini-sidebar .sidebar a i {
        width: 30px !important;
        font-size: 1rem !important;
    }
    .mini-sidebar .sidebar .submenu a { padding-left: 55px !important; }
}

/* Mobile drawer: lock body scroll behind the overlay so the page
   underneath doesn't scroll while the menu is open */
@media (max-width: 767.98px) {
    body.slide-nav { overflow: hidden; }
    .sidebar-overlay { -webkit-tap-highlight-color: transparent; }
}

/* Sidebar drawer needs momentum scrolling + safe-area padding on iOS.
   Scoped below the desktop range: at >=992px the sidebar is a docked,
   wheel-scrolled panel, and overscroll-behavior:contain would stop the wheel
   from chaining to the page once the menu hits its end — a behaviour change
   on desktop chrome that this pass is not allowed to make. */
@media (max-width: 991.98px) {
    .sidebar {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* ─────────────────────────────────────────────────────────────────
   2. Tables — horizontal scroll instead of clipped columns
   ─────────────────────────────────────────────────────────────────
   The layouts force `white-space:nowrap` on every cell at <768px.
   Without a scroll container those columns were simply unreachable
   (body{overflow-x:hidden} swallowed them).
   ───────────────────────────────────────────────────────────────── */
.table-responsive,
.table-responsive-auto,
.table-auto-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

@media (max-width: 991.98px) {
    /* DataTables renders its own wrapper — let it scroll too */
    .dataTables_wrapper > .table-responsive,
    .dataTables_wrapper .dataTables_scroll { overflow-x: auto; }

    /* A table that is the direct child of a card body still needs escape */
    .ih-card-body > .table-responsive,
    .card-body > .table-responsive { margin-bottom: 0; }
}

/* `screen and` is load-bearing on this block and the one below it.
   A print media query resolves `width` against the PAGE box, not the window:
   A4/Letter minus the default margins is ~715-740 CSS px, so a bare
   `(max-width: 767.98px)` also matches while printing from a 1920px desktop.
   Without `screen` these phone rules silently re-typeset every printed table. */
@media screen and (max-width: 767.98px) {
    /* Scroll hint: subtle inner shadow on the right edge of a scrollable table */
    .table-responsive, .table-responsive-auto {
        background:
            linear-gradient(to right, var(--card-bg, #fff) 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0) 12px) 100% 0;
        background-repeat: no-repeat;
        background-size: 24px 100%, 12px 100%;
        background-attachment: local, scroll;
    }

    /* Keep cells compact but readable; the layouts drop to 11px which is
       below the comfortable minimum for Bangla glyphs */
    table { font-size: 12px; }
    table th, table td { padding: 6px 8px !important; }

    /* Cells that hold action buttons must not collapse */
    td .btn-group, td .d-flex { flex-wrap: nowrap; }
    td .btn { white-space: nowrap; }
}

/* Very wide report tables: allow wrapping in text-heavy columns so the
   scroll distance stays sane */
@media screen and (max-width: 767.98px) {
    td.wrap-cell, th.wrap-cell,
    td[data-wrap], th[data-wrap] {
        white-space: normal !important;
        min-width: 140px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   3. DataTables controls
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_filter { width: 100%; text-align: left; float: none; }
    .dataTables_wrapper .dataTables_filter label { width: 100%; display: block; }
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0; }
    .dataTables_wrapper .dataTables_length { display: none; }
    .dataTables_wrapper .dataTables_info { font-size: 11px; text-align: center; float: none; }
    .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; padding-top: 6px; }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 5px 9px !important;
        font-size: 11px;
        min-width: 32px;
    }
    /* Export/print buttons wrap instead of overflowing */
    .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 8px;
        float: none;
    }
    .dt-buttons .btn { font-size: 11px; padding: 4px 9px; margin: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   4. Forms — fixed pixel widths must shrink to fit
   ─────────────────────────────────────────────────────────────────
   Many views carry inline style="width:180px" / "max-width:300px".
   max-width:100% caps them at the container without fighting the
   inline width when there IS room.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .form-control, .form-select, .input-group,
    input:not([type="checkbox"]):not([type="radio"]), select, textarea {
        max-width: 100%;
    }

    /* …but inside a horizontally scrollable table, fixed widths are
       intentional (column alignment) — don't squash them */
    .table-responsive .form-control,
    .table-responsive .form-select,
    .table-responsive input,
    .table-responsive select { max-width: none; }

    /* 16px prevents iOS Safari from zooming on focus */
    input[type="text"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="password"], input[type="date"],
    input[type="time"], input[type="search"], select, textarea {
        font-size: 16px !important;
    }

    /* Comfortable touch targets (WCAG 2.5.5 / Apple HIG) */
    .btn, button, .form-control, .form-select, .page-link { min-height: 38px; }
    .btn-xs, .btn-sm { min-height: 34px; }
    td .btn, td .btn-xs, td .btn-sm { min-height: 30px; }

    /* Inline "label + control" groups wrap */
    .form-inline, .d-inline-flex { flex-wrap: wrap; }
}

/* Input groups must not overflow their row.
   NOTE: Bootstrap deliberately sets .input-group{flex-wrap:wrap} so that
   .invalid-feedback (width:100%) can drop to its own line — do NOT force
   nowrap here or validation messages disappear. Allowing the fields to
   shrink below their content width is enough. */
@media (max-width: 575.98px) {
    .input-group > .form-control,
    .input-group > .form-select { min-width: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   5. Toolbars, headers, button rows — always wrap
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-header,
    .ih-card-header,
    .card-header,
    .btn-toolbar,
    .d-flex.gap-1, .d-flex.gap-2, .d-flex.gap-3,
    .d-flex.justify-content-between,
    .d-flex.justify-content-end {
        flex-wrap: wrap !important;
    }
    .page-header > *, .ih-card-header > * { min-width: 0; }

    /* Action button clusters get a little breathing room when wrapped */
    .page-header .btn, .ih-card-header .btn { margin-bottom: 2px; }

    /* Tab / pill strips are the one row that must NOT wrap.
       Patient/Details ships four tabs ("Prescriptions (n)" … "Due Collection (n)")
       which measure ~550px — on a 360px phone Bootstrap's default flex-wrap
       broke them onto three ragged rows and detached the strip from the
       `border-top-0 rounded-top-0` card below it. Scroll sideways instead.
       overflow-y:hidden is deliberate: overflow-x:auto alone computes
       overflow-y to auto, and Bootstrap's -1px .nav-link margin would then
       raise a vertical scrollbar. The trade is that the active tab's 1px
       "notch" is clipped, so the strip reads as an underlined tab bar on
       phones — the conventional mobile treatment anyway. */
    .nav-tabs, .nav-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs > .nav-item, .nav-pills > .nav-item { flex: 0 0 auto; }
    .nav-tabs .nav-link, .nav-pills .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
    }
}

/* ─────────────────────────────────────────────────────────────────
   6. Topbar & dropdowns
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .topbar { padding: 0 8px !important; }
    .topbar .topbar-right { gap: 2px !important; }
    .topbar .topbar-right .btn { padding: 4px 6px; }
    .topbar .clinic-name, .topbar .brand-text { display: none !important; }

    /* Notification / ticket panels were min-width:340px — wider than a
       360px phone once the viewport padding is counted. Let Popper size any
       dropdown outside the topbar; just cap it. */
    .dropdown-menu[style*="min-width"] {
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* Anchor the topbar panels to the VIEWPORT, not to their toggle button.
       `right:0` resolves against the .dropdown wrapper (Bootstrap ships
       .dropdown{position:relative}), and .topbar-right{margin-left:auto} puts
       the bell and ticket toggles ~120px in from the screen edge. A panel
       forced to calc(100vw - 16px) and right-aligned there hung ~108px off the
       LEFT edge of a 360px screen — negative overflow, so nothing could scroll
       it back into view. Killing Popper's transform also discarded its vertical
       offset, dropping the panel on top of its own button.
       .topbar is position:fixed with no transform/filter/will-change, so a
       fixed descendant resolves against the viewport. */
    .topbar .dropdown-menu {
        position: fixed !important;
        top: var(--topbar-height, 60px) !important;
        right: 8px !important;
        bottom: auto !important;
        left: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
    }
    .topbar .dropdown-menu [id$="List"] { max-height: 55vh; }
}

/* ─────────────────────────────────────────────────────────────────
   7. Modals & print-preview overlays
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 8px auto !important;
        max-width: calc(100% - 16px) !important;
    }
    .modal-dialog-centered { min-height: calc(100% - 16px); }
    .modal-header, .modal-footer { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
    .modal-body { padding: 12px; }
    .modal-title { font-size: 1rem; }

    /* Print-preview modals → bound the dialog to the viewport and let the
       iframe fill whatever is left after the header/footer.
       #globalPrintModal (_DashboardLayout) carried an inline height:90vh;
       #rxPrintModal (Prescription/Details + Prescription/Index) sized its
       iframe at 75vh, which on a landscape phone (≈375px tall) came to
       281px inside a ~264px modal body — a scrolling iframe nested inside a
       scrolling body, with the toolbar pushed off screen. */
    [id$="PrintModal"] .modal-content { height: 92vh !important; }
    [id$="PrintModal"] .modal-body { flex: 1 1 auto; min-height: 0; }
    [id$="PrintModal"] .modal-body > iframe { height: 100% !important; }

    /* Hand-rolled preview overlays (Income/Expense/Salary print previews)
       carry inline max-width:860px; margin:30px auto */
    [id$="PreviewOverlay"] > div,
    [id$="printOverlay"] > div,
    #printOverlay > div,
    #invoicePreviewOverlay > div,
    #expensePreviewOverlay > div {
        max-width: calc(100% - 16px) !important;
        margin: 8px auto !important;
    }
    [id$="PreviewOverlay"] iframe,
    [id$="printOverlay"] iframe,
    #printOverlay iframe,
    #invoicePreviewOverlay iframe,
    #expensePreviewOverlay iframe {
        height: 68vh !important;
        width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   8. Third-party widgets
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .select2-container { width: 100% !important; max-width: 100% !important; }
    .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
    .select2-dropdown { font-size: 14px; max-width: calc(100vw - 24px); }
    .select2-results__option { padding: 9px 12px; }

    .flatpickr-calendar {
        max-width: calc(100vw - 20px);
        left: 50% !important;
        transform: translateX(-50%);
    }

    .ac-dropdown { max-height: 45vh; font-size: 13px; }
    .ac-item { padding: 9px 10px; font-size: 13px; }
}

@media (max-width: 575.98px) {
    .swal2-popup { font-size: 13px !important; width: calc(100% - 24px) !important; }
    .swal2-title { font-size: 1.05rem !important; }
    .swal2-actions { flex-wrap: wrap; gap: 6px; }

    #toast-container { width: 100% !important; right: 0 !important; left: 0 !important; }
    #toast-container > div { width: 94% !important; margin: 4px auto !important; }
}

/* Chart.js canvases must be fluid, not fixed */
@media (max-width: 767.98px) {
    canvas { max-width: 100% !important; }
}

/* ─────────────────────────────────────────────────────────────────
   9. Stat cards / dashboard tiles
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .stat-card { padding: 14px; }
    .stat-card .stat-value { font-size: 1.35rem; }
    .stat-card .stat-label { font-size: 0.78rem; }
    .stat-card .stat-icon { width: 42px; height: 42px; font-size: 1.15rem; }
}
@media (max-width: 400px) {
    .stat-card { padding: 11px; }
    .stat-card .stat-value { font-size: 1.15rem; }
    .stat-card .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────
   10. Landing pages (_LandingLayout + Home/Index lp-* system)
   ─────────────────────────────────────────────────────────────────
   _LandingLayout shipped with NO mobile rules at all: 2.25rem titles,
   5rem section padding and 2rem card padding rendered on a 360px phone.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .section-padding { padding: 3.5rem 0; }
    .lp-section { padding: 3.5rem 0; }
    .section-title { font-size: 1.9rem; }
    .lp-h2 { font-size: 1.85rem; }
}

@media (max-width: 767.98px) {
    /* Shell */
    .section-padding { padding: 2.75rem 0; }
    .lp-section { padding: 2.75rem 0; }
    .page-content { padding-top: 84px; }

    /* Typography */
    .section-title { font-size: 1.6rem; line-height: 1.25; }
    .section-subtitle { font-size: 1rem; margin-bottom: 2rem; }
    .lp-h1 { font-size: 2rem !important; line-height: 1.18; }
    .lp-h2 { font-size: 1.6rem; line-height: 1.25; }
    .lp-lead { font-size: 1.02rem; margin: 1rem auto 1.6rem; }
    .lp-sub { font-size: 0.98rem; }
    .lp-kicker { font-size: 0.72rem; letter-spacing: 1px; }

    /* Hero */
    .lp-hero { padding: 104px 0 44px !important; }
    .lp-shot { margin-top: 2.25rem; border-radius: 14px; }
    .lp-shot-body { padding: 14px; }
    .lp-shot-url { display: none; }
    .lp-shot-head { flex-wrap: wrap; gap: 6px; }

    /* Cards & tiles */
    .hc-card { padding: 1.35rem; }
    .lp-feat { padding: 18px; border-radius: 14px; }
    .lp-feat .ic { width: 44px; height: 44px; font-size: 1.15rem; margin-bottom: 12px; }
    .lp-feat h5 { font-size: 1.02rem; }
    .lp-tile { padding: 13px; }
    .lp-tile b { font-size: 1.25rem; }
    .lp-card { padding: 20px; border-radius: 16px; }
    .lp-demo-side { padding: 22px; border-radius: 16px; }

    /* Pricing */
    .lp-price { padding: 20px; border-radius: 16px; }
    .lp-amt { font-size: 2rem; }

    /* Steps */
    .lp-step { margin-bottom: 1.75rem; }
    .lp-step .n { width: 52px; height: 52px; font-size: 1.2rem; border-radius: 15px; margin-bottom: 0.85rem; }

    /* Stats */
    .lp-stat b { font-size: 1.75rem; }
    .lp-stat span { font-size: 0.84rem; }

    /* CTA */
    .lp-cta { padding: 32px 18px; border-radius: 18px; }

    /* Buttons: full-width stacked CTAs read far better on a phone */
    .lp-btn { padding: 0.72rem 1.25rem; font-size: 0.94rem; }
    .btn-hc-primary, .btn-hc-outline, .btn-hc-accent {
        padding: 0.65rem 1.25rem;
        font-size: 0.94rem;
    }

    /* Collapsed navbar panel */
    .navbar-hc .navbar-collapse {
        background: #fff;
        border: 1px solid var(--hc-border, #e2e8f0);
        border-radius: 12px;
        padding: 12px;
        margin-top: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,.10);
        max-height: 78vh;
        overflow-y: auto;
    }
    .navbar-hc .navbar-collapse .d-flex { flex-direction: column; gap: 8px !important; }
    .navbar-hc .navbar-collapse .d-flex .btn { width: 100%; }
    .navbar-hc .nav-link { padding: 0.6rem 0.5rem !important; }
    .navbar-hc .nav-link::after { display: none; }
    .navbar-brand-hc { font-size: 1.2rem; }
    /* The transparent navbar is unreadable over content once collapsed */
    .navbar-hc.show-bg, .navbar-hc:has(.navbar-collapse.show) {
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(10px);
    }

    /* Footer */
    .footer-hc { padding: 2.25rem 0 1.25rem; text-align: center; }
    .footer-hc .row > [class*="col-"] { margin-bottom: 1.25rem; }
}

@media (max-width: 575.98px) {
    .lp-h1 { font-size: 1.7rem !important; }
    .lp-h2 { font-size: 1.4rem; }
    .section-title { font-size: 1.4rem; }
    .lp-amt { font-size: 1.75rem; }
    .lp-stat b { font-size: 1.5rem; }
    .lp-cta { padding: 26px 14px; }
    .lp-hero { padding: 96px 0 36px !important; }

    /* Stack hero CTAs full width */
    .lp-hero .lp-btn,
    .lp-cta .lp-btn { width: 100%; }
    .lp-hero .d-flex, .lp-cta .d-flex { flex-direction: column; align-items: stretch; }
}

/* ─────────────────────────────────────────────────────────────────
   11. Auth pages (_AuthLayout)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    body .auth-wrapper { max-width: 100%; }
    .auth-card .card-body { padding: 1.5rem 1.15rem; }
    .auth-card { border-radius: 14px; }
    .btn-auth-primary { font-size: 1rem; padding: 0.7rem 1.25rem; }
    .auth-footer-text { font-size: 0.76rem; margin-top: 1.1rem; }
}

/* Short viewports (landscape phone): _AuthLayout centres .auth-wrapper on the
   cross axis with align-items:center, so a card taller than the viewport
   overflows equally top and bottom and its top half sits above the scroll
   origin — unreachable.

   This must NOT key off `(max-height: 720px)`: that is not a width query, so it
   also fires on an ordinary 1366x768 laptop at >=992px wide and would move the
   login card from centred to top-aligned on desktop.

   Auto cross-axis margins are the width-agnostic fix. With free space they
   absorb it symmetrically — pixel-identical to align-items:center — and with
   none they resolve to 0, leaving the card at the top and fully scrollable. */
body:has(> .auth-wrapper) { align-items: flex-start; }
body > .auth-wrapper { margin-top: auto; margin-bottom: auto; }

/* ─────────────────────────────────────────────────────────────────
   12. Utilities available to views
   ───────────────────────────────────────────────────────────────── */
.hc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hc-nowrap { white-space: nowrap; }

/* Hide on phone / show only on phone */
@media (max-width: 767.98px) { .hc-hide-sm { display: none !important; } }
@media (min-width: 768px)    { .hc-only-sm { display: none !important; } }

/* Stack any flex row on phones */
@media (max-width: 767.98px) {
    .hc-stack-sm { flex-direction: column !important; align-items: stretch !important; }
    .hc-stack-sm > * { width: 100%; }
    .hc-full-sm { width: 100% !important; }
}

/* ─────────────────────────────────────────────────────────────────
   13. Print — responsive rules must not leak into printouts
   ───────────────────────────────────────────────────────────────── */
@media print {
    .table-responsive, .table-responsive-auto, .hc-scroll-x {
        overflow: visible !important;
        background: none !important;
    }
    /* NOTE: no `table { font-size: ... }` reset here. The phone type scale is
       now `@media screen and (max-width: 767.98px)` (section 2), so it never
       reaches a printout in the first place. The reset that used to live here
       was `font-size: inherit !important`, which also out-ranked the eleven
       views that set `#listTable / #empTable / #detailTable { font-size: 11px }`
       — printed lists jumped from 11px to the inherited 14px and overflowed
       the page. Leave the author's print type alone. */
    table th, table td { padding: 4px 6px !important; }
    .hc-hide-sm { display: revert !important; }
}