/* MyInvoice ERP - Universal Mobile UX Layer */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
img, video, iframe { max-width:100%; }
button, input, select, textarea { max-width:100%; }

.mobile-menu-btn { display:none; }
.mobile-overlay { display:none; }

@media (max-width: 900px) {
  :root { --mobile-pad: 14px; --mobile-sidebar: min(300px, 86vw); }

  body { min-width:0 !important; overflow-x:hidden !important; }
  .main, .main-content, .content, .content-area, main { width:100% !important; max-width:100% !important; margin-left:0 !important; }
  .content, .main-content, .content-area { padding:var(--mobile-pad) !important; }

  /* Off-canvas sidebar: works for both Admin and Staff panels */
  .sidebar {
    position:fixed !important;
    z-index:10050 !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:var(--mobile-sidebar) !important;
    max-width:var(--mobile-sidebar) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform:translateX(-105%) !important;
    transition:transform .25s ease !important;
    box-shadow:12px 0 35px rgba(0,0,0,.20) !important;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar.open { transform:translateX(0) !important; }

  .mobile-menu-btn {
    display:flex !important;
    position:fixed !important;
    z-index:10060 !important;
    left:10px !important;
    top:10px !important;
    width:44px !important;
    height:44px !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:12px !important;
    background:#0ea5e9 !important;
    color:#fff !important;
    box-shadow:0 6px 18px rgba(14,165,233,.30) !important;
    font-size:22px !important;
    cursor:pointer !important;
    padding:0 !important;
  }
  .mobile-overlay {
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:10040 !important;
    background:rgba(2,8,23,.52) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transition:.2s ease !important;
  }
  .mobile-overlay.show { opacity:1 !important; visibility:visible !important; }
  body.mobile-menu-open { overflow:hidden !important; }

  /* Keep topbars usable with menu button */
  .topbar, .navbar, .header, .top-header {
    width:100% !important;
    max-width:100% !important;
    min-height:64px !important;
    height:auto !important;
    padding:10px 12px 10px 64px !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
  .search { width:min(100%, 280px) !important; max-width:100% !important; }
  .profile, .admin { margin-left:auto; }

  /* Page headers / toolbars */
  .page-header, .heading, .header, .toolbar, .action-bar, .filter-form, .filters, .actions, .buttons {
    width:100% !important;
    max-width:100% !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }
  .page-header > *, .heading > * { max-width:100%; }
  h1 { font-size:clamp(21px, 6vw, 28px) !important; line-height:1.2 !important; }
  h2 { font-size:clamp(18px, 5vw, 24px) !important; }
  h3 { font-size:clamp(16px, 4.5vw, 20px) !important; }

  /* Cards */
  .cards, .card-grid, .stats-grid, .dashboard-cards, .summary, .section-grid, .grid, .quick-actions {
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .card, .panel, .table-card, .box, .customer-box, .filter, .filter-card, .summary-card {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Forms */
  .form-grid, .form-row, .row, .fields, .form-columns {
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    gap:12px !important;
  }
  .field, .field.full, .form-group, .form-field, .input-group, .form-control-wrap {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-column:auto !important;
  }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    width:100% !important;
    min-height:44px !important;
    font-size:16px !important;
  }
  textarea { min-height:100px !important; }
  input[type="checkbox"], input[type="radio"] { width:auto !important; min-height:auto !important; }
  button, .btn, .btn-primary, .btn-success, .btn-save, .create-btn, .add-btn {
    min-height:44px !important;
    touch-action:manipulation;
  }

  /* Tables: scroll inside their card, never the whole page */
  .table-responsive, .customer-list-scroll, .sales-list-scroll, .invoice-list-scroll, .order-list-scroll, .table-wrap, .table-container {
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:thin;
  }
  table { width:100%; max-width:none; min-width:680px; }
  th, td { white-space:nowrap; }

  /* Common invoice/product item tables */
  .items-table, .invoice-items, .product-table, .data-table, .sales-table, .invoice-table { min-width:760px !important; }

  /* Modals */
  .modal { padding:10px !important; }
  .modal-content, .modal-dialog, .modal-box {
    width:100% !important;
    max-width:520px !important;
    max-height:92dvh !important;
    margin:auto !important;
    overflow-y:auto !important;
  }

  /* Action buttons don't become tiny */
  .actions > *, .buttons > *, .button-group > *, .btn-group > * { flex:1 1 140px; }

  /* Dashboard charts */
  canvas { max-width:100% !important; height:auto !important; }

  /* Invoice view/print remains readable */
  .invoice-container, .invoice-wrapper, .invoice-paper {
    width:100% !important;
    max-width:100% !important;
  }
  .invoice-paper { overflow-x:auto !important; }

  /* Fixed desktop widths commonly used in ERP pages */
  [style*="width: 1000px"], [style*="width:1000px"],
  [style*="width: 900px"], [style*="width:900px"],
  [style*="min-width: 900px"], [style*="min-width:900px"] {
    max-width:100% !important;
  }
}

@media (max-width:600px) {
  .content, .main-content, .content-area { padding:10px !important; }
  .topbar, .navbar, .header, .top-header { padding-left:62px !important; }
  .mobile-menu-btn { width:42px !important; height:42px !important; }
  .page-header, .heading { margin-bottom:14px !important; }
  .card, .panel, .table-card, .box, .filter, .summary-card { padding:14px !important; border-radius:12px !important; }
  .card h2, .card h3 { font-size:21px !important; }
  .quick-actions { grid-template-columns:1fr !important; }
  .actions > *, .buttons > *, .button-group > *, .btn-group > * { flex:1 1 100%; width:100%; }
  .btn, button { width:auto; max-width:100%; }
}

@media (max-width:380px) {
  .content, .main-content, .content-area { padding:8px !important; }
  .topbar, .navbar, .header, .top-header { padding-left:58px !important; padding-right:8px !important; }
  .mobile-menu-btn { left:7px !important; top:7px !important; width:40px !important; height:40px !important; }
  .card, .panel, .table-card, .box, .filter, .summary-card { padding:11px !important; }
  .search { width:100% !important; }
}

@media (min-width:901px) {
  .mobile-menu-btn, .mobile-overlay { display:none !important; }
}