/* Cross-device usability pass: clear hierarchy, comfortable touch targets, and resilient dense data screens. */
:root { --tap: 42px; --panel-shadow: 0 10px 30px rgba(24, 61, 54, .06); }

html { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font-size: 16px; }
button, .page-primary, .page-secondary, .add-item, .purchase-tabs a { min-height: var(--tap); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #79bbae; outline-offset: 2px; }

.workspace { max-width: 1540px; width: auto; }
.feature-card, .form-card, .summary-card { box-shadow: var(--panel-shadow); }
.feature-card { border-radius: 14px; }
.title-row { gap: 16px; }
.title-row > div:first-child { min-width: 0; }
.subtitle { line-height: 1.55; }
.page-actions { align-items: center; flex-wrap: wrap; }
.page-primary, .page-secondary { align-items: center; display: inline-flex; justify-content: center; white-space: nowrap; }
.page-secondary { min-height: var(--tap); }

.topbar { position: sticky; top: 0; z-index: 12; box-shadow: 0 1px 0 rgba(28, 60, 54, .06); }
.online-status { border-radius: 999px; font-weight: 700; padding: 7px 10px; }
.help-button, .icon-button, .mobile-menu { align-items: center; justify-content: center; min-height: 40px; min-width: 40px; }

.sidebar { overflow-y: auto; }
.sidebar nav { padding-bottom: 12px; }
.nav-item { min-height: 44px; }
.nav-item span { flex: 0 0 20px; }

.feature-card-head { align-items: center; gap: 12px; }
.feature-card-head > * { min-width: 0; }
.feature-card-head input { max-width: 280px; }
.data-row { border-radius: 12px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.data-row:hover { border-color: #b8d7d0; box-shadow: 0 7px 20px rgba(19, 83, 73, .07); transform: translateY(-1px); }

.items-table-wrap { border: 1px solid #edf1ef; border-radius: 12px; overscroll-behavior-inline: contain; position: relative; }
.items-table-wrap::after { color: #6e817c; content: 'Swipe to see more  →'; display: none; font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 8px 10px; text-align: right; }
.items-table-wrap table { margin: 0; }
.ledger-table thead th { background: #f6faf8; position: sticky; top: 0; z-index: 1; }
.ledger-table tbody tr { box-shadow: none; }
.ledger-table tbody tr:hover { transform: none; }

.report-stats, .invoice-dashboard-grid { gap: 14px; }
.report-stat, .dashboard-card { min-height: 132px; padding: 18px; }
.report-stat strong, .dashboard-card strong { font-variant-numeric: tabular-nums; }
.ledger-summary { overflow: hidden; }
.ledger-summary div { min-height: 78px; }
.purchase-tabs { scrollbar-width: thin; scroll-snap-type: x proximity; }
.purchase-tabs a { align-items: center; display: inline-flex; scroll-snap-align: start; }

.invoice-modal { align-items: center; }
.invoice-modal-content { box-shadow: 0 24px 70px rgba(8, 35, 30, .35); }
.modal-close { align-items: center; display: flex; justify-content: center; min-height: 38px; min-width: 38px; }
.modal-invoice-actions { gap: 10px; }
.modal-invoice-actions button { min-height: 44px; }

/* Invoice item entry stays visually light and lets product matches float above the row. */
.invoice-items-table-wrap { border: 0; border-radius: 0; overflow: visible; }
.invoice-items-table-wrap::after { display: none; }
.invoice-items-table-wrap table { min-width: 0; }

/* Keep the fast invoice path short; less-frequent fields expand only when needed. */
.invoice-optional { overflow: hidden; padding: 0; }
.invoice-optional summary { align-items: center; cursor: pointer; display: flex; gap: 13px; list-style: none; padding: 16px 20px; }
.invoice-optional summary::-webkit-details-marker { display: none; }
.invoice-optional summary > span:nth-child(2) { display: grid; gap: 3px; }
.invoice-optional summary strong { color: #173f37; font-size: 15px; }
.invoice-optional summary small { color: #6f817c; font-size: 12px; }
.invoice-optional summary b { background: #f2f7f5; border-radius: 999px; color: #66807a; font-size: 10px; letter-spacing: .4px; margin-left: auto; padding: 5px 8px; text-transform: uppercase; }
.invoice-optional summary::after { color: #0e665b; content: '+'; font-size: 22px; font-weight: 400; line-height: 1; margin-left: 3px; }
.invoice-optional[open] summary { border-bottom: 1px solid #e3ece8; }
.invoice-optional[open] summary::after { content: '−'; }
.invoice-optional[open] summary b { display: none; }
.invoice-optional textarea { box-sizing: border-box; margin: 16px 20px 20px; max-width: calc(100% - 40px); min-height: 72px; width: calc(100% - 40px); }
.invoice-optional .payment-input-row { padding: 16px 20px 20px; }

@media (min-width: 901px) {
  /* The sidebar is fixed, so reserve its space in the main flow once. */
  .app-shell > main { margin-left: 246px; min-width: 0; width: calc(100% - 246px); }
  .topbar, .workspace { margin-left: 0; }
  button, input, select, textarea { font-size: 13px; }
  .workspace { padding-bottom: 88px; }
  .feature-card-head { flex-wrap: wrap; }
  .feature-card-head .page-actions { margin-left: auto; }
}

@media (max-width: 900px) {
  .workspace { padding: 22px 16px 86px; }
  .topbar { height: 64px; }
  .title-row { align-items: flex-start; margin-bottom: 20px; }
  .title-row h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.1; }
  .page-actions { width: 100%; }
  .page-actions > button { flex: 1 1 150px; }
  .feature-card-head { align-items: stretch; flex-wrap: wrap; }
  .feature-card-head .page-actions, .feature-card-head input { max-width: none; width: 100%; }
  .feature-card-head .page-actions { margin-left: 0; }
  .items-table-wrap { margin-inline: -2px; }
  .invoice-items-table-wrap { overflow-x: auto; overflow-y: visible; }
  .items-table-wrap::after { display: block; }
  .report-stats, .invoice-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-stat, .dashboard-card { min-height: 116px; padding: 15px; }
  .summary-actions { bottom: 12px; margin: 12px 0 0; position: sticky; z-index: 5; }
  .summary-actions button { min-height: 48px; }
  .purchase-form-actions { bottom: 10px; }
}

/* Inclusive retail rates already contain GST, so keep the line-item view compact. */
.gst-included-pricing .invoice-items-table-wrap th:nth-child(4),
.gst-included-pricing .invoice-items-table-wrap td:nth-child(4),
.detail-items.gst-included-items th:nth-child(4),
.detail-items.gst-included-items td:nth-child(4) { display: none; }

.summary-actions.has-saved-invoice { grid-template-columns: 1fr 1fr 1.35fr; }
@media (max-width: 560px) { .summary-actions.has-saved-invoice { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .app-shell, main, .workspace, .page, .content-grid, .feature-grid, .settings-grid { min-width: 0; max-width: 100%; }
  .topbar { padding: 0 10px; }
  .breadcrumb i, .breadcrumb span { display: none; }
  .breadcrumb strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .online-status { font-size: 10px; padding: 6px 8px; }
  .install-button { padding-inline: 9px; }
  .title-row { gap: 12px; }
  .title-row h1 { font-size: 29px; }
  .subtitle { font-size: 13px; max-width: none; }
  .form-card, .summary-card, .feature-card { border-radius: 12px; padding: 18px 15px; }
  .section-heading { align-items: flex-start; }
  .section-heading .text-button { min-height: 36px; padding: 5px; }
  .report-stats, .invoice-dashboard-grid { grid-template-columns: 1fr; }
  .report-stat, .dashboard-card { min-height: 102px; }
  .ledger-summary { grid-template-columns: 1fr; }
  .ledger-summary div + div { border-left: 0; border-top: 1px solid var(--line); }
  .page-actions > button { flex-basis: 100%; }
  .page-actions > .page-secondary { flex-basis: calc(50% - 4px); }
  .purchase-tabs { margin-inline: -2px; padding-inline: 2px; }
  .purchase-tabs a { font-size: 12px; min-height: 40px; padding: 8px 12px; }
  .invoice-modal { align-items: end; padding: 0; }
  .invoice-modal-content { border-radius: 20px 20px 0 0; max-height: 88vh; padding: 28px 16px 20px; width: 100%; }
  .invoice-modal-content::before { background: #dce7e3; border-radius: 999px; content: ''; display: block; height: 4px; left: 50%; position: absolute; top: 10px; transform: translateX(-50%); width: 44px; }
  .modal-form .page-primary { min-height: 48px; position: sticky; bottom: -8px; width: 100%; }
  .modal-invoice-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .modal-invoice-actions button { padding-inline: 8px; }
  .invoice-optional summary { padding: 15px; }
  .invoice-optional textarea { margin: 14px 15px 16px; max-width: calc(100% - 30px); width: calc(100% - 30px); }
  .invoice-optional .payment-input-row { padding: 14px 15px 16px; }
  .data-row { padding: 14px; }

  /* Summary and record grids become cards; no page-wide sideways scrolling. */
  .items-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .items-table-wrap > .ledger-table { display: block; min-width: 0 !important; width: 100%; }
  .items-table-wrap > .ledger-table thead { display: none; }
  .items-table-wrap > .ledger-table tbody { display: grid; gap: 10px; }
  .items-table-wrap > .ledger-table tbody tr { background: #fff; border: 1px solid #e3ece8; border-radius: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
  .items-table-wrap > .ledger-table td { align-items: center; border: 0 !important; display: flex; font-size: 12px; gap: 10px; justify-content: space-between; min-width: 0; padding: 9px 12px; text-align: right; }
  .items-table-wrap > .ledger-table td::before { color: #71817c; content: ''; flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .55px; text-align: left; text-transform: uppercase; }
  .items-table-wrap > .ledger-table td > * { min-width: 0; }
  .items-table-wrap > .ledger-table td[colspan] { grid-column: 1 / -1; justify-content: center; text-align: center; }
  .items-table-wrap > .ledger-table td[colspan]::before { display: none; }
  .invoice-ledger-card .ledger-table td:nth-child(1), .receipt-ledger .ledger-table td:nth-child(1), #inventoryPage .ledger-table td:nth-child(1), #purchaseHistoryPage .ledger-table td:nth-child(1), #suppliersPage .ledger-table td:nth-child(1) { grid-column: 1 / -1; }
  .invoice-ledger-card .ledger-table td:nth-child(1)::before { content: 'Invoice'; }
  .invoice-ledger-card .ledger-table td:nth-child(2)::before { content: 'Customer'; }
  .invoice-ledger-card .ledger-table td:nth-child(3)::before { content: 'Date'; }
  .invoice-ledger-card .ledger-table td:nth-child(4)::before { content: 'Due date'; }
  .invoice-ledger-card .ledger-table td:nth-child(5)::before { content: 'Status'; }
  .invoice-ledger-card .ledger-table td:nth-child(6)::before { content: 'Total'; }
  .invoice-ledger-card .ledger-table td:nth-child(7)::before { content: 'Received'; }
  .invoice-ledger-card .ledger-table td:nth-child(8)::before { content: 'Outstanding'; }
  .invoice-ledger-card .ledger-table td:nth-child(9) { grid-column: 1 / -1; }
  .invoice-ledger-card .ledger-table td:nth-child(9)::before { content: 'Actions'; }
  .receipt-ledger .ledger-table td:nth-child(1)::before { content: 'Receipt'; }
  .receipt-ledger .ledger-table td:nth-child(2)::before { content: 'Date'; }
  .receipt-ledger .ledger-table td:nth-child(3)::before { content: 'Customer'; }
  .receipt-ledger .ledger-table td:nth-child(4)::before { content: 'Invoice'; }
  .receipt-ledger .ledger-table td:nth-child(5)::before { content: 'Method'; }
  .receipt-ledger .ledger-table td:nth-child(6)::before { content: 'Reference'; }
  .receipt-ledger .ledger-table td:nth-child(7)::before { content: 'Amount'; }
  .receipt-ledger .ledger-table td:nth-child(8) { grid-column: 1 / -1; }
  .receipt-ledger .ledger-table td:nth-child(8)::before { content: 'Actions'; }
  #inventoryPage .ledger-table td:nth-child(1)::before { content: 'Product'; }
  #inventoryPage .ledger-table td:nth-child(2)::before { content: 'SKU'; }
  #inventoryPage .ledger-table td:nth-child(3)::before { content: 'In stock'; }
  #inventoryPage .ledger-table td:nth-child(4)::before { content: 'Reorder level'; }
  #inventoryPage .ledger-table td:nth-child(5)::before { content: 'Status'; }
  #inventoryPage .ledger-table td:nth-child(6) { grid-column: 1 / -1; }
  #inventoryPage .ledger-table td:nth-child(6)::before { content: 'Actions'; }
  #purchaseHistoryPage .ledger-table td:nth-child(1)::before { content: 'Date'; }
  #purchaseHistoryPage .ledger-table td:nth-child(2)::before { content: 'Supplier'; }
  #purchaseHistoryPage .ledger-table td:nth-child(3)::before { content: 'Invoice'; }
  #purchaseHistoryPage .ledger-table td:nth-child(4)::before { content: 'Items'; }
  #purchaseHistoryPage .ledger-table td:nth-child(5)::before { content: 'Taxable'; }
  #purchaseHistoryPage .ledger-table td:nth-child(6)::before { content: 'GST'; }
  #purchaseHistoryPage .ledger-table td:nth-child(7)::before { content: 'Total'; }
  #purchaseHistoryPage .ledger-table td:nth-child(8)::before { content: 'Paid'; }
  #purchaseHistoryPage .ledger-table td:nth-child(9)::before { content: 'Outstanding'; }
  #purchaseHistoryPage .ledger-table td:nth-child(10) { grid-column: 1 / -1; }
  #purchaseHistoryPage .ledger-table td:nth-child(10)::before { content: 'Status'; }
  #suppliersPage .supplier-table td:nth-child(1)::before { content: 'Supplier'; }
  #suppliersPage .supplier-table td:nth-child(2)::before { content: 'GSTIN'; }
  #suppliersPage .supplier-table td:nth-child(3)::before { content: 'Contact'; }
  #suppliersPage .supplier-table td:nth-child(4)::before { content: 'Outstanding'; }
  #suppliersPage .supplier-table td:nth-child(5)::before { content: 'Purchases'; }
  #suppliersPage .supplier-table td:nth-child(6) { grid-column: 1 / -1; }
  #suppliersPage .supplier-table td:nth-child(6)::before { content: 'Actions'; }
}

@media (max-width: 420px) {
  .top-actions .online-status, .top-actions .icon-button { display: none; }
  .top-actions { gap: 2px; }
  .breadcrumb { max-width: calc(100vw - 118px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Keep invoice setup balanced after adding the retail GST pricing choice. */
@media (min-width: 901px) {
  .details-card .field-grid.three { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .details-card .field-grid.three > label:nth-child(-n + 3) { grid-column: span 2; }
  .details-card .field-grid.three > label:nth-child(4) { grid-column: span 2; }
  .details-card .field-grid.three > .pricing-mode-field { background: #f5faf8; border: 1px solid #dcebe5; border-radius: 10px; gap: 5px; grid-column: span 2; padding: 9px 11px; }
  .details-card .field-grid.three > .invoice-gst-default-field { background: #f5faf8; border: 1px solid #dcebe5; border-radius: 10px; gap: 5px; grid-column: span 2; padding: 9px 11px; }
  .details-card .pricing-mode-field select { background: #fff; }
  .details-card .pricing-mode-field small, .details-card .invoice-gst-default-field small { color: #55736b; font-size: 11px; font-weight: 500; line-height: 1.35; }
}

@media (max-width: 900px) {
  .details-card .pricing-mode-field, .details-card .invoice-gst-default-field { background: #f5faf8; border: 1px solid #dcebe5; border-radius: 10px; padding: 10px; }
  .details-card .pricing-mode-field small, .details-card .invoice-gst-default-field small { color: #55736b; font-size: 11px; font-weight: 500; line-height: 1.35; }
}