/* ============================================
   MOBILE-FIRST PERFECT UI & UX
   Complete redesign for all pages
   ============================================ */

/* ============================================
   MOBILE BREAKPOINT: <= 640px
   ============================================ */

@media (max-width: 640px) {
  
  /* --- GLOBAL RESETS --- */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    overflow-x: hidden;
  }
  
  /* --- TYPOGRAPHY --- */
  h1, .text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  h2, .text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
  
  h3, .text-lg {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }
  
  /* --- CONTAINERS & SPACING --- */
  #page-container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 6rem !important;
  }
  
  .py-4, .py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  .mb-6, .mb-4 {
    margin-bottom: 1rem !important;
  }
  
  .gap-4 {
    gap: 0.75rem !important;
  }
  
  .gap-3 {
    gap: 0.5rem !important;
  }
  
  /* --- REMOVE NEGATIVE MARGINS --- */
  .-mx-4, .-mx-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* --- HEADER IMPROVEMENTS --- */
  #app-header {
    position: sticky;
    top: 0;
    z-index: 30;
  }
  
  #app-header .flex {
    padding: 0.75rem 1rem !important;
  }
  
  #page-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
  }
  
  #menu-toggle {
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  
  /* --- DASHBOARD --- */
  /* Single column for all cards */
  .grid.grid-cols-2.md\:grid-cols-4,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Dashboard metric cards */
  .grid.grid-cols-2.md\:grid-cols-4 > div,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > div {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }
  
  /* Icon sizes */
  .p-2.rounded-full {
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* --- SALES HISTORY MOBILE CARDS --- */
  #sales-history-body tr {
    display: block !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.875rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .dark #sales-history-body tr {
    background: #1f2937;
    border-color: #374151;
  }
  
  #sales-history-body td {
    display: block !important;
    padding: 0.375rem 0 !important;
    border: none !important;
    text-align: left !important;
  }
  
  /* Bill number - large and prominent */
  #sales-history-body td:nth-child(1) {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #4361ee !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  .dark #sales-history-body td:nth-child(1) {
    color: #60a5fa !important;
    border-bottom-color: #374151 !important;
  }
  
  /* Date & Time */
  #sales-history-body td:nth-child(2) {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
  }
  
  #sales-history-body td:nth-child(2)::before {
    content: '📅 ';
    margin-right: 0.25rem;
  }
  
  /* Items count */
  #sales-history-body td:nth-child(3) {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
  }
  
  #sales-history-body td:nth-child(3)::before {
    content: '📦 Items: ';
    font-weight: 600;
    color: #374151;
  }
  
  .dark #sales-history-body td:nth-child(3)::before {
    color: #9ca3af;
  }
  
  /* Payment method badge */
  #sales-history-body td:nth-child(4) {
    display: inline-block !important;
    margin: 0.5rem 0;
  }
  
  #sales-history-body td:nth-child(4) span {
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
  }
  
  /* Total amount - large and green */
  #sales-history-body td:nth-child(5) {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #059669 !important;
    margin: 0.5rem 0 !important;
  }
  
  /* View button */
  #sales-history-body td:nth-child(6) {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid #e5e7eb !important;
    text-align: center !important;
  }
  
  .dark #sales-history-body td:nth-child(6) {
    border-top-color: #374151 !important;
  }
  
  #sales-history-body td:nth-child(6) button {
    width: 100%;
    padding: 0.625rem 1rem !important;
    background: #4361ee !important;
    color: white !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  
  #sales-history-body thead {
    display: none !important;
  }
  
  /* --- INVENTORY/PRODUCTS MOBILE CARDS --- */
  #inventory-table-body tr,
  #out-of-stock-table-body tr,
  #product-list > div {
    display: block !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.875rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .dark #inventory-table-body tr,
  .dark #out-of-stock-table-body tr,
  .dark #product-list > div {
    background: #1f2937;
    border-color: #374151;
  }
  
  #inventory-table-body td,
  #out-of-stock-table-body td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0 !important;
    border: none !important;
    font-size: 0.875rem;
  }
  
  /* Product name - header */
  #inventory-table-body td:nth-child(1),
  #out-of-stock-table-body td:nth-child(1) {
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
  }
  
  .dark #inventory-table-body td:nth-child(1),
  .dark #out-of-stock-table-body td:nth-child(1) {
    color: #f3f4f6 !important;
    border-bottom-color: #374151 !important;
  }
  
  /* Add data labels before content */
  #inventory-table-body td:nth-child(2)::before { content: 'Category: '; font-weight: 600; }
  #inventory-table-body td:nth-child(3)::before { content: 'Stock: '; font-weight: 600; }
  #inventory-table-body td:nth-child(4)::before { content: 'Cost: '; font-weight: 600; }
  #inventory-table-body td:nth-child(5)::before { content: 'Price: '; font-weight: 600; }
  #inventory-table-body td:nth-child(6)::before { content: 'Inv. Value: '; font-weight: 600; }
  #inventory-table-body td:nth-child(7)::before { content: 'Retail Value: '; font-weight: 600; }
  #inventory-table-body td:nth-child(8)::before { content: 'Margin: '; font-weight: 600; }
  #inventory-table-body td:nth-child(9)::before { content: 'Sales: '; font-weight: 600; }
  
  /* Actions row */
  #inventory-table-body td:nth-child(10),
  #out-of-stock-table-body td:last-child {
    justify-content: center !important;
    gap: 0.5rem;
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid #e5e7eb !important;
  }
  
  .dark #inventory-table-body td:nth-child(10),
  .dark #out-of-stock-table-body td:last-child {
    border-top-color: #374151 !important;
  }
  
  #inventory-table thead,
  #out-of-stock-table-body + table thead {
    display: none !important;
  }
  
  /* --- REPORTS PAGE --- */
  /* Tab navigation */
  .flex.items-center.space-x-2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .flex.items-center.space-x-2::-webkit-scrollbar {
    display: none;
  }
  
  /* Report cards */
  .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Date range inputs */
  .flex.flex-col.md\:flex-row.md\:items-end.md\:space-x-4 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .flex.flex-col.md\:flex-row.md\:items-end.md\:space-x-4 > div {
    width: 100% !important;
  }
  
  /* --- RAW MATERIALS & EXPENSES --- */
  #raw-materials-table-body tr,
  #expenses-table-body tr {
    display: block !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.875rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .dark #raw-materials-table-body tr,
  .dark #expenses-table-body tr {
    background: #1f2937;
    border-color: #374151;
  }
  
  #raw-materials-table-body td,
  #expenses-table-body td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0 !important;
    border: none !important;
    font-size: 0.875rem;
  }
  
  #raw-materials-table-body td:nth-child(1),
  #expenses-table-body td:nth-child(1) {
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  .dark #raw-materials-table-body td:nth-child(1),
  .dark #expenses-table-body td:nth-child(1) {
    border-bottom-color: #374151 !important;
  }
  
  /* Add data labels */
  #raw-materials-table-body td:nth-child(2)::before { content: 'Qty: '; font-weight: 600; }
  #raw-materials-table-body td:nth-child(3)::before { content: 'Unit: '; font-weight: 600; }
  #raw-materials-table-body td:nth-child(4)::before { content: 'Cost/Unit: '; font-weight: 600; }
  #raw-materials-table-body td:nth-child(5)::before { content: 'Value: '; font-weight: 600; }
  #raw-materials-table-body td:nth-child(6)::before { content: 'Reorder: '; font-weight: 600; }
  
  #expenses-table-body td:nth-child(2)::before { content: 'Category: '; font-weight: 600; }
  #expenses-table-body td:nth-child(3)::before { content: 'Description: '; font-weight: 600; }
  #expenses-table-body td:nth-child(4)::before { content: 'Amount: '; font-weight: 600; }
  #expenses-table-body td:nth-child(5)::before { content: 'Type: '; font-weight: 600; }
  
  /* Hide all table headers */
  table thead {
    display: none !important;
  }
  
  /* Table footers */
  tfoot tr {
    display: flex !important;
    justify-content: space-between !important;
    background: #f9fafb !important;
    padding: 1rem !important;
    border-radius: 0.75rem !important;
    margin-top: 0.5rem !important;
  }
  
  .dark tfoot tr {
    background: #374151 !important;
  }
  
  tfoot td {
    display: inline !important;
    padding: 0 !important;
    border: none !important;
    font-weight: 600 !important;
  }
  
  tfoot td:not(:first-child):not(:last-child) {
    display: none !important;
  }
  
  /* --- BUTTONS & FORMS --- */
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }
  
  button:active,
  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  /* Form inputs */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  input[type="search"],
  select,
  textarea {
    min-height: 44px !important;
    padding: 0.75rem !important;
    font-size: 16px !important;
    border-radius: 0.75rem !important;
    border-width: 1px !important;
  }
  
  /* Filter sections */
  .bg-white.rounded-lg.shadow.p-4,
  .bg-white.dark\:bg-gray-800.rounded-lg.shadow.p-4 {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }
  
  /* Flex containers on mobile */
  .flex.flex-col.md\:flex-row,
  .flex.flex-wrap {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .flex.flex-col.md\:flex-row > *,
  .flex.flex-wrap > * {
    width: 100% !important;
  }
  
  /* Date filter "to" text */
  .flex.items-center.space-x-2 span:not(.px-2) {
    display: none;
  }
  
  /* --- PRODUCT GRID --- */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* --- MODALS --- */
  .fixed.inset-0 > div:not(.bg-black) {
    margin: 1rem !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    border-radius: 1rem !important;
  }
  
  /* --- OVERFLOW FIXES --- */
  .overflow-x-auto {
    overflow-x: visible !important;
  }
  
  .min-w-full {
    min-width: 100% !important;
  }
  
  /* --- RECENT TRANSACTIONS (Dashboard) --- */
  #recent-transactions tr {
    display: flex !important;
    flex-direction: column !important;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    gap: 0.25rem;
  }
  
  .dark #recent-transactions tr {
    background: #1f2937;
    border-color: #374151;
  }
  
  #recent-transactions td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0.875rem !important;
  }
  
  #recent-transactions td:first-child {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #4361ee !important;
    margin-bottom: 0.25rem;
  }
  
  .dark #recent-transactions td:first-child {
    color: #60a5fa !important;
  }
  
  #recent-transactions td:last-child {
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    color: #059669 !important;
    margin-top: 0.25rem;
  }
  
  #recent-transactions thead {
    display: none !important;
  }
  
  /* --- CATEGORY PERFORMANCE & INVENTORY STATUS --- */
  #category-performance > div,
  #inventory-status > div {
    padding: 0.875rem !important;
    border-radius: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* --- HIDE OVERFLOW CONTAINERS --- */
  .overflow-hidden {
    overflow: visible !important;
  }
  
  /* --- ACTION BUTTON GROUPS --- */
  .flex.space-x-2 button,
  .flex.gap-2 button {
    flex: 1;
    min-width: auto !important;
  }
  
  /* --- BOTTOM NAVIGATION --- */
  #bottom-nav {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
  
  /* --- SEARCH INPUTS --- */
  .relative input[type="text"],
  .relative input[type="search"] {
    width: 100% !important;
    padding-left: 2.5rem !important;
  }
  
  /* --- APPLY FILTERS BUTTON --- */
  #apply-filters-btn,
  #filter-btn,
  .flex.items-end button {
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
  
  /* --- CARD SHADOWS --- */
  .shadow,
  .shadow-lg {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }
  
  /* --- RESPONSIVE TABLE OVERRIDE --- */
  .responsive-table table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block !important;
    width: 100% !important;
  }
  
  .responsive-table thead {
    display: none !important;
  }
}

/* ============================================
   TABLET: 641px - 1024px
   ============================================ */

@media (min-width: 641px) and (max-width: 1024px) {
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  button,
  .btn,
  input,
  select {
    min-height: 44px;
    font-size: 16px;
  }
}

/* ============================================
   MOBILE BREAKPOINT: <= 640px
   ============================================ */

@media (max-width: 640px) {
  
  /* --- TYPOGRAPHY --- */
  h1 {
    font-size: 1.5rem !important; /* 24px */
    line-height: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  h2 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.75rem !important;
  }
  
  /* --- SPACING & CONTAINERS --- */
  .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  .py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  .mb-6 {
    margin-bottom: 1rem !important;
  }
  
  .gap-4 {
    gap: 0.75rem !important;
  }
  
  .gap-3 {
    gap: 0.5rem !important;
  }
  
  /* --- DASHBOARD CARDS --- */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Dashboard summary cards */
  .grid.grid-cols-2.md\:grid-cols-4 > div {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }
  
  .grid.grid-cols-2.md\:grid-cols-4 .text-xs {
    font-size: 0.75rem !important;
  }
  
  .grid.grid-cols-2.md\:grid-cols-4 .text-lg {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
  }
  
  /* Make icon containers slightly larger */
  .grid.grid-cols-2.md\:grid-cols-4 .p-2.rounded-full {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* --- PRODUCT GRID CARDS --- */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  #product-list > div {
    border-radius: 1rem !important;
    padding: 1rem !important;
  }
  
  /* --- RECENT TRANSACTIONS & CARDS --- */
  /* Transform recent transactions table into clean cards */
  #recent-transactions tr {
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    gap: 0.375rem;
  }
  
  .dark #recent-transactions tr {
    background: #1f2937;
    border-color: #374151;
  }
  
  #recent-transactions td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 !important;
    border: none !important;
    font-size: 0.875rem;
  }
  
  #recent-transactions td:first-child {
    font-weight: 600;
    font-size: 1rem;
    color: #1f2937;
  }
  
  .dark #recent-transactions td:first-child {
    color: #f3f4f6;
  }
  
  #recent-transactions td:last-child {
    font-weight: 700;
    font-size: 1.125rem;
    color: #059669;
  }
  
  #recent-transactions thead {
    display: none;
  }
  
  /* --- INVENTORY / PRODUCTS CARDS --- */
  /* Enhanced product card layout for mobile */
  #inventory-table-body tr,
  #out-of-stock-table-body tr {
    display: block;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.875rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .dark #inventory-table-body tr,
  .dark #out-of-stock-table-body tr {
    background: #1f2937;
    border-color: #374151;
  }
  
  #inventory-table-body td,
  #out-of-stock-table-body td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0 !important;
    border: none !important;
    font-size: 0.875rem;
  }
  
  #inventory-table-body td:first-child,
  #out-of-stock-table-body td:first-child {
    font-weight: 600;
    font-size: 1rem;
    padding-bottom: 0.25rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    margin-bottom: 0.5rem;
  }
  
  .dark #inventory-table-body td:first-child,
  .dark #out-of-stock-table-body td:first-child {
    border-bottom-color: #374151 !important;
  }
  
  #inventory-table thead,
  #out-of-stock-table-body + table thead {
    display: none;
  }
  
  /* Stock badge styling */
  #inventory-table-body td:nth-child(3),
  #out-of-stock-table-body td:nth-child(3) {
    justify-content: flex-end;
  }
  
  /* --- SALES HISTORY CARDS --- */
  #sales-history-body tr {
    display: block;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.875rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .dark #sales-history-body tr {
    background: #1f2937;
    border-color: #374151;
  }
  
  #sales-history-body td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0 !important;
    border: none !important;
    font-size: 0.875rem;
  }
  
  #sales-history-body td:first-child {
    font-weight: 700;
    font-size: 1.125rem;
    color: #4361ee;
    padding-bottom: 0.25rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    margin-bottom: 0.5rem;
  }
  
  .dark #sales-history-body td:first-child {
    color: #60a5fa;
    border-bottom-color: #374151 !important;
  }
  
  /* Payment method badge */
  #sales-history-body td:nth-child(4) {
    justify-content: flex-end;
  }
  
  /* Amount styling */
  #sales-history-body td:nth-child(5) {
    font-weight: 700;
    font-size: 1.125rem;
    color: #059669;
    justify-content: flex-end;
  }
  
  /* Action button */
  #sales-history-body td:last-child {
    justify-content: center;
    padding-top: 0.75rem !important;
    margin-top: 0.5rem;
    border-top: 1px solid #f3f4f6 !important;
  }
  
  .dark #sales-history-body td:last-child {
    border-top-color: #374151 !important;
  }
  
  #sales-history-body thead {
    display: none;
  }
  
  /* --- RAW MATERIALS & EXPENSES TABLES --- */
  #raw-materials-table-body tr,
  #expenses-table-body tr {
    display: block;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.875rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .dark #raw-materials-table-body tr,
  .dark #expenses-table-body tr {
    background: #1f2937;
    border-color: #374151;
  }
  
  #raw-materials-table-body td,
  #expenses-table-body td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0 !important;
    border: none !important;
    font-size: 0.875rem;
  }
  
  #raw-materials-table-body td:first-child,
  #expenses-table-body td:first-child {
    font-weight: 600;
    font-size: 1rem;
    padding-bottom: 0.25rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    margin-bottom: 0.5rem;
  }
  
  .dark #raw-materials-table-body td:first-child,
  .dark #expenses-table-body td:first-child {
    border-bottom-color: #374151 !important;
  }
  
  /* Hide table headers on mobile */
  #raw-materials-table-body + table thead,
  #expenses-table-body + table thead {
    display: none;
  }
  
  table thead {
    display: none;
  }
  
  /* Footer totals remain visible but styled */
  tfoot tr {
    display: flex !important;
    justify-content: space-between;
    background: #f9fafb !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem;
    margin-top: 0.5rem;
  }
  
  .dark tfoot tr {
    background: #374151 !important;
  }
  
  tfoot td {
    display: inline !important;
    padding: 0 !important;
    border: none !important;
  }
  
  tfoot td:not(:first-child):not(:nth-last-child(2)) {
    display: none !important;
  }
  
  /* --- BUTTONS & TOUCH TARGETS --- */
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important; /* 15px */
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
  }
  
  /* Small icon buttons */
  button.text-xs,
  .btn-sm {
    min-height: 36px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important; /* 13px */
  }
  
  /* Action buttons in tables */
  button i.fa-edit,
  button i.fa-trash,
  button i.fa-eye {
    font-size: 1rem;
  }
  
  /* --- FORM INPUTS --- */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  input[type="search"],
  select,
  textarea {
    min-height: 44px !important;
    padding: 0.75rem !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    border-radius: 0.75rem !important;
    border-width: 1px !important;
  }
  
  /* --- FILTER SECTIONS --- */
  .bg-white.rounded-lg.shadow.p-4 {
    padding: 0.875rem !important;
    border-radius: 1rem !important;
  }
  
  /* Flex wrap on mobile */
  .flex.flex-wrap.gap-4,
  .flex.flex-wrap.gap-3 {
    flex-direction: column;
    gap: 0.75rem !important;
  }
  
  .flex-1.min-w-\[200px\] {
    min-width: 100% !important;
  }
  
  /* --- DATE FILTERS --- */
  .flex.items-center.space-x-2 {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  
  .flex.items-center.space-x-2 input[type="date"] {
    width: 100% !important;
  }
  
  .flex.items-center.space-x-2 span {
    display: none; /* Hide "to" text on mobile */
  }
  
  /* --- SEARCH INPUTS --- */
  input[type="search"],
  input[placeholder*="Search"] {
    width: 100% !important;
  }
  
  /* --- EXPORT BUTTONS ROW --- */
  .flex.flex-col.md\:flex-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .flex.flex-wrap.gap-3 button {
    width: 100%;
    justify-content: center;
  }
  
  /* --- CATEGORY PERFORMANCE BARS --- */
  #category-performance > div {
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
  }
  
  /* --- INVENTORY STATUS --- */
  #inventory-status > div {
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
  }
  
  /* --- MODALS --- */
  .fixed.inset-0 .bg-white.dark\:bg-gray-800 {
    margin: 1rem !important;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
  
  /* --- OVERFLOW HANDLING --- */
  .overflow-x-auto {
    overflow-x: visible !important;
  }
  
  /* --- REMOVE NEGATIVE MARGINS ON MOBILE --- */
  .-mx-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .px-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* --- HEADER ACTIONS --- */
  #header-actions {
    gap: 0.5rem;
  }
  
  #header-actions button {
    padding: 0.5rem !important;
    min-height: 36px !important;
  }
  
  /* --- BOTTOM PADDING FOR BOTTOM NAV --- */
  #page-container {
    padding-bottom: 5rem !important;
  }
  
  /* --- CARD SHADOWS --- */
  .shadow,
  .shadow-lg {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }
  
  /* --- ACTIVE/TAP STATES --- */
  button:active,
  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  /* --- BADGE STYLING --- */
  .bg-success-light,
  .bg-danger-light,
  .bg-warning-light,
  .bg-info-light {
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
  }
}

/* ============================================
   TABLET BREAKPOINT: 641px - 768px
   ============================================ */

@media (min-width: 641px) and (max-width: 768px) {
  /* 2-column grid for dashboard cards on tablet */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Keep some mobile optimizations */
  button,
  .btn {
    min-height: 44px;
  }
  
  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* Prevent zoom on tablets */
  }
}