/* Phone layout. The desktop dashboard and printed invoices keep their layouts. */
.bottom-nav,.sidebar-close,.mobile-company,.menu-backdrop { display:none; }

@media screen and (max-width:760px) {
  body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  body.menu-open { overflow:hidden; }
  .sidebar { width:min(310px,88vw); z-index:32; padding:64px 22px 24px; overflow-y:auto; overscroll-behavior:contain; }
  .sidebar:not(.show) { visibility:hidden; }
  .sidebar.show { visibility:visible; }
  .sidebar-close { display:grid; position:absolute; right:14px; top:12px; }
  .sidebar .workspace-name { margin:24px 0; }
  .workspace-name b { font-size:13px; white-space:normal; line-height:1.5; }
  .workspace-name small { font-size:11px; }
  .sidebar .nav-item { min-height:46px; font-size:14px; }
  .sidebar-bottom { padding-top:18px; }
  .menu-backdrop:not([hidden]) { display:block; position:fixed; inset:0; width:100%; height:100%; border:0; background:#143b376b; z-index:31; }
  .topbar { gap:8px; padding:0 14px; }
  .topbar .global-search { min-width:0; }
  .global-search input { font-size:16px; min-width:0; }
  .global-search input::placeholder { font-size:12px; }
  .global-search kbd { display:none; }
  .global-search input:focus { box-shadow:none; }
  .topbar .owner { width:28px; height:28px; }
  .mobile-company { display:flex; align-items:center; gap:7px; color:#577b69; font-size:12px; font-weight:600; line-height:1.5; margin:0 0 14px; }
  .mobile-company .icon { width:16px; height:16px; }
  .mobile-company span { overflow-wrap:anywhere; }
  .bottom-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; inset:auto 0 0; z-index:25; border-top:1px solid #dce8e1; background:#fff; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); }
  .bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:54px; padding:6px 2px; border:0; border-radius:9px; background:transparent; color:#76897e; font-size:10px; }
  .bottom-nav .icon { width:21px; height:21px; }
  .bottom-nav [aria-current=page] { background:#edf6f0; color:var(--green); font-weight:650; }
  .btn,.page-head .actions .btn,.form-footer .btn,.invoice-toolbar .btn { min-height:44px; font-size:13px; padding:11px 13px; }
  .icon-btn { width:44px; height:44px; flex-shrink:0; }
  .icon-btn .icon { width:20px; height:20px; }
  .text-button { min-height:44px; font-size:11px; }
  .page-head { flex-direction:column; align-items:stretch; gap:17px; }
  .page-head p { font-size:13px; max-width:none; line-height:1.7; }
  .page-head .actions { flex-direction:row; flex-wrap:wrap; gap:10px; }
  .page-head .actions:empty { display:none; }
  .page-head .actions .btn { flex:1; }
  .demo-banner,.live-banner { gap:12px; padding:5px 18px; font-size:10px; }
  .demo-banner button,.live-banner button { min-height:44px; font-size:11px; text-align:right; }
  .welcome { padding:22px; min-height:184px; }
  .welcome>div:first-child { z-index:1; }
  .welcome h2 { font-size:24px; }
  .welcome p { font-size:12px; max-width:215px; }
  .welcome-link { min-height:36px; font-size:12px; margin-top:10px; }
  .hero-art { position:absolute; right:-5px; top:20px; width:138px; height:170px; opacity:.3; }
  .metric { padding:18px 14px; }
  .metric-label { font-size:11px; color:#657b6e; min-height:26px; line-height:1.5; }
  .metric strong { font-size:clamp(20px,6vw,27px); overflow-wrap:anywhere; }
  .metric strong small { display:block; margin:5px 0 0; font-size:11px; }
  .metric-note { font-size:11px; color:#71867a; }
  .section-heading h2,.panel-title h2 { font-size:16px; }
  .section-heading { gap:8px; }
  .product-grid { grid-template-columns:1fr; }
  .product-card { padding:18px; gap:18px; }
  .product-visual { display:grid; width:44px; }
  .product-visual .bottle { width:39px; height:83px; }
  .product-top b { font-size:14px; white-space:normal; }
  .product-info>small { font-size:11px; color:#71867a; }
  .stock-value { font-size:26px; margin:10px 0; }
  .stock-value span { font-size:12px; margin-left:4px; }
  .stock-caption { font-size:11px; color:#71867a; }
  .panel-bottom { font-size:11px; align-items:flex-start; }
  .panel-bottom .icon { margin-top:2px; }
  .notice { font-size:12px; align-items:flex-start; }
  .notice .icon { margin-top:3px; }
  .tabs { gap:14px; }
  .tabs button { min-height:44px; font-size:12px; padding:10px 5px; }
  .table-scroll { overscroll-behavior-x:contain; }
  table.mobile-records,table.mobile-records tbody { display:block; width:100%; }
  .mobile-records thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .mobile-records tbody tr { display:block; padding:16px; border-bottom:1px solid var(--line); }
  .mobile-records tbody tr:last-child { border-bottom:0; }
  .mobile-records td,.deliveries-panel .mobile-records td { display:block; padding:9px 0 9px 43%; position:relative; min-height:34px; border:0; text-align:left; font-size:13px; overflow-wrap:anywhere; }
  .mobile-records td::before { content:attr(data-label); position:absolute; left:0; top:10px; max-width:39%; font-size:11px; color:#778c7e; line-height:1.5; }
  .mobile-records td:first-child { padding:0 0 13px; margin-bottom:4px; }
  .mobile-records td:first-child::before { display:none; }
  .mobile-records td[data-label=""] { padding:10px 0 0; min-height:0; }
  .mobile-records td[data-label=""] .btn { min-height:44px; }
  .mobile-records td b,.customer-cell b { font-size:13px; }
  .mobile-records td small { font-size:11px; color:#71867a; }
  .mobile-records td .actions { flex-wrap:wrap; }
  .mobile-records td[data-label=""]>.icon-btn { width:100%; border:1px solid #dfe8e2; background:#f8fbf9; }
  .mobile-records td[data-label=""]>.icon-btn::before { content:"View delivery"; font-size:12px; }
  .mobile-records td[data-label=""]>.icon-btn { display:flex; justify-content:center; gap:8px; }
  .customer-cell { min-width:0; }
  .deliveries-panel .customer-icon { display:grid; height:34px; width:34px; }
  .badge { font-size:11px; padding:6px 9px; }
  .activity-item b { font-size:12px; }
  .activity-item small { font-size:11px; line-height:1.6; }
  .activity-item time { font-size:10px; }
  .activity-item>div { min-width:0; overflow-wrap:anywhere; }
  .reorder-card p,.customer-card p,.backup-panel p { font-size:13px; }
  .customer-card>small,.customer-stats small { font-size:11px; }
  .reorder-card>small,.backup-panel small { font-size:11px; line-height:1.7; }
  .empty p,.setup-note ol { font-size:12px; }
  dialog,dialog.wide { width:calc(100vw - 16px); max-height:calc(100dvh - 24px); margin:auto; }
  .dialog-head { padding:18px 16px; gap:10px; }
  .dialog-head h2 { font-size:20px; }
  .dialog-head p { font-size:12px; }
  .form-content { padding:18px 16px; }
  .form-grid { grid-template-columns:minmax(0,1fr); }
  .field { font-size:12px; gap:8px; min-width:0; }
  .field.full { grid-column:auto; }
  input:not([type=checkbox]),select,textarea,.line-row input,.line-row select { min-height:46px; font-size:16px; padding:11px; }
  input::placeholder,textarea::placeholder { font-size:13px; }
  .line-row { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:17px 14px; background:#f7faf8; border:1px solid #e2ece5; border-radius:9px; }
  .line-row label:first-child { grid-column:1/-1; }
  .line-row label:first-child>span { padding-right:40px; margin-bottom:14px; }
  .line-row label>span { font-size:12px; }
  .line-row .remove-line { position:absolute; top:1px; right:5px; margin:0; }
  .draft-total { font-size:12px; gap:12px; }
  .draft-total b { text-align:right; }
  .form-footer { flex-wrap:wrap; gap:10px; }
  .form-footer .btn { flex:1; white-space:normal; }
  .form-note,.tax-confirm p { font-size:12px; }
  .tax-confirm label,.checkbox-label { font-size:13px; align-items:flex-start; }
  input[type=checkbox] { min-width:20px; height:20px; }
  .detail-address { grid-template-columns:1fr; gap:20px; }
  .detail-address b { font-size:14px; }
  .detail-address p { font-size:13px; }
  .detail-address small { font-size:10px; }
  .detail-status { font-size:12px; gap:12px; }
  .delivery-timeline { font-size:10px; gap:5px; padding:12px 8px; }
  .invoice-toolbar { gap:10px; }
  .invoice-toolbar .btn { flex:1; white-space:normal; }
  .invoice-paper { padding:18px 12px; }
  .invoice-paper .table-scroll { overflow-x:auto; }
  .invoice-items { min-width:420px; }
  .invoice-title { white-space:normal; text-align:right; }
  .invoice-heading>div { min-width:0; overflow-wrap:anywhere; }
  .invoice-heading h2 { line-height:1.4; }
  .invoice-parties p,.invoice-foot p { overflow-wrap:anywhere; }
  #toast { bottom:calc(84px + env(safe-area-inset-bottom)); font-size:13px; width:max-content; max-width:calc(100vw - 28px); }
  footer { font-size:10px; }
}

@media (prefers-reduced-motion:reduce) {
  .sidebar { transition:none; }
}