/* =============================================================
   AVITAN INVOICES — Mobile UI v3
   Scope: body.is-mobile-experience only. Desktop untouched.
   Every selector below MUST be prefixed with .is-mobile-experience.
   ============================================================= */

/* ---------- Tokens ---------- */
body.is-mobile-experience {
    --m-bg: #f4f7fc;
    --m-bg-grad: linear-gradient(180deg, #f7faff 0%, #eef3fb 100%);
    --m-surface: #ffffff;
    --m-surface-2: #f8fafc;
    --m-border: #e5e7eb;
    --m-border-strong: #d1d5db;
    --m-ink: #0f172a;
    --m-ink-2: #1f2937;
    --m-muted: #64748b;
    --m-faint: #94a3b8;

    --m-brand: #2563eb;
    --m-brand-h: #1d4ed8;
    --m-brand-soft: #dbeafe;
    --m-brand-grad: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);

    --m-success: #10b981;
    --m-success-soft: #d1fae5;
    --m-warning: #f59e0b;
    --m-warning-soft: #fef3c7;
    --m-danger: #dc2626;
    --m-danger-soft: #fee2e2;

    --m-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --m-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --m-shadow-md: 0 6px 18px rgba(15, 23, 42, .08);
    --m-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
    --m-shadow-brand: 0 8px 24px rgba(37, 99, 235, .25);

    --m-radius: 12px;
    --m-radius-lg: 16px;
    --m-radius-xl: 20px;
    --m-radius-pill: 999px;

    --m-tap: 48px;
    --m-field-h: 50px;

    --m-safe-top: env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-safe-left: env(safe-area-inset-left, 0px);
    --m-safe-right: env(safe-area-inset-right, 0px);

    --m-ease: cubic-bezier(.22, 1, .36, 1);
    --m-spring: cubic-bezier(.34, 1.4, .64, 1);

    --m-header-h: 56px;

    /* Reset desktop chrome */
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--m-bg-grad);
    color: var(--m-ink);
    font-family: var(--font-hebrew, "Heebo"), system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
}

html:has(body.is-mobile-experience) {
    overflow-x: hidden;
    max-width: 100vw;
}

body.is-mobile-experience * {
    -webkit-tap-highlight-color: transparent;
}

body.is-mobile-experience button,
body.is-mobile-experience a,
body.is-mobile-experience [role="button"],
body.is-mobile-experience input[type="submit"] {
    touch-action: manipulation;
}

/* ---------- Layout shell ---------- */

body.is-mobile-experience .dashboard-container {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    background: transparent;
}

body.is-mobile-experience .main-content {
    display: block;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding:
        calc(var(--m-header-h) + 10px + var(--m-safe-top))
        calc(12px + var(--m-safe-right))
        calc(80px + var(--m-safe-bottom))
        calc(12px + var(--m-safe-left));
    background: transparent;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Hard guard against any descendant overflowing horizontally */
body.is-mobile-experience .main-content {
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
}

body.is-mobile-experience .main-content > *,
body.is-mobile-experience .card,
body.is-mobile-experience .card > *,
body.is-mobile-experience table,
body.is-mobile-experience .table-container,
body.is-mobile-experience form,
body.is-mobile-experience form > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body.is-mobile-experience img,
body.is-mobile-experience iframe,
body.is-mobile-experience video {
    max-width: 100%;
    height: auto;
}

body.is-mobile-experience.no-mobile-header .main-content {
    padding-top: calc(16px + var(--m-safe-top));
}

/* ---------- Mobile top header ---------- */

body.is-mobile-experience .mobile-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: calc(var(--m-header-h) + var(--m-safe-top));
    padding:
        var(--m-safe-top)
        calc(12px + var(--m-safe-right))
        0
        calc(12px + var(--m-safe-left));
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--m-border);
    box-shadow: var(--m-shadow-xs);
}

body.is-mobile-experience .mobile-header .mobile-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-ink);
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.is-mobile-experience .mobile-header .mobile-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--m-tap);
    height: var(--m-tap);
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--m-ink);
    border-radius: var(--m-radius);
    cursor: pointer;
    transition: background .15s ease;
}

body.is-mobile-experience .mobile-header .mobile-nav-btn:active {
    background: var(--m-surface-2);
}

body.is-mobile-experience .mobile-header .mobile-nav-btn svg {
    width: 24px;
    height: 24px;
}

/* ---------- Sidebar drawer ---------- */

body.is-mobile-experience .sidebar {
    position: fixed !important;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(86vw, 340px);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding:
        calc(var(--m-safe-top) + 12px)
        16px
        calc(var(--m-safe-bottom) + 16px) !important;
    background: var(--m-surface);
    box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
    transform: translateX(100%);
    transition: transform .28s var(--m-ease);
    z-index: 200;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: none;
    border-radius: 0;
}

body.is-mobile-experience .sidebar.open {
    transform: translateX(0);
}

body.is-mobile-experience #sidebarOverlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    display: block !important;
}

body.is-mobile-experience #sidebarOverlay.open {
    opacity: 1;
    pointer-events: auto;
}

body.is-mobile-experience .sidebar .mobile-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-block-start: calc(var(--m-safe-top) + 8px);
    inset-inline-start: 12px;
    width: 40px;
    height: 40px;
    border-radius: var(--m-radius);
    background: var(--m-surface-2);
    border: none;
    color: var(--m-ink-2);
    font-size: 22px;
    cursor: pointer;
}

body.is-mobile-experience .sidebar-header {
    padding: 12px 8px 16px;
    border-bottom: 1px solid var(--m-border);
    margin-bottom: 8px;
}

body.is-mobile-experience .sidebar-menu {
    padding: 0;
    margin: 0;
}

body.is-mobile-experience .accordion-item {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--m-surface);
}

body.is-mobile-experience .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--m-tap);
    padding: 12px 14px;
    background: var(--m-surface);
    border: none;
    color: var(--m-ink);
    font-weight: 600;
    cursor: pointer;
}

body.is-mobile-experience .accordion-content a {
    display: flex;
    align-items: center;
    min-height: var(--m-tap);
    padding: 10px 14px;
    color: var(--m-ink-2);
    text-decoration: none;
    border-block-start: 1px solid var(--m-border);
}

body.is-mobile-experience .accordion-content a:active {
    background: var(--m-brand-soft);
}

body.is-mobile-experience .sidebar-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--m-border);
}

/* ---------- Cards ---------- */

body.is-mobile-experience .card {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-lg);
    padding: 12px;
    margin: 0 0 12px;
    box-shadow: var(--m-shadow-sm);
    width: 100%;
    overflow: hidden;
}

body.is-mobile-experience .card.header-card {
    background: var(--m-brand-grad);
    color: #fff;
    border: none;
    box-shadow: var(--m-shadow-brand);
    padding: 14px 14px;
}

body.is-mobile-experience .card.header-card h1,
body.is-mobile-experience .card.header-card h2,
body.is-mobile-experience .card.header-card h3 {
    color: #fff;
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
}

body.is-mobile-experience .card.header-card .client-info {
    color: rgba(255, 255, 255, .92);
    font-size: .85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.is-mobile-experience .card.header-card .badge {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
}

/* ---------- Forms / inputs ---------- */

body.is-mobile-experience label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--m-ink-2);
    margin-bottom: 4px;
}

body.is-mobile-experience input[type="text"],
body.is-mobile-experience input[type="email"],
body.is-mobile-experience input[type="tel"],
body.is-mobile-experience input[type="number"],
body.is-mobile-experience input[type="date"],
body.is-mobile-experience input[type="password"],
body.is-mobile-experience input[type="search"],
body.is-mobile-experience input[type="url"],
body.is-mobile-experience select,
body.is-mobile-experience textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1.5px solid var(--m-border-strong);
    border-radius: var(--m-radius);
    background: var(--m-surface);
    color: var(--m-ink);
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.is-mobile-experience input:focus,
body.is-mobile-experience select:focus,
body.is-mobile-experience textarea:focus {
    outline: none;
    border-color: var(--m-brand);
    box-shadow: 0 0 0 3px var(--m-brand-soft);
}

body.is-mobile-experience textarea {
    min-height: 90px;
    resize: vertical;
}

body.is-mobile-experience select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-inline-start: 38px;
}

body.is-mobile-experience input[type="date"] {
    direction: rtl;
}

body.is-mobile-experience input[type="checkbox"],
body.is-mobile-experience input[type="radio"] {
    width: 22px;
    height: 22px;
    accent-color: var(--m-brand);
    margin: 0 4px;
}

/* Force form rows single column on mobile (override inline grid) */
body.is-mobile-experience form [style*="grid-template-columns"],
body.is-mobile-experience form [style*="grid-template-columns"] > div {
    display: block !important;
}
body.is-mobile-experience form [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}
body.is-mobile-experience form [style*="grid-template-columns"] > div + div {
    margin-top: 0;
}

/* Autocomplete dropdown */
body.is-mobile-experience .autocomplete-wrapper {
    position: relative;
}

body.is-mobile-experience .autocomplete-dropdown {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 4px);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-md);
    max-height: 240px;
    overflow-y: auto;
    z-index: 80;
}

body.is-mobile-experience .autocomplete-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--m-border);
    min-height: var(--m-tap);
    display: flex;
    align-items: center;
}

body.is-mobile-experience .autocomplete-item:last-child {
    border-bottom: none;
}

body.is-mobile-experience .autocomplete-item:active {
    background: var(--m-brand-soft);
}

/* Import action row (from invoice_form) */
body.is-mobile-experience .import-action-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
}
body.is-mobile-experience .import-action-row .btn {
    width: 100%;
}

/* ---------- Buttons ---------- */

body.is-mobile-experience .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--m-radius);
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
    text-decoration: none;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

body.is-mobile-experience .btn:active {
    transform: scale(.97);
}

body.is-mobile-experience .btn-primary {
    background: var(--m-brand);
    border-color: var(--m-brand);
    color: #fff;
    box-shadow: var(--m-shadow-brand);
}

body.is-mobile-experience .btn-primary:active {
    background: var(--m-brand-h);
    border-color: var(--m-brand-h);
}

body.is-mobile-experience .btn-outline {
    background: var(--m-surface);
    border-color: var(--m-border-strong);
    color: var(--m-ink-2);
}

body.is-mobile-experience .btn-outline:active {
    background: var(--m-surface-2);
}

body.is-mobile-experience .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--m-ink-2);
}

body.is-mobile-experience .btn-sm {
    min-height: 40px;
    padding: 8px 14px;
    font-size: .92rem;
}

body.is-mobile-experience .btn-icon {
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
}

/* Save buttons in forms become full width sticky */
body.is-mobile-experience #saveButton,
body.is-mobile-experience .form-save-btn {
    width: 100%;
}

/* ---------- Tables → cards ---------- */

body.is-mobile-experience .table-container {
    overflow: visible;
    margin: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body.is-mobile-experience table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    border: none;
    border-collapse: separate;
    background: transparent;
    table-layout: auto;
}

body.is-mobile-experience table thead {
    display: none;
}

body.is-mobile-experience table tbody {
    display: block;
}

body.is-mobile-experience table tbody tr {
    display: block;
    width: 100%;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    margin-bottom: 8px;
    padding: 10px 12px;
    box-shadow: var(--m-shadow-xs);
}

body.is-mobile-experience table tbody tr:active {
    background: var(--m-surface-2);
}

body.is-mobile-experience table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border: none;
    font-size: .9rem;
    color: var(--m-ink);
    text-align: start;
    min-height: 32px;
    width: 100%;
    overflow: hidden;
}

body.is-mobile-experience table tbody td > * {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.is-mobile-experience table tbody td::before {
    content: attr(data-label);
    font-size: .76rem;
    font-weight: 600;
    color: var(--m-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

body.is-mobile-experience table tbody td:empty,
body.is-mobile-experience table tbody td[data-label=""] {
    display: none;
}

body.is-mobile-experience table tbody td[data-label=""]::before {
    display: none;
}

/* Action cells: stack buttons */
body.is-mobile-experience table tbody td[data-label="פעולות"],
body.is-mobile-experience table tbody td[data-label="עדכון מספר התחלתי"] {
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--m-border);
    margin-top: 6px;
}

body.is-mobile-experience table tbody td[data-label="פעולות"] .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
}

/* tfoot (add-row) buttons full-width */
body.is-mobile-experience table tfoot {
    display: block;
}

body.is-mobile-experience table tfoot tr,
body.is-mobile-experience table tfoot td {
    display: block;
    padding: 0;
    border: none;
}

body.is-mobile-experience table tfoot td::before {
    display: none;
}

body.is-mobile-experience table tfoot .btn {
    width: 100%;
    margin-bottom: 6px;
}

/* Editable line-item / payment tables: always card style with field stack */
body.is-mobile-experience .doc-table {
    width: 100%;
    min-width: 0 !important;
}

body.is-mobile-experience .doc-table tbody tr {
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

body.is-mobile-experience .doc-table tbody td {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0;
    min-height: 0;
    width: 100%;
    overflow: visible;
}

body.is-mobile-experience .doc-table tbody td::before {
    margin-bottom: 3px;
    font-size: .72rem;
}

body.is-mobile-experience .doc-table tbody td input,
body.is-mobile-experience .doc-table tbody td select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 15px;
}

body.is-mobile-experience .doc-table tbody td .autocomplete-wrapper {
    width: 100%;
    display: flex;
    gap: 4px;
}

body.is-mobile-experience .doc-table tbody td .autocomplete-wrapper > input {
    flex: 1;
    min-width: 0;
}

body.is-mobile-experience .doc-table tbody td .btn-icon {
    align-self: flex-end;
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
}

/* Compress numeric / total cells side-by-side on narrow phones */
body.is-mobile-experience .doc-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 4px;
}

body.is-mobile-experience .doc-table tbody td:nth-child(1),
body.is-mobile-experience .doc-table tbody td:nth-child(2) {
    grid-column: 1 / -1;
}

body.is-mobile-experience .doc-table tbody td:last-child {
    grid-column: 1 / -1;
}

/* Summary card (totals) */
body.is-mobile-experience .doc-summary-card {
    width: 100%;
    background: var(--m-surface-2);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    padding: 12px;
}

body.is-mobile-experience .doc-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: .9rem;
}

body.is-mobile-experience .doc-summary-row.is-total {
    border-top: 1px solid var(--m-border);
    margin-top: 4px;
    padding-top: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-ink);
}

/* ---------- Modals → bottom sheets ---------- */

body.is-mobile-experience [id$="Modal"]:not(#sidebarOverlay),
body.is-mobile-experience [id$="-backdrop"],
body.is-mobile-experience .site-dialog-backdrop,
body.is-mobile-experience .site-message-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
}

body.is-mobile-experience .modal-content,
body.is-mobile-experience .site-dialog,
body.is-mobile-experience .site-message-dialog,
body.is-mobile-experience [id$="Modal"] > div:first-child:not([id$="-backdrop"]) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0 !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    overflow-y: auto;
    padding-bottom: calc(16px + var(--m-safe-bottom)) !important;
    box-shadow: 0 -16px 40px rgba(15, 23, 42, .25);
    animation: m-sheet-up .3s var(--m-ease);
}

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

/* Sheet handle bar */
body.is-mobile-experience .modal-content::before,
body.is-mobile-experience .site-dialog::before,
body.is-mobile-experience .site-message-dialog::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 12px;
    border-radius: 999px;
    background: var(--m-border-strong);
}

/* iframe inside doc preview modal — full width */
body.is-mobile-experience #documentModal iframe,
body.is-mobile-experience #successModal iframe,
body.is-mobile-experience #pdfFrame {
    width: 100% !important;
    min-height: 60vh;
    min-height: 60dvh;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
}

/* Modal action rows: vertical stack, full width */
body.is-mobile-experience [id$="Modal"] .modal-actions,
body.is-mobile-experience .site-dialog-actions,
body.is-mobile-experience .site-message-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    margin-top: 14px;
}

body.is-mobile-experience [id$="Modal"] .modal-actions .btn,
body.is-mobile-experience .site-dialog-actions .btn,
body.is-mobile-experience .site-message-actions .btn {
    width: 100%;
}

/* ---------- Sticky bottom CTA ---------- */

body.is-mobile-experience .mobile-cta-dock {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 80;
    display: flex;
    gap: 8px;
    padding:
        10px
        calc(12px + var(--m-safe-right))
        calc(10px + var(--m-safe-bottom))
        calc(12px + var(--m-safe-left));
    background: linear-gradient(180deg, rgba(244, 247, 252, 0) 0%, rgba(244, 247, 252, .96) 35%);
    pointer-events: none;
}

body.is-mobile-experience .mobile-cta-dock > * {
    pointer-events: auto;
    flex: 1;
}

body.is-mobile-experience.kbd-open .mobile-cta-dock {
    display: none;
}

/* ---------- Login / OTP ---------- */

body.is-mobile-experience.page-login,
body.is-mobile-experience[data-page-type="login"],
body.is-mobile-experience[data-page-type="otp"] {
    background: var(--m-brand-grad);
}

body.is-mobile-experience .login-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    padding:
        calc(24px + var(--m-safe-top))
        calc(16px + var(--m-safe-right))
        calc(24px + var(--m-safe-bottom))
        calc(16px + var(--m-safe-left));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.is-mobile-experience .login-brand {
    text-align: center;
    color: #fff;
    margin-bottom: 22px;
}

body.is-mobile-experience .login-brand h1 {
    color: #fff;
    font-size: 1.6rem;
    margin: 8px 0 4px;
}

body.is-mobile-experience .login-brand p {
    color: rgba(255, 255, 255, .85);
    font-size: .95rem;
}

body.is-mobile-experience .login-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-xl);
    padding: 22px 18px;
    box-shadow: var(--m-shadow-lg);
    border: none;
}

body.is-mobile-experience .login-form-group {
    margin-bottom: 14px;
}

body.is-mobile-experience .login-submit,
body.is-mobile-experience .login-card button[type="submit"] {
    width: 100%;
    margin-top: 6px;
}

body.is-mobile-experience .login-error {
    background: var(--m-danger-soft);
    color: var(--m-danger);
    border-radius: var(--m-radius);
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: .9rem;
}

body.is-mobile-experience .login-footer {
    text-align: center;
    margin-top: 18px;
    color: rgba(255, 255, 255, .85);
}

body.is-mobile-experience .password-toggle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 8px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    color: var(--m-muted);
}

/* OTP input — large, centered, monospace */
body.is-mobile-experience input[name="otp"] {
    text-align: center;
    letter-spacing: .35em;
    font-size: 1.4rem;
    font-weight: 700;
    direction: ltr;
}

/* ---------- Main menu (menu.html) ---------- */

body.is-mobile-experience.page-main-menu .menu-wrapper,
body.is-mobile-experience[data-page-type="main-menu"] .menu-wrapper {
    padding:
        calc(20px + var(--m-safe-top))
        calc(16px + var(--m-safe-right))
        calc(40px + var(--m-safe-bottom))
        calc(16px + var(--m-safe-left));
}

body.is-mobile-experience .menu-topbar {
    margin-bottom: 18px;
}

body.is-mobile-experience .menu-hero h1 {
    font-size: 1.45rem;
}

body.is-mobile-experience .menu-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

body.is-mobile-experience .menu-item {
    padding: 22px 10px;
    min-height: 110px;
    border-radius: var(--m-radius-lg);
}

body.is-mobile-experience .menu-item-icon {
    font-size: 1.8rem;
}

body.is-mobile-experience .theme-toggle-menu {
    width: auto;
    min-height: 44px;
}

/* ---------- Quick actions on dashboard menu ---------- */

body.is-mobile-experience .quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

body.is-mobile-experience .quick-action-btn {
    min-height: 110px;
    padding: 18px 10px;
    border-radius: var(--m-radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

body.is-mobile-experience .quick-action-icon {
    font-size: 1.7rem;
}

/* ---------- Filter tabs (invoices.html) ---------- */

body.is-mobile-experience .filter-tabs,
body.is-mobile-experience .quick-filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 6px;
    margin: 0 -16px 12px;
    padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.is-mobile-experience .filter-tabs::-webkit-scrollbar,
body.is-mobile-experience .quick-filter-row::-webkit-scrollbar {
    display: none;
}

body.is-mobile-experience .filter-tabs .btn,
body.is-mobile-experience .quick-filter-row .btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--m-radius-pill);
    scroll-snap-align: start;
    font-size: .92rem;
}

/* Inputs flex row inside filter cards: stack */
body.is-mobile-experience .card form[method="get"] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Toast ---------- */

body.is-mobile-experience .m-toast-host {
    position: fixed;
    inset-block-end: calc(80px + var(--m-safe-bottom));
    inset-inline: 16px;
    z-index: 1000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

body.is-mobile-experience .m-toast {
    pointer-events: auto;
    background: var(--m-ink);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-lg);
    font-size: .95rem;
    animation: m-toast-in .25s var(--m-spring);
}

body.is-mobile-experience .m-toast.is-success {
    background: var(--m-success);
}

body.is-mobile-experience .m-toast.is-error {
    background: var(--m-danger);
}

body.is-mobile-experience .m-toast.leave {
    animation: m-toast-out .2s var(--m-ease) forwards;
}

@keyframes m-toast-in {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes m-toast-out {
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* ---------- Misc fixups ---------- */

/* Flash messages */
body.is-mobile-experience .alert {
    padding: 12px 14px;
    border-radius: var(--m-radius);
    margin-bottom: 12px;
    font-size: .94rem;
}

/* Hide elements that exist only for desktop layout */
body.is-mobile-experience .desktop-only {
    display: none !important;
}

/* Reset float/grid utility classes that break on narrow */
body.is-mobile-experience .row,
body.is-mobile-experience .col {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* All flex rows with justify-content: flex-end (form action footers) — full width */
body.is-mobile-experience form > [style*="justify-content: flex-end"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

body.is-mobile-experience form > [style*="justify-content: flex-end"] > * {
    width: 100%;
}

/* Ultra-narrow phones */
@media (max-width: 360px) {
    body.is-mobile-experience .menu-grid,
    body.is-mobile-experience .quick-actions-grid {
        grid-template-columns: 1fr;
    }
    body.is-mobile-experience .main-content {
        padding-inline: 12px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.is-mobile-experience *,
    body.is-mobile-experience *::before,
    body.is-mobile-experience *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* Dark theme */
[data-theme="dark"] body.is-mobile-experience,
body.is-mobile-experience[data-theme="dark"] {
    --m-bg: #0b1220;
    --m-bg-grad: linear-gradient(180deg, #0b1220 0%, #0a0f1c 100%);
    --m-surface: #111827;
    --m-surface-2: #1f2937;
    --m-border: #1f2937;
    --m-border-strong: #334155;
    --m-ink: #f1f5f9;
    --m-ink-2: #cbd5e1;
    --m-muted: #94a3b8;
}

[data-theme="dark"] body.is-mobile-experience .mobile-header {
    background: rgba(11, 18, 32, .9);
    border-bottom-color: #1f2937;
}