/* --- 1. GLOBAL LAYOUT RESPONSIVENESS (MOBILE-FIRST) --- */

/* Base State: Mobile (< 1024px) */
#app-sidebar {
    width: 14rem !important;
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    will-change: transform;
    isolation: isolate;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-100%);
    background: #0f172a;
}

/* Reset will-change saat sidebar tertutup untuk hemat memori */
body:not(.sidebar-mobile-open) #app-sidebar {
    will-change: auto;
}

#app-sidebar .p-5 {
    padding: 1.25rem 1rem !important;
}

#app-sidebar nav {
    padding: 0.5rem 0.75rem !important;
}

#app-sidebar nav button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important;
    margin-bottom: 0.25rem !important;
}

#app-sidebar nav button i {
    width: 1rem !important;
}

#main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    transition: margin-left 0.3s ease, width 0.3s ease !important;
}

/* HEADER TITLE MOBILE */
#page-title {
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: clip !important;
}

@media screen and (min-width: 480px) {
    #page-title { max-width: 200px; }
}

/* OPEN STATE (MOBILE ONLY) */
body.sidebar-mobile-open #app-sidebar {
    transform: translateX(0) !important;
    box-shadow: 0 0 3.125rem rgba(0,0,0,0.5) !important;
}

/* Geser konten sidebar agar tidak tertutup header h-16 (64px) di mobile */
@media screen and (max-width: 1023px) {
    #app-sidebar {
        top: 64px !important;
        height: calc(100% - 64px) !important;
        border-radius: 0 1rem 0 0;
    }
}

body.sidebar-mobile-open #sidebar-overlay {
    display: block !important;
    opacity: 1 !important;
}

/* Desktop State (>= 1024px) */
@media screen and (min-width: 1024px) {
    #app-sidebar {
        width: 16rem !important;
        transform: translateX(0) !important;
        position: fixed !important;
        will-change: auto;
    }
    
    #app-sidebar .p-5 { padding: 1.25rem !important; }
    #app-sidebar nav { padding: 0.625rem !important; }
    #app-sidebar nav button { padding: 0.75rem 1rem !important; font-size: 0.875rem !important; }
    #app-sidebar nav button i { width: 1.25rem !important; }

    #main-wrapper {
        margin-left: 16rem !important;
        width: calc(100% - 16rem) !important;
    }

    #page-title { max-width: none; white-space: normal; }

    /* COLLAPSED STATE (DESKTOP) */
    body.sidebar-collapsed #app-sidebar {
        transform: translateX(-100%) !important;
    }

    body.sidebar-collapsed #main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* --- 1.2 HEADER ADAPTABILITY --- */
@media screen and (max-width: 640px) {
    #main-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 0.75rem !important;
    }

    #page-title {
        font-size: 0.875rem !important;
        margin-right: auto !important;
        margin-left: 0.5rem !important;
        max-width: none !important;
    }
    
    .header-action-btn span { display: none; }
    
    #modal-content:not([style*="max-width: 400px"]):not([style*="max-width: 500px"]):not([style*="max-width: 640px"]) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: -webkit-fill-available !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html.dark #modal-content:not([style*="max-width: 400px"]):not([style*="max-width: 500px"]):not([style*="max-width: 640px"]),
    html[data-theme="dark"] #modal-content:not([style*="max-width: 400px"]):not([style*="max-width: 500px"]):not([style*="max-width: 640px"]) {
        background: #0f172a !important;
    }

    #modal-content > div {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: white !important;
    }

    html.dark #modal-content > div,
    html[data-theme="dark"] #modal-content > div {
        background: #0f172a !important;
    }

    html.dark #modal-content:not([style*="max-width: 400px"]):not([style*="max-width: 500px"]):not([style*="max-width: 640px"]),
    html.dark #modal-content > div,
    [data-theme="dark"] #modal-content:not([style*="max-width: 400px"]):not([style*="max-width: 500px"]):not([style*="max-width: 640px"]),
    [data-theme="dark"] #modal-content > div {
        background: #1e293b !important;
    }

    #modal-content form {
        padding: 1.5rem !important;
        padding-bottom: 8rem !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Ensure badges and profile are in a row */
    .flex.items-center.gap-2.mr-4 {
        margin-right: 0.5rem !important;
        gap: 0.375rem !important;
    }
}

/* [1.3] Modal: Proporsional di Tablet (640px–1023px) — Bukan full-width, bukan 7xl */
@media screen and (min-width: 640px) and (max-width: 1023px) {
    #modal-content {
        max-width: min(90vw, 720px) !important;
        border-radius: 1.5rem !important;
    }
}

/* [1.4] Toast Container: Safe-area + lebar layar penuh di mobile kecil */
@media screen and (max-width: 480px) {
    #toast-container {
        left: 0.75rem !important;
        right: 0.75rem !important;
        transform: none !important;
        max-width: none !important;
        top: env(safe-area-inset-top, 1.25rem) !important;
    }
}

/* [1.5] Floating Help Button: Safe-area-bottom + Z-index aman di mobile */
@media screen and (max-width: 768px) {
    /* Target: div.fixed.bottom-6.right-6 (floating help) */
    .no-print.group.fixed {
        bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 35 !important;
    }
}

/* [1.6] Safe-area Header (iPhone Notch / Dynamic Island) untuk PWA mode */
@media screen and (max-width: 1023px) {
    /* App bar */
    #main-wrapper > div:first-of-type {
        padding-top: env(safe-area-inset-top, 0px) !important;
        min-height: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }
    /* Sidebar header area */
    #app-sidebar {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
}

/* --- 2. GRID SYSTEM FALLBACKS (For Older Browsers) --- */
.responsive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.responsive-col {
    flex: 1 1 100%;
}

/* Utilities */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media screen and (min-width: 768px) {
    .responsive-col-md-6 { flex: 0 0 calc(50% - 0.75rem); }
}

@media screen and (min-width: 1280px) {
    .responsive-col-lg-4 { flex: 0 0 calc(33.333% - 1rem); }
    .responsive-col-lg-8 { flex: 0 0 calc(66.666% - 1rem); }
}

/* --- 3. MODAL RESPONSIVENESS (Ultra Critical) --- */
#modal-content form {
    padding-bottom: 5rem !important;
}

/* --- 4. SPECIFIC PAGE FIXES --- */

/* Kasir / Billing Suite */
@media screen and (max-width: 768px) {
    .billing-main-grid {
        grid-template-columns: 1fr !important;
    }
    
    .billing-sidebar {
        order: 2;
    }
    
    .billing-content {
        order: 1;
    }

    /* KlinikPayment Modal specific */
    .clinical-payment-grid {
        grid-template-columns: 1fr !important;
    }
    
    .service-selection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 480px) {
    .service-selection-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Header fonts for small screens */
    .clinical-header-title {
        font-size: 1.5rem !important;
    }
}

/* --- 5. ASPECT RATIO (Modern — CSS aspect-ratio sudah support semua browser sejak 2021) --- */
.aspect-square {
    aspect-ratio: 1 / 1;
}

/* --- 6. UTILITY OVERRIDES --- */
.mobile-hidden { display: none !important; }
@media screen and (min-width: 768px) {
    .mobile-hidden { display: flex !important; }
}

.desktop-hidden { display: flex !important; }
@media screen and (min-width: 768px) {
    .desktop-hidden { display: none !important; }
}

/* --- 7. AUTO-STACKING GRID --- */
@media screen and (max-width: 768px) {
    .auto-stack {
        flex-direction: column !important;
    }
    
    .auto-stack > * {
        width: 100% !important;
    }
    
    .mobile-padding-sm {
        padding: 1rem !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
}

/* --- 8. TABLE MOBILE OPTIMIZATION --- */
@media screen and (max-width: 640px) {
    table thead { display: none; }
    table td { 
        display: block; 
        width: 100%; 
        text-align: left !important; 
        padding: 0.75rem 1rem !important;
        border: none !important;
    }
    /* Label kolom: tampilkan data-label sebagai prefix */
    table td::before {
        content: attr(data-label);
        font-weight: 900;
        font-size: 9px;
        text-transform: uppercase;
        color: #94a3b8;
        display: block;
        margin-bottom: 2px;
        letter-spacing: 0.05em;
    }
    table tr {
        display: block;
        margin-bottom: 1.5rem;
        background: white;
        border: 1px solid #f1f5f9;
        border-radius: 1.5rem;
        padding: 1rem 0;
        transform: translateZ(0); /* Hardware acceleration to prevent GPU tearing */
    }
    
    html.dark table tr, html[data-theme="dark"] table tr,
    .dark table tr, [data-theme="dark"] table tr {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }
}

/* --- 9. JADWAL PAGE MOBILE PADDING FIX --- */
#main-content {
    padding: 1.5rem !important;
}

@media screen and (max-width: 768px) {
    #main-content {
        padding: 0.5rem !important;
        padding-top: 1rem !important;
        overflow-x: hidden !important;
    }
    #main-content .jadwal-calendar-container {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        width: calc(100% + 1rem) !important;
        max-width: 100vw !important;
    }
}

/* --- 10. JADWAL PAGE LAYOUT REFINEMENT --- */

/* Header & Filter Fix */
.jadwal-header {
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.filter-grid {
    gap: 1rem !important;
}

/* Filter Grid Mobile: 2 kolom untuk selects, tombol full-width di bawah */
@media screen and (max-width: 767px) {
    .filter-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .filter-grid > div:last-child {
        grid-column: 1 / -1 !important;
    }
}

/* =====================================================
   KALENDER JADWAL TERAPI - OPTIMIZED FOR ALL SCREENS
   ===================================================== */
.jadwal-calendar-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.jadwal-calendar-layout {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
    gap: 1px;
}

.jadwal-day-cell {
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
}

.jadwal-day-cell:hover {
    background: rgba(248, 250, 252, 0.8) !important;
}
[data-theme="dark"] .jadwal-day-cell:hover {
    background: rgba(30, 41, 59, 0.8) !important;
}

/* Mobile Kalender: Scroll horizontal agar 7 kolom tidak terlalu sempit */
@media screen and (max-width: 640px) {
    .jadwal-calendar-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .jadwal-calendar-layout {
        min-width: 560px !important; /* 7 × 80px minimum — cukup untuk label singkat */
    }
    .jadwal-day-cell {
        min-height: 70px !important;
    }
}

/* Khusus Mobile 640px-768px */
@media screen and (min-width: 641px) and (max-width: 768px) {
    .jadwal-day-cell {
        min-height: 60px !important;
    }
    
    /* Sembunyikan teks detail di HP agar tidak sumpek */
    .appt-label {
        display: none !important;
    }
}

/* --- 11. PROFILE DROPDOWN MOBILE --- */
@media screen and (max-width: 480px) {
    #profile-dropdown {
        right: -0.5rem !important;
        width: calc(100vw - 2rem) !important;
        max-width: 280px !important;
    }
}

/* --- 12. TAP TARGET & TOUCH UX --- */
@media screen and (max-width: 768px) {
    /* Tombol aksi di card jadwal harian - Sesuaikan agar tidak overflow */
    .appt-card button {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0.35rem !important;
    }
}

/* Hide native browser password reveal eye icon to prevent overlap with custom UI */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}
input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0;
}

/* =====================================================
   13. SISTEM PENGGAJIAN (PAYROLL) RESPONSIVENESS
   ===================================================== */

/* Header section of payroll */
@media screen and (max-width: 640px) {
    /* Header card: Reduce padding on mobile */
    #main-content .bg-gradient-to-br.rounded-\[2\.5rem\] {
        padding: 1.5rem !important;
        border-radius: 1.75rem !important;
    }

    /* Total Beban Gaji box: full width on mobile */
    #main-content .bg-white\/10.backdrop-blur-md.p-6.rounded-3xl {
        min-width: unset !important;
        width: 100% !important;
    }
}

/* Payroll employee card: periodo selector */
@media screen and (max-width: 480px) {
    /* Periode selector: Stack on very small screens */
    .rounded-3xl.p-6.shadow-sm.border.border-slate-100 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    /* Cetak Semua Slip button: full width */
    .rounded-3xl.p-6.shadow-sm.border.border-slate-100 button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Payroll "Bukukan" label: hide text on ultra narrow, show icon only */
@media screen and (max-width: 380px) {
    .payroll-btn-label {
        display: none !important;
    }
    .payroll-btn-buku {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
    }
}

/* =====================================================
   14. USER & ROLES - PASSWORD EYE BUTTON FIX
   ===================================================== */

/* Ensure the eye button always has a proper touch target and doesn't overlap text */
#new-user-password,
#edit-user-password {
    padding-right: 3rem !important; /* reserve space for eye button */
}

/* Eye toggle button - minimum tap target 44x44px on touch devices */
@media (pointer: coarse) {
    [onclick*="togglePasswordVisibility"] {
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* On very small screens (< 400px), the 2-col grid for username/password
   is handled by grid-cols-1 in the HTML. This ensures the form panel 
   doesn't overflow the screen. */
@media screen and (max-width: 400px) {
    #modal-edit-user .rounded-\[2\.5rem\],
    #modal-edit-user .rounded-\[3rem\] {
        border-radius: 1.5rem !important;
        padding: 1.25rem !important;
    }
}

/* =====================================================
   15. OWNER HUB DASHBOARD MOBILE FIXES
   ===================================================== */

/* Prevent horizontal overflow di owner hub */
#owner-hub-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Branch card text truncation di HP */
@media screen and (max-width: 640px) {
    /* Branch performance cards */
    #owner-hub-content .rounded-\[2rem\],
    #owner-hub-content .rounded-\[2\.5rem\],
    #owner-hub-content .rounded-\[3rem\] {
        border-radius: 1.25rem !important;
    }

    /* Filter selects full width di mobile */
    #owner-hub-content select {
        font-size: 12px !important;
    }

    /* Teks angka KPI lebih kecil di HP agar tidak overflow */
    #owner-hub-content h2.text-4xl {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }

    /* Sembunyikan dekorasi blur circle yang bisa bikin overflow */
    #owner-hub-content .blur-3xl {
        display: none !important;
    }

    /* Owner hub tabs di header */
    #owner-hub-content .overflow-x-auto {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Klinik registry card: stack tombol di mobile */
@media screen and (max-width: 480px) {
    .branch-action-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .branch-action-buttons button {
        width: 100% !important;
        justify-content: center !important;
    }
}