/* public/assets/css/mobile-app.css
 * ---------------------------------------------------------------------------
 * Native-app skin for phones / installed PWA.
 * Loaded AFTER app.css. Everything visual lives inside the phone media query
 * so desktop keeps its current look untouched.
 * ---------------------------------------------------------------------------
 */

:root {
    --app-bar-h: 56px;
    --tab-bar-h: 58px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-ease: cubic-bezier(.22, .61, .36, 1);
}

/* App chrome is mobile-only; hidden by default (desktop) */
.app-bar,
.app-search,
.tab-bar,
.app-sheet-backdrop,
.app-sheet,
.app-fab,
.app-ptr,
.sidebar-close {
    display: none;
}

/* ===========================================================================
   PHONE / APP MODE
   =========================================================================== */
@media (max-width: 768px) {

    /* ---------- Base feel: no tap flash, no auto text zoom, no bounce ---------- */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overscroll-behavior-y: none;
        -webkit-tap-highlight-color: transparent;
        background: #eef2f9;
    }

    body.app-mode {
        padding-top: calc(var(--app-bar-h) + var(--safe-top));
        padding-bottom: calc(var(--tab-bar-h) + var(--safe-bottom));
    }

    /* Lock scroll when a sheet / drawer is open */
    body.sheet-open,
    body.sidebar-open {
        overflow: hidden;
    }

    /* Buttons and links get real touch targets */
    button,
    .btn-sm,
    .btn-primary,
    .btn-danger,
    a.btn,
    input[type="submit"] {
        min-height: 40px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* iOS refuses to stop zooming on focus under 16px */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ---------- Top app bar ---------- */
    .app-bar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 60;
        align-items: center;
        gap: 6px;
        height: calc(var(--app-bar-h) + var(--safe-top));
        padding: var(--safe-top) 8px 0;
        background: linear-gradient(135deg, #2563eb, #0ea5e9);
        color: #fff;
        box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
        transition: transform .26s var(--app-ease);
    }

    /* Hide-on-scroll-down, reveal-on-scroll-up (native list behaviour) */
    body.app-bar-hidden .app-bar {
        transform: translateY(calc(-1 * (var(--app-bar-h) + var(--safe-top))));
    }

    .app-bar-btn {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 12px;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        cursor: pointer;
        padding: 0;
        transition: background .15s ease, transform .1s ease;
    }

    .app-bar-btn:active {
        transform: scale(.92);
        background: rgba(255, 255, 255, .26);
    }

    .app-bar-btn svg {
        width: 20px;
        height: 20px;
    }

    .app-bar-title {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 2px;
    }

    .app-bar-title strong {
        font-family: 'Space Grotesk', 'Manrope', sans-serif;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-bar-title span {
        font-size: 11px;
        opacity: .85;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-bar-avatar {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .22);
        border: 1px solid rgba(255, 255, 255, .4);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Expanding search row under the bar */
    .app-search {
        display: block;
        position: fixed;
        top: calc(var(--app-bar-h) + var(--safe-top));
        left: 0;
        right: 0;
        z-index: 59;
        padding: 8px 10px;
        background: #fff;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
        /* Park it fully above the viewport – translateY(-100%) alone would
           leave it peeking out once the app bar hides on scroll. */
        transform: translateY(calc(-100% - var(--app-bar-h) - var(--safe-top)));
        transition: transform .24s var(--app-ease);
    }

    body.app-search-open .app-search {
        transform: translateY(0);
    }

    .app-search input {
        width: 100%;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-soft);
        outline: none;
    }

    /* ---------- Bottom tab bar ---------- */
    .tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        height: calc(var(--tab-bar-h) + var(--safe-bottom));
        padding-bottom: var(--safe-bottom);
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(148, 163, 184, .35);
        box-shadow: 0 -6px 24px rgba(15, 23, 42, .08);
    }

    .tab-bar a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: #64748b;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .01em;
        border: none;
        background: none;
        cursor: pointer;
        padding: 6px 2px 4px;
        position: relative;
        transition: color .15s ease;
    }

    .tab-bar a svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.7;
        transition: transform .18s var(--app-ease);
    }

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

    .tab-bar a:active svg {
        transform: scale(.86);
    }

    .tab-bar a.active {
        color: var(--accent-strong);
    }

    .tab-bar a.active::before {
        content: '';
        position: absolute;
        top: 0;
        width: 26px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--accent);
    }

    /* ---------- Bottom sheet (More menu / pickers) ---------- */
    .app-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(15, 23, 42, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .24s ease;
    }

    body.sheet-open .app-sheet-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .app-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 71;
        max-height: 84vh;
        background: #fff;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -14px 44px rgba(15, 23, 42, .28);
        transform: translateY(100%);
        transition: transform .3s var(--app-ease);
        padding-bottom: var(--safe-bottom);
    }

    .app-sheet.is-open {
        transform: translateY(0);
    }

    .app-sheet-grabber {
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #cbd5e1;
        margin: 10px auto 4px;
        flex: 0 0 auto;
    }

    .app-sheet-header {
        flex: 0 0 auto;
        padding: 4px 18px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .app-sheet-header strong {
        font-family: 'Space Grotesk', 'Manrope', sans-serif;
        font-size: 17px;
    }

    .app-sheet-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 14px 18px;
    }

    .app-sheet-section {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #94a3b8;
        font-weight: 700;
        margin: 12px 4px 6px;
    }

    .app-sheet-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .app-sheet-grid a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 14px 6px;
        border-radius: 16px;
        background: #f5f7fb;
        border: 1px solid #e5e7eb;
        color: #0f172a;
        font-size: 11.5px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        line-height: 1.25;
        transition: transform .12s ease, background .15s ease;
    }

    .app-sheet-grid a:active {
        transform: scale(.95);
        background: #e8edf7;
    }

    .app-sheet-grid a .icon {
        width: 38px;
        height: 38px;
        border-radius: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(14, 165, 233, .18));
        color: var(--accent-strong);
    }

    .app-sheet-grid a.active {
        background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(14, 165, 233, .16));
        border-color: rgba(37, 99, 235, .34);
    }

    .app-sheet-grid a.danger .icon {
        background: rgba(220, 38, 38, .12);
        color: var(--danger);
    }

    .app-sheet-user {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(14, 165, 233, .14));
        border: 1px solid rgba(37, 99, 235, .2);
        margin-bottom: 4px;
    }

    .app-sheet-user .av {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: linear-gradient(135deg, #2563eb, #0ea5e9);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
    }

    .app-sheet-user .nm {
        font-weight: 700;
        font-size: 14px;
    }

    .app-sheet-user .rl {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    /* ---------- Shell / layout ---------- */
    .app-shell {
        display: block;
        min-height: auto;
    }

    .main {
        padding: 12px 12px 18px;
        border-radius: 0;
    }

    /* The per-page desktop header is replaced by the app bar */
    body.app-mode .main-header {
        display: none !important;
    }

    /* Sidebar drawer stays available but the tab bar is the primary nav.
       Never full-bleed: leaving the backdrop visible is how a drawer reads
       as a drawer instead of a dead-end screen. */
    .sidebar {
        z-index: 80;
        width: min(84vw, 320px) !important;
        padding-top: calc(14px + var(--safe-top)) !important;
        padding-bottom: calc(16px + var(--safe-bottom)) !important;
        border-radius: 0 22px 22px 0;
    }

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

    .sidebar-close {
        position: absolute;
        top: calc(12px + var(--safe-top));
        right: 12px;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #f1f5f9;
        color: #0f172a;
        cursor: pointer;
        padding: 0;
    }

    .sidebar-close svg {
        width: 18px;
        height: 18px;
    }

    .sidebar-brand {
        padding-right: 44px;
    }

    /* ---------- Cards ---------- */
    .content-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        border-radius: 18px;
        padding: 14px 13px 13px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
    }

    .card-value {
        font-size: 22px;
    }

    /* Every grid collapses to a single column: side-by-side cards on a phone
       squeeze their contents until numbers get clipped. */
    .content-grid,
    .dashboard-grid,
    .chart-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .content-grid > *,
    .dashboard-grid > * {
        grid-column: 1 / -1 !important;
        min-width: 0;
    }

    /* Stat tiles inside a card can still pair up – they are small by design.
       !important: the page declares an auto-fit/200px track that collapses to
       a single column at phone width. */
    .dashboard-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* Date range pickers sit side by side instead of one per line */
    .dashboard-date-fields {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
        gap: 10px;
    }

    .dashboard-date-fields .field-inline {
        min-width: 0;
    }

    .dashboard-date-fields input[type="date"] {
        width: 100%;
    }

    .dashboard-stat {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .dashboard-stat .value,
    .dashboard-stat .value-positive,
    .dashboard-stat .value-negative {
        font-size: 18px;
    }

    .dashboard-stat .hint {
        font-size: 10.5px;
    }

    /* ---------- Card headers: title over actions, never side by side ----------
       Pages lay these out as `justify-content: space-between` rows, which on a
       phone drives the title and the buttons into each other. */
    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }

    .card-header > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Status chips must hug their text, not stretch across the card */
    .card-header .card-tag,
    .card-header .badge,
    .card-header .status-pill {
        align-self: flex-start;
        width: auto !important;
    }

    .card-header .card-title {
        line-height: 1.3;
    }

    /* Action clusters: wrap freely, and let long controls take the full width */
    .header-actions,
    .shipment-statement-actions,
    .group-actions,
    .statement-select-wrapper,
    .toolbar-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-right: 0 !important;
        width: 100%;
    }

    .header-actions .search-input,
    .header-actions input[type="text"],
    .shipment-statement-actions .statement-search,
    .shipment-statement-actions .statement-select,
    .statement-select-wrapper {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }

    .header-actions > button,
    .shipment-statement-actions > button {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Segmented pill groups keep their shape, on their own line */
    .statement-filter-pills {
        flex: 0 0 auto;
    }

    /* ---------- Grouped blocks (shipment by government / customer) ---------- */
    .government-header,
    .group-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
    }

    /* A long name must wrap as a block, not deform the pill */
    .government-badge,
    .group-badge {
        align-self: flex-start;
        max-width: 100%;
        border-radius: 12px !important;
        white-space: normal;
        line-height: 1.35;
        box-shadow: 0 6px 14px rgba(37, 99, 235, .28) !important;
    }

    .government-meta,
    .group-meta {
        white-space: normal !important;
        line-height: 1.5;
    }

    .government-block {
        padding-left: 14px !important;
    }

    /* ---------- Toolbars become a sticky action row ---------- */
    .users-toolbar {
        gap: 8px;
        margin-bottom: 10px;
    }

    .users-toolbar .btn-primary,
    .users-toolbar .btn-sm {
        border-radius: 12px;
    }

    .users-count {
        font-size: 12px;
    }

    /* The floating action button already offers this action */
    body.has-fab [data-fab-source] {
        display: none !important;
    }

    /* Dashboard search panel: don't reserve a whole screen while it's empty */
    .global-search-results {
        height: auto !important;
        min-height: 0 !important;
        max-height: 62vh;
    }

    .global-search-empty {
        padding: 10px 4px;
        text-align: center;
        font-size: 13px;
    }

    /* ---------- Segmented / filter rows scroll horizontally ---------- */
    .app-scroll-x {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .app-scroll-x::-webkit-scrollbar {
        display: none;
    }

    /* =======================================================================
       TABLES -> CARD LIST  (the core of the app feel)
       JS adds .mobile-cards + data-label on each cell.
       !important is required: many pages ship their own inline <style> for
       the same tables, which would otherwise win the cascade.
       ======================================================================= */
    table.mobile-cards {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-collapse: separate !important;
        background: transparent !important;
        font-size: 13px !important;
    }

    table.mobile-cards > thead {
        display: none !important;
    }

    table.mobile-cards > tbody,
    table.mobile-cards > tfoot {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    table.mobile-cards > tbody > tr,
    table.mobile-cards > tfoot > tr {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        padding: 10px 12px !important;
        background: #fff !important;
        border: 1px solid rgba(148, 163, 184, .28) !important;
        border-radius: 16px !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
        position: relative;
        overflow: hidden;
    }

    table.mobile-cards > tbody > tr:active {
        background: #f8fafc !important;
    }

    table.mobile-cards > tbody > tr > td,
    table.mobile-cards > tfoot > tr > td,
    table.mobile-cards > tbody > tr > th {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 12px;
        text-align: right !important;
        white-space: normal !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px dashed rgba(148, 163, 184, .3) !important;
        font-size: 13px !important;
        min-height: 34px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    table.mobile-cards > tbody > tr > td:last-child,
    table.mobile-cards > tfoot > tr > td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    table.mobile-cards > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        max-width: 42%;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #94a3b8;
        white-space: normal;
        line-height: 1.35;
    }

    table.mobile-cards > tbody > tr > td[data-label=""]::before,
    table.mobile-cards > tbody > tr > td.mc-nolabel::before {
        display: none;
    }

    /* First meaningful cell becomes the card title */
    table.mobile-cards > tbody > tr > td.mc-title {
        border-bottom: 1px solid rgba(148, 163, 184, .28) !important;
        padding-bottom: 8px !important;
        margin-bottom: 2px;
        font-size: 15px !important;
        font-weight: 700;
        color: var(--text-main);
    }

    table.mobile-cards > tbody > tr > td.mc-title::before {
        font-size: 11px;
        align-self: center;
    }

    /* Empty cells and row counters add noise on a phone – drop them */
    table.mobile-cards > tbody > tr > td.mc-empty,
    table.mobile-cards > tbody > tr > td.mc-index {
        display: none !important;
    }

    /* Rows that span the table (empty states, group headers, totals) */
    table.mobile-cards > tbody > tr.mc-span,
    table.mobile-cards > tfoot > tr.mc-span {
        background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(14, 165, 233, .1)) !important;
        border-color: rgba(37, 99, 235, .22) !important;
        box-shadow: none !important;
        font-weight: 700;
    }

    table.mobile-cards > tbody > tr.mc-span > td,
    table.mobile-cards > tfoot > tr.mc-span > td {
        display: block !important;
        text-align: center !important;
        border-bottom: none !important;
    }

    table.mobile-cards > tbody > tr.mc-span > td::before {
        display: none !important;
    }

    /* Action cells become a button row pinned to the card footer */
    table.mobile-cards > tbody > tr > td.mc-actions {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end !important;
        gap: 8px;
        padding-top: 10px !important;
        margin-top: 4px;
        border-top: 1px solid rgba(148, 163, 184, .28) !important;
        border-bottom: none !important;
    }

    table.mobile-cards > tbody > tr > td.mc-actions::before {
        flex: 1 1 auto;
        max-width: none;
        align-self: center;
    }

    table.mobile-cards > tbody > tr > td.mc-actions button,
    table.mobile-cards > tbody > tr > td.mc-actions a {
        min-height: 34px;
        border-radius: 10px;
        font-size: 12.5px;
        padding: 6px 12px;
    }

    /* Cells holding inputs need the full width */
    table.mobile-cards > tbody > tr > td.mc-input {
        display: block !important;
        text-align: left !important;
    }

    table.mobile-cards > tbody > tr > td.mc-input::before {
        display: block;
        flex: none;
        max-width: none;
        margin-bottom: 5px;
    }

    table.mobile-cards > tbody > tr > td.mc-input input,
    table.mobile-cards > tbody > tr > td.mc-input select,
    table.mobile-cards > tbody > tr > td.mc-input textarea {
        width: 100% !important;
    }

    /* Wrappers no longer need to be scroll boxes in card mode */
    .table-wrap.mc-host,
    .users-table-wrap.mc-host,
    .table-responsive.mc-host {
        overflow: visible !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* Tables kept as real tables (opt-out) still scroll nicely */
    .table-wrap,
    .users-table-wrap,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Pagination controls, app style */
    .js-pagination,
    .table-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 4px 0 8px;
        flex-wrap: wrap;
    }

    .js-pagination .pg-btn,
    .table-pagination button {
        border-radius: 999px;
        padding: 8px 16px;
        min-height: 38px;
    }

    /* ---------- Modals become bottom sheets ---------- */
    .user-modal-backdrop {
        z-index: 90;
    }

    .user-modal-backdrop.show {
        align-items: flex-end;
    }

    .user-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh;
        border-radius: 22px 22px 0 0 !important;
        padding: 16px 14px calc(16px + var(--safe-bottom)) !important;
        animation: sheet-up .3s var(--app-ease);
    }

    @keyframes sheet-up {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .user-modal-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid var(--border);
    }

    .user-modal-footer .btn-primary,
    .user-modal-footer .btn-sm {
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px;
        border-radius: 14px;
    }

    /* ---------- Floating action button ---------- */
    .app-fab {
        display: inline-flex;
        position: fixed;
        right: 16px;
        bottom: calc(var(--tab-bar-h) + var(--safe-bottom) + 16px);
        z-index: 55;
        width: 54px;
        height: 54px;
        border-radius: 18px;
        align-items: center;
        justify-content: center;
        border: none;
        background: linear-gradient(135deg, #2563eb, #0ea5e9);
        color: #fff;
        box-shadow: 0 14px 30px rgba(37, 99, 235, .42);
        cursor: pointer;
        transition: transform .14s var(--app-ease), opacity .2s ease;
    }

    .app-fab svg {
        width: 26px;
        height: 26px;
    }

    .app-fab:active {
        transform: scale(.9);
    }

    .app-fab.hidden {
        opacity: 0;
        pointer-events: none;
        transform: scale(.6);
    }

    /* ---------- Misc mobile polish ---------- */
    .subscription-alert {
        top: calc(var(--app-bar-h) + var(--safe-top) + 6px);
        left: 8px;
        right: 8px;
        border-radius: 14px;
        font-size: 12px;
    }

    .main-title-block h1 {
        font-size: 19px;
    }

    /* Native-ish pull to refresh indicator */
    .app-ptr {
        display: flex;
        position: fixed;
        top: calc(var(--app-bar-h) + var(--safe-top));
        left: 50%;
        z-index: 58;
        width: 34px;
        height: 34px;
        margin-left: -17px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-60px);
        opacity: 0;
        pointer-events: none;
    }

    .app-ptr i {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid rgba(37, 99, 235, .25);
        border-top-color: var(--accent);
    }

    .app-ptr.spin i {
        animation: spin .7s linear infinite;
    }

    /* Ripple */
    .app-ripple {
        position: absolute;
        border-radius: 50%;
        transform: scale(0);
        background: rgba(37, 99, 235, .22);
        pointer-events: none;
        animation: app-ripple .55s ease-out forwards;
    }

    @keyframes app-ripple {
        to {
            transform: scale(2.4);
            opacity: 0;
        }
    }
}

/* ===========================================================================
   Very small phones
   =========================================================================== */
@media (max-width: 380px) {
    .tab-bar a {
        font-size: 9.5px;
    }

    .app-sheet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================================================
   Installed (standalone) mode – remove any remaining "web page" cues
   =========================================================================== */
@media (display-mode: standalone), (display-mode: fullscreen) {
    body {
        user-select: none;
        -webkit-user-select: none;
    }

    input,
    textarea,
    select,
    [contenteditable],
    table td,
    .card,
    .app-selectable {
        user-select: text;
        -webkit-user-select: text;
    }
}

/* Never print the app chrome */
@media print {

    .app-bar,
    .tab-bar,
    .app-sheet,
    .app-sheet-backdrop,
    .app-fab,
    .app-search,
    .app-ptr {
        display: none !important;
    }

    body.app-mode {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    table.mobile-cards {
        display: table !important;
    }

    table.mobile-cards > thead {
        display: table-header-group !important;
    }

    table.mobile-cards > tbody {
        display: table-row-group !important;
    }

    table.mobile-cards > tbody > tr {
        display: table-row !important;
    }

    table.mobile-cards > tbody > tr > td {
        display: table-cell !important;
    }

    table.mobile-cards > tbody > tr > td::before {
        display: none !important;
    }
}