/* ============================================================ */
/* MOBILE FIX — Fix tampilan ter-crop di HP/APK                 */
/* File: css/mobile-fix.css                                     */
/* WAJIB LOAD PALING BAWAH (setelah <style>)                    */
/* ============================================================ */

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

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

/* ============================================================ */
/* MOBILE ONLY — <= 768px                                       */
/* ============================================================ */
@media screen and (max-width: 768px) {

    /* MAIN CONTENT */
    .main-content {
        padding: 10px !important;
        padding-top: 78px !important;
        margin-left: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .content-card {
        padding: 12px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* ========================================================== */
    /* TABEL UMUM — Wrapper scroll, table tetap display:table       */
    /* ========================================================== */
    .table-wrapper,
    .table-nilai-wrapper {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        padding-bottom: 6px !important;
        border-radius: 10px !important;
    }

    .table-master,
    .data-table,
    .table-nilai {
        display: table !important;
        table-layout: auto !important;
        width: 100% !important;
    }

    .table-master {
        min-width: 500px !important;
        font-size: 11px !important;
    }

    .data-table {
        min-width: 600px !important;
        font-size: 11px !important;
    }

    .table-nilai {
        min-width: 850px !important;
        font-size: 10px !important;
    }

    .table-master th,
    .table-master td {
        padding: 6px 4px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .data-table th,
    .data-table td {
        padding: 6px 4px !important;
        font-size: 10px !important;
    }

    .table-nilai th,
    .table-nilai td {
        padding: 4px 3px !important;
        font-size: 9px !important;
    }

    .table-nilai input[type="number"] {
        width: 34px !important;
        min-width: 32px !important;
        padding: 3px 2px !important;
        font-size: 10px !important;
    }

    /* ========================================================== */
    /* TABEL ABSENSI — Fix biar bisa digeser horizontal            */
    /* ========================================================== */
    .table-absensi-wrapper,
    .absensi-wrapper,
    .absensi-table-wrapper,
    .absensi-container .table-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        display: block !important;
        padding-bottom: 8px !important;
        border-radius: 10px !important;
    }

    .table-absensi,
    .absensi-table,
    table.absensi,
    .absensi-container table {
        display: table !important;
        width: 100% !important;
        min-width: 900px !important;
        table-layout: auto !important;
        font-size: 13px !important;
    }

    .table-absensi th,
    .table-absensi td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Pastikan container absensi tidak overflow: hidden */
    .absensi-container,
    .content-card,
    .main-content {
        overflow-x: visible !important;
    }

    /* ========================================================== */
    /* GRID — Paksa jadi 2 kolom                                    */
    /* ========================================================== */
    .master-grid,
    .stat-nilai-grid,
    .stat-grid,
    .stats-grid,
    .card-grid,
    .info-grid,
    .dashboard-grid,
    .stat-absensi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    [style*="grid-template-columns:repeat(auto-fit"],
    [style*="grid-template-columns: repeat(auto-fit"],
    [style*="grid-template-columns:repeat(auto-fill"],
    [style*="grid-template-columns: repeat(auto-fill"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ========================================================== */
    /* FLEX — Paksa column                                          */
    /* ========================================================== */
    .filter-dropdown,
    .filter-bar,
    .action-bar,
    .toolbar,
    .nilai-info,
    .nilai-pjok-filter,
    .nilai-pai-filter,
    .nilai-kka-filter,
    .nilai-tik-filter,
    .nilai-bta-filter,
    .absensi-filter,
    .download-range {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .filter-dropdown > div,
    .filter-bar > div,
    .action-bar > div,
    .absensi-filter > div,
    .download-range > div {
        width: 100% !important;
    }

    .filter-dropdown select,
    .filter-dropdown input,
    .filter-bar select,
    .filter-bar input,
    .absensi-filter input,
    .download-range input {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* ========================================================== */
    /* BUTTON GROUP                                                 */
    /* ========================================================== */
    .btn-group-actions,
    .button-group,
    .actions-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .btn-group-actions button,
    .button-group button,
    .actions-group button {
        flex: 1 1 auto !important;
        min-width: calc(50% - 4px) !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    /* ========================================================== */
    /* HEADER                                                       */
    /* ========================================================== */
    .detail-header,
    .page-header,
    .section-header,
    .jadwal-header,
    .nilai-pjok-header,
    .nilai-pai-header,
    .nilai-kka-header,
    .nilai-tik-header,
    .nilai-bta-header,
    .absensi-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .detail-header h4,
    .page-header h4 {
        font-size: 15px !important;
    }

    /* ========================================================== */
    /* CARD & MODAL                                                 */
    /* ========================================================== */
    .content-card > div,
    .content-card > * {
        max-width: 100% !important;
    }

    .modal-master {
        padding: 8px !important;
    }

    .modal-content {
        padding: 15px !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 12px !important;
        overflow-y: auto !important;
    }

    .form-master {
        grid-template-columns: 1fr !important;
    }

    .form-master .full {
        grid-column: 1 !important;
    }

    /* ========================================================== */
    /* TEXT                                                         */
    /* ========================================================== */
    .content-card h3 {
        font-size: 15px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .content-card p,
    .content-card span,
    .content-card div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .badge-role,
    .status-badge,
    [class*="badge"] {
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* ========================================================== */
    /* JADWAL                                                       */
    /* ========================================================== */
    .hari-grid {
        grid-template-columns: 1fr !important;
    }

    .hari-card {
        width: 100% !important;
    }

    /* ========================================================== */
    /* SEMBUNYIKAN MENU CEPAT LAMA (semua variasi)                  */
    /* ========================================================== */
    .content-card .quick-actions:not(#mobileQuickAccess .quick-actions),
    .content-card .quick-action:not(#mobileQuickAccess .quick-action),
    .content-card .quick-menu,
    .content-card .akses-cepat,
    .content-card .shortcut-grid,
    .content-card .quick-grid:not(#mobileQuickAccess .quick-grid) {
        display: none !important;
    }
}

/* ============================================================ */
/* EXTRA SMALL <= 480px                                         */
/* ============================================================ */
@media screen and (max-width: 480px) {

    .main-content {
        padding: 8px !important;
        padding-top: 74px !important;
    }

    .content-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    .content-card h3 {
        font-size: 14px !important;
        padding-left: 8px !important;
    }

    .master-grid,
    .stat-grid,
    .stat-nilai-grid,
    .stat-absensi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .table-master {
        font-size: 10px !important;
    }

    .table-master th,
    .table-master td {
        padding: 4px 3px !important;
        font-size: 9px !important;
    }

    .table-nilai input[type="number"] {
        width: 30px !important;
        min-width: 28px !important;
        font-size: 9px !important;
        padding: 2px 1px !important;
    }

    .btn-group-actions button,
    .button-group button {
        min-width: 100% !important;
        padding: 8px !important;
    }
}

/* ============================================================ */
/* EXTRA EXTRA SMALL <= 360px                                   */
/* ============================================================ */
@media screen and (max-width: 360px) {

    .main-content {
        padding: 6px !important;
        padding-top: 70px !important;
    }

    .content-card {
        padding: 8px !important;
    }

    .master-grid,
    .stat-grid,
    .stat-nilai-grid,
    .stat-absensi-grid {
        grid-template-columns: 1fr !important;
    }

    .table-nilai input[type="number"] {
        width: 26px !important;
        min-width: 24px !important;
        font-size: 8px !important;
    }
}

/* ============================================================ */
/* APK SPECIFIC — Fix untuk Android WebView                     */
/* ============================================================ */
@media screen and (max-width: 900px) {
    html, body {
        overscroll-behavior-x: none !important;
        touch-action: pan-y !important;
    }

    .table-wrapper,
    .table-nilai-wrapper,
    .table-absensi-wrapper {
        touch-action: pan-x pan-y !important;
    }
}
/* ============================================================ */
/* FITUR LIHAT PASSWORD (MATA)                                   */
/* ============================================================ */
.password-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    padding-right: 45px !important;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    font-size: 16px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    z-index: 5;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
}

.password-toggle:hover {
    color: #10b981;
    background: rgba(16,185,129,0.1);
}

.password-toggle:active {
    transform: translateY(-50%) scale(0.9);
}

/* Mobile — perbesar area tap */
@media (max-width: 768px) {
    .password-toggle {
        font-size: 18px;
        padding: 8px;
        right: 10px;
    }
}