/* --- 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;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-100%);
    background: #0f172a;
}

#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;
}

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;
    }
    
    #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;  /* JANGAN hidden! kalender butuh scroll! */
    }

    #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;
    }

    #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;
    }
}

/* --- 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;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    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. LEGACY BROWSER POLYFILLS (CSS-Only) --- */
/* Fallback for Aspect Ratio */
.aspect-square {
    position: relative;
    padding-bottom: 100%;
}
.aspect-square > * {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* --- 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;
    }
    table tr {
        display: block;
        margin-bottom: 1.5rem;
        background: white;
        border: 1px solid #f1f5f9;
        border-radius: 1.5rem;
        padding: 1rem 0;
    }
}

/* --- 9. JADWAL PAGE MOBILE PADDING FIX --- */
@media screen and (max-width: 768px) {
    #main-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 1rem !important;
        /* JANGAN overflow-x: hidden di sini! itu membunuh scroll horizontal */
        overflow-x: visible !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;
    }
}

/* --- 9. JADWAL PAGE LAYOUT REFINEMENT --- */
#main-content {
    padding: 1.5rem !important;
}

@media screen and (max-width: 768px) {
    #main-content {
        padding: 0.5rem !important;
        padding-top: 1rem !important;
    }
}

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

.filter-grid {
    gap: 1rem !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;
    background: #f1f5f9;
    gap: 1px; /* Garis pemisah tipis antar kotak */
}

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

.jadwal-day-cell:hover {
    background: #f8fafc !important;
}

/* Khusus Mobile (< 768px) */
@media screen and (max-width: 768px) {
    .jadwal-day-cell {
        min-height: 60px !important;
    }
    
    .jadwal-calendar-layout > div:first-child ~ div {
        font-size: 9px !important;
        padding: 6px 0 !important;
    }
    
    /* Sembunyikan teks detail di HP agar tidak sumpek */
    .appt-label {
        display: none !important;
    }
}