/* ==========================================================================
   Nexoriss Finance — Components & utilities (loaded last, wins over legacy)
   Mobile-first. Shell/nav rules for the unified responsive layout live here.
   ========================================================================== */

/* -- Responsive visibility utilities -------------------------------------- */
/* Breakpoint scale: sm 640 · md 768 · lg 1024 · xl 1280 */
.u-only-mobile { display: initial; }
.u-only-desktop { display: none; }

@media (min-width: 1024px) {
    .u-only-mobile { display: none !important; }
    .u-only-desktop { display: initial; }
}

.u-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* -- Global no horizontal overflow ---------------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* -- Mobile bottom navigation (unified shell) ----------------------------- */
/* Rendered at shell level in MainLayout; shown on mobile, hidden from lg up. */
.mobile-bottom-nav {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-2) + var(--safe-bottom));
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}

.mobile-bottom-nav__item {
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-1);
    border: 0;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    gap: 2px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-bottom-nav__item:hover {
    color: var(--text);
    text-decoration: none;
}

.mobile-bottom-nav__item svg {
    width: 22px;
    height: 22px;
}

.mobile-bottom-nav__item--active {
    color: var(--brand-2);
    background: var(--surface-selected);
}

/* Keep page content clear of the fixed bottom nav on mobile. */
.shell .page-body {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-3));
}

@media (min-width: 1024px) {
    .mobile-bottom-nav {
        display: none;
    }

    .shell .page-body {
        padding-bottom: var(--space-5);
    }
}

/* -- Data tables: theme-correct borders (fixes light-mode invisibility) --- */
.data-table th,
.data-table td {
    border-bottom-color: var(--line);
}

/* -- Responsive table → cards (opt-in via .table-shell--cards) ------------ */
/* Uses each cell's data-label to stack rows as cards on small screens, so
   generic CRUD list pages stay usable on mobile without a separate markup. */
@media (max-width: 767.98px) {
    .table-shell.table-shell--cards {
        display: block;
        overflow: visible;
    }

    .table-shell--cards .data-table,
    .table-shell--cards .data-table tbody {
        display: block;
        width: 100%;
    }

    .table-shell--cards .data-table thead {
        display: none;
    }

    .table-shell--cards .data-table tr {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        margin-bottom: var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--panel);
        box-shadow: var(--shadow-soft);
    }

    .table-shell--cards .data-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
        padding: 0;
        border: 0;
        text-align: right;
    }

    .table-shell--cards .data-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--muted);
        text-align: left;
    }

    /* Cells without a label (or the actions cell) span the full width. */
    .table-shell--cards .data-table td:not([data-label])::before,
    .table-shell--cards .data-table td[data-label=""]::before {
        content: none;
    }

    .table-shell--cards .data-table td.actions-cell {
        justify-content: flex-end;
        padding-top: var(--space-2);
        border-top: 1px solid var(--line-soft);
    }

    .table-shell--cards .data-table td.actions-cell::before {
        content: none;
    }

    .table-shell--cards .table-meta {
        text-align: right;
    }
}