/**
 * TRX mobile / Capacitor shell enhancements.
 * Scoped so desktop web is unchanged unless Capacitor native or narrow breakpoints apply.
 * Permissions and tenancy remain server-driven; this file is presentation only.
 */

/* ——— Native shell: lighter shadows, faster paints ——— */
.trx-shell-capacitor {
    --trx-shadow: 0 6px 22px rgba(11, 31, 51, 0.06);
    --trx-radius: 12px;
    /* Sticky permission tables: sit below global header + safe area */
    --trx-app-sticky-top: calc(56px + 0.85rem + env(safe-area-inset-top, 0px));
}

.trx-shell-capacitor body.trx-app {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    touch-action: manipulation;
}

/* ——— Safe areas (notch / gesture bar) ——— */
.trx-shell-capacitor .trx-global-header .container-fluid.trx-header-inner {
    padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
}

.trx-shell-capacitor .trx-app-footer {
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
}

.trx-shell-capacitor body.trx-app {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ——— Touch: avoid accidental text selection on controls ——— */
.trx-shell-capacitor .btn,
.trx-shell-capacitor .trx-icon-btn,
.trx-shell-capacitor .trx-sidebar-panel nav a,
.trx-shell-capacitor .page-link,
.trx-shell-capacitor .nav-link {
    -webkit-tap-highlight-color: rgba(232, 116, 34, 0.15);
}

/* ——— Sidebar: larger tap targets in native shell ——— */
.trx-shell-capacitor .trx-sidebar-panel nav a {
    min-height: 44px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* ——— KPI cards: skip hover lift on touch shell (less jank) ——— */
.trx-shell-capacitor .trx-sa-dashboard .trx-sa-kpi-card:hover {
    transform: none;
    box-shadow: var(--trx-shadow);
}

/* ——— Main column: narrow screens (WebView + mobile browsers) ——— */
@media (max-width: 991.98px) {
    .trx-main-column {
        padding: 1rem 0.85rem 2.5rem;
    }

    .trx-main-column .card {
        border-radius: var(--trx-radius);
    }

    .trx-main-column .card-body {
        padding: 0.9rem 1rem;
    }

    /* Tables: smooth horizontal scroll, contained overscroll */
    .trx-main-column .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border-radius: var(--trx-radius);
        border: 1px solid var(--trx-border);
        background: var(--trx-card);
    }

    .trx-main-column .table {
        font-size: 0.875rem;
        margin-bottom: 0;
    }

    .trx-main-column .table td,
    .trx-main-column .table th {
        padding: 0.5rem 0.55rem;
        vertical-align: middle;
    }

    /* Action buttons inside tables */
    .trx-main-column .table .btn-sm {
        min-height: 36px;
        padding: 0.25rem 0.55rem;
    }

    /* Avoid iOS zoom-on-focus; keeps Android typing predictable */
    .trx-main-column .form-control,
    .trx-main-column .form-select,
    .trx-main-column textarea.form-control {
        font-size: max(16px, 1rem);
    }
}

/* ——— Extra-tight phones ——— */
@media (max-width: 575.98px) {
    .trx-header-three-col {
        gap: 0.4rem;
    }

    .trx-main-column .table td,
    .trx-main-column .table th {
        padding: 0.4rem 0.45rem;
        font-size: 0.8125rem;
    }

    .trx-main-column .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .trx-main-column .page-link {
        min-width: 2.5rem;
        text-align: center;
    }
}

/* ——— Android WebView: subtle scroll containment on long pages ——— */
.trx-shell-android .trx-main-column {
    overflow-x: hidden;
}

/* ——— Charts: stable height on small viewports ——— */
@media (max-width: 991.98px) {
    .trx-sa-chart-canvas-wrap {
        height: min(280px, 62vw);
        min-height: 200px;
    }
}

/* ——— Reduced motion ——— */
@media (prefers-reduced-motion: reduce) {
    .trx-shell-capacitor *,
    .trx-shell-capacitor *::before,
    .trx-shell-capacitor *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ——— Unit 1 · Dashboard tables: sticky first column + scroll affordance (shell only) ——— */
.trx-shell-capacitor .trx-main-column .trx-trscroll {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
}

.trx-shell-capacitor .trx-main-column .trx-trscroll table {
    margin-bottom: 0;
}

/* Sticky first column (logical start: RTL/LTR) */
.trx-shell-capacitor .trx-main-column .trx-trscroll thead th:first-child,
.trx-shell-capacitor .trx-main-column .trx-trscroll tbody tr > :first-child,
.trx-shell-capacitor .trx-main-column .trx-trscroll tfoot tr > :first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background-color: var(--bs-body-bg, #fff);
    border-inline-end: 1px solid var(--trx-border);
    box-shadow: 2px 0 8px rgba(11, 31, 51, 0.06);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll thead th:first-child {
    z-index: 3;
}

.trx-shell-capacitor .trx-main-column .trx-trscroll tbody tr > th.bg-light:first-child,
.trx-shell-capacitor .trx-main-column .trx-trscroll tbody tr > th:first-child.bg-light {
    background-color: var(--bs-secondary-bg, #e9ecef);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-light th:first-child {
    background-color: var(--bs-table-bg, #f8f9fa);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-dark th:first-child {
    background-color: var(--bs-table-bg, #212529);
    color: var(--bs-table-color, #fff);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.35);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-success th:first-child {
    background-color: var(--bs-success-bg-subtle, #d1e7dd);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-warning th:first-child {
    background-color: var(--bs-warning-bg-subtle, #fff3cd);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-info th:first-child {
    background-color: var(--bs-info-bg-subtle, #cff4fc);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-danger th:first-child {
    background-color: var(--bs-danger-bg-subtle, #f8d7da);
}

[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-dark th:first-child {
    background-color: var(--bs-table-bg, #212529);
}

[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll thead th:first-child,
[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll tbody tr > :first-child,
[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll tfoot tr > :first-child {
    background-color: var(--bs-body-bg, #0f172a);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-light th:first-child {
    background-color: var(--bs-table-bg, #1e293b);
}

[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-success th:first-child,
[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-warning th:first-child,
[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-info th:first-child,
[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll thead.table-danger th:first-child {
    background-color: var(--bs-body-bg, #0f172a);
}

[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll tfoot.table-light tr > :first-child {
    background-color: var(--bs-table-bg, #1e293b);
}

/* Horizontal scroll hint at inline-end when content overflows */
.trx-shell-capacitor .trx-main-column .trx-trscroll-hint::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
}

html[dir="rtl"] .trx-shell-capacitor .trx-main-column .trx-trscroll-hint::after {
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
}

[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll-hint::after {
    background: linear-gradient(to right, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.94));
}

html[dir="rtl"][data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll-hint::after {
    background: linear-gradient(to left, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.94));
}

.trx-shell-capacitor .trx-main-column .trx-trscroll-hint.trx-trscroll-is-wide::after {
    opacity: 1;
}

/* Dashboard · completed unpaid: hide value & balance until user expands (shell only) */
.trx-shell-capacitor .trx-main-column .trx-dash-unpaid-compact:not(.trx-table-show-extra-cols) thead th:nth-child(n + 3),
.trx-shell-capacitor .trx-main-column .trx-dash-unpaid-compact:not(.trx-table-show-extra-cols) tbody td:nth-child(n + 3) {
    display: none;
}

/* ——— Unit 5 · Permission matrices: sticky header row under app bar (shell only) ——— */
.trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead th {
    position: sticky;
    top: var(--trx-app-sticky-top);
    z-index: 4;
    box-shadow: 0 1px 0 rgba(11, 31, 51, 0.14);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead th:first-child {
    z-index: 7;
}

.trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead.table-dark th {
    background-color: var(--bs-table-bg, #212529);
    color: var(--bs-table-color, #fff);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead:not([class]) th {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-emphasis-color, #212529);
}

[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead:not([class]) th {
    background-color: var(--bs-secondary-bg, #1e293b);
    color: var(--bs-body-color, #e2e8f0);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead.table-secondary th {
    background-color: var(--bs-secondary-bg, #e2e3e5);
    color: var(--bs-emphasis-color, #212529);
}

.trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead.table-primary th {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-emphasis-color, #212529);
}

[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead.table-secondary th,
[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead.table-primary th {
    background-color: var(--bs-table-bg, #1e293b);
    color: var(--bs-body-color, #e2e8f0);
}

[data-bs-theme="dark"] .trx-shell-capacitor .trx-main-column .trx-trscroll-sticky-thead thead.table-dark th {
    background-color: var(--bs-table-bg, #212529);
    color: var(--bs-table-color, #fff);
}

/* Iframe/popup: no global header — keep header row usable */
body.trx-shell-capacitor.iframe-mode .trx-main-column {
    --trx-app-sticky-top: 0.35rem;
}