/* ============================================================================
   mobile.css — phone/tablet layer for إسمعني
   Loaded after site.css and dark-mode.css so it can correct them.

   Covers: safe areas and notches, touch behaviour, readable form controls,
   44px tap targets, the mobile navigation drawer, the bottom tab bar, the
   add-to-home-screen prompt, and standalone (installed app) mode.
   ============================================================================ */

:root {
    /* Measured by the layout script; the fallbacks keep things sane before JS runs. */
    --nav-h: 64px;
    --bottom-nav-h: 0px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* ============================================================
   1. BASE — things that help on every touch device
   ============================================================ */

html {
    /* Stops iOS silently enlarging text in landscape. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Pull-to-refresh stays on in the browser (people expect it there); the
   installed app and the chat screen switch it off further down. */

/* Kill the grey flash Android/iOS paint over tapped elements; we style :active instead. */
a, button, [role="button"], input, label, select, textarea, summary {
    -webkit-tap-highlight-color: transparent;
}

/* Removes the 300ms double-tap-to-zoom delay on interactive elements. */
a, button, [role="button"], input[type="submit"], input[type="button"], .btn {
    touch-action: manipulation;
}

/* Long Arabic words and pasted links should wrap, never widen the page. */
body, p, h1, h2, h3, h4, h5, h6, li, td, th, label, .card, .btn {
    overflow-wrap: break-word;
}

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

/* The page itself never scrolls sideways. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================================
   2. TOUCH DEVICES — hover effects are a liability here
   ============================================================
   site.css lifts buttons and cards on :hover. On a phone that state sticks
   after a tap, so elements stay raised until you tap elsewhere. Swap the lift
   for a press-down response, which is what a native app does. */

@media (hover: none) {
    .btn:hover,
    .card:hover,
    .stat-card:hover,
    .message-bubble:hover,
    .messenger-send-btn:hover,
    .registration-btn:hover,
    .footer-emergency-btn:hover,
    .nav-emergency-btn:hover {
        transform: none;
        box-shadow: inherit;
    }

    .btn:active,
    .registration-btn:active,
    .footer-emergency-btn:active {
        transform: scale(0.975);
        transition-duration: 0.08s;
    }

    .card:active,
    .stat-card:active {
        transform: scale(0.99);
        transition-duration: 0.08s;
    }

    /* A focused input scaling up reads as a rendering glitch on a small screen. */
    .form-control:focus,
    .form-select:focus {
        transform: none;
    }
}

/* Respect the OS "reduce motion" switch. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   3. PHONES AND SMALL TABLETS
   ============================================================ */

@media (max-width: 991.98px) {

    /* ---- Forms -------------------------------------------------------
       Any control under 16px makes iOS Safari zoom the whole page the
       moment it gets focus, and the page never zooms back. 16px is the
       floor; the taller boxes are easier to hit with a thumb. */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 48px;
        padding: 0.7rem 0.9rem;
        border-radius: 12px;
    }

    textarea,
    textarea.form-control {
        min-height: 110px;
        line-height: 1.7;
    }

    /* Checkboxes and radios are tiny by default — give thumbs something to land on. */
    .form-check-input {
        width: 1.35rem;
        height: 1.35rem;
        margin-top: 0.1rem;
    }

    .form-check {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding-inline-start: 0;
    }

    .form-check .form-check-input {
        float: none;
        margin-inline: 0;
        flex-shrink: 0;
    }

    .form-check-label {
        line-height: 1.6;
        cursor: pointer;
    }

    .form-label {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }

    /* ---- Tap targets ------------------------------------------------- */
    .btn {
        min-height: 48px;
        padding-inline: 1.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
    }

    .btn-sm {
        min-height: 40px;
        padding-inline: 0.85rem;
    }

    .btn-lg {
        min-height: 54px;
        font-size: 1.05rem;
    }

    /* A lone button in a form is nearly always the primary action — full width reads better. */
    .d-grid > .btn {
        width: 100%;
    }

    /* ---- Spacing and type ------------------------------------------- */
    .container,
    .container-fluid {
        padding-inline: 1.1rem;
    }

    .card-body {
        padding: 1.15rem;
    }

    /* Display headings are sized for a 1400px screen; scale them with the viewport. */
    .display-1 { font-size: clamp(2rem, 11vw, 3rem) !important; }
    .display-2 { font-size: clamp(1.9rem, 10vw, 2.75rem) !important; }
    .display-3 { font-size: clamp(1.8rem, 9vw, 2.5rem) !important; }
    .display-4 { font-size: clamp(1.6rem, 8vw, 2.25rem) !important; }
    h1, .h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
    h2, .h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }

    /* Bootstrap's g-5 gutter (3rem) is wider than the phone container's
       padding, so its negative margins pushed rows 8px past the screen edge. */
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 2rem;
    }

    .row.g-5,
    .row.gy-5 {
        --bs-gutter-y: 2rem;
    }

    /* Wide tables get their own scroller instead of stretching the page. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* Bootstrap modals sit flush to the edges on a phone. */
    .modal-dialog {
        margin: 0.6rem;
    }

    .modal-content {
        border-radius: 16px;
    }

    /* "Register to save your chats" notice: site.css makes its button
       full-width, which squeezed the text into a narrow column beside it.
       Let the button drop onto its own row instead. */
    .registration-prompt > .d-flex {
        width: 100%;
        flex-wrap: wrap;
        text-align: start;
    }

    .registration-prompt > .d-flex > .btn {
        flex: 1 0 100%;
    }
}

/* ============================================================
   4. NAVBAR — mobile layout
   ============================================================
   On a 375px screen the desktop bar tries to fit a logo, a two-line brand,
   login, register and a language switch, and everything collapses into
   vertical slivers of text. On mobile the bar keeps only the brand and the
   menu button; everything else moves into the drawer. */

@media (max-width: 991.98px) {
    .site-navbar {
        padding-top: var(--safe-top);
    }

    .navbar-inner {
        padding: 0.45rem 0;
    }

    .site-navbar .container {
        gap: 0.5rem;
    }

    .navbar-brand-custom {
        margin: 0 !important;
        min-width: 0;
        flex: 1;
    }

    .nav-logo-ring {
        width: 38px;
        height: 38px;
    }

    .nav-logo-img {
        width: 23px;
        height: 23px;
    }

    .nav-brand-name {
        font-size: 1rem;
        white-space: nowrap;
    }

    /* The tagline costs a whole line and wraps to three on a narrow phone. */
    .nav-brand-sub {
        display: none;
    }

    /* Auth buttons and the language switch live in the drawer on mobile. */
    .site-navbar .navbar-actions-desktop {
        display: none !important;
    }

    .nav-hamburger {
        /* 44px is Apple's and Google's minimum comfortable target. */
        width: 44px;
        height: 44px;
        margin: 0 !important;
        padding: 11px 10px;
        gap: 4px;
        flex-shrink: 0;
    }

    .nav-hamburger:active {
        transform: scale(0.94);
    }

    /* Hamburger turns into an X while the drawer is open. */
    .nav-hamburger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-hamburger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .nav-hamburger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

/* ---- Back button (installed app only) ------------------------------
   Launched from the home screen there is no browser back button, and on
   iPhone no system one either. mobile.js un-hides this on inner pages. */
.nav-back-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(226, 169, 56, 0.2);
    background: rgba(226, 169, 56, 0.08);
    color: #e2a938;
    font-size: 1.1rem;
    cursor: pointer;
}

.nav-back-btn[hidden] {
    display: none;
}

.nav-back-btn:active {
    transform: scale(0.94);
}

/* ---- Slide-in drawer ---------------------------------------------- */

.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(3, 6, 18, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.mobile-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    z-index: 1050;
    width: min(86vw, 340px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(185deg, #0c1326 0%, #090e21 100%);
    border-inline-start: 1px solid rgba(226, 169, 56, 0.14);
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.5);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    /* Translate towards the edge it is anchored to — flipped for RTL below. */
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    overscroll-behavior: contain;
    visibility: hidden;
}

[dir="rtl"] .mobile-drawer {
    transform: translateX(-100%);
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.5);
}

.mobile-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(226, 169, 56, 0.12);
    flex-shrink: 0;
}

.mobile-drawer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    text-decoration: none;
}

.mobile-drawer-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.mobile-drawer-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mobile-drawer-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}

.mobile-drawer-brand-sub {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
}

.mobile-drawer-close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(226, 169, 56, 0.2);
    background: rgba(226, 169, 56, 0.08);
    color: #e2a938;
    font-size: 1.15rem;
    cursor: pointer;
}

.mobile-drawer-close:active {
    transform: scale(0.94);
}

.mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.75rem 0 1.25rem;
}

.mobile-drawer-section-title {
    padding: 0.9rem 1.25rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #475569;
}

/* Nav rows inside the drawer */
.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 52px;
    padding: 0.7rem 1.25rem;
    color: #cbd5e1;
    font-size: 0.97rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: start;
    border-inline-start: 3px solid transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-nav-item i {
    font-size: 1.15rem;
    color: #e2a938;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.mobile-nav-item:active {
    background: rgba(226, 169, 56, 0.1);
}

.mobile-nav-item.active {
    color: #f4b84a;
    background: rgba(226, 169, 56, 0.08);
    border-inline-start-color: #e2a938;
}

/* The old border-left rules from _Layout do not know about logical properties. */
[dir="rtl"] .mobile-nav-item,
[dir="ltr"] .mobile-nav-item {
    border-left: none;
    border-right: none;
    border-inline-start: 3px solid transparent;
}

[dir="rtl"] .mobile-nav-item.active,
[dir="ltr"] .mobile-nav-item.active {
    border-inline-start-color: #e2a938;
}

.mobile-drawer-divider {
    height: 1px;
    margin: 0.6rem 1.25rem;
    background: rgba(226, 169, 56, 0.12);
}

.mobile-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.5rem 1.25rem 0;
}

.mobile-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 50px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid rgba(226, 169, 56, 0.4);
    color: #e2a938;
    background: rgba(226, 169, 56, 0.07);
    width: 100%;
    cursor: pointer;
}

.mobile-drawer-btn:active {
    transform: scale(0.98);
}

.mobile-drawer-btn-solid {
    background: linear-gradient(135deg, #e2a938, #f4b84a);
    border-color: transparent;
    color: #090e21;
    box-shadow: 0 6px 20px rgba(226, 169, 56, 0.25);
}

.mobile-nav-emergency {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 52px;
    margin: 0.8rem 1.25rem 0;
    padding: 0.75rem 1.1rem;
    background: rgba(220, 53, 69, 0.14);
    border: 1.5px solid rgba(220, 53, 69, 0.35);
    border-radius: 14px;
    color: #f87171;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
}

.mobile-nav-emergency:active {
    transform: scale(0.98);
    color: #f87171;
}

/* Locks the page behind the open drawer without losing the scroll position. */
body.drawer-open {
    overflow: hidden;
    touch-action: none;
}

@media (min-width: 992px) {
    .mobile-drawer,
    .mobile-drawer-backdrop {
        display: none !important;
    }
}

/* ============================================================
   5. BOTTOM TAB BAR — the thing that makes it feel like an app
   ============================================================ */

.mobile-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1035;
    display: none;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    padding: 4px 4px calc(4px + var(--safe-bottom));
    background: rgba(9, 14, 33, 0.92);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(226, 169, 56, 0.14);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.45);
}

@media (max-width: 991.98px) {
    .mobile-tabbar {
        display: flex;
    }

    /* Keeps the footer and the last elements clear of the bar. The staff
       dashboard clears its own bar inside main (section 10), so it opts out
       rather than being padded twice. */
    body.has-tabbar:not(.dashboard-page) {
        padding-bottom: var(--bottom-nav-h);
    }
}

.mobile-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* The icon sits in a pill that fills in for the current tab, so "where am I"
   is readable at a glance (the Material 3 navigation-bar pattern). */
.mobile-tab > i {
    width: 54px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 1.25rem;
    line-height: 1;
    transition: background 0.2s ease, transform 0.12s ease;
}

.mobile-tab span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mobile-tab:active > i {
    background: rgba(226, 169, 56, 0.1);
    transform: scale(0.94);
}

.mobile-tab.active {
    font-weight: 800;
}

.mobile-tab.active > i {
    background: rgba(226, 169, 56, 0.16);
}

/* The emergency tab sits proud of the bar, the way a primary action does. */
.mobile-tab-emergency {
    flex: 0 0 auto;
    justify-content: flex-start;
    color: #fca5a5;
}

.mobile-tab-emergency .mobile-tab-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -22px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc3545, #b02a37);
    color: #fff;
    font-size: 1.35rem;
    border: 3px solid #090e21;
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.45);
}

.mobile-tab-emergency:active .mobile-tab-fab {
    transform: scale(0.93);
}

/* ---- Link colours ------------------------------------------------------
   dark-mode.css paints every link gold (`.dark a`, `.dark a:hover`), and that
   outranks the single-class rules above: every tab looked active, and the
   solid "create account" button in the drawer became gold text on gold.
   Restate the navigation's own colours at a specificity that wins. */
.dark a.mobile-tab,
.dark a.mobile-tab:hover {
    color: #64748b;
}

.dark a.mobile-tab.active,
.dark a.mobile-tab.active:hover {
    color: #f4b84a;
}

.dark a.mobile-tab-emergency,
.dark a.mobile-tab-emergency:hover {
    color: #fca5a5;
}

.dark a.mobile-tab-emergency.active,
.dark a.mobile-tab-emergency.active:hover {
    color: #f87171;
}

.dark a.mobile-nav-item,
.dark a.mobile-nav-item:hover {
    color: #cbd5e1;
}

.dark a.mobile-nav-item.active,
.dark a.mobile-nav-item.active:hover {
    color: #f4b84a;
}

.dark a.mobile-drawer-btn,
.dark a.mobile-drawer-btn:hover {
    color: #e2a938;
}

.dark a.mobile-drawer-btn-solid,
.dark a.mobile-drawer-btn-solid:hover {
    color: #090e21;
}

.dark a.mobile-nav-emergency,
.dark a.mobile-nav-emergency:hover {
    color: #f87171;
}

/* ============================================================
   6. ADD TO HOME SCREEN
   ============================================================ */

.a2hs-banner {
    position: fixed;
    inset-inline: 0.75rem;
    bottom: calc(0.75rem + var(--bottom-nav-h) + var(--safe-bottom));
    z-index: 1060;
    display: none;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: linear-gradient(145deg, #121a33, #0b1227);
    border: 1px solid rgba(226, 169, 56, 0.28);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* An animation rather than a transition: the banner goes from display:none,
   which a transition cannot animate out of, so it used to just pop in. */
.a2hs-banner.is-visible {
    display: flex;
    animation: a2hsBannerUp 0.45s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes a2hsBannerUp {
    from { transform: translateY(calc(100% + 1rem)); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.a2hs-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(226, 169, 56, 0.08);
    border: 1px solid rgba(226, 169, 56, 0.2);
    padding: 4px;
}

.a2hs-text {
    flex: 1;
    min-width: 0;
}

.a2hs-text strong {
    display: block;
    font-size: 0.88rem;
    color: #e2e8f0;
    line-height: 1.4;
}

.a2hs-text span {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
}

.a2hs-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.a2hs-install {
    min-height: 42px;
    padding: 0 1.1rem;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #e2a938, #f4b84a);
    color: #090e21;
    font-size: 0.85rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.a2hs-install:active {
    transform: scale(0.96);
}

.a2hs-dismiss {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    font-size: 1.05rem;
    cursor: pointer;
}

.a2hs-dismiss:active {
    background: rgba(255, 255, 255, 0.06);
}

/* Where the browser has no install prompt (iPhone, Samsung/Firefox, Facebook
   and Instagram's built-in browsers) a short how-to sheet explains the steps. */
.a2hs-sheet {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(3, 6, 18, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.a2hs-sheet.is-visible {
    display: flex;
}

.a2hs-sheet-card {
    width: 100%;
    max-width: 480px;
    padding: 1.5rem 1.5rem calc(1.75rem + var(--safe-bottom));
    border-radius: 22px 22px 0 0;
    background: linear-gradient(175deg, #121a33, #0b1227);
    border-top: 1px solid rgba(226, 169, 56, 0.25);
    text-align: center;
    animation: a2hsSheetUp 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes a2hsSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.a2hs-sheet-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #e2e8f0;
    margin: 0 0 1.25rem;
}

.a2hs-steps {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
    text-align: start;
}

/* One set of steps per platform; mobile.js un-hides the one that applies. */
.a2hs-steps[hidden] {
    display: none;
}

.a2hs-step {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.6;
}

.a2hs-step i {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(226, 169, 56, 0.1);
    border: 1px solid rgba(226, 169, 56, 0.22);
    color: #e2a938;
    font-size: 1.1rem;
}

/* ============================================================
   7. INSTALLED APP (standalone) MODE
   ============================================================
   Launched from the home screen there is no browser chrome, so the top of the
   page sits under the status bar and a back button no longer exists. */

@media (display-mode: standalone) {
    .site-navbar {
        /* Pulls the bar clear of the status bar / notch. */
        padding-top: max(var(--safe-top), 8px);
    }

    /* There is nothing to "scroll back up to" a browser bar for. */
    body {
        overscroll-behavior: none;
    }

    /* Installed already — never ask again. */
    .a2hs-banner,
    .a2hs-sheet {
        display: none !important;
    }
}

/* ============================================================
   8. CHAT — full-height messaging on a phone
   ============================================================ */

/* The chat is an app screen: navbar on top, composer pinned to the bottom,
   and only the message list scrolls. --chat-h is the visible height; while
   the on-screen keyboard is open it follows the visual viewport (measured in
   mobile.js), so the composer sits right on top of the keyboard instead of
   being pushed off screen. */
body.chat-page {
    --chat-h: 100vh;
}

@supports (height: 100dvh) {
    body.chat-page {
        --chat-h: 100dvh;
    }
}

body.chat-page.keyboard-open {
    --chat-h: var(--vvh, 100dvh);
}

@media (max-width: 991.98px) {
    body.chat-page {
        overscroll-behavior-y: none;
    }

    /* The footer would sit below the composer and make the screen scroll. */
    body.chat-page .site-footer {
        display: none;
    }

    body.chat-page .messenger-chat-page {
        height: calc(var(--chat-h) - var(--nav-h));
        min-height: 0;
        overflow: hidden;
    }

    /* Takes whatever the sign-up notice above it leaves, never more. */
    body.chat-page .messenger-chat-container {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
    }

    body.chat-page .messenger-messages {
        min-height: 0;
        overscroll-behavior: contain;
    }

    /* 16px again — the composer is the one input people use most. */
    .messenger-textarea {
        font-size: 16px !important;
        min-height: 46px;
        padding: 11px 16px;
    }

    .messenger-send-btn {
        width: 46px;
        height: 46px;
    }

    .messenger-input {
        padding-bottom: calc(10px + var(--safe-bottom));
    }

    /* Bubbles can run wider on a narrow screen. */
    .message-bubble {
        max-width: 82%;
    }

    .message-content {
        font-size: 0.95rem;
    }

    /* The tab bar would cover the composer, so chat pages drop it. */
    body.chat-page .mobile-tabbar {
        display: none;
    }

    body.chat-page {
        padding-bottom: 0;
    }
}

/* ============================================================
   9. FOOTER
   ============================================================ */

@media (max-width: 991.98px) {
    .site-footer {
        padding-top: 2.5rem;
    }

    .footer-top {
        padding-bottom: 1.75rem;
        --bs-gutter-y: 2rem;
    }

    /* The link lists repeat the drawer and the tab bar, and on a phone they
       added nearly two screens of scrolling to every page. */
    .footer-col-nav {
        display: none;
    }

    .footer-bottom {
        text-align: center;
        padding-bottom: calc(1.5rem + var(--safe-bottom));
    }

    .footer-emergency-btn {
        min-height: 48px;
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   10. STAFF DASHBOARD
   ============================================================
   The staff pages were built for a desk: a 260px rail, eight-column tables and
   twelve stat cards in a grid. This is the layer that makes them work on a
   phone. Whatever is structural at every width lives in site.css.
   ============================================================ */

/* ---- Navigation rows ----------------------------------------------
   dark-mode.css sets `.dark .nav-link { color: #e0e0e0 !important }`, which
   outranks its own `.sidebar .nav-link.active` rule, so the current page was
   grey text on a gold pill. And the drawer's links are not inside `.sidebar`
   at all, so their active state fell back to Bootstrap's primary blue in an
   otherwise gold interface. Restate both, loudly enough to win. */
.dark .dashboard-sidebar a.dashboard-nav-link,
.dark .dashboard-drawer a.dashboard-nav-link {
    color: #b0b0b0 !important;
    border-radius: 10px;
}

.dark .dashboard-sidebar a.dashboard-nav-link:hover,
.dark .dashboard-drawer a.dashboard-nav-link:hover {
    background-color: #0f1629;
    color: #e2a938 !important;
}

.dark .dashboard-sidebar a.dashboard-nav-link.active,
.dark .dashboard-sidebar a.dashboard-nav-link.active:hover,
.dark .dashboard-drawer a.dashboard-nav-link.active,
.dark .dashboard-drawer a.dashboard-nav-link.active:hover {
    background-color: #e2a938;
    color: #090e21 !important;
    font-weight: 600;
}

.dashboard-drawer .dashboard-nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
}

.dashboard-drawer .dashboard-nav-link i {
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* ---- Bottom bar ---------------------------------------------------
   Without it every move inside the dashboard costs two taps: open the drawer,
   then pick. The partial carries d-lg-none, so this never shows on a desktop. */
.dash-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    padding: 4px 4px calc(4px + var(--safe-bottom));
    background: rgba(10, 17, 37, 0.95);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(226, 169, 56, 0.14);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.45);
}

.dash-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 2px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    cursor: pointer;
}

/* The icon sits in a pill that fills in for the current page, so "where am I"
   is readable at a glance — the same pattern as the public tab bar. */
.dash-tab > i {
    width: 52px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.2rem;
    line-height: 1;
    transition: background 0.2s ease, transform 0.12s ease;
}

.dash-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-tab:active > i {
    background: rgba(226, 169, 56, 0.1);
    transform: scale(0.94);
}

.dash-tab.active {
    font-weight: 800;
}

.dash-tab.active > i {
    background: rgba(226, 169, 56, 0.16);
}

.dash-tab-danger.active > i {
    background: rgba(220, 53, 69, 0.18);
}

/* dark-mode.css paints every link gold, which made every tab look active. */
.dark a.dash-tab,
.dark a.dash-tab:hover {
    color: #64748b;
}

.dark a.dash-tab.active,
.dark a.dash-tab.active:hover {
    color: #f4b84a;
}

.dark a.dash-tab-danger,
.dark a.dash-tab-danger:hover {
    color: #fca5a5;
}

.dark a.dash-tab-danger.active,
.dark a.dash-tab-danger.active:hover {
    color: #f87171;
}

/* While typing, the bar would sit on top of the on-screen keyboard. */
body.keyboard-open .dash-tabbar {
    display: none;
}

@media (max-width: 991.98px) {

    /* ---- Header: stays on screen -----------------------------------
       List pages run for several screens, and the title, the language switch
       and logout used to scroll away with the first row. */
    .dashboard-header {
        position: sticky;
        top: 0;
        z-index: 1020;
        padding: 0.6rem 0.85rem !important;
        padding-top: max(0.6rem, var(--safe-top)) !important;
    }

    .dashboard-header-bar {
        gap: 0.5rem;
    }

    .dashboard-header-bar h2 {
        font-size: 1rem;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Keep only the icons for the header's actions. */
    .dashboard-header-bar .btn .btn-label {
        display: none;
    }

    .dashboard-header-bar .btn {
        min-height: 42px;
        padding-inline: 0.7rem;
    }

    .dashboard-header-bar > .btn.d-lg-none {
        margin-inline-end: 0 !important;
    }

    main.dashboard-main {
        padding: 1rem !important;
        /* Clear of the bottom bar. max() keeps the last row reachable even if
           the measuring script never runs. */
        padding-bottom: calc(1rem + max(var(--bottom-nav-h), 62px)) !important;
    }

    /* A full-height app screen (the chat console) lays out its own padding. */
    body.dash-app-screen main.dashboard-main {
        padding: 0 !important;
    }

    /* ---- Type and rhythm ------------------------------------------- */
    .dashboard-main h1.h2,
    .dashboard-main h2.h3 {
        font-size: 1.3rem;
    }

    /* 1.5rem between every block adds a screen of scrolling per page. */
    .dashboard-main > .mb-4 {
        margin-bottom: 1rem !important;
    }

    /* `p-4` is a utility, so it outranks the .card-body rule in section 3. */
    .dashboard-main .card-body.p-4 {
        padding: 1.15rem !important;
    }

    /* ---- Filter rows ------------------------------------------------
       One sideways-scrolling strip of pills instead of a .btn-group wrapped
       onto three lines with its corners shaved off. */
    .filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Bleeds to the screen edges so it reads as a strip you can push. */
        margin-inline: -1rem;
        padding: 0.15rem 1rem 0.35rem;
    }

    .filter-chips::-webkit-scrollbar {
        display: none;
    }

    .filter-chips > .btn {
        flex: 0 0 auto;
        min-height: 42px;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* ---- Tables become cards ---------------------------------------
       Every list page used to carry its own copy of `min-width: 700px` and
       `white-space: nowrap`, so all of them scrolled sideways and the actions
       column sat off screen. Here each row is a card and each cell prints its
       own column name from data-label. */
    .table-scroll {
        max-height: none;
        overflow: visible;
    }

    /* Once the rows are cards, the card around the table is a second frame. */
    .table-stack-card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .table-stack-card > .card-body {
        padding: 0 !important;
    }

    .dashboard-main .table-stack,
    .dashboard-main .table-stack > tbody,
    .dashboard-main .table-stack > tbody > tr,
    .dashboard-main .table-stack > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .dashboard-main .table-stack > thead {
        display: none;
    }

    .dashboard-main .table-stack {
        font-size: 0.9rem;
        border: 0;
        margin-bottom: 0;
    }

    .dashboard-main .table-stack > tbody > tr {
        background: #0f1629;
        border: 1px solid #1a1f35;
        border-radius: 14px;
        padding: 0.2rem 0.95rem;
        margin-bottom: 0.85rem;
    }

    /* table-striped paints the cells, which would cover the card. */
    .dashboard-main .table-stack > tbody > tr > td {
        background: transparent !important;
        box-shadow: none !important;
        border: 0;
        /* A divider above rather than below: a card whose last cells are
           hidden (the shifts grid drops a responder's days off) would
           otherwise end on a line with nothing under it. */
        border-top: 1px solid rgba(226, 169, 56, 0.1);
        padding: 0.6rem 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.2rem 0.75rem;
        white-space: normal;
        color: #e0e0e0;
    }

    .dashboard-main .table-stack > tbody > tr > td:first-child {
        border-top: 0;
    }

    .dashboard-main .table-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 7rem;
        max-width: 45%;
        color: #8a93a8;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.7;
    }

    /* The identifier reads as the card's title rather than another field. */
    .dashboard-main .table-stack > tbody > tr > td.cell-id {
        font-size: 1.05rem;
        font-weight: 700;
        color: #e2a938;
        padding-top: 0.8rem;
    }

    /* A cell that spans the table ("nothing here yet") carries no label. */
    .dashboard-main .table-stack > tbody > tr > td.cell-id::before,
    .dashboard-main .table-stack > tbody > tr > td.cell-actions::before,
    .dashboard-main .table-stack > tbody > tr > td[colspan]::before {
        display: none;
    }

    /* Actions get a full-width row of thumb-sized buttons. */
    .dashboard-main .table-stack > tbody > tr > td.cell-actions {
        display: block;
        padding-bottom: 0.85rem;
    }

    .dashboard-main .table-stack > tbody > tr > td.cell-actions > .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }

    .dashboard-main .table-stack > tbody > tr > td.cell-actions .btn {
        flex: 0 1 auto;
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    /* A status picker in the actions row is the widest control there. */
    .dashboard-main .table-stack > tbody > tr > td.cell-actions .form-select {
        width: auto !important;
        min-width: 10rem;
    }

    .dashboard-main .table-stack > tbody > tr > td[colspan] {
        display: block;
        text-align: center;
    }

    /* Tables that stay tables (the shifts week grid) scroll on their own. */
    .dashboard-main .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .dashboard-main .table:not(.table-stack) {
        font-size: 0.875rem;
    }

    /* ---- Pagination ------------------------------------------------- */
    .dash-pager {
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .dash-pager .btn {
        flex: 1 1 40%;
    }

    /* "Page 2 of 7" above the buttons rather than squeezed between them. */
    .dash-pager .dash-pager-label {
        flex: 1 1 100%;
        order: -1;
        text-align: center;
    }

    /* Section 3 gives every textarea a 110px floor, which suits a message
       field in a form and not a chat composer — between 768 and 991px the
       console's own rule does not apply and the composer became a box three
       lines tall. */
    .chat-input .message-textarea {
        min-height: 44px;
    }

    /* Bootstrap's offcanvas sizes itself for a tablet. */
    .dashboard-drawer {
        width: min(82vw, 320px);
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }
}