/*
 * TMS LPPM EDUARDO — Standar Global Layar HP & Sentuhan V9.9.2
 * Lapisan ini hanya mengatur presentasi. Tidak mengubah alur atau data aplikasi.
 */

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: none;
}

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

.app-shell,
.main-panel,
.content,
.topbar,
.topbar-title,
.user-chip,
.panel,
.notice,
.grid,
.stats-grid,
.form-grid,
.filter-form,
.form-section,
.actions,
.form-actions,
.mobile-card-list,
.report-dashboard,
.public-card,
.public-table-block {
    min-width: 0;
    max-width: 100%;
}

.table-wrap,
.table-scroll,
.report-table-scroll,
.report-table-wrap,
.report-chart,
.report-tabs,
.public-token-table,
.instructor-roster-table,
.document-table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
}

button,
.button,
[role="button"],
summary {
    -webkit-tap-highlight-color: rgba(244, 196, 48, .26);
    touch-action: manipulation;
}

button,
.button,
.bottom-nav a,
.bottom-more summary,
.bottom-more-panel a,
.report-tabs a,
.table-nav-btn,
.table-scroll-arrow {
    transition: transform .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease;
}

button:active,
.button:active,
.bottom-nav a:active,
.bottom-more summary:active,
.bottom-more-panel a:active,
.report-tabs a:active,
.table-nav-btn:active,
.table-scroll-arrow:active {
    transform: scale(.97);
    filter: brightness(.94);
}

@media (hover: none) and (pointer: coarse), (max-width: 800px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    .app-shell {
        display: block;
        width: 100%;
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .main-panel {
        width: 100%;
        padding: 14px;
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
        overflow-x: hidden !important;
    }

    .content,
    .panel,
    .notice,
    .form-section,
    .auth-card,
    .public-card {
        width: 100%;
    }

    .topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar-title,
    .user-chip {
        width: 100%;
    }

    .grid,
    .stats-grid,
    .form-grid,
    .summary-grid,
    .report-kpi-grid,
    .instructor-chart-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .span-2 {
        grid-column: 1 / -1 !important;
    }

    .filter-form,
    .compact-form,
    .report-filter-form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: end;
    }

    .filter-form > *,
    .compact-form > *,
    .report-filter-form > *,
    .form-grid > *,
    .grid > * {
        min-width: 0 !important;
        max-width: 100%;
    }

    form label {
        min-width: 0 !important;
        max-width: 100%;
    }

    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        font-size: 16px !important;
    }

    button,
    .button,
    [role="button"],
    summary,
    .bottom-nav > a,
    .bottom-more-panel a,
    .report-tabs a,
    .table-nav-btn,
    .table-scroll-arrow {
        min-width: 44px;
        min-height: 44px;
    }

    .actions,
    .form-actions,
    .schedule-actions,
    .document-toolbar,
    .invoice-action-panel .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: stretch;
    }

    .actions > a,
    .actions > button,
    .actions > .button,
    .form-actions > a,
    .form-actions > button,
    .form-actions > .button,
    .schedule-actions > a,
    .schedule-actions > button {
        flex: 1 1 132px;
        justify-content: center;
        text-align: center;
    }

    .actions > form,
    .form-actions > form {
        display: flex;
        flex: 1 1 132px;
        min-width: 0;
        margin: 0;
    }

    .actions > form > button,
    .form-actions > form > button {
        width: 100%;
    }

    .table-wrap,
    .table-scroll,
    .report-table-scroll,
    .report-table-wrap,
    .report-chart,
    .report-tabs,
    .public-token-table,
    .instructor-roster-table,
    .document-table-wrap {
        width: 100%;
        overflow-x: auto;
        /* Satu elemen hanya menangani sumbu horizontal.  Jika sumbu-Y ikut
           menjadi scroll-container, Safari/Chrome Android dapat menahan
           sapuan vertikal dan membuat area tabel terasa tidak responsif. */
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: auto;
    }

    .report-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .report-tabs a {
        flex: 0 0 auto;
    }

    .bottom-nav {
        z-index: 1000;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .bottom-nav > a,
    .bottom-more > summary,
    .bottom-more-panel a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    .bottom-more-panel {
        z-index: 1001;
        max-height: min(68vh, 480px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .bottom-more-panel a {
        justify-content: flex-start;
    }

    .table-scroll-hint,
    .report-scroll-note,
    .table-hint {
        display: block;
        line-height: 1.45;
    }

    .badge,
    td,
    th,
    .muted,
    .notice,
    .panel {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    .main-panel {
        padding-right: 10px;
        padding-left: 10px;
    }

    .panel,
    .notice,
    .form-section {
        padding: 14px;
    }

    .filter-form,
    .compact-form,
    .report-filter-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .actions,
    .form-actions,
    .schedule-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .actions > *,
    .form-actions > *,
    .schedule-actions > * {
        width: 100%;
    }

    .bottom-more-panel {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (orientation: landscape) and (max-width: 1024px) {
    .main-panel {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .table-wrap,
    .table-scroll,
    .report-table-wrap,
    .report-chart,
    .public-token-table,
    .instructor-roster-table {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

@media (orientation: landscape) and (min-width: 700px) and (max-width: 1024px) {
    .form-grid,
    .filter-form,
    .compact-form,
    .report-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .form-grid > .span-2,
    .form-actions,
    .schedule-actions {
        grid-column: 1 / -1 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    button,
    .button,
    .bottom-nav a,
    .bottom-more summary,
    .bottom-more-panel a,
    .report-tabs a,
    .table-nav-btn,
    .table-scroll-arrow {
        transition: none !important;
    }
}

/*
 * V9.9.7 — reliabilitas sentuhan tabel dan pratinjau dokumen.
 * Lapisan terakhir ini sengaja tidak mengubah ukuran/struktur desktop.
 */
.floating-back-button {
    position: fixed;
    z-index: 950;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    color: #fff;
    background: #0b315d;
    box-shadow: 0 10px 28px rgba(7, 33, 62, .28);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(244, 196, 48, .35);
}

.floating-back-button:active {
    transform: scale(.96);
    filter: brightness(.92);
}

.floating-back-button__icon {
    font-size: 20px;
    line-height: 1;
}

@media (hover: none) and (pointer: coarse), (max-width: 800px) {
    .table-wrap,
    .table-scroll,
    .report-table-scroll,
    .report-table-wrap,
    .document-table-wrap,
    .public-token-table,
    .instructor-roster-table,
    .report-chart,
    .report-tabs {
        position: relative;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: auto !important;
        touch-action: pan-x pan-y !important;
        scroll-behavior: auto;
    }

    .table-wrap > table,
    .table-scroll > table,
    .report-table-scroll > table,
    .report-table-wrap > table,
    .document-table-wrap > table,
    .public-token-table > table,
    .instructor-roster-table > table {
        touch-action: pan-x pan-y;
    }

    .document-preview-frame {
        position: relative;
        overflow: hidden !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y pinch-zoom !important;
    }

    /* Iframe A4 hanya merupakan pratinjau visual. Menonaktifkan tangkapan
       sentuhnya pada HP membuat sapuan diteruskan ke halaman induk. */
    .document-preview-frame iframe {
        pointer-events: none;
        touch-action: none;
    }

    .document-preview-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 10px;
    }

    .document-preview-actions .button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        text-align: center;
    }

    .document-preview-touch-help {
        display: block;
        margin: 0 0 10px;
        color: var(--muted);
        font-size: .84rem;
        line-height: 1.45;
    }

    .floating-back-button {
        right: 12px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        min-width: 52px;
        min-height: 52px;
        padding: 11px 15px;
    }

    /* Jangan menutup tombol kamera/form di sisi kanan pada layar HP. */
    body.page-tanda-terima-scan .floating-back-button,
    body:has([data-tt-scanner]) .floating-back-button {
        display: none !important;
    }
}

@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
    .document-preview-touch-help,
    .document-preview-actions {
        display: none;
    }
}