html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* ═══════════════════════════════════════════════════════════
   MEZANO MOBILE OVERFLOW FIX — Global patch
   ═══════════════════════════════════════════════════════════
   Fixes cut-off totals, amounts, and detail rows across EVERY
   view that uses .totals-row, .detail-row, .cmd-header,
   .card-head, .dash-table, .mini-row, and .pl-row patterns.
   ─────────────────────────────────────────────────────────── */

/* ─── 1. Universal overflow guard ─────────────────────────── */
main,
main > *,
.page-wrap,
#pageRoot,
#dashRoot {
    max-width: 100%;
    box-sizing: border-box;
}

#pageRoot,
#dashRoot,
.page-wrap {
    overflow-x: hidden;
}

/* ─── 2. Flex-row children need min-width: 0 to shrink ────── */
.totals-row,
.detail-row,
.pl-row,
.mini-row,
.cmd-header,
.card-head {
    min-width: 0;
    gap: 12px;
}

    .totals-row > *,
    .detail-row > *,
    .pl-row > *,
    .mini-row > *,
    .cmd-header > *,
    .card-head > * {
        min-width: 0;
    }

/* ─── 3. TOTALS ROWS ──────────────────────────────────────── */
.totals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .totals-row > *:first-child {
        flex-shrink: 1;
        color: var(--muted2, #b1bac4);
    }

    .totals-row > *:last-child {
        text-align: right;
        font-family: var(--mono, 'JetBrains Mono', monospace);
        overflow-wrap: anywhere;
        word-break: break-all;
        min-width: 0;
    }

    .totals-row.total-final > *:last-child,
    .totals-row:last-child[style*="font-size:20px"] > span:last-child,
    .totals-row[style*="rgba(255,255,255,.02)"] > span:last-child {
        font-size: 17px !important;
        font-weight: 800;
    }

/* ─── 4. DETAIL ROWS ───────────────────────────────────────── */
.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .detail-row > *:last-child {
        text-align: right;
        word-break: break-word;
        overflow-wrap: anywhere;
        min-width: 0;
    }

/* ─── 5. P&L AND MINI ROWS ─────────────────────────────────── */
.pl-row,
.mini-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .pl-row .pl-amount,
    .mini-row .mini-val,
    .mini-row .mini-right {
        min-width: 0;
        overflow-wrap: anywhere;
    }

/* ─── 6. COMMAND HEADER ───────────────────────────────────── */
.cmd-header {
    flex-wrap: wrap;
    align-items: flex-start;
}

    .cmd-header > div:first-child {
        min-width: 0;
        flex: 1;
    }

    .cmd-header .cmd-title {
        word-break: break-word;
    }

    .cmd-header .cmd-sub {
        word-break: break-word;
    }

    .cmd-header .cmd-meta {
        flex-wrap: wrap;
    }

/* ─── 7. CARD HEADS ───────────────────────────────────────── */
.card-head {
    flex-wrap: wrap;
}

    .card-head h3 {
        min-width: 0;
        flex: 1;
    }

/* ─── 8. BADGES NEVER SHRINK ──────────────────────────────── */
.db, .sb-badge, .badge-new, .badge-promo {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ─── 9. TABLES — horizontal scroll on mobile ─────────────── */
@media (max-width: 767px) {
    main .dash-table,
    main table.dash-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

        .table-scroll > table,
        .table-scroll > .dash-table {
            min-width: 560px;
        }
}

/* ─── 10. NOTES AND LONG TEXT BLOCKS ──────────────────────── */
.notes-box,
.td-sub,
.att-file-info {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ─── 11. IMAGES / SVG / VIDEO / IFRAME GUARDS ────────────── */
main img,
main svg,
main video,
main iframe,
#pageRoot img,
#pageRoot svg,
#pageRoot video,
#pageRoot iframe,
#dashRoot img,
#dashRoot svg,
#dashRoot video,
#dashRoot iframe {
    max-width: 100%;
    height: auto;
}

/* ─── 12. FORM INPUTS ─────────────────────────────────────── */
main input,
main textarea,
main select,
#pageRoot input,
#pageRoot textarea,
#pageRoot select {
    max-width: 100%;
    box-sizing: border-box;
}

/* ─── 13. MOBILE TIGHTENING ───────────────────────────────── */
@media (max-width: 640px) {

    .cmd-header {
        padding: 16px !important;
    }

    .cmd-title {
        font-size: 22px !important;
    }

    .totals-row,
    .detail-row,
    .pl-row,
    .mini-row {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .card-head {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .dash-table thead th,
    .dash-table tbody td {
        padding: 9px 12px !important;
    }

    .btn-accent,
    .btn-ghost,
    .btn-danger,
    .action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ─── 14. AI VOICE ASSISTANT FLOATING WIDGET ──────────────── */
@media (max-width: 480px) {
    .ai-voice-toggle,
    [class*="voice-widget"],
    [class*="ai-assistant-float"] {
        transform: scale(0.85);
        transform-origin: right center;
    }
}

/* ─── 15. PRINT-MODE SANITY ───────────────────────────────── */
@media print {
    .cmd-header,
    .card-head,
    .totals-row,
    .detail-row {
        break-inside: avoid;
    }
}

/* ═══════════════════════════════════════════════════════════
   End of Mezano Mobile Overflow Fix
   ─────────────────────────────────────────────────────────── */