/* Mobile Responsive Styles for BOMcraft */

/* Mobile First Approach */
@media (max-width: 768px) {
  /* Global mobile adjustments */
  body {
    font-size: 14px;
    overflow: hidden !important; /* Prevent body scroll on mobile */
    height: 100vh;
  }
  
  /* App content adjustments for mobile */
  .app-content {
    flex-direction: column;
    height: 100vh;
    overflow: hidden !important;
  }
  
  /* Hide sidebar on mobile */
  .sidebar-format {
    position: fixed;
    left: -100%;
    top: 0;
    width: 280px;
    height: 100vh;
    z-index: 1000;
    transition: left 0.3s ease;
    background: white;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  }
  
  .sidebar-format.mobile-open {
    left: 0;
  }
  
  /* Mobile menu toggle button */
  .mobile-menu-toggle {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1001;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile close button */
  .mobile-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1002;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  /* Main content adjustments */
  main {
    margin-left: 0 !important;
    padding: 1rem;
    padding-top: 4rem; /* Space for mobile menu */
    overflow-y: auto !important; /* Enable scrolling on mobile */
    flex: 1;
    height: 100%;
    max-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Section headers */
  section > h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  /* Table responsiveness */
  .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    min-width: 600px; /* Force horizontal scroll on small screens */
  }
  
  /* Accounts mobile adjustments */
  #accounts > div:first-of-type {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 0.75rem;
  }

  #accounts > div:first-of-type .flex.items-center.gap-3.flex-wrap {
    justify-content: center;
    flex-wrap: nowrap;
    width: auto;
    margin-left: auto;
  }

  #accounts > div:first-of-type .flex.items-center.gap-3.flex-wrap > * {
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }

  #accounts table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  #accounts table th,
  #accounts table td {
    white-space: normal;
    word-break: break-word;
  }

  #accounts table th:nth-child(2),
  #accounts table td:nth-child(2) {
    display: none;
  }

  #accounts table td.table-cell-actions {
    padding-right: 0.75rem;
  }

  #accounts .accounts-add-investment-btn {
    display: none !important;
  }

  #accounts .overflow-x-auto {
    overflow-x: hidden;
    padding: 0 !important;
  }
  
  /* Form adjustments */
  .form-input, .form-select, .form-file-input {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
/* Modal adjustments */
  .modal-content {
    margin: 1rem;
    padding: 1.5rem;
    width: calc(100% - 2rem);
    max-width: 100% !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  /* Mobile scrollable products/materials sections - smaller max-height */
  .modal-content form .border.border-gray-200.rounded-lg.p-4.bg-gray-50 {
    max-height: 35vh !important;
  }

  /* Purchase modal mobile fields */
  #purchase-modal .modal-content .w-24,
  #purchase-modal .modal-content .relative,
  #purchase-modal .modal-content .form-input,
  #purchase-modal .modal-content .form-select,
  #purchase-modal .modal-content .form-file-input {
    width: 100% !important;
    min-width: 0;
  }

  /* Purchases section mobile layout */
  #purchases > div:first-of-type {
    flex-direction: column;
    align-items: stretch;
  }

  #purchases > div:first-of-type .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }

  #purchases > div:first-of-type .flex.items-center.gap-4 > * {
    width: 100%;
    flex: 1 1 auto;
  }

  #purchases #purchases-search {
    max-width: 100%;
  }

  #purchases button {
    width: 100%;
  }

  #purchases .purchase-export-btn {
    display: none !important;
  }

  /* Purchases table as mobile cards */
  #purchases table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #purchases thead {
    display: none;
  }

  #purchases tbody {
    display: flex;
    flex-direction: column;
  }

  #purchases tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #purchases td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #purchases td:nth-child(4),
  #purchases td:nth-child(5),
  #purchases th:nth-child(4),
  #purchases th:nth-child(5) {
    display: none !important;
  }

  #purchases td:last-child {
    border-bottom: 0;
  }

  #purchases td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #purchases td > * {
    flex: 1;
  }

  #purchases .purchase-export-btn {
    display: none !important;
  }

  #purchases td:nth-child(1)::before { content: "Date"; }
  #purchases td:nth-child(2)::before { content: "Supplier"; }
  #purchases td:nth-child(3)::before { content: "Material"; }
  #purchases td:nth-child(6)::before { content: "Amount"; }
  #purchases td:nth-child(7)::before { content: "Paid"; }
  #purchases td:nth-child(8)::before { content: "Balance"; }
  #purchases td:nth-child(9)::before { content: "Status"; }
  #purchases td:nth-child(10)::before { content: "Bill"; }
  #purchases td:nth-child(11)::before { content: "Actions"; }

  #purchases td:nth-child(1),
  #purchases td:nth-child(2),
  #purchases td:nth-child(3),
  #purchases td:nth-child(6),
  #purchases td:nth-child(7) {
    flex: 1 1 100%;
  }

  #purchases td:nth-child(8),
  #purchases td:nth-child(9),
  #purchases td:nth-child(10),
  #purchases td:nth-child(11) {
    flex: 0 1 calc(50% - 0.375rem);
  }

  #purchases td:nth-child(10) {
    margin-top: 0.75rem;
  }

  /* Inventory section mobile layout */
  #inventory > div:first-of-type {
    flex-direction: column;
    align-items: stretch;
  }

  #inventory > div:first-of-type .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }

  #inventory > div:first-of-type .flex.items-center.gap-4 > * {
    width: 100%;
    flex: 1 1 auto;
  }

  #inventory #inventory-search {
    max-width: 100%;
  }

  #inventory button {
    width: 100%;
  }

  #inventory table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #inventory thead {
    display: none;
  }

  #inventory tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #inventory td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #inventory td:last-child {
    border-bottom: 0;
  }

  #inventory td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #inventory td > * {
    flex: 1;
  }

  #inventory td:nth-child(1)::before { content: "Material"; }
  #inventory td:nth-child(2)::before { content: "Opening"; }
  #inventory td:nth-child(3)::before { content: "Current"; }
  #inventory td:nth-child(4)::before { content: "Avg Rate"; }
  #inventory td:nth-child(5)::before { content: "Total Value"; }
  #inventory td:nth-child(6)::before { content: "Lots"; }
  #inventory td:nth-child(7)::before { content: "Actions"; }

  #inventory td:nth-child(7) {
    flex-direction: column;
    align-items: flex-start;
  }

  #inventory td:nth-child(7) > * {
    width: 100%;
  }

  #inventory td:last-of-type button {
    width: auto;
  }

  /* Products (BOMs) section mobile layout */
  #products > div:first-of-type {
    flex-direction: column;
    align-items: stretch;
  }

  #products > div:first-of-type .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }

  #products > div:first-of-type .flex.items-center.gap-4 > * {
    width: 100%;
    flex: 1 1 auto;
  }

  #products #bom-search {
    max-width: 100%;
  }

  #products button {
    width: 100%;
  }

  #products table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #products thead {
    display: none;
  }

  #products tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #products td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #products td:last-child {
    border-bottom: 0;
  }

  #products td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #products td > * {
    flex: 1;
  }

  #products td:nth-child(1)::before { content: "Product"; }
  #products td:nth-child(2)::before { content: "Material"; }
  #products td:nth-child(3)::before { content: "Qty / Unit"; }
  #products td:nth-child(4)::before { content: "Material Rate"; }
  #products td:nth-child(5)::before { content: "Cost / Unit"; }
  #products td:nth-child(6)::before { content: "Actions"; }

  #products td:nth-child(6) {
    flex-direction: column;
    align-items: flex-start;
  }

  #products td:nth-child(6) > * {
    width: 100%;
  }

  #products td:last-of-type button {
    width: auto;
  }

  /* Sales section mobile layout */
  #sales > div:first-of-type {
    flex-direction: column;
    align-items: stretch;
  }

  #sales > div:first-of-type .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }

  #sales > div:first-of-type .flex.items-center.gap-4 > * {
    width: 100%;
    flex: 1 1 auto;
  }

  #sales #sales-search {
    max-width: 100%;
  }

  #sales button {
    width: 100%;
  }

  #sales table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #sales thead {
    display: none;
  }

  #sales tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #sales td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #sales td:last-child {
    border-bottom: 0;
  }

  #sales td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #sales td > * {
    flex: 1;
  }

  #sales td:nth-child(1)::before { content: "Date"; }
  #sales td:nth-child(2)::before { content: "Customer"; }
  #sales td:nth-child(3)::before { content: "Product"; }
  #sales td:nth-child(4)::before { content: "Quantity"; }
  #sales td:nth-child(5)::before { content: "Price"; }
  #sales td:nth-child(6)::before { content: "Amount"; }
  #sales td:nth-child(7)::before { content: "Received"; }
  #sales td:nth-child(8)::before { content: "Balance"; }
  #sales td:nth-child(9)::before { content: "Status"; }
  #sales td:nth-child(10)::before { content: "Actions"; }
  #sales td:nth-child(11)::before { content: "COGS"; }

  #sales td:nth-child(10) {
    flex-direction: column;
    align-items: flex-start;
  }

  #sales td:nth-child(10) > * {
    width: 100%;
  }

  #sales td:last-of-type button {
    width: auto;
  }

  /* Sales modal form fields on mobile */
  #sale-modal .modal-content .grid,
  #sale-modal .modal-content .grid.grid-cols-1\.md\:grid-cols-2\.gap-4 {
    grid-template-columns: 1fr !important;
  }

  #sale-modal .modal-content .form-input,
  #sale-modal .modal-content .form-select {
    width: 100% !important;
  }

  /* Balances section mobile layout */
  #balances h2 {
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }

  /* Hide Account Balances table on mobile */
  #balances > h2:first-of-type {
    display: none;
  }

  #balances > h2:first-of-type + div {
    display: none;
  }

  #balances table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #balances thead {
    display: none;
  }

  #balances tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #balances td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #balances td:last-child {
    border-bottom: 0;
  }

  #balances td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #balances td > * {
    flex: 1;
  }

  /* Balances table specific labels */
  #balances-table-body td:nth-child(1)::before { content: "Account"; }
  #balances-table-body td:nth-child(2)::before { content: "Balance"; }

  /* Receivables table specific labels */
  #receivables-table-body td:nth-child(1)::before { content: "Customer"; }
  #receivables-table-body td:nth-child(2)::before { content: "Outstanding"; }
  #receivables-table-body td:nth-child(3)::before { content: "Action"; }

  /* Payables table specific labels */
  #payables-table-body td:nth-child(1)::before { content: "Supplier"; }
  #payables-table-body td:nth-child(2)::before { content: "Outstanding"; }
  #payables-table-body td:nth-child(3)::before { content: "Action"; }

  /* Action buttons on mobile - show only icons */
  #balances-table-body button,
  #receivables-table-body button,
  #payables-table-body button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #f3f4f6;
    transition: all 0.2s ease;
    min-width: 2.5rem;
  }

  #balances-table-body button:hover,
  #receivables-table-body button:hover,
  #payables-table-body button:hover {
    background: #e5e7eb;
  }

  /* Hide button text on mobile */
  #balances-table-body button span,
  #receivables-table-body button span,
  #payables-table-body button span {
    display: none;
  }

  /* Show icons for buttons */
  #balances-table-body button i,
  #receivables-table-body button i,
  #payables-table-body button i {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Ensure action columns take appropriate space */
  #receivables-table-body td:nth-child(3),
  #payables-table-body td:nth-child(3) {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  /* Expenses section mobile layout */
  #expenses > div:first-of-type {
    flex-direction: column;
    align-items: stretch;
  }

  #expenses > div:first-of-type .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }

  #expenses > div:first-of-type .flex.items-center.gap-4 > * {
    width: 100%;
    flex: 1 1 auto;
  }

  #expenses #expenses-search {
    max-width: 100%;
  }

  #expenses button {
    width: 100%;
  }

  #expenses table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #expenses thead {
    display: none;
  }

  #expenses tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #expenses td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #expenses td:last-child {
    border-bottom: 0;
  }

  #expenses td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #expenses td > * {
    flex: 1;
  }

  #expenses td:nth-child(1)::before { content: "Date"; }
  #expenses td:nth-child(2)::before { content: "Category"; }
  #expenses td:nth-child(3)::before { content: "Amount"; }
  #expenses td:nth-child(4)::before { content: "Account"; }
  #expenses td:nth-child(5)::before { content: "Description"; }
  #expenses td:nth-child(6)::before { content: "Bill"; }
  #expenses td:nth-child(7)::before { content: "Actions"; }

  #expenses td:nth-child(6),
  #expenses td:nth-child(7) {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  #expenses td:nth-child(7) {
    flex-direction: column;
    align-items: flex-start;
  }

  #expenses td:nth-child(7) > * {
    width: 100%;
  }

  #expenses td:nth-child(7) .flex {
    width: 100%;
    gap: 0.5rem;
  }

  #expenses td:nth-child(7) button {
    width: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #expenses td:nth-child(7) button span {
    display: none;
  }

  #expenses td:nth-child(7) button i {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
  }

  #expenses .bg-gradient-to-r.from-green-500.to-emerald-600 {
    display: none !important;
  }

  /* Assets section mobile layout */
  #assets > div:nth-of-type(2) {
    flex-direction: column;
    align-items: stretch;
  }

  #assets > div:nth-of-type(2) .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }

  #assets > div:nth-of-type(2) .flex.items-center.gap-4 > * {
    width: 100%;
    flex: 1 1 auto;
  }

  #assets button {
    width: 100%;
  }

  #assets table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #assets thead {
    display: none;
  }

  #assets tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #assets td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #assets td:last-child {
    border-bottom: 0;
  }

  #assets td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #assets td > * {
    flex: 1;
  }

  #assets td:nth-child(1)::before { content: "Asset Name"; }
  #assets td:nth-child(2)::before { content: "Purchase Date"; }
  #assets td:nth-child(3)::before { content: "Purchase Price"; }
  #assets td:nth-child(4)::before { content: "Salvage Value"; }
  #assets td:nth-child(5)::before { content: "Useful Life"; }
  #assets td:nth-child(6)::before { content: "Depreciation"; }
  #assets td:nth-child(7)::before { content: "Book Value"; }
  #assets td:nth-child(8)::before { content: "Status"; }
  #assets td:nth-child(9)::before { content: "Bill"; }
  #assets td:nth-child(10)::before { content: "Actions"; }

  #assets td:nth-child(9),
  #assets td:nth-child(10) {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  #assets td:nth-child(10) {
    flex-direction: column;
    align-items: flex-start;
  }

  #assets td:nth-child(10) > * {
    width: 100%;
  }

  #assets td:nth-child(10) .flex {
    width: 100%;
    gap: 0.5rem;
  }

  #assets td:nth-child(10) button {
    width: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #assets td:nth-child(10) button span {
    display: none;
  }

  #assets td:nth-child(10) button i {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
  }

  #assets .bg-gradient-to-r.from-green-500.to-emerald-600 {
    display: none !important;
  }

  /* Users section mobile layout */
  #users > div:nth-of-type(2) {
    flex-direction: column;
    align-items: stretch;
  }

  #users > div:nth-of-type(2) .flex.items-center {
    flex-direction: column;
    align-items: stretch;
  }

  #users > div:nth-of-type(2) .flex.items-center > * {
    width: 100%;
    flex: 1 1 auto;
  }

  #users button {
    width: 100%;
  }

  #users table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #users thead {
    display: none;
  }

  #users tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #users td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #users td:last-child {
    border-bottom: 0;
  }

  #users td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #users td > * {
    flex: 1;
  }

  #users td:nth-child(1)::before { content: "Username"; }
  #users td:nth-child(2)::before { content: "Name"; }
  #users td:nth-child(3)::before { content: "Role"; }
  #users td:nth-child(4)::before { content: "Actions"; }

  #users td:nth-child(4) {
    flex-direction: column;
    align-items: flex-start;
  }

  #users td:nth-child(4) > * {
    width: 100%;
  }

  #users td:nth-child(4) .flex {
    width: 100%;
    gap: 0.5rem;
  }

  #users td:nth-child(4) button {
    width: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #users td:nth-child(4) button span {
    display: none;
  }

  #users td:nth-child(4) button i {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Roles section mobile layout */
  #roles > div:nth-of-type(2) {
    flex-direction: column;
    align-items: stretch;
  }

  #roles > div:nth-of-type(2) .flex.items-center {
    flex-direction: column;
    align-items: stretch;
  }

  #roles > div:nth-of-type(2) .flex.items-center > * {
    width: 100%;
    flex: 1 1 auto;
  }

  #roles button {
    width: 100%;
  }

  #roles table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #roles thead {
    display: none;
  }

  #roles tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #roles td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #roles td:last-child {
    border-bottom: 0;
  }

  #roles td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #roles td > * {
    flex: 1;
  }

  #roles td:nth-child(1)::before { content: "Role Name"; }
  #roles td:nth-child(2)::before { content: "Permissions"; }
  #roles td:nth-child(3)::before { content: "Actions"; }

  #roles td:nth-child(2) {
    flex-direction: column;
    align-items: flex-start;
  }

  #roles td:nth-child(3) {
    flex-direction: column;
    align-items: flex-start;
  }

  #roles td:nth-child(3) > * {
    width: 100%;
  }

  #roles td:nth-child(3) .flex {
    width: 100%;
    gap: 0.5rem;
  }

  #roles td:nth-child(3) button {
    width: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #roles td:nth-child(3) button span {
    display: none;
  }

  #roles td:nth-child(3) button i {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Master Directory section mobile layout */
  #master-directory .grid.grid-cols-1.lg\\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  #master-directory .bg-white.rounded-2xl.p-6 {
    padding: 1rem;
  }

  #master-directory .flex.items-center.justify-between.mb-4 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  #master-directory .flex.items-center.justify-between.mb-4 h2 {
    text-align: center;
    font-size: 1.125rem;
  }

  #master-directory button {
    width: 100%;
    padding: 0.75rem 1rem;
  }

  #master-directory table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }

  #master-directory thead {
    display: none;
  }

  #master-directory tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
  }

  #master-directory td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    font-size: 13px;
    border-bottom: 1px solid #eef2f7;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #master-directory td:last-child {
    border-bottom: 0;
  }

  #master-directory td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    width: 40%;
    flex: 0 0 40%;
    padding-right: 0.75rem;
    white-space: normal;
  }

  #master-directory td > * {
    flex: 1;
  }

  #master-directory td:nth-child(1)::before { content: "Name"; }
  #master-directory td:nth-child(2)::before { content: "Contact"; }
  #master-directory td:nth-child(3)::before { content: "Email"; }
  #master-directory td:nth-child(4)::before { content: "Address"; }
  #master-directory td:nth-child(5)::before { content: "Actions"; }

  /* Hide Email and Address columns on mobile */
  #master-directory td:nth-child(3),
  #master-directory td:nth-child(4) {
    display: none;
  }

  #master-directory td:nth-child(4) {
    flex-direction: column;
    align-items: flex-start;
  }

  #master-directory td:nth-child(5) {
    flex-direction: column;
    align-items: flex-start;
  }

  #master-directory td:nth-child(5) > * {
    width: 100%;
  }

  #master-directory td:nth-child(5) .flex {
    width: 100%;
    gap: 0.5rem;
  }

  #master-directory td:nth-child(5) button {
    width: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #master-directory td:nth-child(5) button span {
    display: none;
  }

  #master-directory td:nth-child(5) button i {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Stats cards */
  .grid-cols-1\.md\:grid-cols-2\.lg\:grid-cols-5 {
    grid-template-columns: 1fr;
  }
  
  /* Button adjustments */
  button {
    white-space: nowrap;
  }
  
  /* Search inputs */
  input[type="text"] {
    width: 100%;
    margin-bottom: 1rem;
  }
  
  /* Header actions */
  .flex.justify-between.items-center {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .flex.justify-between.items-center > div {
    width: 100%;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar-format {
    width: 200px;
  }
  
  main {
    margin-left: 200px !important;
  }
  
  .grid-cols-1\.md\:grid-cols-2\.lg\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop adjustments */
@media (min-width: 1025px) {
  .mobile-menu-toggle {
    display: none;
  }
}

/* Utility classes for mobile */
.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
}

/* Touch-friendly elements */
button, .form-input, .form-select {
  min-height: 44px; /* Minimum touch target size */
}

/* Improved scrolling on mobile */
.modal-content {
  -webkit-overflow-scrolling: touch;
}

/* Search results dropdown */
.search-results {
  max-height: 200px;
  overflow-y: auto;
}

/* Bill image modal on mobile */
#bill-image-modal .modal-content {
  padding: 1rem;
}

#bill-image {
  max-width: 100%;
  height: auto;
}

/* Table cell adjustments for mobile */
@media (max-width: 768px) {
  .table-cell-actions {
    min-width: auto;
  }
  
  td, th {
    padding: 0.5rem 0.25rem;
    font-size: 12px;
  }
}

/* Form layout improvements */
@media (max-width: 768px) {
  .space-y-4 > * {
    margin-bottom: 1rem;
  }
  
  .grid.grid-cols-1\.md\:grid-cols-2\.gap-4 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Dashboard charts */
@media (max-width: 768px) {
  canvas {
    max-width: 100%;
    height: auto;
  }
  
  /* Dashboard specific responsive adjustments - horizontal scrolling on tablets and small screens */
  #dashboard .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-3 {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 1rem !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent !important;
  }
  
  /* Webkit scrollbar styling for horizontal scrolling */
  #dashboard .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-3::-webkit-scrollbar {
    height: 6px !important;
  }
  
  #dashboard .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-3::-webkit-scrollbar-track {
    background: rgba(243, 244, 246, 0.5) !important;
    border-radius: 3px !important;
  }
  
  #dashboard .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-3::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5) !important;
    border-radius: 3px !important;
  }
  
  #dashboard .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-3::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.7) !important;
  }
  
  #dashboard .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-3 > div {
    flex: 0 0 280px !important;
    min-width: 280px !important;
  }
  
  /* Dashboard charts section */
  #dashboard .grid.grid-cols-1.lg\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Dashboard chart containers */
  #dashboard .relative.h-80 {
    height: 250px !important;
  }
  
  /* Dashboard stats cards */
  #dashboard .bg-white\\/80.backdrop-blur-sm.p-6.rounded-2xl {
    padding: 1rem !important;
  }
  
  /* Dashboard card text sizes */
  #dashboard .text-3xl.font-bold {
    font-size: 1.5rem !important;
  }
  
  #dashboard .text-sm.font-medium {
    font-size: 0.75rem !important;
  }
  
  #dashboard .text-xs {
    font-size: 0.625rem !important;
  }
  
  /* Dashboard icons */
  #dashboard .p-4.bg-gradient-to-r.rounded-2xl {
    padding: 0.75rem !important;
  }
  
  #dashboard .w-8.h-8 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  /* Dashboard header */
  #dashboard h1.text-3xl {
    font-size: 1.75rem !important;
  }
  
  #dashboard p.text-gray-600 {
    font-size: 0.875rem !important;
  }
  
  /* Dashboard chart filter buttons */
  #dashboard .flex.gap-3 button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Dashboard chart titles */
  #dashboard h2.text-2xl {
    font-size: 1.25rem !important;
  }
}

/* Extra small mobile devices (phones < 480px) */
@media (max-width: 480px) {
  /* Dashboard single column on very small screens */
  #dashboard .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Smaller chart height on very small screens */
  #dashboard .relative.h-80 {
    height: 200px !important;
  }
  
  /* Even smaller padding for stats cards */
  #dashboard .bg-white\\/80.backdrop-blur-sm.p-6.rounded-2xl {
    padding: 0.75rem !important;
  }
  
  /* Smaller text on very small screens */
  #dashboard .text-3xl.font-bold {
    font-size: 1.25rem !important;
  }
  
  /* Dashboard header adjustments */
  #dashboard h1.text-3xl {
    font-size: 1.5rem !important;
  }
  
  /* Chart filter buttons stack vertically on very small screens */
  #dashboard .flex.gap-3 {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  #dashboard .flex.gap-3 button {
    width: 100% !important;
  }
}

/* Login modal adjustments */
@media (max-width: 768px) {
  #login-modal .modal-content {
    margin: 2rem 1rem;
  }
}

/* Ensure proper viewport scaling */
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/* Prevent text size adjustment */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Improved button spacing */
@media (max-width: 768px) {
  .flex.gap-2 {
    gap: 0.5rem;
  }
  
  .flex.gap-4 {
    gap: 1rem;
  }
}

/* Modal header adjustments */
@media (max-width: 768px) {
  .modal-content .flex.justify-between.items-center {
    flex-direction: row;
    align-items: center;
  }
}

/* Inventory adjustment modal */
@media (max-width: 768px) {
  .modal-content {
    margin: 1rem;
    padding: 1.5rem;
    width: calc(100% - 2rem);
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* Hide Full Year Monthly Report on mobile */
@media (max-width: 768px) {
  #full-year-report {
    display: none;
  }
}

/* Mobile overlay for sidebar */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.mobile-overlay.active {
  display: block;
}

/* Close sidebar button */
.close-sidebar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

/* Responsive table improvements */
@media (max-width: 768px) {
  .responsive-table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  
  .responsive-table table {
    min-width: 600px;
  }
}

/* Form field spacing on mobile */
@media (max-width: 768px) {
  .form-field {
    margin-bottom: 1rem;
  }
}

/* Card adjustments for mobile */
@media (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
  }
}