/* Mobile density: keep the work visible, without shrinking touch targets.
   Scoped to the authenticated app; desktop and public pages stay unchanged. */
@media (max-width: 600px) {
    .app-layout .page { width: auto; padding: 16px 12px 32px; }
    .app-layout .topbar { position: sticky; top: 0; z-index: 40; min-height: 58px; padding: 7px 12px; background: var(--sidebar-bg, var(--panel)); }
    .app-layout .topbar .button { min-height: 44px; }
    .app-layout .sidebar { width: min(300px, 88vw); padding: 16px; }
    .app-layout .sidebar-brand { margin-bottom: 16px; }
    .app-layout .sidebar-brand strong { font-size: 20px; }
    .app-layout .sidebar-nav { gap: 3px; }
    .app-layout .sidebar-nav a { min-height: 44px; padding: 10px 14px; }
    .app-layout .sidebar-close { margin-bottom: 12px; }
    .app-layout .sidebar-watermark { padding-top: 18px; }
    .app-layout h1, .app-layout .os-hero h1, .app-layout .stock-header h1,
    .app-layout .warranty-header h1, .app-layout .os-detail-hero h1 { font-size: 25px; line-height: 1.2; }
    .app-layout h2 { font-size: 19px; }
    .app-layout .content-card { padding: 14px; }
    .app-layout .os-page, .app-layout .dashboard-page, .app-layout .stock-page { gap: 12px; }
    .app-layout .hero { gap: 12px; margin-bottom: 16px; }
    .app-layout .empty-state { padding: 24px 8px; }
    .app-layout .form-stack, .app-layout .form-grid { gap: 14px; }
    .app-layout .form-actions { gap: 8px; padding-top: 14px; }
    .app-layout input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    .app-layout textarea, .app-layout select, .app-layout .select-trigger { font-size: 16px; }
    .app-layout .button, .app-layout .select-options button { min-height: 44px; }

    /* Summaries should not occupy the entire first screen. */
    .app-layout .os-summary-grid, .app-layout .dashboard-metrics,
    .app-layout .pcs-summary, .app-layout .sales-summary,
    .app-layout .finance-summary, .app-layout .finance-summary.money-summary,
    .app-layout .finance-summary.compact, .app-layout .stock-intel-grid,
    .app-layout .warranty-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .app-layout .sales-origin-grid, .app-layout .committed-origin-grid,
    .app-layout .finance-insight-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .app-layout .os-summary-card, .app-layout .dashboard-metric,
    .app-layout .pcs-summary article, .app-layout .sales-stat,
    .app-layout .finance-stat, .app-layout .stock-intel-grid>div,
    .app-layout .warranty-stat { min-height: 72px; padding: 12px; gap: 5px; }
    .app-layout .os-summary-card strong, .app-layout .dashboard-metric strong,
    .app-layout .pcs-summary strong, .app-layout .sales-stat strong,
    .app-layout .finance-stat strong, .app-layout .warranty-stat strong { font-size: clamp(18px,5.3vw,23px); overflow-wrap: anywhere; }
    .app-layout .os-summary-card span, .app-layout .pcs-summary span { font-size: 11px; }
    .app-layout .clients-summary-grid { margin-bottom: 12px; }
    .app-layout .client-stat { min-height: 72px; padding: 10px 8px; }
    .app-layout .stock-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .app-layout .dashboard-header { gap: 12px; }
    .app-layout .dashboard-quick-actions { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; padding-bottom: 4px; }
    .app-layout .dashboard-quick-actions a { min-height: 44px; white-space: nowrap; }
    .app-layout .stock-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 10px; }
    .app-layout .stock-form-grid label:has([name=modelo]) { grid-column: 1/-1; }

    /* Order search and status filters stay close to the actual list. */
    .app-layout .os-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; }
    .app-layout .os-hero h1 { font-size: 23px; }
    .app-layout .os-hero p { font-size: 12px; }
    .app-layout .nova-os-btn { min-width: 0; width: auto; min-height: 44px; padding: 10px 12px; font-size: 12px; }
    .app-layout .os-search-card { padding: 10px; }
    .app-layout .busca-os { flex-direction: row; gap: 8px; }
    .app-layout .search-wrapper { min-width: 0; width: auto; }
    .app-layout .search-wrapper input { height: 44px; padding-left: 32px; }
    .app-layout .search-wrapper>span[aria-hidden] { left: 10px; }
    .app-layout .busca-os .button { width: auto; min-width: 64px; height: 44px; padding: 8px 10px; }
    .app-layout .os-group-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .app-layout .os-group-filters a { min-height: 44px; padding: 8px 10px; gap: 6px; font-size: 12px; }
    .app-layout .os-group-filters span { width: 24px; height: 24px; flex-shrink: 0; }
    .app-layout .os-main-statuses { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scroll-padding-inline: 4px; }
    .app-layout .os-main-statuses a { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; }
    .app-layout .os-main-statuses a span { overflow: visible; }
    .app-layout .os-list-head { margin-bottom: 12px; }
    .app-layout .os-list-head h2 { font-size: 18px; }
    .app-layout .os-order-card { grid-template-columns: minmax(0,1fr) auto; padding: 12px; gap: 8px 10px; }
    .app-layout .os-order-main, .app-layout .os-equipment { grid-column: 1/-1; min-height: 32px; }
    .app-layout .os-order-main strong { white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
    .app-layout .os-order-cell { font-size: 11px; }
    .app-layout .os-order-actions { grid-column: 1/-1; }
    .app-layout .whatsapp-button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; }

    /* Modal space belongs to the form, not to oversized margins. */
    .app-layout .animus-modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 16px; border-radius: 14px; }
    .app-layout .animus-modal .form-actions { bottom: -16px; padding: 12px 0; }
    .app-layout .modal-content>h2, .app-layout .nova-os-modal-top h1 { font-size: 25px; }
    .app-layout .nova-os-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 10px; }
    .app-layout .nova-os-customer, .app-layout .nova-os-grid .form-field:has([name=origem_contato]) { grid-column: 1/-1; }
    .app-layout .nova-os-modal-form .os-quick-fill { gap: 6px; }
    .app-layout .nova-os-modal-form .os-quick-fill button { min-height: 44px; padding: 8px 12px; }
    .app-layout .dashboard-metric strong { white-space: normal; }
    .app-layout .os-main-statuses { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
    .app-layout .os-section { padding: 14px; }
    .app-layout .os-detail-hero { min-height: 0; padding: 16px; gap: 12px; }
    .app-layout .os-hero-side { min-width: 0; padding: 10px 12px; }
    .app-layout .os-money-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .app-layout .os-money-grid.compact strong { font-size: 16px; overflow-wrap: anywhere; }
    .app-layout .os-save-bar { bottom: max(8px,env(safe-area-inset-bottom)); }
    .app-layout.animus-bg-on::before, .app-layout.animus-bg-on::after { animation: none; will-change: auto; }
}