/*
 * SHARP Platform ERP — PWA / mobile viewport helpers.
 *
 * Safe-area + Android/iOS chrome handling is scoped to display-mode: standalone
 * (i.e. only when the app is INSTALLED to the home screen) so normal in-browser
 * usage is completely unchanged — no breaking changes to the existing UI.
 *
 * Requires the page <meta name="viewport"> to include `viewport-fit=cover`,
 * otherwise env(safe-area-inset-*) always resolves to 0.
 */

/* Dynamic-viewport-height helpers — use in place of 100vh on full-height shells
   to avoid the mobile "address-bar jump" and the iOS 100vh overflow bug. */
.min-h-dvh { min-height: 100vh; min-height: 100dvh; }
.h-dvh     { height: 100vh;     height: 100dvh; }

/* ============================================================================
   No sideways scrolling — SYSTEM-WIDE. The page never drifts horizontally on any
   module or screen. Loaded on every page via _pwa_head. Genuinely wide content
   must scroll inside its own container (overflow-x:auto), not the page.
   ============================================================================ */
html, body { overflow-x: clip; }

/* Opt-in responsive data tables: below desktop each row stacks into a labeled
   card so a wide table never forces sideways scroll. Add class "resp-table" to a
   <table> and data-label="…" to each <td> (resp-actions on the actions cell).
   Available on every page — no per-page CSS needed. */
@media (max-width: 1279.98px) {
    table.resp-table { min-width: 0 !important; display: block; }
    table.resp-table thead { display: none; }
    table.resp-table tbody, table.resp-table tr, table.resp-table td { display: block; width: 100%; }
    table.resp-table tr { border: 1px solid #E3E8EE; border-radius: 14px; margin: 0 0 12px; padding: 4px 6px; background: #ffffff; }
    table.resp-table tr:last-child { margin-bottom: 0; }
    table.resp-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 7px 10px; border: 0 !important; text-align: right; }
    table.resp-table td::before { content: attr(data-label); flex: 0 0 40%; text-align: left; font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: #6F7884; white-space: nowrap; }
    table.resp-table td.resp-actions::before { content: none; }
    table.resp-table td.resp-actions { justify-content: flex-end; }
    /* dataTables_empty: DataTables builds its own "no data" cell, so it cannot
       be given resp-full in markup — matched here for the same treatment. Kept
       in step with partial/_responsive_table and partial/_header_shim. */
    table.resp-table td.resp-full,
    table.resp-table td.dataTables_empty { display: block; text-align: center; }
    table.resp-table td.resp-full::before,
    table.resp-table td.dataTables_empty::before { content: none; }
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    /* Sticky module headers clear the iOS notch / Android status bar. */
    header[data-module-overflow-header],
    .cv-grad,
    .pf-topbar,
    .sysadmin-header,
    .main-header,
    .navbar {
        padding-top: env(safe-area-inset-top);
    }

    /* Bottom navs / action bars clear the iPhone home indicator + Android nav bar. */
    .module-bottom-nav,
    [data-module-bottom-nav],
    .module-bottom-bar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Landscape notch — keep content out from under the camera cut-out. */
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* Full-height scroll containers should use the dynamic viewport in standalone. */
    .pwa-fill { min-height: 100dvh; }
}