/* ============================================
   SAFARI SEEDS - ENHANCED MOBILE RESPONSIVENESS
   ============================================ */

/* ============================================
   DESKTOP ZOOM/SCALE HANDLING
   Ensures form elements remain visible when zooming out
   ============================================ */

/* Keep 2-column layout but allow wrapping when space is limited */
.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-width: 0;
}

/* Ensure form groups don't overflow */
.form-group {
    min-width: 0;
    overflow: visible;
}

/* Prevent filter buttons from disappearing */
.filter-bar {
    flex-wrap: wrap;
}

.filter-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Ensure table cells don't get hidden */
.table td,
.table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Desktop zoom breakpoints */
@media (max-width: 1200px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Accounts table - show essential columns */
    .accounts-table th:nth-child(4),
    .accounts-table td:nth-child(4),
    .accounts-table th:nth-child(6),
    .accounts-table td:nth-child(6) {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    /* Tablet-sized screens */
    .modal-content {
        max-width: 90% !important;
    }

    form .grid {
        gap: 12px !important;
    }
}

/* ============================================
   MOBILE BASE IMPROVEMENTS
   ============================================ */

/* Better touch targets */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 15px;
    }

    .btn-sm {
        min-height: 36px;
        padding: 8px 14px;
    }

    .form-control {
        min-height: 44px;
        font-size: 16px;
        /* Prevents iOS zoom on focus */
    }

    select.form-control {
        font-size: 16px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    textarea {
        font-size: 16px;
        /* Prevents iOS zoom */
    }
}

/* ============================================
   MOBILE NAVIGATION IMPROVEMENTS
   ============================================ */

@media (max-width: 1024px) {

    /* Full-width sidebar on mobile when open */
    .sidebar {
        width: 280px;
        left: -280px !important;
        /* Start off-screen */
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
        transition: left 0.3s ease-in-out;
    }

    .sidebar.open {
        left: 0 !important;
        /* Slide in */
    }

    /* Make nav items more tappable */
    .nav-item a {
        padding: 14px 16px;
        font-size: 15px;
    }

    /* Sidebar footer improvements */
    .sidebar-footer {
        padding: 12px 20px;
    }

    /* Overlay for mobile sidebar */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 90;
        display: none;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }

    /* Show Header Toggle */
    .header-toggle {
        display: flex !important;
    }

    /* Adjust Main Content and Header */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .header {
        left: 0 !important;
        width: 100% !important;
    }
}

/* ============================================
   MOBILE HEADER IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
    .header {
        padding: 0 12px;
        height: 56px;
    }

    .header-toggle {
        display: flex !important;
    }

    .header-right {
        gap: 8px;
    }

    .user-dropdown {
        padding: 4px 8px 4px 4px;
    }

    .user-dropdown .user-name {
        display: none;
    }

    .notification-btn {
        width: 36px;
        height: 36px;
    }

    /* Breadcrumb simplification */
    .breadcrumb {
        font-size: 12px;
    }

    .breadcrumb-item:not(.active) {
        display: none;
    }
}

/* ============================================
   MOBILE GRID LAYOUTS
   ============================================ */

@media (max-width: 768px) {

    /* Stack all grid layouts */
    /* DISABLED to allow voucher forms to maintain their grid layout */
    /*
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    */

    /* Reduce gaps on mobile */
    /* DISABLED for voucher forms - they use inline styles */
    /*
    .gap-4 {
        gap: 12px !important;
    }
    */

    .gap-6 {
        gap: 16px !important;
    }

    /* Quick actions - 3 columns on tablet, 2 on phone */
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .quick-action-card {
        padding: 16px 12px;
    }

    .quick-action-card .icon {
        width: 40px;
        height: 40px;
    }

    .quick-action-card .icon svg {
        width: 20px;
        height: 20px;
    }

    .quick-action-card .label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   MOBILE TABLES - CARD VIEW
   ============================================ */

@media (max-width: 768px) {
    .table-container {
        overflow-x: visible;
    }

    /* Card-based table on mobile */
    table.table-mobile-cards thead {
        display: none;
    }

    table.table-mobile-cards tbody tr {
        display: block;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    table.table-mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid var(--gray-100);
    }

    table.table-mobile-cards tbody td:last-child {
        border-bottom: none;
        padding-top: 12px;
        justify-content: flex-end;
    }

    table.table-mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gray-600);
        font-size: 12px;
        text-transform: uppercase;
    }

    /* Standard horizontal scroll table as fallback */
    .table-container:not(.table-mobile-cards) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-container table {
        min-width: 600px;
    }
}

/* ============================================
   MOBILE MODALS - FULL SCREEN
   ============================================ */

@media (max-width: 768px) {
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0 !important;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header {
        flex-shrink: 0;
        padding: 16px;
        border-bottom: 1px solid var(--gray-200);
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        flex-shrink: 0;
        padding: 12px 16px;
        border-top: 1px solid var(--gray-200);
        background: var(--gray-50);
    }

    .modal-footer .btn {
        flex: 1;
    }
}

/* ============================================
   MOBILE FORMS
   ============================================ */

@media (max-width: 768px) {
    .form-group {
        margin-bottom: 16px;
    }

    .form-label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    /* Stack form grid on mobile - EXCEPT voucher forms which maintain their layout */
    /* Voucher forms use inline styles with !important to maintain grid layout */

    /* General Grid Stacking for Mobile Forms */
    .grid-cols-12>div {
        grid-column: span 12 / span 12 !important;
    }

    /* Exception: Allow small fields to share a row if explicitly needed (can add .col-half-mobile class later if needed) */

    /* Invoice/voucher forms */
    .invoice-items-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Input groups */
    .input-group {
        position: relative;
    }

    .input-group .input-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
    }

    .input-group input {
        padding-left: 42px;
        width: 100%;
        /* Ensure full width */
    }
}

/* ============================================
   MOBILE CARDS
   ============================================ */

@media (max-width: 768px) {
    .card {
        border-radius: 12px;
        padding: 16px;
    }

    .card h3 {
        font-size: 16px;
    }

    /* Stat cards */
    .stat-card {
        padding: 16px;
    }

    .stat-card h2,
    .stat-card .stat-value {
        font-size: 24px;
    }
}

/* ============================================
   MOBILE PAGE CONTENT
   ============================================ */

@media (max-width: 768px) {
    .page-content {
        padding: 16px;
        overflow: visible;
        /* Ensure shadows aren't clipped */
    }

    .card {
        border-radius: 12px;
        padding: 16px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .page-title {
        font-size: 20px;
    }

    .page-subtitle {
        font-size: 13px;
    }

    /* Action buttons in headers */
    .page-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .page-header-right {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-header-right .btn {
        flex: 1;
        min-width: 120px;
    }
}

/* ============================================
   MOBILE TABS
   ============================================ */

@media (max-width: 768px) {
    .tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* ============================================
   MOBILE LOGIN PAGE
   ============================================ */

@media (max-width: 767px) {
    .login-page {
        min-height: 100vh;
    }

    .login-right {
        padding: 24px 16px;
        align-items: flex-start;
        padding-top: 60px;
    }

    .login-form-container {
        width: 100%;
    }

    .login-heading {
        font-size: 24px;
    }

    .login-subtext {
        font-size: 14px;
    }

    .login-btn {
        height: 48px;
    }
}

/* ============================================
   MOBILE DASHBOARD
   ============================================ */

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .tables-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* ============================================
   MOBILE UTILITY CLASSES
   ============================================ */

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .full-width-mobile {
        width: 100% !important;
    }
}

/* ============================================
   MOBILE PRINT STYLES
   ============================================ */

@media (max-width: 768px) {
    .print-only {
        display: none !important;
    }
}

/* ============================================
   TOUCH DEVICE IMPROVEMENTS
   ============================================ */

@media (hover: none) and (pointer: coarse) {

    /* Remove hover effects on touch devices */
    .btn:hover {
        transform: none;
    }

    .quick-action-card:hover {
        transform: none;
    }

    /* Add active states instead */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .quick-action-card:active {
        transform: scale(0.98);
        background: var(--gray-50);
    }

    /* Larger tap targets */
    .delete-btn,
    .edit-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================
   LANDSCAPE PHONE ADJUSTMENTS
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .modal-content {
        height: 100vh;
        max-height: 100vh;
    }

    .modal-body {
        max-height: 50vh;
    }

    .login-right {
        padding-top: 20px;
    }
}

/* ============================================
   SMALL SCREEN TEXT ADJUSTMENTS
   ============================================ */

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 22px;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 16px;
    }

    .page-title {
        font-size: 18px;
    }

    /* Amount displays */
    .font-bold.text-primary {
        font-size: 14px;
    }
}

/* ============================================
   COMPREHENSIVE PAGE-LEVEL RESPONSIVE
   Overrides inline styles from JS-rendered HTML
   ============================================ */

/* --- TABLET (max 1024px) --- */
@media (max-width: 1024px) {

    /* Force all inline flex headers to wrap */
    .page-header,
    [style*="display: flex"][style*="justify-content"],
    .flex.justify-between {
        flex-wrap: wrap !important;
    }

    /* Quick actions: 3 columns on tablet */
    .quick-actions {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Stats grids */
    .grid.grid-cols-4,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- MOBILE (max 768px) --- */
@media (max-width: 768px) {

    /* ------- UNIVERSAL INLINE STYLE OVERRIDES ------- */

    /* All inline flex containers with gap in page headers -> stack */
    .page-header,
    .page-header-left,
    .page-header-right {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Any flex row with justify-between in top areas -> stack */
    .flex.justify-between.items-center.mb-4,
    .flex.justify-between.items-center.mb-6,
    div[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Fix: All inline-styled flex rows wrapping content at top of pages */
    .card-header[style*="display: flex"],
    div[style*="display: flex"][style*="flex-wrap: wrap"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ------- SEARCH INPUTS (Fixed widths -> full) ------- */
    input[style*="width: 250px"],
    input[style*="width: 220px"],
    input[style*="width: 200px"],
    input[style*="width: 300px"],
    input[style*="width: 400px"],
    .relative[style*="width: 300px"],
    .relative[style*="width: 400px"],
    .relative[style*="max-width: 400px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Inputs inside relative positioned wrappers */
    .relative input[type="text"] {
        width: 100% !important;
    }

    /* ------- STATS GRIDS ------- */
    .grid.grid-cols-3,
    .grid-cols-3,
    .grid.grid-cols-4,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    .grid.grid-cols-2,
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Stats cards within grids */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ------- TABLES ------- */
    .table-container,
    .table-responsive,
    div[style*="overflow-x: auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table-container table,
    .table-responsive table {
        min-width: 600px !important;
    }

    /* ------- FILTER BARS ------- */
    /* Inline styled filter grids (Ledger, Reports, etc.) */
    div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        overflow-x: visible !important;
    }

    /* Stock filters row */
    .stock-filters-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .stock-filter-item {
        width: 100% !important;
    }

    /* ------- EXPORT / ACTION BUTTON GROUPS ------- */
    .flex.justify-end.gap-2 {
        flex-wrap: wrap !important;
        justify-content: stretch !important;
    }

    .flex.justify-end.gap-2 .btn {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }

    /* ------- MODALS IMPROVEMENTS ------- */
    /* Already full screen via existing rules, enhance form layouts inside */
    .modal-body form > div[style*="display: flex"],
    .modal-body form > div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Modal form items with fixed widths */
    .modal-body div[style*="width: 1"],
    .modal-body div[style*="width: 2"],
    .modal-body div[style*="width: 80px"],
    .modal-body div[style*="width: 90px"],
    .modal-body div[style*="width: 100px"],
    .modal-body div[style*="width: 120px"],
    .modal-body div[style*="width: 130px"],
    .modal-body div[style*="width: 135px"],
    .modal-body div[style*="width: 140px"],
    .modal-body div[style*="width: 150px"],
    .modal-body div[style*="width: 160px"],
    .modal-body div[style*="width: 170px"],
    .modal-body div[style*="width: 200px"] {
        width: 100% !important;
        flex: 1 1 auto !important;
    }

    /* Modal footers with inline flex */
    .modal-footer,
    div[style*="display: flex"][style*="justify-content: flex-end"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ------- INVENTORY PAGE ------- */
    /* Stock entry grid becomes single column */
    .stock-entry-grid {
        grid-template-columns: 1fr !important;
    }

    /* 12-column grid layout for inventory */
    .grid.grid-cols-1.md\\:grid-cols-12,
    .grid-cols-12 {
        grid-template-columns: 1fr !important;
    }

    .col-span-12.md\\:col-span-12.lg\\:col-span-4,
    .col-span-12.md\\:col-span-12.lg\\:col-span-8 {
        grid-column: span 1 !important;
    }

    /* Pack size wrapper */
    .pack-size-wrapper {
        flex-direction: row !important;
        gap: 8px !important;
    }

    /* Stock actions row */
    .stock-actions-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .stock-actions-row .btn {
        width: 100% !important;
    }

    /* ------- LEDGER PAGE ------- */
    /* Override 4-col filter grid */
    div[style*="grid-template-columns: 1fr 1fr 1fr 50px"] {
        grid-template-columns: 1fr 1fr !important;
        min-width: 0 !important;
        overflow-x: visible !important;
    }

    /* Ledger content table */
    #ledgerContent .table-container {
        overflow-x: auto !important;
    }

    /* ------- PROCESSING PAGE ------- */
    /* Stats cards for Processing */
    .grid.grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Date filter row */
    div[style*="display: flex"][style*="gap: 8px"] input[style*="width: 130px"] {
        width: 100px !important;
    }

    /* Bill search input */
    #billSearchInput {
        width: 100% !important;
    }

    /* ------- FINANCE / VOUCHER PAGES ------- */
    /* Inline styled grids in voucher forms */
    .grid.grid-cols-12 > div {
        grid-column: span 12 / span 12 !important;
    }

    /* Voucher cart/items horizontal scroll */
    .invoice-items-container,
    div[style*="overflow-x: auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ------- REPORTS PAGE ------- */
    /* Chart containers - full width */
    .charts-grid {
        grid-template-columns: 1fr !important;
    }

    /* Report filter controls */
    .report-filters,
    div[style*="display: grid"][style*="gap: 12px"] {
        grid-template-columns: 1fr !important;
    }

    /* ------- SETTINGS PAGE ------- */
    /* Settings tabs */
    .tabs,
    [role="tablist"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
    }

    /* Settings form layouts */
    .settings-grid {
        grid-template-columns: 1fr !important;
    }

    /* ------- ACCOUNTS PAGE ------- */
    /* Account search and filter bar */
    #accountSearch {
        width: 100% !important;
    }

    /* Account type filter buttons */
    .filter-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .filter-btn {
        flex: 1 1 auto !important;
        min-width: 60px !important;
        text-align: center !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* ------- RETURN PAGES ------- */
    /* Purchase Return and Sales Return forms */
    #returnForm > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
    }

    #returnForm > div:first-child > div {
        width: 100% !important;
    }

    /* Return table */
    #returnsTableBody {
        font-size: 12px;
    }

    /* ------- PAGINATION ------- */
    .pagination-controls,
    div[style*="display: flex"][style*="gap: 2px"] {
        flex-wrap: wrap !important;
    }
}

/* --- SMALL PHONE (max 480px) --- */
@media (max-width: 480px) {

    /* Stats grid: single column */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Quick actions: 2 columns */
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Compact button groups */
    .page-header-right .btn,
    .flex.gap-2 .btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* Ledger filter: fully stacked */
    div[style*="grid-template-columns: 1fr 1fr 1fr 50px"] {
        grid-template-columns: 1fr !important;
    }

    /* Processing date inputs */
    div[style*="display: flex"][style*="gap: 8px"] input[style*="width: 130px"],
    input[style*="width: 130px"] {
        width: 100% !important;
    }

    /* Even compact table font */
    .table td,
    .table th {
        font-size: 10px !important;
        padding: 4px !important;
    }

    /* Reduce page content padding */
    .page-content {
        padding: 10px !important;
    }

    /* Card padding reduction */
    .card {
        padding: 10px !important;
    }

    .card-body {
        padding: 10px !important;
    }
}

/* ============================================
   iOS SPECIFIC FIXES
   ============================================ */

@supports (-webkit-touch-callout: none) {

    /* Fix for iOS bottom bar */
    .modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Prevent iOS form zoom */
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
    }
}