/* ================================================================
   JLI responsive compatibility layer
   Loaded last so every module remains usable on desktop, tablet,
   and touch/mobile screens without changing business functionality.
   ================================================================ */

html {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas, iframe { max-width: 100%; }

.jli-shell,
.jli-workspace,
.jli-content,
.jli-content > *,
.section-shell,
.admin-dashboard-page,
.att-page,
.full-page,
.payhead-page,
.adj-page,
.disb-page,
.sheet-page,
.role-wrapper,
.cat-page,
.audit-page,
.security-page,
.user-manual-page {
    min-width: 0;
    max-width: 100%;
}

.jli-workspace {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.jli-content {
    width: 100%;
    flex: 1 1 auto;
    overflow-x: clip;
}

/* Forms never force a page wider than its viewport. */
.jli-content input,
.jli-content select,
.jli-content textarea,
.jli-content button,
.jli-content .rz-dropdown,
.jli-content .rz-multiselect,
.jli-content .rz-datepicker,
.jli-content .rz-numeric,
.jli-content .rz-textbox {
    max-width: 100%;
}

.jli-content input,
.jli-content select,
.jli-content textarea { min-width: 0; }

.jli-content textarea { resize: vertical; }

/* All common table hosts provide local scrolling instead of body overflow. */
.table-responsive,
.table-wrap,
.table-wrapper,
.data-table-wrap,
.report-table-wrap,
.audit-table-wrap,
.permission-table-wrap,
.responsive-table,
.rz-data-grid,
.rz-datatable,
.rz-grid-table,
.jli-content [class*="table-wrap"],
.jli-content [class*="table-container"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.jli-content table { max-width: 100%; }

/* Charts and report canvases stay inside their card. */
.jli-content .rz-chart,
.jli-content .rz-chart-container,
.jli-content .chart-container,
.jli-content [class*="chart-wrap"],
.jli-content canvas {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Dialogs: viewport-safe and independently scrollable. */
.jli-content [class*="modal-backdrop"],
.jli-content [class*="dialog-backdrop"],
.jli-content [class*="loader-backdrop"],
.jli-content > .fixed.inset-0 {
    max-width: 100vw;
    max-height: 100dvh;
}

.jli-content [class*="modal-backdrop"] > *,
.jli-content [class*="dialog-backdrop"] > *,
.jli-content > .fixed.inset-0 > * {
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    overscroll-behavior: contain;
}

/* Keep keyboard-focused controls visible and accessible. */
@media (hover: none), (pointer: coarse) {
    button, a, input, select, textarea, [role="button"] {
        -webkit-tap-highlight-color: rgba(79, 70, 229, .14);
    }

    .jli-content button,
    .jli-content a[class*="btn"],
    .jli-content [role="button"] {
        touch-action: manipulation;
    }
}

@media (max-width: 1100px) {
    .jli-content { padding: .7rem !important; }

    .admin-hero-card,
    .role-hero,
    .audit-hero,
    .security-hero,
    .manual-hero,
    .page-hero,
    .section-header,
    .page-header {
        max-width: 100%;
    }

    .jli-content [class*="stats-grid"],
    .jli-content [class*="metric-grid"],
    .jli-content [class*="summary-grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    /* Sidebar becomes an off-canvas mobile drawer. */
    .jli-sidebar,
    .jli-sidebar.collapsed,
    .jli-sidebar.expanded {
        width: min(18rem, 86vw) !important;
        max-width: 86vw;
        height: 100vh;
        height: 100dvh;
        transform: translateX(-105%);
        overflow: hidden;
    }

    .jli-sidebar.mobile-open { transform: translateX(0) !important; }
    .jli-sidebar.mobile-open .brand-text { display: block !important; }
    .jli-sidebar.mobile-open .nav-parent { justify-content: space-between !important; }
    .jli-sidebar.mobile-open .nav-parent b,
    .jli-sidebar.mobile-open .chev { display: inline !important; }
    .jli-sidebar.mobile-open .jli-nav { flex: 1 1 auto; overflow-y: auto; }

    .jli-workspace.wide-sidebar,
    .jli-workspace.mini-sidebar { margin-left: 0 !important; }

    .jli-topbar {
        width: 100%;
        max-width: 100vw;
    }

    .topbar-left,
    .topbar-actions { min-width: 0; }
}

@media (max-width: 768px) {
    :root { --jli-mobile-gutter: .55rem; }

    .jli-content {
        padding: var(--jli-mobile-gutter) !important;
        overflow-x: hidden;
    }

    .jli-topbar {
        min-height: 3.35rem;
        padding: .42rem var(--jli-mobile-gutter) !important;
        gap: .4rem;
    }

    .topbar-actions { justify-content: flex-end; gap: .28rem !important; }

    .notification-panel,
    .settings-panel,
    .user-panel {
        right: var(--jli-mobile-gutter) !important;
        width: calc(100vw - (var(--jli-mobile-gutter) * 2)) !important;
        max-width: 25rem;
    }

    .admin-hero-card,
    .role-hero,
    .audit-hero,
    .security-hero,
    .manual-hero,
    .page-hero,
    .section-header,
    .page-header {
        gap: .7rem !important;
        padding: .9rem !important;
        border-radius: 1rem !important;
    }

    .audit-hero,
    .page-header,
    .section-header {
        flex-wrap: wrap;
    }

    .audit-refresh,
    .page-header > button,
    .section-header > button { margin-left: auto; }

    .jli-content [class*="stats-grid"],
    .jli-content [class*="metric-grid"],
    .jli-content [class*="summary-grid"] {
        gap: .55rem !important;
    }

    .jli-content [class*="filter-grid"],
    .jli-content [class*="form-grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .jli-content [class*="filter-actions"],
    .jli-content [class*="form-actions"],
    .jli-content [class*="action-bar"],
    .jli-content [class*="toolbar"] {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .jli-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .jli-content th,
    .jli-content td { white-space: nowrap; }

    .jli-content [class*="modal-backdrop"],
    .jli-content [class*="dialog-backdrop"],
    .jli-content > .fixed.inset-0 { padding: .5rem !important; }

    .jli-content [class*="modal-backdrop"] > *,
    .jli-content [class*="dialog-backdrop"] > *,
    .jli-content > .fixed.inset-0 > * {
        width: 100% !important;
        border-radius: 1rem !important;
    }

    .jli-app-footer {
        padding: .38rem var(--jli-mobile-gutter) calc(.38rem + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 560px) {
    :root { --jli-mobile-gutter: .42rem; }

    .jli-content [class*="stats-grid"],
    .jli-content [class*="metric-grid"],
    .jli-content [class*="summary-grid"],
    .jli-content [class*="filter-grid"],
    .jli-content [class*="form-grid"] {
        grid-template-columns: 1fr !important;
    }

    .jli-content [class*="filter-actions"] > button,
    .jli-content [class*="form-actions"] > button,
    .jli-content [class*="action-bar"] > button {
        flex: 1 1 auto;
    }

    .audit-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .audit-filter { grid-template-columns: 1fr !important; }
    .audit-search,
    .audit-filter-actions { grid-column: 1 / -1 !important; }

    .security-hero {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .security-hero .hero-icon { margin-inline: auto; }
    .security-hero .back-btn { width: 100%; }

    .jli-app-footer { grid-template-columns: minmax(0,1fr) auto !important; }
    .footer-brand b { font-size: .58rem; }
    .footer-copy a { font-size: .52rem; }

    /* iOS zoom prevention while retaining compact visual sizing. */
    .jli-content input,
    .jli-content select,
    .jli-content textarea,
    .login-card input { font-size: 16px !important; }
}

@media (max-width: 380px) {
    .jli-content { padding: .3rem !important; }
    .jli-app-footer .footer-brand b { max-width: 9rem; }
}

@media (orientation: landscape) and (max-height: 560px) {
    .jli-sidebar,
    .jli-sidebar.mobile-open { height: 100dvh; }
    .jli-nav { overflow-y: auto; }
    .notification-panel,
    .settings-panel,
    .user-panel { max-height: calc(100dvh - 3.7rem) !important; overflow-y: auto; }
}

@media print {
    html, body, .jli-content { overflow: visible !important; }
    .jli-sidebar, .jli-topbar, .jli-app-footer, .jli-notice-spotlight { display: none !important; }
    .jli-workspace { margin: 0 !important; }
    .jli-content { padding: 0 !important; }
    .jli-content table { display: table !important; overflow: visible !important; }
}
/* Reusable page-level full-screen mode */
.page-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #8b1e3f;
    background: transparent;
    box-shadow: none;
    transition: color .16s ease, background .16s ease, transform .16s ease;
}

.page-fullscreen-btn:hover { color: #6f1632; transform: scale(1.06); background: rgba(139,30,63,.10); }
.page-fullscreen-btn:focus-visible { outline: 2px solid rgba(139,30,63,.55); outline-offset: 2px; }
.page-fullscreen-btn .rz-icon { font-size: 15px; filter: drop-shadow(0 1px 1px rgba(255,255,255,.65)); }
body.jli-fullscreen-open { overflow: hidden !important; }

.jli-module-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 6500 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    border-radius: 0 !important;
    background: #f1f5f9 !important;
}

.jli-content.jli-module-fullscreen > :not(.global-page-fullscreen) {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.jli-content.jli-module-fullscreen > :not(.global-page-fullscreen) > .mx-auto,
.jli-content.jli-module-fullscreen > :not(.global-page-fullscreen) > [class*="max-w-"] {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.jli-module-fullscreen > .section-shell { min-height: 100dvh; }
.attendance-banner-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.jli-content { position: relative; }
.global-page-fullscreen {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    z-index: 120;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    pointer-events: none;
}
.global-page-fullscreen .page-fullscreen-btn {
    color: #8b1e3f;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
}
.jli-content.jli-module-fullscreen .global-page-fullscreen {
    position: fixed;
    top: 12px;
    right: 18px;
    z-index: 6600;
}

@media (max-width: 767px) {
    .page-fullscreen-btn { width: 27px; height: 27px; min-width: 27px; min-height: 27px; }
    .jli-module-fullscreen { padding: 0 !important; }
    .jli-module-fullscreen > .section-shell { min-height: 100dvh; }
    .attendance-banner-actions { width: 100%; justify-content: flex-start; }
    .global-page-fullscreen { top: .65rem; right: .65rem; }
    .jli-content.jli-module-fullscreen .global-page-fullscreen { top: 7px; right: 9px; }
}