/* H5 is an explicit presentation mode. Switching to desktop removes mobile-mode. */
html.mobile-mode { --radius: 12px; --mobile-space: 16px; --mobile-nav-height: 64px; height: 100%; background: hsl(var(--background-deep)); }
html.mobile-mode:not(.dark) { --primary: 217 100% 50%; --foreground: 220 55% 14%; --muted-foreground: 220 15% 53%; --background-deep: 216 45% 98%; --background: 216 45% 98%; --muted: 216 45% 96%; --border: 220 35% 93%; }
html.mobile-mode body { height: 100%; min-width: 0; overflow: hidden; font-size: 16px; -webkit-text-size-adjust: 100%; }
html.mobile-mode .mobile-shell { position: fixed; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100%; height: 100dvh; min-width: 0; overflow: hidden; background: hsl(var(--background-deep)); }
html.mobile-mode .mobile-header { flex: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: calc(8px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px)); background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); }
html.mobile-mode .mobile-header[hidden] { display: none; }
html.mobile-mode .mobile-brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: hsl(var(--primary)); font-weight: 700; font-size: 17px; text-decoration: none; }
html.mobile-mode .mobile-brand > .icon { width: 29px; height: 29px; flex-shrink: 0; }
html.mobile-mode .mobile-header-title { min-width: 0; margin: 0; color: hsl(var(--foreground)); font-size: 17px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.mobile-mode .mobile-header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
html.mobile-mode .mobile-header-actions .btn { min-width: 44px; padding: 8px; }
html.mobile-mode .mobile-content { flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; overflow: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 16px max(14px, env(safe-area-inset-right, 0px)) 24px max(14px, env(safe-area-inset-left, 0px)); scroll-padding-top: 14px; scroll-padding-bottom: 24px; scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
html.mobile-mode .mobile-custom-page .mobile-content { padding: env(safe-area-inset-top, 0px) 0 0; scrollbar-width: none; }
html.mobile-mode .mobile-custom-page .mobile-content::-webkit-scrollbar { display: none; }
html.mobile-mode .mobile-content.content-file-manager { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; }
html.mobile-mode .file-manager-page { flex: 1; min-height: 0; }
html.mobile-mode .mobile-bottom-nav { z-index: 30; flex: 0 0 auto; display: flex; align-items: stretch; gap: 0; height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)); min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)); padding: 4px max(5px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(5px, env(safe-area-inset-left, 0px)); border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: none; }
html.mobile-mode .mobile-tab { flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px 2px; border: 0; border-radius: 0; background: transparent; color: hsl(var(--muted-foreground)); text-decoration: none; font-size: 11px; line-height: 16px; cursor: pointer; }
html.mobile-mode .mobile-tab .icon { width: 24px; height: 24px; stroke-width: 1.7; }
html.mobile-mode .mobile-tab > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.mobile-mode .mobile-tab.active { color: hsl(var(--primary)); background: transparent; font-weight: 600; }
html.mobile-mode .mobile-nav-icon { display: block; width: 24px; height: 24px; background: currentColor; mask: var(--mobile-icon) center / contain no-repeat; -webkit-mask: var(--mobile-icon) center / contain no-repeat; }
html.mobile-mode .mobile-tab:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: -2px; }
html.mobile-mode body.overlay-open .mobile-content { overflow: hidden; }

/* Shared page rhythm and controls. Grid children must be allowed to shrink. */
html.mobile-mode .page, html.mobile-mode .card, html.mobile-mode .card-body, html.mobile-mode .split-main { min-width: 0; max-width: 100%; }
html.mobile-mode .page-head { margin-bottom: 16px; }
html.mobile-mode .page-head h1 { font-size: 23px; line-height: 1.4; }
html.mobile-mode .page-head p { overflow-wrap: anywhere; }
html.mobile-mode .card { border-radius: 14px; box-shadow: 0 3px 14px hsl(var(--foreground) / .025); }
html.mobile-mode .card-header, html.mobile-mode .toolbar { flex-wrap: wrap; gap: 10px; padding: 14px; }
html.mobile-mode .card-header > *, html.mobile-mode .toolbar > *, html.mobile-mode .toolbar-actions > * { min-width: 0; max-width: 100%; }
html.mobile-mode .card-body { padding: 14px; }
html.mobile-mode .toolbar-title, html.mobile-mode .card-title { font-size: 16px; }
html.mobile-mode .toolbar-actions { gap: 8px; flex-wrap: wrap; }
html.mobile-mode .toolbar-actions .input, html.mobile-mode .toolbar-actions .select { max-width: 100%; }
html.mobile-mode .grid-2, html.mobile-mode .grid-3, html.mobile-mode .grid-main-side, html.mobile-mode .split-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
html.mobile-mode .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.mobile-mode .grid-2 > *, html.mobile-mode .grid-3 > *, html.mobile-mode .grid-4 > *, html.mobile-mode .grid-main-side > * { min-width: 0; }
html.mobile-mode .btn, html.mobile-mode .icon-btn, html.mobile-mode .pager button, html.mobile-mode .segmented button, html.mobile-mode .tab, html.mobile-mode .select-option, html.mobile-mode .dropdown-item { min-height: 44px; }
html.mobile-mode .btn { height: auto; padding: 10px 14px; border-radius: 10px; white-space: normal; line-height: 1.4; }
html.mobile-mode .btn-icon, html.mobile-mode .icon-btn { min-width: 44px; width: 44px; height: 44px; padding: 9px; flex-shrink: 0; }
html.mobile-mode .btn-link { padding: 8px 4px; text-align: inherit; }
html.mobile-mode .btn-sm { min-height: 44px; font-size: 13px; }
html.mobile-mode .input, html.mobile-mode .select, html.mobile-mode .textarea { min-width: 0; max-width: 100%; min-height: 46px; height: auto; border-radius: 10px; font-size: 16px; }
html.mobile-mode .input, html.mobile-mode .select { padding-top: 10px; padding-bottom: 10px; }
html.mobile-mode .textarea { min-height: 100px; }
html.mobile-mode .checkbox { min-height: 44px; }
html.mobile-mode input[type='checkbox'], html.mobile-mode input[type='radio'] { width: 20px; height: 20px; flex-shrink: 0; accent-color: hsl(var(--primary)); }
html.mobile-mode .form-grid, html.mobile-mode .form-grid.cols-3, html.mobile-mode .form-grid.cols-1, html.mobile-mode .quick-page .form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
html.mobile-mode .form-item.span-2, html.mobile-mode .form-item.span-all { grid-column: 1 / -1; }
html.mobile-mode .form-label { font-size: 13px; margin-bottom: 7px; }
html.mobile-mode .form-help, html.mobile-mode .form-err { font-size: 12px; line-height: 1.6; }
html.mobile-mode .form-section { font-size: 15px; }
html.mobile-mode .search-form { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
html.mobile-mode .search-form .sf-item { min-width: 0; }
html.mobile-mode .search-form .sf-actions { flex-wrap: wrap; gap: 8px; }
html.mobile-mode .search-form .sf-actions .btn { flex: 1 1 auto; }
html.mobile-mode .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 14px 14px; border-radius: 12px; }
html.mobile-mode .ss-item { padding: 12px; }
html.mobile-mode .ss-item:nth-child(odd) { border-left: 0; }
html.mobile-mode .ss-value, html.mobile-mode .stat-value { font-size: 22px; white-space: normal; overflow-wrap: anywhere; }
html.mobile-mode .summary-chips { row-gap: 8px; }
html.mobile-mode .tabs, html.mobile-mode .segmented { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
html.mobile-mode .tabs > *, html.mobile-mode .segmented > * { flex-shrink: 0; }
html.mobile-mode .split { grid-template-columns: minmax(0, 1fr); }
html.mobile-mode .split-main { padding: 12px 14px 0; }
html.mobile-mode .table-pad { padding: 0 14px; }
html.mobile-mode .side-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid hsl(var(--border)); padding: 8px 14px; gap: 6px; overscroll-behavior-x: contain; }
html.mobile-mode .side-nav > * { flex-shrink: 0; }
html.mobile-mode .side-nav .nav-title, html.mobile-mode .side-nav .nav-group { display: none; }
html.mobile-mode .side-nav .nav-item { min-height: 44px; white-space: nowrap; }

/* Only createTable opts into cards. Dedicated matrices keep their table layout. */
html.mobile-mode .tbl-box { min-width: 0; max-width: 100%; }
html.mobile-mode .tbl-wrap { max-width: 100%; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.mobile-mode .tbl-mobile-cards::before { display: none; }
html.mobile-mode .tbl-mobile-cards > .tbl-wrap { overflow: visible; max-height: none !important; border: 0; border-radius: 0; background: transparent; }
html.mobile-mode .tbl-mobile-cards .tbl { display: block; width: 100%; table-layout: auto; }
html.mobile-mode .tbl-mobile-cards .tbl > thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
html.mobile-mode .tbl-mobile-cards .tbl > tbody { display: grid; gap: 12px; }
html.mobile-mode .tbl-mobile-cards .tbl > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; min-width: 0; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); box-shadow: 0 2px 7px hsl(var(--foreground) / .025); }
html.mobile-mode .tbl-mobile-cards .tbl td { position: static; min-width: 0 !important; max-width: none !important; width: auto; height: auto; padding: 7px 0; border: 0; box-shadow: none; background: transparent; text-align: left; white-space: normal; overflow: visible; overflow-wrap: anywhere; vertical-align: top; }
html.mobile-mode .tbl-mobile-cards .tbl td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: hsl(var(--muted-foreground)); font-size: 11px; line-height: 1.4; font-weight: 400; text-decoration: none; }
html.mobile-mode .tbl-mobile-cards .tbl td[data-mobile-heading='true'] { grid-column: 1 / -1; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid hsl(var(--border) / .6); font-size: 15px; font-weight: 600; }
html.mobile-mode .tbl-mobile-cards .tbl td.wrap { grid-column: 1 / -1; }
html.mobile-mode .tbl-mobile-cards .tbl td[data-column='_select'] { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 44px; }
html.mobile-mode .tbl-mobile-cards .tbl td[data-column='_select']::before { margin: 0; }
html.mobile-mode .tbl-mobile-cards .tbl td[data-column='_op'] { grid-column: 1 / -1; border-top: 1px solid hsl(var(--border) / .6); padding-top: 8px; margin-top: 5px; }
html.mobile-mode .tbl-mobile-cards .tbl td[data-column='_op']::before { display: none; }
html.mobile-mode .tbl-mobile-cards .tbl td[data-column='_op'] .row { flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
html.mobile-mode .tbl-mobile-cards .tbl td[data-column='_op'] .btn { padding: 8px 10px; }
html.mobile-mode .tbl-mobile-cards .cell-clip { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
html.mobile-mode .tbl-mobile-cards .tbl > tbody > tr.group-row { margin-top: 4px; padding: 10px 12px; box-shadow: none; border-color: hsl(var(--primary) / .12); background: hsl(var(--primary) / .055); }
html.mobile-mode .tbl-mobile-cards .group-row td.group-label { grid-column: 1 / -1; color: hsl(var(--primary)); font-weight: 650; }
html.mobile-mode .tbl-mobile-cards .group-row td.group-label::before { display: none; }
html.mobile-mode .tbl-mobile-cards .tbl tfoot { display: block; margin-top: 12px; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--muted)); }
html.mobile-mode .tbl-mobile-cards .tbl tfoot > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
html.mobile-mode .tbl-mobile-cards .tbl tfoot td:first-child { grid-column: 1 / -1; }
html.mobile-mode .tbl-mobile-cards .tbl tfoot td:first-child::before { display: none; }
html.mobile-mode .tbl-mobile-cards .tbl td[data-empty='true'] { display: none; }
html.mobile-mode .tbl-mobile-cards .tbl-empty-state { min-height: 180px; border: 1px dashed hsl(var(--border)); border-radius: 12px; }
html.mobile-mode .tbl-mobile-cards .tbl-mobile-only { display: block !important; }
html.mobile-mode .tbl-mobile-cards .tbl > tbody > tr:not([data-mobile-expanded='true']) > td[data-mobile-secondary='true'] { display: none !important; }
html.mobile-mode .tbl-mobile-cards .tbl .tbl-mobile-expand-cell { display: block !important; grid-column: 1 / -1; padding: 0; border-top: 1px solid hsl(var(--border) / .5); }
html.mobile-mode .tbl-mobile-cards .tbl .tbl-mobile-expand-cell::before { display: none; }
html.mobile-mode .tbl-mobile-expand { width: 100%; justify-content: center; font-size: 12px; color: hsl(var(--primary)); }
html.mobile-mode .tbl-mobile-cards .tbl > tbody > tr.group-row { display: flex; align-items: center; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px 12px; }
html.mobile-mode .tbl-mobile-cards .tbl > tbody > tr.group-row > td { flex: 0 0 auto; min-width: 76px !important; padding: 2px 0; white-space: nowrap; }
html.mobile-mode .tbl-mobile-cards .tbl > tbody > tr.group-row > td.group-label { min-width: 106px !important; }
html.mobile-mode .tbl-mobile-sort { display: flex !important; align-items: center; gap: 8px; padding: 0 0 12px; color: hsl(var(--muted-foreground)); font-size: 12px; }
html.mobile-mode .tbl-mobile-sort > .select { flex: 1; width: auto; min-width: 0; font-size: 14px; }
html.mobile-mode .tbl-mobile-sort > .btn { flex-shrink: 0; min-width: 76px; font-size: 13px; }
html.mobile-mode .card > .tbl-mobile-cards { padding: 0 14px 14px; }
html.mobile-mode .pager { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0; }
html.mobile-mode .pager-total { flex: 1 0 100%; }
html.mobile-mode .pager button { min-width: 40px; border-radius: 8px; }
html.mobile-mode .pager .select { flex: 1 1 100px; width: auto; font-size: 14px; }

/* Orders keep the first record in view; full filters and figures remain available. */
html.mobile-mode .orders-layout { gap: 12px; }
html.mobile-mode .orders-search { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 12px; }
html.mobile-mode .orders-search > .sf-item:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
html.mobile-mode .orders-search > .sf-item:nth-child(2) > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html.mobile-mode .orders-search > .sf-item:nth-child(1) { grid-column: 1 !important; grid-row: 2; }
html.mobile-mode .orders-search > .sf-item:nth-child(3) { grid-column: 2 !important; grid-row: 2; }
html.mobile-mode .orders-search .sf-item { gap: 5px; }
html.mobile-mode .orders-search .sf-item > label { width: 56px; font-size: 11px; text-align: left; white-space: nowrap; }
html.mobile-mode .orders-search > .sf-item:nth-child(1) > label { width: 26px; }
html.mobile-mode .orders-search > .sf-item:nth-child(3) > label { width: 44px; }
html.mobile-mode .orders-search .input, html.mobile-mode .orders-search .select { min-height: 44px; height: 44px; }
html.mobile-mode .orders-search .select { font-size: 13px; padding-left: 8px; padding-right: 26px; }
html.mobile-mode .orders-search .sf-actions { grid-column: 1 / -1; gap: 8px; }
html.mobile-mode .orders-search .sf-actions .btn { flex: 0 1 auto; min-height: 44px; padding: 8px 12px; }
html.mobile-mode .orders-search .sf-actions .sf-toggle { margin-right: auto; padding-left: 0; }
html.mobile-mode .orders-search .sf-actions .btn-primary { min-width: 88px; }
html.mobile-mode .orders-toolbar { padding: 10px 12px; }
html.mobile-mode .orders-toolbar > .toolbar-left { display: none; }
html.mobile-mode .orders-toolbar .toolbar-actions { width: 100%; display: flex; flex-wrap: nowrap; gap: 8px; }
html.mobile-mode .orders-secondary-actions { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; }
html.mobile-mode .orders-secondary-actions > .btn { flex-shrink: 0; white-space: nowrap; padding: 8px 10px; font-size: 12px; }
html.mobile-mode .orders-secondary-actions .orders-standalone-entry { display: none; }
html.mobile-mode .orders-toolbar .toolbar-actions > .btn-primary { flex: 0 0 auto; min-width: 108px; padding: 10px 12px; }
html.mobile-mode .orders-statistics .stat-strip { display: flex; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; height: 88px; max-height: 100px; margin: 0 12px 10px; border-radius: 10px; }
html.mobile-mode .orders-statistics .ss-item { flex: 0 0 auto; min-width: 108px; padding: 9px 12px; border-left: 1px solid hsl(var(--border)); }
html.mobile-mode .orders-statistics .ss-item:first-child { border-left: 0; }
html.mobile-mode .orders-statistics .ss-value { font-size: 21px; white-space: nowrap; }
html.mobile-mode .orders-statistics .ss-label, html.mobile-mode .orders-statistics .ss-sub { font-size: 11px; }
html.mobile-mode .orders-secondary-actions, html.mobile-mode .orders-statistics .stat-strip, html.mobile-mode .tbl-mobile-cards .tbl > tbody > tr.group-row { scrollbar-width: none; }
html.mobile-mode .orders-secondary-actions::-webkit-scrollbar, html.mobile-mode .orders-statistics .stat-strip::-webkit-scrollbar, html.mobile-mode .tbl-mobile-cards .tbl > tbody > tr.group-row::-webkit-scrollbar { display: none; height: 0; }
html.mobile-mode .orders-layout .status-cell { flex-wrap: wrap; }
html.mobile-mode .orders-layout .status-cell > [title='未收金额'] { display: none; }
html.mobile-mode .orders-layout .table-pad { padding: 0 12px; }
html.mobile-mode .orders-layout .tbl-mobile-sort { padding-bottom: 8px; }
html.mobile-mode .orders-layout .tbl-mobile-sort .select { min-height: 44px; height: 44px; }

/* Overlays stay above the shell. The scroll area excludes their action footer. */
html.mobile-mode .modal { top: auto; right: 0; bottom: 0; left: 0; width: 100% !important; max-width: 100%; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); transform: none; border-radius: 18px 18px 0 0; animation: none; overflow: hidden; }
html.mobile-mode .drawer { top: 0; right: 0; bottom: 0; width: 100% !important; max-width: 100%; height: 100%; height: 100dvh; padding-top: env(safe-area-inset-top, 0px); border-radius: 0; animation: none; overflow: hidden; }
html.mobile-mode .modal-head, html.mobile-mode .drawer-head { flex: 0 0 auto; min-height: 60px; height: auto; padding: 8px 12px 8px 16px; gap: 8px; }
html.mobile-mode .modal-title, html.mobile-mode .drawer-title { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 17px; }
html.mobile-mode .modal-head .row, html.mobile-mode .drawer-head .row { min-width: 0; flex-wrap: wrap; gap: 6px; }
html.mobile-mode .modal-body, html.mobile-mode .drawer-body { flex: 1 1 auto; min-height: 0; min-width: 0; padding: 18px 16px; overflow: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-bottom: 20px; }
html.mobile-mode .modal-foot, html.mobile-mode .drawer-foot { flex: 0 0 auto; flex-wrap: wrap; gap: 8px; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: hsl(var(--card)); }
html.mobile-mode .modal-foot > .btn, html.mobile-mode .drawer-foot > .btn { flex: 1 1 110px; min-height: 46px; }
html.mobile-mode .modal-foot .spacer, html.mobile-mode .drawer-foot .spacer { display: none; }
html.mobile-mode .dropdown { max-width: calc(100vw - 24px); max-height: min(60dvh, 480px); overflow-y: auto; overscroll-behavior: contain; border-radius: 12px; }
html.mobile-mode .dropdown-item { padding: 10px 12px; }
html.mobile-mode .select-menu { max-width: calc(100vw - 24px); border-radius: 12px; }
html.mobile-mode .select-search-input { min-height: 44px; font-size: 16px; }
html.mobile-mode .select-option { padding-top: 10px; padding-bottom: 10px; }
html.mobile-mode .date-calendar { max-width: calc(100vw - 24px); }
html.mobile-mode .date-calendar-nav, html.mobile-mode .date-calendar-day, html.mobile-mode .date-calendar-action { min-height: 44px; }
html.mobile-mode .date-calendar-nav { width: 44px; }
html.mobile-mode .messages { top: calc(12px + env(safe-area-inset-top, 0px)); max-width: calc(100vw - 24px); }
html.mobile-mode .message { overflow-wrap: anywhere; }
html.mobile-mode .chart { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
html.mobile-mode .order-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
html.mobile-mode .order-preview-grid > * { min-width: 0; overflow-wrap: anywhere; }

/* Inventory and receiving / issuing / transfer forms. */
html.mobile-mode .inv-page-heading, html.mobile-mode .inv-hero { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
html.mobile-mode .inv-heading-actions, html.mobile-mode .inv-hero-actions, html.mobile-mode .inv-row-actions { flex-wrap: wrap; }
html.mobile-mode .inv-module-links > button, html.mobile-mode .inv-tabs > button { min-height: 44px; }
html.mobile-mode .inv-planning-summary { flex-wrap: wrap; gap: 14px; padding: 16px; }
html.mobile-mode .inv-planning-summary > div { flex: 1 1 120px; }
html.mobile-mode .inv-module-grid, html.mobile-mode .inv-two-column, html.mobile-mode .inv-setup-grid, html.mobile-mode .inv-party-grid { grid-template-columns: minmax(0, 1fr); }
html.mobile-mode .inv-metrics, html.mobile-mode .inv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.mobile-mode .inv-filters { flex-wrap: wrap; gap: 8px; }
html.mobile-mode .inv-filters .input, html.mobile-mode .inv-filters .select { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; }
html.mobile-mode .inv-edit-line { flex-wrap: wrap; }
html.mobile-mode .inv-edit-line .form-grid { flex: 1 1 100%; }
html.mobile-mode .inv-edit-line > button { margin-top: 0; }
html.mobile-mode .inv-quantity-line { flex-wrap: wrap; gap: 10px; }
html.mobile-mode .inv-quantity-line > label { width: 100%; }
html.mobile-mode .inv-quantity-line .input, html.mobile-mode .inv-quantity-line .select { flex: 1 1 100%; width: 100%; min-width: 0; }
html.mobile-mode .inv-notice { overflow-wrap: anywhere; }

/* Shipment evidence stays in the existing workflow, with a stationary footer. */
html.mobile-mode .ship-modal.modal { top: env(safe-area-inset-top, 0px); bottom: 0; height: calc(100dvh - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - env(safe-area-inset-top, 0px)); border-radius: 0; }
html.mobile-mode .ship-modal .modal-body { padding: 0; overflow: hidden; display: flex; }
html.mobile-mode .shipping-workspace { flex: 1; min-width: 0; min-height: 0; height: 100%; }
html.mobile-mode .ship-stages { flex-shrink: 0; gap: 4px; padding: 10px; }
html.mobile-mode .ship-stages button { min-height: 48px; min-width: 0; padding: 7px 4px; font-size: 12px; }
html.mobile-mode .ship-units { flex-shrink: 0; padding: 8px 12px; }
html.mobile-mode .ship-units button { min-height: 44px; }
html.mobile-mode .ship-work-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; overscroll-behavior: contain; }
html.mobile-mode .ship-summary { flex-shrink: 0; padding: 12px 16px; }
html.mobile-mode .ship-fields, html.mobile-mode .ship-evidence-grid, html.mobile-mode .ship-gap-list { grid-template-columns: minmax(0, 1fr); }
html.mobile-mode .ship-check-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
html.mobile-mode .ship-check-actions { flex-wrap: wrap; }
html.mobile-mode .ship-check-actions button { min-height: 44px; }
html.mobile-mode .ship-sticky-footer { position: static; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
html.mobile-mode .ship-sticky-footer > .row { flex-wrap: wrap; }
html.mobile-mode .ship-footer-actions { width: 100%; flex-wrap: wrap; }
html.mobile-mode .ship-sticky-footer .btn { flex: 1 1 auto; }
html.mobile-mode .ship-save-state { width: 100%; }
html.mobile-mode .ship-option { min-height: 44px; }

/* CRM and permissions retain all information, with a single vertical flow. */
html.mobile-mode .crm-page { gap: 12px; }
html.mobile-mode .crm-search { gap: 8px; padding: 10px 12px; }
html.mobile-mode .crm-search[data-mobile-filters-expanded='false'] > .sf-item:not(:first-child) { display: none; }
html.mobile-mode .crm-search > .sf-item:first-child > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html.mobile-mode .crm-search .sf-actions { gap: 8px; flex-wrap: nowrap; }
html.mobile-mode .crm-search .sf-actions > .btn { flex: 0 1 auto; padding: 8px 12px; }
html.mobile-mode .crm-search .sf-actions > .btn-primary { min-width: 88px; }
html.mobile-mode .crm-search .crm-filter-toggle { display: inline-flex !important; order: -1; margin-right: auto; padding-left: 0; font-size: 13px; }
html.mobile-mode .crm-main-toolbar { padding: 10px 12px; }
html.mobile-mode .crm-main-toolbar > .toolbar-left { display: none; }
html.mobile-mode .crm-main-toolbar .toolbar-actions { width: 100%; flex-wrap: nowrap; gap: 8px; }
html.mobile-mode .crm-secondary-actions { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; gap: 6px; overscroll-behavior-x: contain; }
html.mobile-mode .crm-secondary-actions > .btn { flex-shrink: 0; white-space: nowrap; font-size: 12px; padding: 8px 10px; }
html.mobile-mode .crm-main-toolbar .toolbar-actions > .btn-primary { flex: 0 0 auto; min-width: 108px; }
html.mobile-mode .crm-statistics .stat-strip { display: flex; height: 88px; max-height: 100px; margin: 0 12px 10px; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 10px; }
html.mobile-mode .crm-statistics .ss-item { flex: 0 0 auto; min-width: 116px; padding: 9px 12px; border-left: 1px solid hsl(var(--border)); }
html.mobile-mode .crm-statistics .ss-item:first-child { border-left: 0; }
html.mobile-mode .crm-statistics .ss-value { font-size: 21px; white-space: nowrap; }
html.mobile-mode .crm-statistics .ss-label, html.mobile-mode .crm-statistics .ss-sub { font-size: 11px; }
html.mobile-mode .crm-shortcuts { flex-wrap: nowrap; overflow-x: auto; padding: 0 12px 8px; gap: 6px; overscroll-behavior-x: contain; }
html.mobile-mode .crm-shortcuts > * { flex: 0 0 auto; white-space: nowrap; }
html.mobile-mode .crm-shortcuts > .muted:first-child { font-size: 11px; }
html.mobile-mode .crm-shortcuts .btn { font-size: 12px; padding: 8px 10px; }
html.mobile-mode .crm-shortcuts .crm-summary-note { width: auto; font-size: 11px; }
html.mobile-mode .crm-batch-toolbar { flex-wrap: nowrap !important; justify-content: flex-start; gap: 6px !important; padding: 8px 12px; overflow-x: auto; overscroll-behavior-x: contain; border-top: 1px solid hsl(var(--border)); }
html.mobile-mode .crm-batch-toolbar > * { flex: 0 0 auto; white-space: nowrap; }
html.mobile-mode .crm-batch-toolbar .btn { padding: 8px 10px; font-size: 12px; }
html.mobile-mode .crm-batch-toolbar > .muted { font-size: 11px; }
html.mobile-mode .crm-list-status { padding: 6px 12px; font-size: 11px; line-height: 1.5; }
html.mobile-mode .crm-page .table-pad { padding: 0 12px; }
html.mobile-mode .crm-secondary-actions, html.mobile-mode .crm-statistics .stat-strip, html.mobile-mode .crm-shortcuts, html.mobile-mode .crm-batch-toolbar { scrollbar-width: none; }
html.mobile-mode .crm-secondary-actions::-webkit-scrollbar, html.mobile-mode .crm-statistics .stat-strip::-webkit-scrollbar, html.mobile-mode .crm-shortcuts::-webkit-scrollbar, html.mobile-mode .crm-batch-toolbar::-webkit-scrollbar { display: none; height: 0; }
html.mobile-mode .crm-info-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
html.mobile-mode .crm-row-actions { flex-wrap: wrap; justify-content: flex-start; }
html.mobile-mode .crm-cell-sub, html.mobile-mode .crm-tags, html.mobile-mode .crm-owner-cell > span, html.mobile-mode .crm-customer-cell > .btn-link { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
html.mobile-mode .crm-summary-note { width: 100%; margin-left: 0; }
html.mobile-mode .role-editor-modal.modal { top: env(safe-area-inset-top, 0px); height: calc(100dvh - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - env(safe-area-inset-top, 0px)); max-width: 100%; border-radius: 0; }
html.mobile-mode .role-editor-modal .modal-body { padding: 0; overflow-y: auto; }
html.mobile-mode .role-editor { display: block; height: auto; }
html.mobile-mode .role-editor-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; overflow: visible; border-right: 0; border-bottom: 1px solid hsl(var(--border)); }
html.mobile-mode .role-data-settings { margin-top: 0; padding-top: 16px; border-top: 1px solid hsl(var(--border)); }
html.mobile-mode .role-permission-heading { padding: 18px 16px 12px; }
html.mobile-mode .role-permission-tree { flex: none; overflow: visible; padding: 0 16px 12px; scrollbar-gutter: auto; }
html.mobile-mode .role-tree-toggle { width: 44px; height: 44px; }
html.mobile-mode .role-tree-label, html.mobile-mode .role-tree-leaf .role-tree-label, html.mobile-mode .role-member-choice, html.mobile-mode .role-scope-option { min-height: 44px; }
html.mobile-mode .role-tree-row { gap: 4px; }
html.mobile-mode .role-tree-count { white-space: normal; text-align: right; }
html.mobile-mode .role-module-list { padding-left: 6px; padding-right: 6px; }
html.mobile-mode .role-action-area { margin-left: 8px; padding: 8px; }
html.mobile-mode .role-tree-hint { padding: 12px 16px; }
html.mobile-mode .role-scope-conflicts { margin: 0 16px 12px; }
html.mobile-mode .role-save-summary { width: 100%; }
html.mobile-mode .user-role-options { grid-template-columns: minmax(0, 1fr); }

/* Keep kanban and dedicated development tables horizontally scrollable. */
html.mobile-mode .dev-layout { grid-template-columns: minmax(0, 1fr); }
html.mobile-mode .dev-page-heading, html.mobile-mode .dev-toolbar { flex-wrap: wrap; gap: 10px; }
html.mobile-mode .dev-page-heading > *, html.mobile-mode .dev-toolbar > * { min-width: 0; max-width: 100%; }
html.mobile-mode .dev-filter-controls { flex-wrap: wrap; }
html.mobile-mode .dev-filter-controls .input, html.mobile-mode .dev-filter-controls .select { min-width: 0; max-width: 100%; }
html.mobile-mode .dev-kanban, html.mobile-mode .dev-table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
html.mobile-mode .dev-project, html.mobile-mode .dev-add-task, html.mobile-mode .dev-column-menu, html.mobile-mode .dev-task-title, html.mobile-mode .dev-drag-handle { min-height: 44px; }
html.mobile-mode .dev-column-menu, html.mobile-mode .dev-drag-handle { min-width: 44px; }
html.mobile-mode .dev-projects { max-width: 100%; min-height: 0; }
html.mobile-mode .dev-project-list { flex-direction: row; max-width: 100%; overflow-x: auto; padding-bottom: 10px; }
html.mobile-mode .dev-project { width: 200px; min-width: 200px; }
html.mobile-mode .dev-sidebar-note { display: none; }
html.mobile-mode .dev-board-header { flex-wrap: wrap; padding: 16px; }
html.mobile-mode .dev-header-actions { flex-wrap: wrap; max-width: 100%; }
html.mobile-mode .dev-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 16px 16px; }
html.mobile-mode .dev-search { width: 100%; min-height: 44px; }
html.mobile-mode .dev-search-input { font-size: 16px; }
html.mobile-mode .dev-filter-controls .select { min-height: 44px; height: auto; font-size: 14px; }
html.mobile-mode .dev-view-tabs button, html.mobile-mode .dev-archive-toggle { min-height: 44px; }
html.mobile-mode .dev-modal .form-grid, html.mobile-mode .dev-form-grid { grid-template-columns: minmax(0, 1fr); }

/* Existing quick-order behavior and decimal input attributes are unchanged. */
html.mobile-mode .quick-page { max-width: 100%; padding-bottom: 8px; }
html.mobile-mode .quick-section { padding: 16px; }
html.mobile-mode .quick-details { padding: 0; }
html.mobile-mode .quick-section-body { padding: 0 16px 16px; }
html.mobile-mode .quick-details summary { min-height: 54px; padding: 16px; }
html.mobile-mode .quick-product-filter { grid-template-columns: minmax(0, 1fr); }
html.mobile-mode .quick-submit { bottom: 0; gap: 10px; padding: 12px; margin-top: 12px; }
html.mobile-mode .quick-submit strong { font-size: 21px; }
html.mobile-mode .quick-submit .btn { min-width: 112px; }

/* A compact brand and form; still scrollable when the keyboard opens. */
html.mobile-mode .login { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto; background: linear-gradient(180deg, hsl(var(--primary) / .065), hsl(var(--background)) 42%); }
html.mobile-mode .login-side { display: block; flex: 0 0 auto; min-height: 0; padding: calc(30px + env(safe-area-inset-top, 0px)) 24px 12px; overflow: visible; background: transparent; }
html.mobile-mode .login-side::before, html.mobile-mode .login-illus, html.mobile-mode .login-slogan { display: none; }
html.mobile-mode .login-brand { position: static; color: hsl(var(--primary)); font-size: 19px; }
html.mobile-mode .login-panel { flex: 1 0 auto; align-items: flex-start; width: 100%; min-width: 0; padding: 32px max(24px, env(safe-area-inset-right, 0px)) calc(30px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
html.mobile-mode .login-form { max-width: 420px; }
html.mobile-mode .login-form h1 { font-size: 27px; line-height: 1.4; }
html.mobile-mode .login-form .sub { margin-bottom: 28px; }
html.mobile-mode .login-form .input, html.mobile-mode .login-form .btn { min-height: 48px; }
html.mobile-mode .login-password-toggle { width: 44px; min-width: 44px; height: 44px; padding: 10px; }
html.mobile-mode .login-options { gap: 8px; flex-wrap: wrap; }
html.mobile-mode .login:has(.mobile-login-brand) .login-side { display: none; }
html.mobile-mode .login:has(.mobile-login-brand) .login-panel { padding-top: calc(36px + env(safe-area-inset-top, 0px)); }
html.mobile-mode .mobile-login-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; color: hsl(var(--primary)); }
html.mobile-mode .mobile-login-brand > span:first-child { display: flex; align-items: center; }
html.mobile-mode .mobile-login-brand svg { width: 34px; height: 34px; }
html.mobile-mode .mobile-login-brand strong { font-size: 22px; }
html.mobile-mode .mobile-login-brand > span:last-child { font-size: 13px; color: hsl(var(--muted-foreground)); }
html.mobile-mode .mobile-login-note { margin: 20px 0 0; color: hsl(var(--muted-foreground)); font-size: 12px; text-align: center; }

@media (max-width: 359px) {
  html.mobile-mode .mobile-content { padding-left: 10px; padding-right: 10px; }
  html.mobile-mode .mobile-header-title { font-size: 15px; }
  html.mobile-mode .tbl-mobile-cards .tbl > tbody > tr, html.mobile-mode .tbl-mobile-cards .tbl tfoot > tr { grid-template-columns: minmax(0, 1fr); }
  html.mobile-mode .order-preview-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html.mobile-mode .quick-submit { flex-wrap: wrap; }
  html.mobile-mode .quick-submit .btn { flex: 1; }
}

/* Forced phone mode on a desktop keeps the same readable mobile canvas. */
@media (min-width: 821px) {
  html.mobile-mode .mobile-shell { right: auto; left: 50%; width: 430px; max-width: 100%; transform: translateX(-50%); box-shadow: 0 0 40px hsl(var(--foreground) / .06); }
}