/* ===================================================
   JEWELLERY PRO+ - PERFECT MOBILE RESPONSIVE
   =================================================== */
*, *::before, *::after { box-sizing: border-box !important; }
html, body { 
    max-width: 100vw !important; 
    overflow-x: hidden !important; 
    width: 100% !important; 
    margin: 0; padding: 0; 
    -webkit-text-size-adjust: none;
}

@media screen and (max-width: 768px) {
    /* SCALING DOWN ENTIRE UI */
    html { font-size: 13px !important; } /* Makes all Tailwind rem values 18% smaller */
    body { font-size: 13px !important; line-height: 1.4 !important; }
    
    /* 1. Navbar & Page wrapper */
    nav.nav-gold { margin-left: 0 !important; padding: 8px 12px !important; width: 100vw !important; max-width: 100% !important; }
    .page-wrapper { margin-left: 0 !important; padding: 8px !important; width: 100vw !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; }
    
    /* 2. Sidebar */
    .sidebar { transform: translateX(-100%) !important; z-index: 1050; width: 260px !important; }
    .sidebar.open { transform: translateX(0) !important; }
    .mobile-burger { display: block !important; margin-left: auto; }
    
    /* 3. Login Page */
    .login-box, .login-card, form.login-form { width: 92vw !important; max-width: 400px !important; margin: 2vh auto !important; padding: 16px !important; box-sizing: border-box !important; }

    /* 4. Dashboard Charts & Cards */
    .dashboard-chart, .top-products-card, .gem-card { 
        padding: 12px !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden; margin-bottom: 12px !important; border-radius: 8px !important;
    }

    /* 5. Billing Form fixes */
    .form-card, .jewel-card, .border, .bg-white { 
        padding: 12px !important; border-radius: 8px !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; overflow-x: hidden !important; 
    }
    
    /* Inputs */
    input[type="date"], input[type="text"], input[type="number"], input[type="email"], select, textarea { 
        min-height: 38px !important; height: auto !important; font-size: 13px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 6px 10px !important;
    }
    label { font-size: 12px !important; margin-bottom: 2px !important; }
    
    /* Better Add-Item Mode Tabs */
    .add-mode-tabs { flex-direction: column; gap: 4px; border: none; width: 100%; box-sizing: border-box; }
    .add-mode-tab { border: 1.5px solid rgba(181,115,14,0.3); border-radius: 6px; margin-bottom: 4px; padding: 8px !important; width: 100%; text-align: center; font-size: 13px !important; }
    
    /* 6. Data Tables Horizontal Scrolling */
    .due-table-wrap, .table-responsive, .inv-table-wrap, .overflow-x-auto, 
    .accounts-table-wrap, .income-table-wrap, .sanchari-card, .sanchari-table,
    #purchaseItemsList, table#purchaseItemsList, .purchase-history-table, .jewel-table-wrap, #itemsTableContainer {
        display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; width: 100% !important; max-width: 100vw !important; margin-bottom: 12px; border-radius: 8px; box-sizing: border-box !important;
    }
    
    /* Wrap raw tables */
    .due-table, .jewel-table, .inv-table, .purchase-table, table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; width: 100% !important; }
    table { min-width: max-content !important; width: 100% !important; box-sizing: border-box !important; font-size: 12px !important; }
    th, td { white-space: nowrap !important; padding: 8px 10px !important; font-size: 12px !important; }
    
    /* Action Buttons in tables */
    .action-grid { display: flex; gap: 4px; flex-wrap: wrap; }
    .action-btn { padding: 4px 8px !important; font-size: 11px !important; }
    
    /* 7. Split Payment Progress */
    .split-legend { flex-direction: column; align-items: flex-start; gap: 4px; }
    .split-legend-item { width: 100%; justify-content: space-between; font-size: 12px !important; }
    
    /* 8. Bottom Actions */
    .flex.flex-wrap.gap-4.justify-center.mb-10 {
        flex-direction: column !important; align-items: stretch !important; padding: 0; box-sizing: border-box !important; width: 100% !important; gap: 8px !important; margin-bottom: 16px !important;
    }
    .btn-save, .btn-pdf, .btn-gold, button[type="submit"], button[type="button"] {
        width: 100% !important; margin-bottom: 0px !important; min-height: 40px !important; display: flex !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; font-size: 13px !important; padding: 8px 16px !important;
    }
    /* Don't stretch small action buttons inside tables/forms */
    .action-btn, .btn-remove, .eye-btn, button.eye-btn, button[type="button"].eye-btn { width: auto !important; min-height: unset !important; }
    
    /* 9. Modals full width */
    [id$="Modal"] > div, .modal-content, .modal-dialog { max-width: 96vw !important; width: 96vw !important; max-height: 90vh !important; margin: 2vh auto !important; box-sizing: border-box !important; overflow-x: hidden; border-radius: 8px !important; }
    
    /* 10. Invoice / PDF Print Layout resets */
    .invoice-card { width: 100% !important; max-width: 100vw !important; border-radius: 0 !important; padding: 8px !important; box-sizing: border-box !important; overflow-x: hidden !important; }
    .print-actions { flex-direction: column !important; gap: 6px !important; padding: 8px !important; width: 100% !important; box-sizing: border-box !important; }
    
    /* Fix: Logo constantly on left side on mobile invoice */
    .top-header { 
        flex-direction: row !important; 
        text-align: left !important; 
        gap: 10px !important; 
        align-items: flex-start !important; 
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    .top-header img, .very-left-logo { 
        width: 55px !important; 
        height: 55px !important; 
        margin-right: 0 !important;
    }
    .shop-branding-text {
        text-align: left !important;
        flex: 1;
        min-width: 60%;
    }
    .header-right { 
        text-align: left !important; 
        margin-top: 8px !important;
        width: 100% !important;
    }
    .shop-title { font-size: 15px !important; }
    
    /* Grids to single column */
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Exceptions for small grids like totals */
    .sm-grid-cols-2 { grid-template-columns: 1fr 1fr !important; }
}

@media screen and (max-width: 480px) {
    h1 { font-size: 16px !important; }
    h2 { font-size: 15px !important; }
    h3 { font-size: 14px !important; }
    .top-header img, .very-left-logo { width: 45px !important; height: 45px !important; }
    .shop-title { font-size: 13px !important; }
}

/* ===== LOGIN PAGE MOBILE FIXES ===== */
@media screen and (max-width: 768px) {
    .input-wrap {
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }
    .input-icon {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }
    .jewel-field, input.jewel-field, input[type="email"], input[type="password"] {
        width: 100% !important;
        padding: 11px 42px 11px 38px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1 !important;
    }
    button[type="button"].eye-btn, .eye-btn {
        position: absolute !important;
        right: 10px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        max-width: 32px !important;
        min-height: unset !important;
        height: auto !important;
        padding: 4px 6px !important;
        z-index: 5 !important;
        background: transparent !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        margin: 0 !important;
    }
}