/* GAMECELL workspace forms — visual layer only. Original controls, validation,
   step visibility and document/export layouts remain owned by their modules. */
@media screen {
 :is(#app #page,dialog#modal) {
  --ds-form-danger:#b42318;
  --ds-form-danger-soft:#fff1f0;
  --ds-form-warning:#9a6700;
  --ds-form-warning-soft:#fff9eb;
  --ds-form-success:#187657;
  --ds-form-success-soft:#edf8f3;
 }
 html[data-theme="dark"] :is(#app #page,dialog#modal) {
  --ds-form-danger:#ffb4ac;
  --ds-form-danger-soft:#38272e;
  --ds-form-warning:#f2cc81;
  --ds-form-warning-soft:#342f25;
  --ds-form-success:#8ed6b6;
  --ds-form-success-soft:#203a34;
 }

 /* A single field rhythm for catalogues, sales, stock and financial forms. */
 :is(#app #page,dialog#modal) .fields { gap:16px; }
 :is(#app #page,dialog#modal) .field {
  min-width:0; gap:6px; color:var(--ds-text); font-size:13px;
  font-weight:600; line-height:1.45;
 }
 :is(#app #page,dialog#modal) .field>span { color:var(--ds-text); }
 :is(#app #page,dialog#modal) .field :is(small,.footer-note) { font-weight:400; }
 /* Input-type exclusions must not outrank components such as the R$ prefix. */
 :is(#app #page,dialog#modal) :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"])),select,textarea,.select-trigger) {
  min-width:0; max-width:100%; min-height:40px; padding:9px 12px;
  border:1px solid var(--ds-line); border-radius:8px;
  background:var(--ds-surface); color:var(--ds-text);
  box-shadow:0 1px 2px #10182804; font:400 14px/1.4 "Segoe UI",system-ui,sans-serif;
  transition:border-color .14s,box-shadow .14s,background-color .14s;
 }
 :is(#app #page,dialog#modal) input::placeholder,
 :is(#app #page,dialog#modal) textarea::placeholder { color:var(--ds-muted); opacity:.85; }
 :is(#app #page,dialog#modal) :is(input,select,textarea,.select-trigger):hover:not(:disabled):not(:focus) { border-color:color-mix(in srgb,var(--ds-muted) 55%,var(--ds-line)); }
 :is(#app #page,dialog#modal) :is(input,select,textarea,.select-trigger):focus-visible {
  outline:2px solid var(--ds-accent); outline-offset:2px;
  border-color:var(--ds-accent); box-shadow:0 0 0 4px var(--ds-accent-soft);
 }
 :is(#app #page,dialog#modal) :is(input,select,textarea,.select-trigger):disabled {
  background:var(--ds-surface-alt); color:var(--ds-muted); border-color:var(--ds-line);
  opacity:1; cursor:not-allowed; box-shadow:none;
 }
 :is(#app #page,dialog#modal) input[readonly] { background:var(--ds-surface-alt); }
 :is(#app #page,dialog#modal) :is(input,select,textarea):user-invalid,
 :is(#app #page,dialog#modal) :is(input,select,textarea)[aria-invalid="true"] { border-color:var(--ds-form-danger); }
 :is(#app #page,dialog#modal) textarea { resize:vertical; line-height:1.55; }
 :is(#app #page,dialog#modal) input:is([type="checkbox"],[type="radio"]) {
  accent-color:var(--ds-accent); width:17px; height:17px; min-height:17px; flex-shrink:0;
 }
 :is(#app #page,dialog#modal) .money-input>span { left:12px; background:transparent; color:var(--ds-muted); font-size:12px; }
 :is(#app #page,dialog#modal) .money-input>input { padding-left:38px; font-variant-numeric:tabular-nums; font-weight:600; }
 :is(#app #page,dialog#modal) :is(.footer-note,.payment-modal-note,.stat-note,.item-guidance) {
  color:var(--ds-muted); font-size:12px; font-weight:400; line-height:1.55;
 }
 :is(#app #page,dialog#modal) .check-field {
  gap:10px; align-items:flex-start; color:var(--ds-text); font-size:13px; line-height:1.5; font-weight:500;
 }
 :is(#app #page,dialog#modal) .check-field>input { margin-top:2px; }
 :is(#app #page,dialog#modal) :is(.error,.field-error) { color:var(--ds-form-danger); font-size:13px; line-height:1.5; }
 /* Match the workspace/form scope, not only .primary: legacy theme rules have
    contextual specificity. Destructive and operational controls stay separate. */
 :is(#app #page,dialog#modal) :is(button.primary,.button.primary):not(.danger) { background:#5154d9; border-color:#5154d9; color:#fff; box-shadow:0 1px 2px #20244714; }
 :is(#app #page,dialog#modal) :is(button.primary,.button.primary):not(.danger):hover:not(:disabled) { background:#4245bc; border-color:#4245bc; color:#fff; }
 :is(#app #page,dialog#modal) .select-control.is-status>button.select-trigger[role="combobox"] {
  background:var(--status-bg); color:var(--status-text); border-color:var(--status-color);
 }
 /* The editor uses a normal form field, not a light-colored status badge. */
 html:root #app #page .sale-editor .select-control.is-status>button.select-trigger[role="combobox"] {
  background:var(--ds-surface); color:var(--ds-text); border:1px solid var(--ds-line);
  min-height:44px; border-radius:8px; padding:9px 12px; font-size:14px; font-weight:500;
 }
 html:root #app #page .sale-editor .select-control.is-status>button.select-trigger[aria-expanded="true"] { border-color:var(--ds-accent); box-shadow:0 0 0 3px var(--ds-accent-soft); }

 /* Clearly bounded dialog: calm title, uncluttered content, distinct actions. */
 dialog#modal {
  max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px);
  padding:0; background:var(--ds-surface); color:var(--ds-text);
  border:1px solid var(--ds-line); border-radius:16px;
  box-shadow:0 32px 80px #11182738,0 4px 16px #11182714;
 }
 dialog#modal::backdrop { background:#11182780; backdrop-filter:blur(5px); }
 dialog#modal .modal-header {
  padding:16px 22px; gap:16px; background:var(--ds-surface);
  border-top:3px solid var(--ds-accent); border-bottom:1px solid var(--ds-line);
 }
 dialog#modal .modal-header h2 { font-size:19px; font-weight:700; line-height:1.3; letter-spacing:-.035em; color:var(--ds-text); }
 dialog#modal .modal-header>button {
  width:36px; height:36px; min-height:36px; padding:8px; flex-shrink:0;
  border:1px solid var(--ds-line); border-radius:10px;
  background:var(--ds-surface-alt); color:var(--ds-muted);
 }
 dialog#modal .modal-header>button:hover { background:var(--ds-accent-soft); color:var(--ds-accent); border-color:var(--ds-accent); }
 dialog#modal .modal-content { padding:20px 22px; }
 dialog#modal .modal-content>p { font-size:13px; line-height:1.6; }
 dialog#modal .modal-content>.actions,
 dialog#modal #inventory-posting-form>.actions {
  margin-top:18px; padding-top:16px; gap:8px; border-top:1px solid var(--ds-line);
 }
 dialog#modal :is(.actions,.flow-navigation,.workspace-step-navigation)>button { min-height:40px; border-radius:8px; padding:9px 16px; }
 dialog#modal .modal-content>.actions>button[type="submit"] { min-width:108px; }
 dialog#modal:has(#product-form) { width:min(720px,calc(100vw - 32px)); }
 dialog#modal:has(#customer-form) { width:min(880px,calc(100vw - 32px)); }
 dialog#modal:has(#permissions-form) { width:min(880px,calc(100vw - 32px)); }
 dialog#modal:has(#payment-form) { width:min(640px,calc(100vw - 32px)); }
 dialog#modal:has(#stock-entry-form) { width:min(960px,calc(100vw - 32px)); }
 dialog#modal:has(#inventory-posting-form) { width:min(850px,calc(100vw - 32px)); }
 dialog#modal :is(.customer-address-card,.product-serial-choice,.finance-modal-summary) {
  border:1px solid var(--ds-line); border-radius:10px;
  background:var(--ds-surface-alt); color:var(--ds-text); padding:14px;
 }
 dialog#modal .customer-address-card>legend { color:var(--ds-text); font-size:13px; font-weight:650; }
 dialog#modal .permission-grid { gap:10px; }
 dialog#modal .permission-grid label {
  display:flex; align-items:flex-start; gap:10px; min-height:48px;
  padding:12px 14px; border:1px solid var(--ds-line); border-radius:10px;
  background:var(--ds-surface); color:var(--ds-text); font-size:13px; line-height:1.45;
 }
 dialog#modal .permission-grid label:has(input:checked) { background:var(--ds-accent-soft); border-color:color-mix(in srgb,var(--ds-accent) 40%,var(--ds-line)); }
 dialog#modal .permission-grid label:focus-within { outline:2px solid var(--ds-accent); outline-offset:2px; }
 dialog#modal .permission-grid input { margin-top:1px; }

 /* Existing wizard steps are restyled, never recreated or repositioned in DOM. */
 dialog#modal .workspace-steps {
  gap:6px; padding:5px; margin-bottom:18px; border:1px solid var(--ds-line);
  border-radius:10px; background:var(--ds-surface-alt);
 }
 dialog#modal .workspace-steps button {
  min-height:38px; flex:1 1 120px; padding:8px 10px; border:1px solid transparent;
  border-radius:7px; background:transparent; color:var(--ds-muted); font-size:12px; font-weight:600;
 }
 dialog#modal .workspace-steps button[aria-current="step"] { background:var(--ds-surface); color:var(--ds-accent); border-color:var(--ds-line); box-shadow:0 1px 3px #1018280d; }
 dialog#modal .workspace-step-title { margin:0 0 14px; font-size:15px; line-height:1.4; font-weight:650; color:var(--ds-text); }
 dialog#modal .workspace-step-count { font-size:12px; font-weight:500; color:var(--ds-muted); }
 dialog#modal .workspace-step-navigation .workspace-next { background:#5154d9; border-color:#5154d9; color:#fff; }
 dialog#modal .workspace-step-navigation .workspace-next:hover { background:#4245bc; border-color:#4245bc; color:#fff; }

 :is(#app #page,dialog#modal) .mobile-flow .flow-heading {
  gap:4px 16px; margin-bottom:14px; padding:14px 18px;
  border:1px solid var(--ds-line); border-left:3px solid var(--ds-accent);
  border-radius:10px; background:var(--ds-surface);
 }
 :is(#app #page,dialog#modal) .mobile-flow .flow-progress { color:var(--ds-muted); font-size:12px; font-weight:500; }
 :is(#app #page,dialog#modal) .mobile-flow .flow-heading h2 { color:var(--ds-text); font-size:17px; font-weight:650; letter-spacing:-.02em; }
 :is(#app #page,dialog#modal) .mobile-flow .flow-heading progress { height:3px; margin:8px 0 0; accent-color:var(--ds-accent); }
 :is(#app #page,dialog#modal) .mobile-flow .flow-heading progress::-webkit-progress-bar { background:var(--ds-line); }
 :is(#app #page,dialog#modal) .mobile-flow .flow-heading progress::-webkit-progress-value { background:var(--ds-accent); }
 :is(#app #page,dialog#modal) .mobile-flow .flow-heading progress::-moz-progress-bar { background:var(--ds-accent); }
 :is(#app #page,dialog#modal) .mobile-flow .flow-review { min-height:36px; padding:8px 12px; font-size:12px; background:var(--ds-surface-alt); border-color:var(--ds-line); color:var(--ds-text); }
 :is(#app #page,dialog#modal) .mobile-flow .flow-navigation {
  align-items:center; padding:10px 12px; margin-top:12px;
  background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:10px; box-shadow:none;
 }
 #app #page .sale-editor .flow-navigation>button { min-height:40px; padding:9px 16px; border-radius:8px; }
 :is(#app #page,dialog#modal) .mobile-flow .flow-next-hint { color:var(--ds-muted); font-size:12px; }

 /* Sales are a work surface, not a stack of decorative cards. */
 #app #page .sale-editor.mobile-flow { max-width:1120px; }
 #app #page .sale-editor .customer-field-heading { flex-wrap:wrap; }
 #app #page .sale-editor .customer-create-slot { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-left:auto; }
 #app #page .sale-editor .customer-create-slot>button { min-height:36px; padding:7px 10px; font-size:12px; white-space:nowrap; }
 html:root #app #page .sale-editor .customer-create-slot>button.customer-icon-action { display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; min-height:40px; padding:0; border-radius:9px; }
 html:root #app #page .sale-editor .customer-icon-action .icon { width:18px; height:18px; margin:0; }
 #app #page .sale-editor>.panel { border-radius:12px; border:1px solid var(--ds-line); background:var(--ds-surface); box-shadow:0 2px 6px #10182803; }
 #app #page .sale-editor .flow-item>.panel-body { padding:20px; }
 #app #page .sale-editor .product-field-heading { min-height:20px; margin-bottom:0; color:var(--ds-text); }
 #app #page .sale-editor .sale-item-organized>.item-product { margin-bottom:16px; }
 #app #page .sale-editor .item-product .select-trigger { font-weight:500; }
 #app #page .sale-editor .item-catalog-info {
  min-height:40px; padding:9px 12px; border:1px solid var(--ds-line);
  border-radius:8px; background:var(--ds-surface-alt); color:var(--ds-muted);
 }
 #app #page .sale-editor .item-catalog-info small { color:var(--ds-muted); font-size:12px; }
 #app #page .sale-editor .serial-sale-field {
  padding:12px 14px; margin-top:14px; background:var(--ds-accent-soft);
  border:1px solid color-mix(in srgb,var(--ds-accent) 30%,var(--ds-line)); border-radius:10px;
 }
 #app #page .sale-editor .serial-selection-required { background:var(--ds-form-warning-soft); border-color:color-mix(in srgb,var(--ds-form-warning) 45%,var(--ds-line)); }
 #app #page .sale-editor .serial-selection-heading { color:var(--ds-text); font-weight:600; }
 #app #page .sale-editor .serial-selection-content>small { font-size:12px; color:var(--ds-muted); }
 #app #page .sale-editor .item-secondary-actions { margin-top:14px; padding-top:12px; border-color:var(--ds-line); }
 #app #page .sale-editor .item-entry-costs { border:1px solid var(--ds-line); border-radius:8px; background:var(--ds-surface-alt); color:var(--ds-muted); }
 #app #page .sale-editor .item-details-fields { border-color:var(--ds-line); }
 #app #page .sale-editor .editable-payment { padding:16px; background:var(--ds-surface-alt); border:1px solid var(--ds-line); border-radius:10px; }
 #app #page .sale-editor .editable-payment .payment-row { padding:0; background:transparent; }
 html:root :is(#app #page,dialog#modal) .trade-in-help { margin:0; padding:10px 0 0; border:0; border-top:1px solid var(--ds-line); border-radius:0; background:transparent; color:var(--ds-muted); font-size:12px; line-height:1.5; }
 html:root :is(#app #page,dialog#modal) .trade-in-payment-fields { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; gap:12px 16px; }
 html:root :is(#app #page,dialog#modal) .trade-in-payment-fields .trade-in-product { grid-column:1; margin:0; gap:8px; }
 html:root :is(#app #page,dialog#modal) .trade-in-payment-fields:not(:has(.trade-in-serial)) .trade-in-product { grid-column:1/-1; }
 html:root :is(#app #page,dialog#modal) .trade-in-payment-fields .trade-in-serial { grid-column:2; margin:0; gap:8px; }
 html:root :is(#app #page,dialog#modal) .trade-in-search-row { display:flex; gap:8px; min-width:0; align-items:stretch; }
 html:root :is(#app #page,dialog#modal) .trade-in-search-row>.select-control { flex:1; min-width:0; }
 html:root :is(#app #page,dialog#modal) .trade-in-create { flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; }
 html:root :is(#app #page,dialog#modal) .trade-in-create>.icon { width:18px; height:18px; margin:0; }
 html:root #app #page .sale-editor .sale-products-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:13px; color:var(--ds-muted); }
 html:root #app #page .sale-editor .sale-product-list { display:grid; gap:10px; min-width:0; }
 html:root #app #page .sale-editor .sale-product-item { min-width:0; border:1px solid var(--ds-line); border-radius:10px; background:var(--ds-surface); }
 html:root #app #page .sale-editor .sale-product-summary { display:grid; grid-template-columns:26px minmax(0,1fr) auto 20px; gap:10px; align-items:center; padding:12px 14px; min-height:52px; cursor:pointer; list-style:none; color:var(--ds-text); }
 html:root #app #page .sale-editor .sale-product-summary::-webkit-details-marker { display:none; }
 html:root #app #page .sale-editor :is(.sale-product-summary,.summary-payments>summary)::after { content:none; display:none; }
 html:root #app #page .sale-editor .sale-product-name { overflow-wrap:anywhere; font-size:14px; }
 html:root #app #page .sale-editor .sale-product-number { color:var(--ds-muted); font-size:12px; }
 html:root #app #page .sale-editor .sale-product-amount { font-size:13px; font-variant-numeric:tabular-nums; }
 html:root #app #page .sale-editor .sale-product-chevron { display:flex; color:var(--ds-accent); }
 html:root #app #page .sale-editor .sale-product-chevron .icon { width:18px; height:18px; }
 html:root #app #page .sale-editor .sale-product-item[open]>.sale-product-summary { border-bottom:1px solid var(--ds-line); }
 html:root #app #page .sale-editor .sale-product-item[open]>.sale-product-summary .sale-product-chevron { transform:rotate(180deg); }
 html:root #app #page .sale-editor .sale-product-item>.panel-body { padding:14px; }
 html:root #app #page .sale-editor .sale-product-item .sale-item { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
 html:root #app #page .sale-editor .sale-payment-item .editable-payment { padding:0; margin:0; border:0; border-radius:0; background:transparent; }
 #app #page .sale-editor .summary-total { padding:14px 16px; margin-bottom:12px; border-radius:10px; background:var(--ds-accent-soft); color:var(--ds-text); }
 html:root #app #page .sale-editor .summary-balance { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; margin-bottom:12px; border:1px solid var(--ds-line); border-radius:10px; }
 html:root #app #page .sale-editor .summary-balance.is-due { background:var(--ds-form-danger-soft); border-color:color-mix(in srgb,var(--ds-form-danger) 45%,var(--ds-line)); color:var(--ds-form-danger); border-left:4px solid var(--ds-form-danger); }
 html:root #app #page .sale-editor .summary-balance.is-due strong { font-size:24px; }
 html:root #app #page .sale-editor .summary-balance.is-over { background:var(--ds-form-warning-soft); color:var(--ds-form-warning); }
 html:root #app #page .sale-editor .summary-payments>summary { display:grid; grid-template-columns:minmax(0,1fr) auto 18px; gap:10px; min-height:44px; cursor:pointer; list-style:none; }
 html:root #app #page .sale-editor .summary-payments>summary::-webkit-details-marker { display:none; }
 html:root #app #page .sale-editor .summary-payments>summary .icon { width:18px; height:18px; color:var(--ds-accent); }
 html:root #app #page .sale-editor .summary-payments[open]>summary .icon { transform:rotate(180deg); }
 html:root #app #page .sale-editor .summary-payment-list { padding:0 12px; background:var(--ds-surface-alt); border-radius:8px; }
 html:root #app #page .sale-editor .summary-payment-row { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--ds-line); font-size:13px; }
 html:root #app #page .sale-editor .summary-payment-row:last-child { border-bottom:0; }
 html:root #app #page .sale-editor .summary-payment-row small { display:block; margin-top:4px; color:var(--ds-muted); font-size:12px; }
 #app #page .sale-editor .summary-total .metric-value { font-size:30px; line-height:1.15; letter-spacing:-.045em; color:var(--ds-accent); margin:6px 0; }
 #app #page .sale-editor .summary-total .eyebrow { font-size:11px; letter-spacing:.07em; color:var(--ds-muted); }
 html:root #app #page .sale-editor .summary-total { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; }
 html:root #app #page .sale-editor .summary-total .metric-value { grid-column:1; font-size:26px; margin:0; }
 html:root #app #page .sale-editor .summary-total>p { grid-column:2; grid-row:1/3; align-self:center; margin:0; font-size:12px; }
 html:root #app #page .sale-editor .summary-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-top:16px; gap:10px; }
 html:root #app #page .sale-editor .summary-actions>button { flex:0 1 auto; width:auto; height:44px; min-height:44px; max-height:44px; padding:10px 16px; font-size:14px; line-height:20px; }

 /* Inventory/payment reviews keep confirmations and all serials visible. */
 dialog#modal #stock-entry-form .serial-batch { border:1px solid var(--ds-line); border-radius:10px; background:var(--ds-surface-alt); padding:12px 14px; }
 dialog#modal #stock-entry-form .serial-batch>summary { color:var(--ds-accent); font-size:13px; font-weight:600; }
 dialog#modal #stock-entry-form [data-entry-unit] { padding:12px; border-radius:10px; background:var(--ds-surface-alt); border-color:var(--ds-line); }
 dialog#modal #stock-entry-form .serial-pages { padding:8px 0; color:var(--ds-muted); }
 dialog#modal #inventory-posting-form { padding:18px 22px; gap:12px; }
 dialog#modal #inventory-posting-form .stock-posting-lines { border-color:var(--ds-line); border-radius:10px; }
 dialog#modal #inventory-posting-form .stock-posting-lines>li { padding:11px 12px; border-color:var(--ds-line); background:var(--ds-surface-alt); }
 dialog#modal #inventory-posting-form .stock-posting-lines strong { color:var(--ds-text); }
 dialog#modal :is(.stock-posting-ack,.cancellation-ack,.commission-confirm) { padding:12px 14px; border:1px solid var(--ds-line); border-radius:10px; background:var(--ds-surface-alt); }
 dialog#modal #inventory-posting-form .actions>button[type="submit"].danger { background:#b42318; border-color:#b42318; color:#fff; }
 dialog#modal #inventory-posting-form .actions>button[type="submit"].danger:hover { background:#912018; border-color:#912018; color:#fff; }
 dialog#modal #payment-form .payment-modal-fields { gap:16px; }

 /* Popovers attach to body or to an open dialog. Both contexts use the same
    palette, including the dialog's higher-specificity legacy dark rules. */
 .select-popover,.date-calendar {
  background:var(--ds-surface); color:var(--ds-text); border:1px solid var(--ds-line);
  border-radius:12px; box-shadow:0 16px 40px #10182829,0 3px 8px #1018280d;
  font-family:"Segoe UI",system-ui,sans-serif;
 }
 .select-popover .select-search { min-height:40px; padding:10px 12px; border-color:var(--ds-line); border-radius:8px; background:var(--ds-surface-alt); color:var(--ds-text); font-size:14px; }
 .select-popover .select-option { min-height:40px; padding:10px 12px; border-radius:7px; color:var(--ds-text); background:var(--ds-surface); font-size:13px; line-height:1.45; }
 .select-popover .select-option:is(:hover,.is-highlighted,[aria-selected="true"]) { color:var(--ds-accent); background:var(--ds-accent-soft); }
 .select-popover .select-option-label { white-space:normal; overflow-wrap:anywhere; }
 .select-popover .select-option-check { color:var(--ds-accent); }
 :is(#app #page,dialog#modal,body) .select-popover { background:var(--ds-surface); color:var(--ds-text); border-color:var(--ds-line); }
 :is(#app #page,dialog#modal,body) .select-popover .select-option { color:var(--ds-text); background:var(--ds-surface); }
 :is(#app #page,dialog#modal,body) .select-popover .select-option:is(:hover,.is-highlighted,[aria-selected="true"]) { color:var(--ds-accent); background:var(--ds-accent-soft); }
 :is(#app #page,dialog#modal,body) .select-popover .select-option-check { color:var(--ds-accent); }
 html:root body .select-popover[data-select-kind="status"] { padding:6px; border-radius:12px; }
 html:root body .select-popover[data-select-kind="status"] .select-options { display:grid; gap:3px; }
 html:root body .select-popover[data-select-kind="status"] .select-option { min-height:44px; border:0; box-shadow:none; padding:10px 12px; border-radius:7px; font-size:14px; font-weight:500; }
 html:root body .select-popover[data-select-kind="status"] .select-option[aria-selected="true"] { font-weight:600; }
 :is(.select-popover,.date-calendar) :is(button,input):focus-visible { outline:2px solid var(--ds-accent); outline-offset:2px; }
 .date-calendar { padding:14px; }
 .date-calendar button { border-radius:8px; color:var(--ds-text); }
 .date-calendar button:hover:not(:disabled) { background:var(--ds-surface-alt); border-color:var(--ds-line); }
 .date-calendar .calendar-heading>[data-calendar-shift] { background:var(--ds-surface-alt); border-color:var(--ds-line); color:var(--ds-text); }
 .date-calendar button[aria-pressed="true"] { background:#5154d9; border-color:#5154d9; color:#fff; }
 .date-calendar button[aria-current="date"] { border-color:var(--ds-accent); }
 .date-calendar .calendar-year input { background:var(--ds-surface-alt); border-color:var(--ds-line); color:var(--ds-text); border-radius:8px; }
 .date-calendar :is(.calendar-weekdays,.calendar-year) { color:var(--ds-muted); }
 .date-calendar .calendar-footer { border-color:var(--ds-line); }
 .date-calendar .calendar-footer>[data-calendar-today] { color:var(--ds-accent); }
 #app #page .calendar-date-input>.calendar-open { background:var(--ds-surface-alt); color:var(--ds-accent); border-color:var(--ds-line); }

 @media (min-width:1000px) and (max-height:800px) {
  :is(#app #page,dialog#modal) .mobile-flow .flow-heading { padding:10px 14px; margin-bottom:10px; }
  #app #page .sale-editor .flow-item>.panel-body { padding:16px; }
  #app #page .sale-editor .sale-item-organized>.item-product { margin-bottom:12px; }
  #app #page .sale-editor .serial-sale-field { padding:8px 12px; margin-top:10px; }
  #app #page .sale-editor .item-secondary-actions { padding-top:10px; margin-top:10px; }
  #app #page .sale-editor .flow-navigation { padding:8px 10px; margin-top:8px; }
  dialog#modal .modal-header { padding:12px 20px; }
  dialog#modal .modal-content { padding:16px 20px; }
  dialog#modal .workspace-steps { margin-bottom:14px; }
 }
 @media (max-width:700px) {
  html:root #app #page .sale-detail-status-picker .select-trigger { min-height:44px; }
  html:root :is(#app #page,dialog#modal) .trade-in-payment-fields { grid-template-columns:minmax(0,1fr); }
  html:root :is(#app #page,dialog#modal) .trade-in-payment-fields .trade-in-serial { grid-column:1; }
  html:root #app #page .sale-editor .sale-product-summary { grid-template-columns:22px minmax(0,1fr) 18px; gap:6px 8px; padding:10px; }
  html:root #app #page .sale-editor .sale-product-amount { grid-column:2; grid-row:2; }
  html:root #app #page .sale-editor .sale-product-chevron { grid-column:3; grid-row:1/3; }
  html:root #app #page .sale-editor .summary-actions>button { flex:1 1 160px; }
  :is(#app #page,dialog#modal) .fields { gap:12px; }
  :is(#app #page,dialog#modal) :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"])),select,.select-trigger) { min-height:44px; font-size:14px; }
  dialog#modal { max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:14px; }
  dialog#modal:has(:is(#product-form,#customer-form,#permissions-form,#payment-form,#stock-entry-form,#inventory-posting-form)) { width:calc(100vw - 16px); max-width:calc(100vw - 16px); }
  dialog#modal .modal-header { padding:10px 14px; gap:10px; }
  dialog#modal .modal-header h2 { font-size:17px; }
  dialog#modal .modal-header>button { min-height:44px; height:44px; width:44px; }
  dialog#modal :is(.modal-content,#inventory-posting-form) { padding:16px 14px; }
  dialog#modal .modal-content>.actions { margin-top:14px; padding-top:12px; flex-wrap:wrap; }
  dialog#modal :is(.actions,.flow-navigation,.workspace-step-navigation)>button { min-height:44px; }
  dialog#modal .permission-grid label { padding:12px; min-height:48px; }
  dialog#modal .workspace-step-title { font-size:15px; margin-bottom:12px; }
  :is(#app #page,dialog#modal) .mobile-flow .flow-heading { padding:12px; gap:4px 10px; }
  :is(#app #page,dialog#modal) .mobile-flow .flow-heading h2 { font-size:16px; }
  :is(#app #page,dialog#modal) .mobile-flow .flow-review { min-height:44px; padding:8px 10px; }
  #app #page .sale-editor .flow-item>.panel-body { padding:14px; }
  #app #page .sale-editor .customer-create-slot>button { min-height:44px; }
  html:root #app #page .sale-editor .customer-create-slot>button.customer-icon-action { width:44px; height:44px; min-height:44px; }
  #app #page .sale-editor .serial-sale-field { padding:12px; }
  #app #page .sale-editor .flow-navigation>button { min-height:44px; min-width:0; padding:10px 12px; }
  #app #page .sale-editor .editable-payment { padding:12px; }
  #app #page .sale-editor .item-values { gap:8px; }
  .select-popover .select-option,.date-calendar button { min-height:44px; }
  .date-calendar { padding:10px; }
 }

 /* Attributes belong to the workflows. Late visual rules must never expose
    hidden steps, secondary controls, errors or recovery actions. */
 :is(#app #page,dialog#modal) [hidden],.select-popover [hidden],.date-calendar [hidden] { display:none!important; }
 @media (prefers-reduced-motion:reduce) {
  :is(#app #page,dialog#modal) :is(input,select,textarea,.select-trigger,button),
  :is(.select-popover,.date-calendar) * { transition:none!important; }
 }
}