/* Generated Demo CSS bundle. Do not edit directly. */
/* Source order: app.css imports, then components/demo-app.css. */

/* --- core/tokens.css --- */
/* Compatibility shim for split token layers. */

/* --- core/theme.css --- */
html,
html[data-theme="light"] {
  color-scheme: light;
  --accent-color: #0d6efd;
  --positive-text: #1e7a3b;
  --positive-bg: #e6f4ea;
  --warning-color: hsl(41 100% 24%);
  --warning-bg: hsl(50 100% 92%);
  --negative-text: #b3261e;
  --negative-bg: #fdebec;
  --bg-1: hsl(210, 10%, 93%);
  --bg-2: hsl(210, 14%, 95%);
  --bg-3: hsl(200, 33%, 98%);
  --border-1: hsl(210, 6%, 78%);
  --surface-accent-color: var(--accent-color);
  --surface-depth-0: var(--bg-1);
  --surface-depth-1: color-mix(in srgb, var(--bg-2) 96%, var(--surface-accent-color) 4%);
  --surface-depth-2: color-mix(in srgb, var(--bg-3) 97%, var(--surface-accent-color) 3%);
  --surface-depth-3: color-mix(in srgb, #fff 96%, var(--surface-accent-color) 4%);
  --surface-z-content: var(--surface-depth-1);
  --surface-z-elevated: var(--surface-depth-2);
  --surface-z-overlay: var(--surface-depth-3);
  --surface-base: var(--surface-z-content);
  --surface-1: var(--surface-base);
  --surface-subtle: var(--surface-depth-2);
  --surface-sunken: var(--surface-depth-0);
  --surface-border-1: color-mix(in srgb, var(--border-1) 84%, var(--surface-accent-color) 16%);
  --surface-border-2: color-mix(in srgb, var(--border-1) 78%, var(--surface-accent-color) 22%);
  --surface-border-3: color-mix(in srgb, var(--border-1) 72%, var(--surface-accent-color) 28%);
  --text-strong: hsl(0, 0%, 0%);
  --text-normal: hsl(0, 0%, 15%);
  --text-muted: hsl(0, 0%, 35%);
  --text-inverse: #fff;
  --overlay-ink: #000;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --positive-text: #7ddea0;
  --positive-bg: #153a27;
  --warning-color: hsl(48 100% 76%);
  --warning-bg: hsl(46 52% 18%);
  --negative-text: #ffb3b8;
  --negative-bg: #3a1518;
  --bg-1: hsl(0, 0%, 2%);
  --bg-2: hsl(0, 0%, 5%);
  --bg-3: hsl(0, 0%, 7%);
  --border-1: hsl(0, 0%, 20%);
  --surface-accent-color: var(--accent-color);
  --surface-depth-0: var(--bg-1);
  --surface-depth-1: color-mix(in srgb, var(--bg-2) 96%, var(--surface-accent-color) 4%);
  --surface-depth-2: color-mix(in srgb, var(--bg-3) 97%, var(--surface-accent-color) 3%);
  --surface-depth-3: color-mix(in srgb, hsl(0, 0%, 10%) 96%, var(--surface-accent-color) 4%);
  --surface-z-content: var(--surface-depth-1);
  --surface-z-elevated: var(--surface-depth-2);
  --surface-z-overlay: var(--surface-depth-3);
  --surface-base: var(--surface-z-content);
  --surface-1: var(--surface-base);
  --surface-subtle: var(--surface-depth-2);
  --surface-sunken: var(--surface-depth-0);
  --surface-border-1: color-mix(in srgb, var(--border-1) 84%, var(--surface-accent-color) 16%);
  --surface-border-2: color-mix(in srgb, var(--border-1) 78%, var(--surface-accent-color) 22%);
  --surface-border-3: color-mix(in srgb, var(--border-1) 72%, var(--surface-accent-color) 28%);
  --text-strong: hsl(0, 0%, 100%);
  --text-normal: hsl(0, 0%, 85%);
  --text-muted: hsl(0, 0%, 65%);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --positive-text: #7ddea0;
    --positive-bg: #153a27;
    --warning-color: hsl(48 100% 76%);
    --warning-bg: hsl(46 52% 18%);
    --negative-text: #ffb3b8;
    --negative-bg: #3a1518;
    --bg-1: hsl(0, 0%, 2%);
    --bg-2: hsl(0, 0%, 5%);
    --bg-3: hsl(0, 0%, 7%);
    --border-1: hsl(0, 0%, 20%);
    --surface-accent-color: var(--accent-color);
    --surface-depth-0: var(--bg-1);
    --surface-depth-1: color-mix(in srgb, var(--bg-2) 96%, var(--surface-accent-color) 4%);
    --surface-depth-2: color-mix(in srgb, var(--bg-3) 97%, var(--surface-accent-color) 3%);
    --surface-depth-3: color-mix(in srgb, hsl(0, 0%, 10%) 96%, var(--surface-accent-color) 4%);
    --surface-z-content: var(--surface-depth-1);
    --surface-z-elevated: var(--surface-depth-2);
    --surface-z-overlay: var(--surface-depth-3);
    --surface-base: var(--surface-z-content);
    --surface-1: var(--surface-base);
    --surface-subtle: var(--surface-depth-2);
    --surface-sunken: var(--surface-depth-0);
    --surface-border-1: color-mix(in srgb, var(--border-1) 84%, var(--surface-accent-color) 16%);
    --surface-border-2: color-mix(in srgb, var(--border-1) 78%, var(--surface-accent-color) 22%);
    --surface-border-3: color-mix(in srgb, var(--border-1) 72%, var(--surface-accent-color) 28%);
    --text-strong: hsl(0, 0%, 100%);
    --text-normal: hsl(0, 0%, 85%);
    --text-muted: hsl(0, 0%, 65%);
  }
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    color-scheme: light;
  }
}

/* --- core/foundation.css --- */
html {
  font-size: 15px;

  --space-1: 7px;
  --space-2: 14px;
  --space-3: 20px;
  --space-4: 28px;

  --font-family-base: "Aptos", "Segoe UI", "Trebuchet MS", system-ui, -apple-system, sans-serif;
  --font-size-base: 0.875rem;
  --line-height-base: 1.4;
  --line-height-heading: 1.25;
  --line-height-tight: 1;
  --font-size-h1: 1.5rem;
  --font-size-h2: 1.25rem;
  --font-size-h3: 1.125rem;
  --font-size-label: 0.95rem;
  --content-font-size: 0.8125rem;
  --auth-shell-font-size: var(--content-font-size);
  --auth-title-size: 1.12rem;
  --content-section-title-size: 0.98rem;
  --content-section-summary-size: 0.87rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-wide: 0.02em;
  --text-transform-label: uppercase;

  --layout-header-h: 52px;
  --layout-footer-h: 52px;
  --layout-inline-pad: 14px;
  --layout-max-inline: 100vw;
  --layout-shell-gap: 12px;
  --page-subtitle-size: 0.82rem;
  --page-alert-gap: var(--space-1);
  --page-panel-pad-y: calc(var(--space-2) - 1px);
  --page-panel-pad-x: calc(var(--space-2) + 2px);
  --page-controls-pad-y: 10px;
  --page-controls-pad-x: var(--space-2);
  --control-row-gap: 8px;
  --control-row-cols-desktop: repeat(12, minmax(0, 1fr));
  --control-row-cols-tablet: repeat(6, minmax(0, 1fr));
  --control-row-cols-mobile: 1fr;
  --control-row-item-column-desktop: span 2;
  --control-row-label-column-desktop: span 2;
  --control-row-item-column-tablet: span 3;
  --control-row-label-column-tablet: 1 / -1;
  --control-row-item-column-mobile: 1 / -1;
  --meta-pairs-min: 208px;

  --radius-2xs: 2px;
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card: var(--radius-md);
  --radius-pill: 999px;

  --z-content: 1000;
  --z-sticky-header: 1010;
  --z-sticky-col: 1015;
  --z-header: 1020;
  --z-footer: 1020;
  --z-sidebar-backdrop: 1024;
  --z-sidebar: 1025;
  --z-focus-overlay: 1030;
  --z-modal: 1050;
  --z-alert-banner: 1060;
  --z-popover: 1070;
  --z-tooltip: 1070;
  --z-cookie: 1080;

  --motion-fast: 0.14s;
  --motion-base: 0.18s;
  --motion-ease: ease;
  --motion-ease-emphasized: ease-in-out;

  --surface-sheet-radius: var(--radius-md) var(--radius-md) 0 0;
  --elevation-1: 0 14px 28px color-mix(in srgb, var(--overlay-ink) 10%, transparent);
  --elevation-2: 0 14px 32px color-mix(in srgb, var(--overlay-ink) 18%, transparent);
  --elevation-3: 0 16px 36px color-mix(in srgb, var(--overlay-ink) 22%, transparent);
  --overlay-backdrop: color-mix(in srgb, var(--overlay-ink) 24%, transparent);

  --bs-body-color: var(--text-normal);
  --bs-body-bg: var(--bg-1);
  --bs-border-color: var(--border-1);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-bg: var(--bg-2);
}

@media (max-width: 991.98px) {
  html {
    font-size: 16px;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;

    --layout-header-h: 56px;
    --layout-footer-h: 56px;
    --layout-inline-pad: 16px;
    --layout-shell-gap: 16px;
    --page-panel-pad-y: var(--space-2);
    --page-panel-pad-x: calc(var(--space-2) + 4px);
    --page-controls-pad-y: 12px;
    --page-controls-pad-x: var(--space-2);
    --control-row-gap: 10px;
    --meta-pairs-min: 220px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-normal);
  background: var(--surface-depth-0);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

html,
body,
input,
button,
select,
textarea,
summary {
  font-family: var(--font-family-base);
  font-size: inherit;
}

body > * {
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--accent-color);
}

a:hover {
  color: var(--accent-color);
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  color: var(--text-strong);
  line-height: var(--line-height-heading);
}

h1,
.h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
}

h2,
.h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}

h3,
.h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}






/* --- core/component-tokens.css --- */
html {
  --cookie-notice-offset: 0px;
  --table-stack-gap: 10px;

  --control-square-size: 36px;
  --sidebar-gap: var(--space-2);
  --sidebar-pad: var(--space-1);
  --sidebar-shell-pad-block: var(--sidebar-pad);
  --sidebar-shell-pad-inline: var(--layout-inline-pad);
  --sidebar-live-collapsed: calc(var(--control-square-size) + var(--layout-inline-pad));
  --sidebar-live-expanded: clamp(196px, 18vw, 248px);
  --sidebar-group-gap: var(--space-2);
  --sidebar-item-gap: var(--space-1);
  --sidebar-item-pad-y: calc(var(--space-1) - 1px);
  --sidebar-item-pad-x: calc(var(--space-1) + 1px);
  --sidebar-item-min-h: calc(var(--space-2) + var(--space-1) + 10px);
  --sidebar-item-radius: 0;
  --sidebar-nav-stack-gap: 6px;
  --sidebar-top-offset: var(--layout-header-h);
  --sidebar-bottom-offset: var(--layout-footer-h);
  --sidebar-max-inline-size: fit-content(92vw);
  --sidebar-mobile-hidden-x: 0px;
  --sidebar-mobile-radius: 0;
  --sidebar-mobile-inline-size: min(22rem, calc(100vw - 24px));
  --sidebar-mobile-max-h-gap: var(--space-2);
  --sidebar-surface-radius: 0;
  --sidebar-divider-width: 1px;
  --sidebar-active-bg-mix: 10%;
  --sidebar-active-border-mix: 38%;
  --sidebar-backdrop-opacity: 24%;
  --sidebar-motion-fast: var(--motion-fast);
  --sidebar-motion-ease: var(--motion-ease);
  --sidebar-icon-size: 16px;
  --sidebar-icon-stroke-width: 1.8;

  --accordion-gap: var(--space-2);
  --accordion-summary-pad-y: calc(var(--space-2) - 1px);
  --accordion-summary-pad-x: var(--space-2);
  --accordion-summary-min-h: 40px;
  --accordion-content-gap: var(--space-2);
  --accordion-chevron-size: 0.5rem;
  --accordion-chevron-stroke: 2px;

  --form-control-min-h: 32px;
  --form-control-font-size: 0.78rem;
  --form-label-font-size: 0.78rem;
  --form-control-pad-y: calc(var(--space-1) - 1px);
  --form-control-pad-x: var(--space-1);
  --form-control-radius: var(--radius-sm);
  --form-focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color) 22%, transparent);
  --form-grid-columns: max-content minmax(0, 1fr);
  --form-grid-row-gap: var(--space-1);
  --form-grid-col-gap: var(--space-2);
  --phone-country-inline: 148px;
  --checkbox-size: 13px;

  --btn-min-h: 36px;
  --btn-pad-y: 7px;
  --btn-pad-x: 14px;
  --header-toggle-font-size: 0.78rem;
  --footer-link-font-size: 0.74rem;
  --footer-meta-font-size: 0.7rem;
  --tag-font-size: 0.72rem;
  --tag-gap: 5px;
  --tag-pad-y: 5px;
  --tag-pad-x: 10px;
  --chip-pad-y: 2px;
  --chip-pad-x: 7px;
  --chip-font-size: 0.71rem;

  --table-head-font-size: 0.71rem;
  --table-cell-font-size: 0.76rem;
  --table-head-pad-y: 7px;
  --table-head-pad-x: 6px;
  --table-cell-pad-y: 6px;
  --table-cell-pad-x: 6px;
  --table-hover-mix: 6%;
  --table-col-min: 60px;
  --table-col-max: 300px;
  --table-row-num-col-width: 44px;
  --table-row-num-font-size: 0.6rem;
  --table-freeze-col-1-w: var(--table-row-num-col-width);
  --table-freeze-col-2-w: 112px;
  --table-freeze-col-3-w: 104px;
  --table-freeze-col-4-w: 72px;
  --table-freeze-col-5-w: 102px;
  --table-freeze-col-6-w: 102px;
  --table-freeze-col-7-w: 102px;
  --table-freeze-col-8-w: 102px;
  --table-freeze-col-9-w: 102px;
  --table-freeze-col-10-w: 102px;
  --table-freeze-col-11-w: 102px;
  --table-freeze-col-12-w: 102px;
  --table-sticky-col-1-left: 0px;
  --table-sticky-col-2-left: var(--table-freeze-col-1-w);
  --table-sticky-col-3-left: calc(var(--table-freeze-col-1-w) + var(--table-freeze-col-2-w));
  --table-sticky-col-4-left: calc(var(--table-freeze-col-1-w) + var(--table-freeze-col-2-w) + var(--table-freeze-col-3-w));
  --table-sticky-col-5-left: calc(var(--table-freeze-col-1-w) + var(--table-freeze-col-2-w) + var(--table-freeze-col-3-w) + var(--table-freeze-col-4-w));
  --table-sticky-col-6-left: calc(var(--table-sticky-col-5-left) + var(--table-freeze-col-5-w));
  --table-sticky-col-7-left: calc(var(--table-sticky-col-6-left) + var(--table-freeze-col-6-w));
  --table-sticky-col-8-left: calc(var(--table-sticky-col-7-left) + var(--table-freeze-col-7-w));
  --table-sticky-col-9-left: calc(var(--table-sticky-col-8-left) + var(--table-freeze-col-8-w));
  --table-sticky-col-10-left: calc(var(--table-sticky-col-9-left) + var(--table-freeze-col-9-w));
  --table-sticky-col-11-left: calc(var(--table-sticky-col-10-left) + var(--table-freeze-col-10-w));
  --table-sticky-col-12-left: calc(var(--table-sticky-col-11-left) + var(--table-freeze-col-11-w));
  --options-table-btn-min-h: 28px;

  --etl-row-gap: var(--space-2);
  --etl-col-gap: var(--space-2);
  --etl-tight-gap: var(--space-1);
  --etl-separator-gap: var(--space-3);
  --etl-pill-radius: var(--radius-sm);
}

@media (max-width: 991.98px) {
  html {
    --control-square-size: 40px;
    --accordion-summary-pad-y: var(--space-2);
    --accordion-summary-min-h: 44px;
    --form-control-min-h: 34px;
    --form-control-font-size: 0.76rem;
    --form-label-font-size: 0.76rem;
    --btn-min-h: 40px;
    --btn-pad-y: 8px;
    --btn-pad-x: 16px;
    --header-toggle-font-size: 0.77rem;
    --footer-link-font-size: 0.75rem;
    --footer-meta-font-size: 0.71rem;
    --table-head-font-size: 0.67rem;
    --table-cell-font-size: 0.72rem;
    --table-head-pad-y: 6px;
    --table-head-pad-x: 5px;
    --table-cell-pad-y: 6px;
    --table-cell-pad-x: 5px;
    --table-col-min: 56px;
    --table-col-max: 240px;
    --table-row-num-col-width: 40px;
    --table-row-num-font-size: 0.58rem;
    --table-freeze-col-2-w: 92px;
    --table-freeze-col-3-w: 96px;
    --table-freeze-col-4-w: 64px;
    --table-freeze-col-5-w: 84px;
    --table-freeze-col-6-w: 84px;
    --table-freeze-col-7-w: 84px;
    --table-freeze-col-8-w: 84px;
    --table-freeze-col-9-w: 84px;
    --table-freeze-col-10-w: 84px;
    --table-freeze-col-11-w: 84px;
    --table-freeze-col-12-w: 84px;
  }
}







/* --- layout/header.css --- */
.global-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--border-1);
  background: color-mix(in hsl, var(--bg-3) 88%, transparent);
  backdrop-filter: blur(6px);
}

.global-header .layout-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-inline-start: 0;
  padding-inline-end: var(--layout-inline-pad, 16px);
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  min-block-size: var(--layout-header-h);
  gap: 12px;
}

.header-left-controls,
.header-right-controls {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.header-left-controls {
  min-width: 0;
}

.header-right-controls {
  margin-left: auto;
  flex: 0 0 auto;
}

.sidepanel-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sidebar-live-collapsed);
  height: var(--control-square-size, 40px);
  border: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--bg-3);
  color: var(--text-normal);
  cursor: pointer;
  flex: 0 0 auto;
}

.sidepanel-open-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.screen-caption-main,
.screen-caption-current {
  font-size: inherit;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-normal);
}

.screen-caption-main {
  display: inline-flex;
  align-items: center;
  border-left: 1px solid var(--border-1);
  margin-left: 8px;
  padding-left: 12px;
  white-space: nowrap;
}

.screen-caption-current {
  margin-left: 6px;
}

details > summary {
  list-style: none;
}

details > summary::marker {
  content: "";
  font-size: 0;
}

details > summary::-webkit-details-marker {
  display: none;
}

.header-popover {
  position: relative;
  z-index: var(--z-popover);
}

.header-popover-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  min-height: 40px;
  padding: 8px 12px;
  background: var(--bg-3);
  color: var(--text-normal);
  font-size: var(--header-toggle-font-size);
  font-weight: 600;
  line-height: 1;
}

.header-popover-toggle > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.theme-runtime-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  font-weight: 600;
  font-size: calc(var(--header-toggle-font-size) - 0.03rem);
  color: var(--text-normal);
  line-height: 1;
}

.header-popover-panel {
  display: grid;
  position: absolute;
  right: 0;
  top: 100%;
  width: max-content;
  min-width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 8px;
  z-index: var(--z-popover);
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease),
    visibility var(--motion-fast) var(--motion-ease);
}

.header-dropdown-panel form {
  margin: 0;
  width: 100%;
}

.header-popover[open] .header-popover-panel,
.header-popover:hover .header-popover-panel,
.header-popover:focus-within .header-popover-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.header-popover-panel a {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
  width: 100%;
  color: var(--text-normal);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--header-toggle-font-size);
}

.header-popover-panel a:hover {
  background: var(--bg-2);
  color: var(--accent-color);
}

.dropdown-option {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-normal);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
  font: inherit;
  font-size: var(--header-toggle-font-size);
  cursor: pointer;
}

.dropdown-option:hover,
.dropdown-option:focus-visible,
.dropdown-option.is-active {
  background: var(--bg-2);
  color: var(--accent-color);
}

.user-role {
  margin: 0;
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: calc(var(--header-toggle-font-size) - 0.03rem);
}

.language-dropdown .header-dropdown-panel,
.theme-dropdown .header-dropdown-panel {
  min-width: 0;
  width: max-content;
}

.language-dropdown .dropdown-option,
.theme-dropdown .dropdown-option,
.language-dropdown .header-popover-toggle,
.theme-dropdown .header-popover-toggle {
  align-items: center;
}

.flag-svg,
.theme-svg {
  width: 16px;
  height: 16px;
  display: block;
  vertical-align: middle;
  flex: 0 0 auto;
}

.flag-svg {
  width: 18px;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--border-1) 70%, transparent);
  border-radius: var(--radius-2xs);
}

.header-popover-toggle .theme-svg,
.dropdown-option .theme-svg {
  color: currentColor;
}

.header-popover-toggle .theme-svg path,
.header-popover-toggle .theme-svg rect,
.header-popover-toggle .theme-svg circle,
.dropdown-option .theme-svg path,
.dropdown-option .theme-svg rect,
.dropdown-option .theme-svg circle {
  stroke: currentColor;
  fill: none;
}

.screen-caption-shell {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.screen-caption-shell.is-visible {
  opacity: 1;
  pointer-events: auto;
}








@media (max-width: 991.98px) {
  .header-popover-panel {
    right: 0;
    left: auto;
  }

  .screen-caption-main {
    display: none;
  }

  .header-left-controls {
    flex: 0 0 auto;
    min-inline-size: var(--control-square-size, 40px);
  }

  .header-right-controls {
    min-inline-size: 0;
    gap: 4px;
  }

  .sidepanel-open-btn {
    position: relative;
    z-index: calc(var(--z-content) + 1);
    inline-size: var(--control-square-size, 40px);
    min-inline-size: var(--control-square-size, 40px);
    touch-action: manipulation;
  }

  .theme-runtime-badge {
    gap: 4px;
    margin-left: 2px;
    font-size: calc(var(--header-toggle-font-size) - 0.02rem);
  }
}





/* --- layout/footer.css --- */
.global-footer {
  position: relative;
  z-index: var(--z-footer);
  border-top: 1px solid var(--border-1);
}

.global-footer .layout-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-inline: var(--layout-inline-pad);
}

.global-footer .footer-links-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--layout-footer-h);
  padding-block: var(--space-2);
}

.global-footer .footer-brand-shell,
.global-footer .footer-balance {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.22rem;
  color: var(--text-normal);
  white-space: nowrap;
}

.global-footer .footer-balance {
  justify-self: end;
  visibility: hidden;
  pointer-events: none;
}

.global-footer .footer-links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-self: center;
}

.global-footer a {
  color: var(--text-normal);
  text-decoration: none;
  font-size: var(--footer-link-font-size);
}

.global-footer a:hover {
  color: var(--accent-color);
}

.global-footer small {
  color: var(--text-muted);
  font-size: var(--footer-meta-font-size);
}

.global-footer .tiona-brandword {
  display: inline-block;
}

.global-footer .tiona-footer-lockup {
  position: relative;
  display: inline-block;
  width: max-content;
  padding-right: 1.06rem;
  padding-bottom: 0.24rem;
  line-height: 1;
}

.global-footer .tiona-brandword-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.045em;
  font-family: "Montserrat", var(--font-family-base);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.global-footer .tiona-brandword-text {
  display: inline-block;
  letter-spacing: 0.08em;
  line-height: 1;
}

.global-footer .tiona-brandword-o {
  display: block;
  width: 0.9em;
  height: 0.9em;
  flex: 0 0 auto;
  align-self: center;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
  transform: translateY(0.01em);
}

.global-footer .tiona-footer-beta-badge {
  position: absolute;
  right: 0.02rem;
  bottom: 0.02rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.064rem 0.19rem;
  border-radius: 999px;
  background: #24c26a;
  box-shadow: 0 0 0 1px #179451;
  color: #fff;
  font-size: 0.32rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.global-footer .footer-brand-meta {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.06rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1;
}

.global-footer .footer-brand-meta sup {
  font-size: 0.72em;
  line-height: 1;
}

@media (max-width: 767.98px) {
  .global-footer .footer-links-wrap {
    gap: var(--space-1);
  }

  .global-footer .tiona-brandword-logo {
    font-size: 0.88rem;
  }

  .global-footer .tiona-footer-lockup {
    padding-right: 0.94rem;
    padding-bottom: 0.21rem;
  }

  .global-footer .tiona-footer-beta-badge {
    padding: 0.056rem 0.16rem;
    font-size: 0.29rem;
  }

  .global-footer .footer-brand-meta {
    font-size: 0.62rem;
  }
}




/* --- components/surfaces.css --- */
.surface-base,
.hero-panel,
.panel,
.card,
.alert,
.table-wrap {
  border: 1px solid var(--surface-border-1);
  background: var(--surface-z-content);
  border-radius: var(--radius-md);
}

.surface-base .surface-base,
.surface-base .card,
.surface-base .panel,
.surface-base .table-wrap,
.card .surface-base,
.card .card,
.card .panel,
.card .table-wrap,
.panel .surface-base,
.panel .card,
.panel .panel,
.panel .table-wrap {
  border-color: var(--surface-border-2);
  background: var(--surface-z-elevated);
}

.surface-base .surface-base .surface-base,
.surface-base .surface-base .card,
.surface-base .card .surface-base,
.surface-base .card .card,
.card .surface-base .surface-base,
.card .surface-base .card,
.card .card .surface-base,
.card .card .card,
.panel .surface-base .surface-base,
.panel .surface-base .card,
.panel .card .surface-base,
.panel .card .card {
  border-color: var(--surface-border-3);
  background: var(--surface-z-overlay);
}

.surface-elevated {
  border-color: var(--surface-border-2);
  background: var(--surface-z-elevated);
  box-shadow: var(--elevation-1);
}

.surface-popover {
  border-color: var(--surface-border-3);
  background: var(--surface-z-overlay);
  box-shadow: var(--elevation-2);
}

.hero-panel {
  padding: calc(var(--space-4) - 2px);
}

.panel {
  padding: calc(var(--space-3) - 2px);
}

.card {
  overflow: hidden;
  padding: calc(var(--space-2) - 1px);
}

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.card .card-body {
  padding: calc(var(--space-2) - 1px) calc(var(--space-2) + 2px);
}

.text-muted {
  color: var(--text-muted);
}

.lead {
  color: var(--text-normal);
}

.small,
small {
  color: var(--text-muted);
}

.kpi-note {
  color: var(--text-muted);
  font-size: var(--tag-font-size);
  line-height: 1.3;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tag-gap);
  border-radius: var(--radius-pill);
  padding: var(--tag-pad-y) var(--tag-pad-x);
  border: 1px solid var(--border-1);
  background: var(--bg-2);
  color: var(--text-normal);
  font-size: var(--tag-font-size);
}

.positive {
  color: var(--positive-text);
  background: var(--positive-bg);
}

.negative {
  color: var(--negative-text);
  background: var(--negative-bg);
}

.alert-secondary {
  color: var(--text-normal);
  background: var(--bg-2);
  border-color: var(--border-1);
}






/* --- components/legal.css --- */
/* Legal and flat content blocks used by docs/about/privacy/terms pages. */
.legal-page {
  display: grid;
  gap: var(--space-2);
}

.legal-page h2 {
  margin: 0;
  font-size: var(--content-section-title-size);
}

.legal-page h3,
.legal-page h4 {
  margin: 0;
  color: var(--text-strong);
}

.legal-page p,
.legal-page li {
  color: var(--text-normal);
  font-size: var(--content-font-size);
}

.legal-page p:last-child,
.legal-page ul:last-child {
  margin-bottom: 0;
}

.legal-page ul {
  margin-block: 0;
}

.legal-page hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

.legal-page code {
  font-size: 0.94em;
}

.flat-list {
  margin: 0;
  padding-left: calc(var(--space-2) + 2px);
}

.legal-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  color: var(--text-muted);
  list-style: none;
}

.legal-meta-list li {
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  margin: 0;
  border: 1px solid var(--surface-border-2);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.75rem;
  background: var(--surface-z-elevated);
  color: var(--text-muted);
  font-size: var(--tag-font-size);
  line-height: 1.2;
}

.flat-list li + li {
  margin-top: calc(var(--space-1) - 2px);
}

.legal-meta-list li + li {
  margin-top: 0;
}

.legal-summary-title {
  color: var(--text-strong);
  font-weight: 600;
}

.legal-summary-brief {
  color: var(--text-muted);
  font-size: var(--content-font-size);
  line-height: 1.45;
}

.legal-details-copy {
  display: grid;
  gap: var(--space-2);
}

/* Docs / Wiki chapters reuse the legal surface, with stronger hierarchy. */
.accordion-stack.legal-accordion-stack.docs-wiki > details.docs-accordion {
  padding: clamp(1rem, 1.2vw, 1.35rem);
  border-color: var(--surface-border-1);
  background: var(--surface-z-content);
}

.accordion-stack.legal-accordion-stack.docs-wiki > details.docs-accordion > summary.docs-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: auto;
  padding: 0;
}

.accordion-stack.legal-accordion-stack.docs-wiki > details.docs-accordion > summary.docs-summary::after {
  content: "+";
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid color-mix(in srgb, var(--accent-color) 42%, var(--border-1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  opacity: 1;
  transform: none;
  transition: background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

.accordion-stack.legal-accordion-stack.docs-wiki > details.docs-accordion[open] > summary.docs-summary::after {
  content: "x";
  transform: none;
}

.docs-summary-text {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.docs-wiki .legal-summary-title {
  color: var(--text-strong);
  font-size: clamp(1.55rem, 2.1vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.docs-wiki .legal-summary-brief {
  max-inline-size: 68rem;
  color: var(--text-muted);
  font-size: clamp(0.9rem, 1vw, 1rem);
}

.docs-calculations {
  gap: clamp(1.1rem, 1.4vw, 1.6rem);
  padding-top: var(--space-2);
}

.docs-intro {
  max-inline-size: 76rem;
  margin: 0;
  border-left: 3px solid var(--accent-color);
  padding: 0.35rem 0 0.35rem var(--space-2);
  color: var(--text-normal);
}

.docs-metric-group {
  display: grid;
  gap: var(--space-2);
}

.docs-section-title {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.docs-section-title::after {
  content: "";
  display: block;
  inline-size: 3.5rem;
  block-size: 2px;
  margin-top: 0.45rem;
  background: var(--accent-color);
  border-radius: 999px;
}

.docs-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--space-2);
}

.docs-metric {
  display: grid;
  gap: 0.45rem;
  min-inline-size: 0;
  padding: var(--space-2);
  border: 1px solid var(--surface-border-2);
  border-radius: var(--radius-md);
  background: var(--surface-z-elevated);
}

.docs-metric-title {
  margin: 0;
  color: color-mix(in srgb, var(--accent-color) 62%, var(--text-strong));
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.18;
}

.docs-source-screen {
  color: var(--accent-color);
  font-weight: var(--font-weight-semibold);
}

.docs-metric p {
  margin: 0;
}

.docs-formula {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 16%, var(--border-1));
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
}

.accordion-stack.legal-accordion-stack.legal-docs {
  max-inline-size: min(100%, 1120px);
  margin-inline: auto;
}

.legal-docs .docs-summary-text {
  max-inline-size: min(100%, 72rem);
}

.legal-document-meta .legal-details-copy {
  padding-top: var(--space-2);
}

.legal-document-meta > summary.docs-summary .legal-summary-title {
  font-size: clamp(1.35rem, 1.9vw, 1.9rem);
  letter-spacing: -0.03em;
}

.legal-document-section > summary.docs-summary .legal-summary-title {
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
}

.legal-prose {
  gap: var(--space-2);
  max-inline-size: 88ch;
  margin-inline: auto;
  padding-block-start: var(--space-2);
  overflow-wrap: normal;
  word-break: normal;
}

.legal-prose p,
.legal-prose li {
  max-inline-size: 88ch;
  font-size: clamp(0.86rem, 0.95vw, 0.96rem);
  line-height: 1.62;
}

.legal-prose p {
  margin: 0;
}

.legal-prose h3,
.legal-prose h4 {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-top: 1px solid var(--surface-border-2);
  font-size: clamp(0.98rem, 1.08vw, 1.12rem);
  letter-spacing: -0.01em;
}

.legal-prose h3:first-child,
.legal-prose h4:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-top: 0;
}

.legal-prose .flat-list {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.15rem;
}

.legal-prose .flat-list li + li {
  margin-top: 0;
}

.legal-prose hr {
  margin: var(--space-1) 0;
}

@media (max-width: 640px) {
  .accordion-stack.legal-accordion-stack.docs-wiki > details.docs-accordion > summary.docs-summary {
    align-items: flex-start;
  }

  .accordion-stack.legal-accordion-stack.docs-wiki > details.docs-accordion > summary.docs-summary::after {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    font-size: 1rem;
  }

  .legal-prose {
    max-inline-size: 100%;
    margin-inline: 0;
  }
}




/* --- components/forms.css --- */
.form-label {
  color: var(--text-normal);
  font-size: var(--form-label-font-size);
}

.form-control,
.form-select,
textarea.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  color: var(--text-normal);
  background-color: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: var(--form-control-radius);
  min-block-size: var(--form-control-min-h);
  padding-block: var(--form-control-pad-y);
  padding-inline: var(--form-control-pad-x);
  font-size: var(--form-control-font-size);
}

.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
  color: var(--text-normal);
  background-color: var(--bg-3);
  border-color: var(--accent-color);
  box-shadow: var(--form-focus-ring);
  outline: none;
}

[data-phone-country] {
  max-width: var(--phone-country-inline);
  flex: 0 0 var(--phone-country-inline);
}

.form-grid-pairs,
.form-grid-2 {
  display: grid;
  grid-template-columns: var(--form-grid-columns);
  align-items: center;
  row-gap: var(--form-grid-row-gap);
  column-gap: var(--form-grid-col-gap);
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}

input[type="checkbox"] {
  inline-size: var(--checkbox-size);
  block-size: var(--checkbox-size);
  min-block-size: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--accent-color);
  border-radius: var(--radius-xs);
  flex: 0 0 auto;
}

.form-grid-offset {
  margin-top: calc(var(--space-1) + 4px);
}






/* --- components/auth.css --- */
/* Authentication layout and form wrappers. */
.auth-shell {
  min-height: calc(100svh - (2 * var(--space-3)));
  display: grid;
  place-items: center;
  padding: var(--space-3) var(--layout-inline-pad);
  font-size: var(--auth-shell-font-size);
}

.auth-card {
  width: min(560px, 100%);
  padding: calc(var(--space-2) + 4px);
}

.auth-card-header h1 {
  margin: 0;
  font-size: var(--auth-title-size);
}

.auth-card-subtitle {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--page-subtitle-size);
}

.auth-card-alerts {
  margin-top: calc(var(--space-1) + 4px);
}

.auth-card-body {
  margin-top: calc(var(--space-1) + 2px);
}

.auth-form-grid {
  display: grid;
  gap: calc(var(--space-1) + 2px);
}

.auth-form-grid > label {
  color: var(--text-normal);
  font-size: var(--form-label-font-size);
}

.auth-inline-checkbox {
  margin-top: 2px;
}

.auth-info-line {
  margin: 0;
  color: var(--text-normal);
  font-size: var(--content-font-size);
}

.auth-one-time-code {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  max-width: 420px;
}

.auth-one-time-code-digit {
  min-width: 0;
  height: 54px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-1);
  color: var(--text-normal);
  text-align: center;
  font-size: 1.35rem;
  font-weight: var(--font-weight-semibold);
}

.auth-one-time-code-digit:focus {
  outline: 2px solid transparent;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.auth-one-time-code-hint {
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: var(--content-font-size);
}

.auth-secondary-form {
  margin-top: var(--space-2);
}

.auth-submit {
  justify-self: start;
}

.auth-login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-1) + 2px);
}

.auth-text-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--content-font-size);
}

.auth-text-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .auth-one-time-code {
    gap: 6px;
  }

  .auth-one-time-code-digit {
    height: 46px;
    font-size: 1.1rem;
    border-radius: 12px;
  }
}

/* --- components/cookie-banner.css --- */
.cookie-notice {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-cookie);
  max-width: 380px;
  width: max-content;
  padding: 12px 14px;
}

.cookie-notice-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cookie-notice-icon {
  flex: 0 0 auto;
  width: 3rem;
  margin-right: 8px;
  text-align: center;
  font-size: clamp(2.2rem, 5vh, 3rem);
  line-height: 1;
  align-self: center;
}

.cookie-notice-content {
  flex: 1 1 auto;
  min-width: 0;
}

.cookie-notice[hidden] {
  display: none;
}

.cookie-notice-text {
  color: var(--text-normal);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: left;
}

.cookie-notice-link {
  display: block;
  margin-top: 6px;
  color: var(--accent-color);
}

.cookie-notice-list {
  margin-top: 6px;
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--text-normal);
}

[data-cookie-ok] {
  flex: 0 0 auto;
}

[data-cookie-ok]:hover {
  color: var(--text-inverse);
}

.consent-block {
  text-align: center;
}

.consent-item {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.consent-item .form-check-input {
  float: none;
  margin: 0.2rem 0 0;
}

.consent-item .form-check-label {
  text-align: center;
}

.consent-item .consent-text {
  display: inline;
}

.consent-item .consent-link {
  display: inline;
  margin-left: 4px;
}




@media (max-width: 991.98px) {
  .cookie-notice {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    width: 100%;
    border-radius: 12px 12px 0 0;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  .cookie-notice-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 8px;
    align-items: start;
  }

  .cookie-notice-icon {
    margin-right: 0;
    align-self: center;
  }

  [data-cookie-ok] {
    margin-top: 0;
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* --- components/app-shell.css --- */
.app-shell {
  position: relative;
  flex: 1 1 auto;
}

.layout-container {
  width: min(var(--layout-max-inline), calc(100% - (2 * var(--layout-inline-pad))));
  margin-inline: auto;
}

.app-shell > .layout-container.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  column-gap: 0;
}

.app-grid > .page-root {
  min-width: 0;
  min-block-size: calc(100svh - var(--layout-header-h));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--layout-shell-gap);
  margin-left: 0;
  font-size: var(--content-font-size);
}

body.sidebar-pinned .app-grid > .page-root {
  margin-left: 0;
  font-size: var(--content-font-size);
}

.page-root > * {
  min-inline-size: 0;
}

.page-content > * {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.page-header-shell {
  padding: var(--page-panel-pad-y) var(--page-panel-pad-x);
  margin-bottom: 0;
}

.page-header-shell h1 {
  margin: 0;
}

.page-title-only {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
}

.page-header-shell p {
  margin: 4px 0 0;
  color: var(--text-muted);
}

.page-subtitle-only {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--page-subtitle-size);
}

.page-alerts {
  display: grid;
  gap: var(--page-alert-gap);
}

.page-alerts:empty,
.page-alerts:not(:has(.alert-banner)) {
  display: none;
}

.page-controls-shell {
  background: var(--bg-2);
  padding: var(--page-controls-pad-y) var(--page-controls-pad-x);
  margin-bottom: 0;
}

.page-controls-shell:has(.screen-filters-advanced:not([open])) {
  padding-block-end: 0;
}

.page-content {
  display: grid;
  grid-row: 4;
  gap: var(--layout-shell-gap);
  min-inline-size: 0;
  min-block-size: 0;
  align-content: start;
}

.page-controls-shell:has(.screen-filters-advanced:not([open])) + .page-content {
  margin-top: -24px;
}

.control-row {
  display: grid;
  grid-template-columns: var(--control-row-cols-desktop);
  align-items: end;
  gap: var(--control-row-gap);
}

.control-row > label {
  grid-column: var(--control-row-label-column-desktop);
  align-self: center;
  font-size: var(--form-label-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
}

.control-row > input,
.control-row > select,
.control-row > textarea,
.control-row > button,
.control-row > a,
.control-row > span {
  grid-column: var(--control-row-item-column-desktop);
}


.meta-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--meta-pairs-min), 1fr));
  gap: var(--space-1) var(--space-2);
}

.business-table-shell,
.actual-table-shell {
  display: grid;
  gap: var(--layout-shell-gap);
}

.page-content > * {
  min-block-size: 0;
}

.actual-table-shell,
.performance-table-shell {
  block-size: 100%;
  min-block-size: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

.actual-table-shell .table-frame,
.performance-table-shell .table-frame {
  min-block-size: 0;
}


@media (max-width: 991.98px) {
  .app-shell > .layout-container.app-grid {
    grid-template-columns: 1fr;
  }

  .app-grid > .page-root,
  #side-panel-toggle:checked ~ .app-shell .app-grid > .page-root,
  body.sidebar-pinned .app-grid > .page-root {
    margin-left: 0;
    padding-left: 0;
  }

  .page-controls-shell {
    padding: 0;
  }

  .page-controls-shell > .screen-filters,
  .page-controls-shell > details {
    padding: var(--page-controls-pad-y) var(--page-controls-pad-x);
  }

  .page-controls-shell:has(.screen-filters-advanced:not([open])) + .page-content {
    margin-top: -18px;
  }

  .control-row {
    grid-template-columns: var(--control-row-cols-tablet);
  }

  .control-row > label {
    grid-column: var(--control-row-label-column-tablet);
    margin-top: 4px;
  }

  .control-row > input,
  .control-row > select,
  .control-row > textarea,
  .control-row > button,
  .control-row > a,
  .control-row > span {
    grid-column: var(--control-row-item-column-tablet);
  }
}

@media (max-width: 640px) {
  .control-row {
    grid-template-columns: var(--control-row-cols-mobile);
  }

  .control-row > label,
  .control-row > input,
  .control-row > select,
  .control-row > textarea,
  .control-row > button,
  .control-row > a,
  .control-row > span {
    grid-column: var(--control-row-item-column-mobile);
  }
}





.page-root.billing-notice-blurred > :not(.billing-notice-overlay) {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

.billing-notice-overlay {
  position: sticky;
  top: calc(var(--space-4) + 64px);
  z-index: calc(var(--z-overlay) + 10);
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.billing-notice-card {
  width: min(100%, 560px);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-3);
}

.billing-notice-card h2,
.billing-notice-card p {
  margin: 0;
}

.billing-notice-meta {
  display: grid;
  gap: var(--space-1);
}

.billing-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.billing-notice-overlay.is-locked .billing-notice-card {
  border-color: var(--danger-strong);
}

/* --- components/sidebar.css --- */
/* Sidebar component: behavior + structure, values from central tokens. */
.app-shell {
  position: relative;
}

.app-shell > .layout-container.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  column-gap: 0;
}

.sidepanel-toggle {
  position: fixed;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
  inset: auto;
}

.side-panel-shell {
  position: fixed;
  left: 0;
  top: var(--sidebar-top-offset);
  bottom: var(--sidebar-bottom-offset);
  z-index: var(--z-sidebar);
  inline-size: var(--sidebar-live-collapsed);
  max-inline-size: var(--sidebar-live-collapsed);
  min-inline-size: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  border-radius: 0;
  border-left: 0;
  padding: 0;
  transition:
    inline-size var(--sidebar-motion-fast) var(--sidebar-motion-ease),
    max-inline-size var(--sidebar-motion-fast) var(--sidebar-motion-ease),
    opacity var(--sidebar-motion-fast) var(--sidebar-motion-ease);
}

.side-panel {
  margin: 0;
  padding: var(--sidebar-pad);
  border: thin solid var(--border-1);
  border-left: 0;
  border-radius: 0;
  background: var(--bg-3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 100%;
  block-size: 100%;
}

.side-panel-group {
  inline-size: 100%;
  min-inline-size: 0;
}

.side-panel-group-main {
  padding-bottom: var(--sidebar-group-gap);
}

.side-panel-group-tools {
  margin-top: auto;
  padding-top: var(--sidebar-group-gap);
  border-top: var(--sidebar-divider-width) solid var(--border-1);
}

.side-panel h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: var(--text-transform-label);
  color: var(--text-muted);
}

.side-panel nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sidebar-nav-stack-gap);
  inline-size: 100%;
}

.side-panel nav a {
  display: flex;
  align-items: center;
  gap: var(--sidebar-item-gap);
  min-height: var(--sidebar-item-min-h);
  inline-size: 100%;
  border: thin solid transparent;
  border-radius: 0;
  padding: var(--sidebar-item-pad-y) var(--sidebar-item-pad-x);
  color: var(--text-normal);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.side-panel nav a:hover,
.side-panel nav a:focus-visible {
  border-color: var(--border-1);
  background: var(--bg-2);
  color: var(--accent-color);
}

.side-panel nav a.is-active {
  border-color: color-mix(in srgb, var(--accent-color) var(--sidebar-active-border-mix), var(--border-1));
  background: color-mix(in srgb, var(--accent-color) var(--sidebar-active-bg-mix), var(--bg-2));
  color: var(--text-strong);
}

.menu-svg {
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  flex: 0 0 auto;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--sidebar-icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-panel .menu-label,
.side-panel h3 {
  display: none;
}

@media (min-width: 992px) {
  .side-panel-shell {
    bottom: var(--sidebar-footer-offset, var(--sidebar-bottom-offset));
    min-block-size: calc(100svh - var(--sidebar-top-offset) - var(--sidebar-footer-offset, 0px));
    block-size: calc(100svh - var(--sidebar-top-offset) - var(--sidebar-footer-offset, 0px));
  }

  .side-panel-shell:hover,
  #side-panel-toggle:checked ~ .app-shell .side-panel-shell,
  body.sidebar-pinned #side-panel-toggle:checked ~ .app-shell .side-panel-shell,
  body.sidebar-pinned .side-panel-shell {
    inline-size: var(--sidebar-live-expanded);
    max-inline-size: var(--sidebar-live-expanded);
  }

  .side-panel-shell:hover .menu-label,
  .side-panel-shell:hover h3,
  #side-panel-toggle:checked ~ .app-shell .side-panel .menu-label,
  #side-panel-toggle:checked ~ .app-shell .side-panel h3,
  body.sidebar-pinned .side-panel .menu-label,
  body.sidebar-pinned .side-panel h3 {
    display: inline-flex;
    align-items: center;
  }
}

.sidepanel-backdrop {
  display: none;
  pointer-events: none;
}

@media (min-width: 992px) {
  .menu-svg {
    display: inline-block;
  }
}

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

.app-grid > .page-root {
  padding-left: var(--sidebar-live-collapsed);
}

#side-panel-toggle:checked ~ .app-shell .app-grid > .page-root,
body.sidebar-pinned .app-grid > .page-root {
  padding-left: var(--sidebar-live-expanded);
  margin-left: 0;
}






@media (max-width: 991.98px) {
  .app-grid > .page-root,
  #side-panel-toggle:checked ~ .app-shell .app-grid > .page-root,
  body.sidebar-pinned .app-grid > .page-root {
    padding-left: 0;
    margin-left: 0;
  }
  .side-panel-shell {
    top: var(--sidebar-top-offset);
    bottom: auto;
    inline-size: 0;
    min-inline-size: 0;
    max-inline-size: 0;
    min-block-size: 0;
    max-height: calc(100svh - var(--sidebar-top-offset) - var(--sidebar-mobile-max-h-gap));
    padding: 0;
    border: 0;
    transform: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
  }

  #side-panel-toggle:checked ~ .app-shell .side-panel-shell {
    bottom: 0;
    min-inline-size: 168px;
    inline-size: min(var(--sidebar-mobile-inline-size), var(--sidebar-max-inline-size));
    max-inline-size: min(var(--sidebar-mobile-inline-size), var(--sidebar-max-inline-size));
    min-block-size: calc(100svh - var(--sidebar-top-offset));
    block-size: calc(100svh - var(--sidebar-top-offset));
    max-height: none;
    padding: var(--sidebar-pad);
    border: thin solid var(--border-1);
    border-left: 0;
    background: var(--bg-3);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    overflow-y: auto;
  }

  #side-panel-toggle:not(:checked) ~ .app-shell .side-panel-shell {
    block-size: auto;
  }

  .menu-svg {
    display: none;
  }

  .side-panel nav ul {
    gap: 2px;
  }

  .side-panel .menu-label,
  .side-panel h3,
  #side-panel-toggle:checked ~ .app-shell .side-panel .menu-label,
  #side-panel-toggle:checked ~ .app-shell .side-panel h3 {
    display: inline-flex;
    align-items: center;
  }

  .sidepanel-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-sidebar-backdrop);
    display: none;
    background: color-mix(in srgb, #000 var(--sidebar-backdrop-opacity), transparent);
    pointer-events: none;
  }

  #side-panel-toggle:checked ~ .app-shell .sidepanel-backdrop {
    display: none;
  }
}

/* --- components/accordion.css --- */
/* Accordion (shared) */
.accordion-stack {
  display: grid;
  gap: var(--accordion-gap);
}

.accordion-stack > details {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
  padding: var(--space-2);
}

.accordion-stack > details > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: var(--accordion-summary-min-h);
  padding: 0;
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
}

.accordion-stack > details > summary::after {
  content: "";
  inline-size: var(--accordion-chevron-size);
  block-size: var(--accordion-chevron-size);
  border-right: var(--accordion-chevron-stroke) solid currentColor;
  border-bottom: var(--accordion-chevron-stroke) solid currentColor;
  transform: translateY(-15%) rotate(45deg);
  transition: transform 0.14s ease;
  opacity: 0.85;
  flex: 0 0 auto;
}

.accordion-stack > details[open] > summary::after {
  transform: translateY(15%) rotate(-135deg);
}

.accordion-stack > details > summary::-webkit-details-marker {
  display: none;
}

.accordion-stack > details > :not(summary) {
  max-inline-size: 100%;
  min-inline-size: 0;
  padding-inline: 0;
  overflow-wrap: anywhere;
}

.accordion-stack > details > :not(summary) + :not(summary) {
  margin-top: var(--space-2);
}

.accordion-stack > details > :last-child {
  padding-bottom: 0;
}



@media (max-width: 991.98px) {
  .accordion-stack > details > summary {
    padding-inline: var(--space-1);
  }
}

/* --- components/cards.css --- */
/* Generic card helpers (container-driven sizing, no hard values). */
.card-stack {
  --card-stack-gap: var(--space-2);

  display: grid;
  gap: var(--card-stack-gap);
}

.card-title-tight {
  --card-title-gap: var(--space-1);

  margin-bottom: var(--card-title-gap);
}

.card-text-last {
  margin-bottom: 0;
}

.card-soft-radius {
  --card-radius: var(--space-2);

  border-radius: var(--card-radius);
}

/* --- components/tables.css --- */
/* Generic table system (dashboard + options). */
.table-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-1);
  min-inline-size: 0;
}

.table-frame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.table-frame-header h2,
.table-frame-header h3 {
  margin: 0;
  font-size: var(--font-size-h3);
}

.table-frame-body {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  max-inline-size: 100%;
  min-inline-size: 0;
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 72%, var(--bg-1)) transparent;
}

.table-frame-body[data-infinite-root] {
  overflow: scroll;
  scrollbar-gutter: stable;
}

.table-frame-body::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.table-frame-body::-webkit-scrollbar-track {
  background: transparent;
}

.table-frame-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 72%, var(--bg-1));
  border-radius: var(--radius-pill);
}

table,
.wide-table,
.simple-grid,
.table-clean {
  width: auto;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  table-layout: fixed;
}

table thead th,
.wide-table thead th,
.simple-grid thead th,
.table-clean thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
  background: var(--bg-2);
  color: var(--text-strong);
  font-size: var(--table-head-font-size);
  text-transform: var(--text-transform-label);
  letter-spacing: var(--letter-spacing-wide);
  border-bottom: 1px solid var(--border-1);
  padding: var(--table-head-pad-y) var(--table-head-pad-x);
  text-align: left;
  white-space: nowrap;
  background-clip: padding-box;
}

table tbody td,
.wide-table tbody td,
.simple-grid tbody td,
.table-clean tbody td {
  position: relative;
  z-index: var(--z-content);
  border-bottom: 1px solid color-mix(in srgb, var(--border-1) 55%, transparent);
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  font-size: var(--table-cell-font-size);
  line-height: 1.25;
  vertical-align: middle;
  white-space: nowrap;
  background-clip: padding-box;
}

table thead th.table-row-num-head,
.wide-table thead th.table-row-num-head,
.simple-grid thead th.table-row-num-head,
.table-clean thead th.table-row-num-head {
  width: var(--table-row-num-col-width);
  min-width: var(--table-row-num-col-width);
  max-width: var(--table-row-num-col-width);
  inline-size: var(--table-row-num-col-width);
  min-inline-size: var(--table-row-num-col-width);
  max-inline-size: var(--table-row-num-col-width);
  padding-inline: 8px;
  text-align: center;
  font-size: var(--table-row-num-font-size);
}

table tbody td.table-row-num-cell,
.wide-table tbody td.table-row-num-cell,
.simple-grid tbody td.table-row-num-cell,
.table-clean tbody td.table-row-num-cell {
  width: var(--table-row-num-col-width);
  min-width: var(--table-row-num-col-width);
  max-width: var(--table-row-num-col-width);
  inline-size: var(--table-row-num-col-width);
  min-inline-size: var(--table-row-num-col-width);
  max-inline-size: var(--table-row-num-col-width);
  padding-inline: 8px;
  text-align: center;
  font-size: var(--table-row-num-font-size);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

table tbody tr:hover td,
.wide-table tbody tr:hover td,
.simple-grid tbody tr:hover td,
.table-clean tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-color) var(--table-hover-mix), transparent);
}

.table-gap + .table-gap {
  margin-top: var(--table-stack-gap);
}

.table-frame-footer {
  border-top: 1px solid var(--border-1);
  background: var(--bg-3);
  padding: var(--space-1) var(--space-2);
}

.table-frame-footer .control-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}


.chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--chip-pad-y) var(--chip-pad-x);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-bold);
  border: 1px solid transparent;
}

.chip-positive {
  color: var(--positive-text);
  background: var(--positive-bg);
  border-color: color-mix(in srgb, var(--positive-text) 25%, transparent);
}

.chip-negative {
  color: var(--negative-text);
  background: var(--negative-bg);
  border-color: color-mix(in srgb, var(--negative-text) 25%, transparent);
}

.chip-accent {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.table-flag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  align-items: center;
  min-inline-size: 2.5rem;
  position: relative;
}

.table-flag-list .chip {
  white-space: nowrap;
}

.flag-header {
  display: inline-grid;
  place-items: center;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  color: currentColor;
}

.flag-header-icon,
.flag-svg-icon,
.flag-chip-icon,
.flag-menu-icon {
  display: block;
  inline-size: 1em;
  block-size: 1em;
  fill: currentColor;
}

.table-flag-form {
  margin: 0;
}

.table-flag-chip,
.table-flag-add-trigger {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  min-inline-size: 1.35rem;
  block-size: 1.35rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: var(--surface-subtle);
  color: var(--text-normal);
  cursor: pointer;
}

.table-flag-chip {
  position: relative;
}

.table-flag-chip-x {
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-end: -0.35rem;
  display: none;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--surface-base);
  border: 1px solid currentColor;
  font-size: 0.68rem;
  line-height: 0.8rem;
}

.table-flag-chip:hover .table-flag-chip-x,
.table-flag-chip:focus-visible .table-flag-chip-x {
  display: grid;
  place-items: center;
}

.table-flag-add {
  position: relative;
  display: inline-flex;
}

.table-flag-add-trigger {
  opacity: 0;
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.table-flag-list:hover .table-flag-add-trigger,
.table-flag-add[open] .table-flag-add-trigger,
.table-flag-add-trigger:focus-visible {
  opacity: 1;
}

.table-flag-add-trigger::-webkit-details-marker {
  display: none;
}

.table-flag-add-panel {
  position: absolute;
  z-index: calc(var(--z-alert-banner) - 1);
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-start: 0;
  display: grid;
  gap: 0.25rem;
  min-inline-size: 11rem;
  padding: 0.45rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.table-flag-menu-item {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.42rem 0.55rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.table-flag-menu-item:hover,
.table-flag-menu-item:focus-visible {
  background: var(--surface-subtle);
}

.table-flag-color-accent {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.table-flag-color-positive {
  color: var(--positive-text);
  background: var(--positive-bg);
  border-color: color-mix(in srgb, var(--positive-text) 28%, transparent);
}

.table-flag-color-warning {
  color: var(--warning-color);
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning-color) 28%, transparent);
}

.table-flag-color-negative {
  color: var(--negative-text);
  background: var(--negative-bg);
  border-color: color-mix(in srgb, var(--negative-text) 28%, transparent);
}

.table-flag-color-neutral {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  border-color: color-mix(in srgb, var(--text-muted) 28%, transparent);
}

.flag-info-cell--accent {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.flag-info-cell--positive {
  color: var(--positive-text);
  background: color-mix(in srgb, var(--positive-bg) 70%, transparent);
}

.flag-info-cell--warning {
  color: var(--warning-color);
  background: color-mix(in srgb, var(--warning-bg) 78%, transparent);
}

.flag-info-cell--negative {
  color: var(--negative-text);
  background: color-mix(in srgb, var(--negative-bg) 72%, transparent);
}

.flag-info-cell--neutral {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 9%, transparent);
}


.table-cell-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-cell-numeric,
.table-cell-numeric .table-cell-value {
  font-variant-numeric: tabular-nums;
}
.table-cell-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-cell-wrap {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}



.table-frame-body[data-infinite-root] {
  max-block-size: min(70svh, 46rem);
}

.actual-table-shell .table-frame-body[data-infinite-root],
.performance-table-shell .table-frame-body[data-infinite-root],
.orders-screen .table-frame-body[data-infinite-root],
.tracking-screen .tracking-shared-scroll {
  block-size: var(--table-live-block-size, auto);
  max-block-size: var(--table-live-block-size, none);
  overflow: scroll;
  scrollbar-gutter: stable;
}

@media (max-width: 991.98px) {
  .table-frame-body[data-infinite-root] {
    max-block-size: min(62svh, 32rem);
  }

  .table-row-num-head,
  .table-row-num-cell {
    width: var(--table-row-num-col-width);
    min-width: var(--table-row-num-col-width);
    max-width: var(--table-row-num-col-width);
    inline-size: var(--table-row-num-col-width);
    min-inline-size: var(--table-row-num-col-width);
    max-inline-size: var(--table-row-num-col-width);
  }

  table thead th,
  .wide-table thead th,
  .simple-grid thead th,
  .table-clean thead th,
  table tbody td,
  .wide-table tbody td,
  .simple-grid tbody td,
  .table-clean tbody td {
    white-space: normal;
  }
}
table a[href^="tel:"],
.wide-table a[href^="tel:"],
.simple-grid a[href^="tel:"],
.table-clean a[href^="tel:"],
table a[href^="sms:"],
.wide-table a[href^="sms:"],
.simple-grid a[href^="sms:"],
.table-clean a[href^="sms:"],
table a[href^="mailto:"],
.wide-table a[href^="mailto:"],
.simple-grid a[href^="mailto:"],
.table-clean a[href^="mailto:"] {
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-decoration: none;
  -webkit-text-fill-color: currentColor;
  pointer-events: none;
}

.table-frame-body:not([data-infinite-root]) table thead th,
.table-frame-body:not([data-infinite-root]) .wide-table thead th,
.table-frame-body:not([data-infinite-root]) .simple-grid thead th,
.table-frame-body:not([data-infinite-root]) .table-clean thead th {
  top: 0;
  transform: translateY(var(--table-header-shift, 0px));
  will-change: transform;
}

.table-scroll-dock {
  position: fixed;
  left: 0;
  top: auto;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: var(--z-sticky-col);
  inline-size: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.table-scroll-dock.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.table-scroll-dock-track {
  overflow-x: scroll;
  overflow-y: hidden;
  block-size: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 72%, var(--bg-1)) transparent;
}

.table-scroll-dock-track::-webkit-scrollbar {
  height: 12px;
}

.table-scroll-dock-track::-webkit-scrollbar-track {
  background: transparent;
}

.table-scroll-dock-track::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 72%, var(--bg-1));
  border-radius: var(--radius-pill);
}

.table-scroll-dock-spacer {
  block-size: 1px;
}




/* --- components/buttons.css --- */
/* Generic button system: content-driven sizing + reusable tone variants. */
:root {
  --btn-tone-accent-1: var(--accent-color);
  --btn-tone-accent-2: var(--positive-text);
  --btn-tone-text: var(--text-normal);
  --btn-tone-danger: var(--negative-text);
  --btn-danger-core: #d71920;
  --btn-danger-bg: color-mix(in srgb, var(--btn-danger-core) 78%, #05070a);
  --btn-danger-bg-hover: color-mix(in srgb, var(--btn-danger-core) 88%, #05070a);
  --btn-danger-border: color-mix(in srgb, var(--btn-danger-core) 82%, var(--border-1));
  --btn-danger-border-hover: color-mix(in srgb, var(--btn-danger-core) 92%, var(--border-1));
  --btn-danger-shadow: color-mix(in srgb, var(--btn-danger-core) 42%, transparent);
  --btn-fill-fg: var(--text-inverse);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius-sm) + 1px);
  min-height: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  inline-size: max-content;
  min-inline-size: fit-content;
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--font-weight-regular);
  line-height: 16.8px;
  text-rendering: geometricPrecision;
}

.btn-compact {
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
}

.btn-fill,
.btn-outline-tone {
  border-style: solid;
  border-width: thin;
}

.btn-fill {
  color: var(--bg-3);
  background: currentColor;
  border-color: currentColor;
}

.btn-outline-tone {
  background: transparent;
}

.btn-fill-accent-1,
.btn-outline-accent-1 {
  color: var(--btn-tone-accent-1);
}

.btn-fill-accent-2,
.btn-outline-accent-2 {
  color: var(--btn-tone-accent-2);
}

.btn-fill-text,
.btn-outline-text {
  color: var(--btn-tone-text);
}

.btn-fill-danger,
.btn-outline-danger {
  color: var(--btn-tone-danger);
}

.btn-fill-accent-1 {
  background: var(--btn-tone-accent-1);
  border-color: var(--btn-tone-accent-1);
  color: var(--btn-fill-fg);
}

.btn-fill-accent-2 {
  background: var(--btn-tone-accent-2);
  border-color: var(--btn-tone-accent-2);
  color: var(--btn-fill-fg);
}

.btn-fill-text {
  background: var(--btn-tone-text);
  border-color: var(--btn-tone-text);
  color: var(--btn-fill-fg);
}

.btn-fill-danger {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-fill-fg);
}

.btn-outline-accent-1 {
  border-color: var(--btn-tone-accent-1);
}

.btn-outline-accent-2 {
  border-color: var(--btn-tone-accent-2);
}

.btn-outline-text {
  border-color: var(--btn-tone-text);
}

.btn-outline-danger {
  border-color: var(--btn-tone-danger);
}

/* Compatibility aliases for existing markup */
.btn-accent {
  background: var(--btn-tone-accent-1);
  border-color: var(--btn-tone-accent-1);
  color: var(--btn-fill-fg);
}

.btn-accent:hover {
  background: color-mix(in srgb, var(--btn-tone-accent-1) 88%, #000);
  border-color: color-mix(in srgb, var(--btn-tone-accent-1) 88%, #000);
  color: var(--btn-fill-fg);
}

.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.72;
}

.btn-accent:disabled,
.btn-accent[disabled] {
  color: var(--btn-fill-fg);
}

.btn-outline {
  color: var(--btn-tone-text);
  background: transparent;
  border: thin solid var(--border-1);
}

.btn-outline-ui {
  color: var(--btn-tone-text);
  border: thin solid var(--border-1);
  background: transparent;
}

.btn-outline-ui:hover,
.btn-outline-ui.active,
.btn-outline:hover,
.btn-outline.active {
  color: var(--btn-tone-accent-1);
  border-color: var(--btn-tone-accent-1);
}

.btn-danger {
  color: var(--btn-fill-fg);
  background: var(--btn-danger-bg);
  border: thin solid var(--btn-danger-border);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--btn-danger-core) 12%, transparent),
    0 0.65rem 1.35rem -1rem var(--btn-danger-shadow);
}

.btn-danger:hover,
.btn-danger:focus-visible,
.btn-fill-danger:hover,
.btn-fill-danger:focus-visible {
  color: var(--btn-fill-fg);
  background: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-border-hover);
}


/* --- components/alert-banners.css --- */
.page-alerts,
.auth-card-alerts {
  display: grid;
  gap: var(--page-alert-gap);
}

.page-alerts {
  position: fixed;
  inset-inline-start: 50%;
  top: calc(var(--layout-header-h) + var(--space-2));
  transform: translateX(-50%);
  width: min(calc(100vw - (2 * var(--layout-inline-pad))), 640px);
  max-block-size: calc(100vh - var(--layout-header-h) - var(--space-4));
  overflow-y: auto;
  z-index: var(--z-alert-banner);
  pointer-events: none;
}

.page-alerts > * {
  pointer-events: auto;
}

.alert-banner {
  position: relative;
  display: grid;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 44px;
  padding: 12px 44px 12px 18px;
  border: thin solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
  background: color-mix(in srgb, var(--bg-2), white 6%);
  text-align: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.alert-banner.is-closing {
  opacity: 0;
  transform: translateY(-6px);
}

.alert-body {
  width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.alert-dismiss {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 26px;
  block-size: 26px;
  display: inline-grid;
  place-items: center;
  border: thin solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.alert-dismiss:hover,
.alert-dismiss:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: color-mix(in srgb, currentColor 20%, transparent);
}

.alert-success {
  color: var(--positive-text);
  border-color: color-mix(in srgb, var(--positive-text), var(--border-1));
  background: color-mix(in srgb, var(--positive-bg), white 8%);
}

.alert-error {
  color: var(--negative-text);
  border-color: color-mix(in srgb, var(--negative-text), var(--border-1));
  background: color-mix(in srgb, var(--negative-bg), white 4%);
}

.alert-warning {
  color: var(--warning-color);
  border-color: color-mix(in srgb, var(--warning-color), var(--border-1));
  background: var(--warning-bg);
}

.alert-info {
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color), var(--border-1));
  background: color-mix(in srgb, var(--accent-color) 12%, white 6%);
}

@media (max-width: 767.98px) {
  .page-alerts {
    top: calc(var(--layout-header-h) + var(--space-1));
    width: calc(100vw - (2 * var(--space-1)));
  }

  .alert-banner {
    padding: 10px 40px 10px 12px;
  }
}


/* --- components/focus-mode.css --- */
.focus-mode-trigger[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--accent-color) 78%, var(--border-1));
  background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-2));
  color: var(--text-strong);
}

body.focus-mode-active {
  overflow: hidden;
}

body.focus-mode-active .global-header,
body.focus-mode-active .global-footer,
body.focus-mode-active .side-panel,
body.focus-mode-active .sidepanel-backdrop,
body.focus-mode-active .page-header-shell,
body.focus-mode-active .page-controls-shell {
  display: none;
}

body.focus-mode-active .app-shell > .layout-container.app-grid {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

body.focus-mode-active .app-grid > .page-root {
  min-block-size: 100svh;
  block-size: 100svh;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding-left: 0;
}

body.focus-mode-active #side-panel-toggle:checked ~ .app-shell .app-grid > .page-root,
body.focus-mode-active.sidebar-pinned .app-grid > .page-root {
  padding-left: 0;
}

body.focus-mode-active .page-alerts {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline: 50% auto;
  transform: translateX(-50%);
  z-index: var(--z-alert-banner);
  inline-size: min(42rem, calc(100vw - 2rem));
}

body.focus-mode-active .page-content {
  block-size: 100svh;
  min-block-size: 100svh;
  padding: 0.5rem 0 0;
  gap: 0;
  align-content: stretch;
}

.focus-mode-hint {
  position: fixed;
  inset: 0;
  z-index: var(--z-focus-overlay);
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: focus-mode-hint-fade 2s ease 1.25s forwards;
}

.focus-mode-hint-card {
  padding: 1rem 1.35rem;
  border: 1px solid color-mix(in srgb, var(--accent-color) 62%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-3) 92%, transparent);
  box-shadow: var(--elevation-3);
  color: var(--text-strong);
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
}

.focus-mode-close-hotspot {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: var(--z-focus-overlay);
  display: grid;
  place-items: start end;
  inline-size: min(9rem, 32vw);
  block-size: min(9rem, 32vw);
  padding: 0.75rem;
}

.focus-mode-close-btn {
  display: grid;
  place-items: center;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  border: 1px solid color-mix(in srgb, #fff 42%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #000 48%, transparent);
  color: #fff;
  cursor: pointer;
  font-size: 1.68rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  opacity: 0;
  transform: translateY(-0.25rem) scale(0.92);
  transition:
    opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.focus-mode-close-hotspot:hover .focus-mode-close-btn,
.focus-mode-close-hotspot:focus-within .focus-mode-close-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.focus-mode-close-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

body.focus-mode-ordering .orders-screen,
body.focus-mode-ordering .orders-screen-stack,
body.focus-mode-tracking .tracking-screen,
body.focus-mode-tracking .tracking-linked-frame {
  block-size: 100%;
  min-block-size: 100%;
}

body.focus-mode-ordering .orders-screen-stack {
  gap: 0.5rem;
  grid-template-rows: auto minmax(0, 1fr);
}

body.focus-mode-ordering .orders-group-panels {
  position: static;
  gap: 0.5rem;
  padding: 0;
}

body.focus-mode-ordering .orders-panel-row {
  gap: 0.5rem;
}

body.focus-mode-ordering .orders-table-frame,
body.focus-mode-ordering .orders-table-frame .table-frame-body[data-infinite-root],
body.focus-mode-tracking .tracking-shared-scroll {
  block-size: 100%;
  max-block-size: none;
}

body.focus-mode-ordering .orders-table-toolbar {
  top: 0;
}

body.focus-mode-tracking .tracking-scroll-stack {
  gap: 0;
}

body.focus-mode-tracking .tracking-meta-layout {
  display: none;
}

body.focus-mode-tracking .tracking-order-date {
  display: block;
}

body.focus-mode-tracking .tracking-order-card-trigger {
  display: inline-flex;
}

body.focus-mode-tracking .tracking-inline-warning {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky-col) + 4);
  margin-block-end: 0.45rem;
}

@keyframes focus-mode-hint-fade {
  to {
    opacity: 0;
  }
}

/* --- components/etl-cards.css --- */
/* ETL cards component (tokenized, layout-focused). */
.options-timezone-form {
  display: grid;
  grid-template-columns: max-content fit-content(100%) max-content;
  align-items: center;
  justify-content: start;
  gap: var(--etl-row-gap, var(--space-2));
  margin-block: var(--space-1) var(--space-2);
  padding: var(--space-2);
  inline-size: 100%;
}

.options-timezone-form > label,
.options-timezone-form > :is(input, select),
.options-timezone-form > button {
  margin: 0;
}

.options-upload-status {
  grid-column: 1 / -1;
  margin: 0;
  min-block-size: 1.2rem;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--text-muted);
}

.options-upload-status[data-upload-state="checking"] {
  color: var(--text-normal);
}

.options-upload-status[data-upload-state="passed"] {
  color: var(--positive-text);
}

.options-upload-status[data-upload-state="failed"] {
  color: var(--negative-text);
}

.options-timezone-form > :is(input, select) {
  justify-self: start;
}

.options-timezone-form > select {
  inline-size: auto;
  max-inline-size: min(100%, 24rem);
  field-sizing: content;
}

.accordion-stack > details > .options-timezone-form {
  padding-inline: var(--space-2);
}

.options-schedule-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 44rem), 1fr));
  gap: var(--etl-row-gap, var(--space-2));
  align-items: stretch;
  grid-auto-rows: minmax(0, 1fr);
}

.options-etl-row {
  display: grid;
  gap: var(--etl-tight-gap, var(--space-1));
  align-content: start;
  inline-size: 100%;
  min-inline-size: 0;
}

.options-etl-line,
.options-prefix-group {
  inline-size: 100%;
  min-inline-size: 0;
}

.options-prefix-group {
  display: grid;
  gap: var(--etl-tight-gap, var(--space-1));
}

.options-etl-line--controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
  align-items: center;
  column-gap: var(--etl-col-gap, var(--space-2));
  row-gap: var(--etl-tight-gap, var(--space-1));
}

.options-etl-control-group {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
}

.options-etl-control-group--job {
  gap: var(--space-1);
  justify-self: start;
}

.options-etl-control-group--time {
  gap: 0.375rem;
  justify-self: start;
}

.options-etl-line--stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: var(--etl-col-gap, var(--space-2));
}

.options-etl-line--label,
.options-etl-line--helper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.options-etl-line--prefix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: var(--etl-col-gap, var(--space-2));
  row-gap: var(--etl-tight-gap, var(--space-1));
}

.options-prefix-field-group {
  display: inline-grid;
  grid-template-columns: minmax(0, 13.5rem) max-content;
  align-items: center;
  justify-content: start;
  column-gap: 0.375rem;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.options-prefix-field-group.is-static {
  display: grid;
  inline-size: 100%;
  grid-template-columns: minmax(0, 1fr) max-content;
}

.options-etl-line--meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--etl-col-gap, var(--space-2));
  row-gap: var(--etl-tight-gap, var(--space-1));
}

.options-etl-line--status {
  display: grid;
  grid-template-columns: max-content max-content max-content minmax(0, 1fr);
  align-items: center;
  column-gap: var(--etl-col-gap, var(--space-2));
  row-gap: var(--etl-tight-gap, var(--space-1));
}

.options-etl-name,
.options-line-label,
.options-line-value,
.options-data-stat,
.options-prefix-hint,
.checkbox-row {
  margin: 0;
  font-size: 0.9rem;
}

.options-prefix-group-label,
.options-prefix-remaining {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.15;
}

.options-etl-name {
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  min-inline-size: 0;
}

.options-line-label,
.options-prefix-group-label,
.options-data-stat > strong {
  font-weight: var(--font-weight-semibold);
}

.options-line-label,
.options-prefix-group-label,
.checkbox-row,
.options-data-stat,
.options-prefix-hint,
.options-prefix-remaining {
  white-space: nowrap;
}

.options-line-value,
.options-last-message-text {
  min-inline-size: 0;
  color: var(--text-muted);
}

.options-data-stat {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--etl-tight-gap, var(--space-1));
  align-items: baseline;
  min-inline-size: 0;
}

.options-data-stat > span:last-child {
  min-inline-size: 0;
}

.options-data-stat.is-empty {
  visibility: hidden;
}

.options-prefix-input,
.options-timezone-form > select,
.options-timezone-form > input,
.etl-time-input {
  min-inline-size: 0;
}

.options-prefix-input {
  inline-size: 100%;
  max-inline-size: 13.5rem;
  font-size: 0.9375rem;
}

.etl-time-input,
.options-timezone-form .etl-action-btn,
.options-etl-card .etl-action-btn {
  inline-size: max-content;
  min-inline-size: fit-content;
}

.options-prefix-add,
.options-prefix-action-slot {
  justify-self: end;
}

.options-prefix-add {
  margin-inline-start: var(--space-2);
}

.options-prefix-action-slot {
  min-inline-size: 8.5rem;
  min-block-size: 2.3125rem;
}

.options-prefix-hint {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.3125rem;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.options-prefix-remaining {
  justify-self: end;
  color: var(--text-muted);
  text-align: end;
}

.options-prefix-row.is-hidden {
  display: none;
}

.options-prefix-hint-empty,
.options-prefix-remaining-empty {
  visibility: hidden;
}


.options-etl-status-fragment {
  display: contents;
}

.options-status-pill-button {
  appearance: none;
  font: inherit;
  cursor: pointer;
}

.options-status-pill-button:focus-visible {
  outline: medium solid color-mix(in srgb, var(--accent-color), white 18%);
  outline-offset: 2px;
}

.options-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--etl-pill-radius, var(--radius-sm));
  padding-block: var(--space-1);
  padding-inline: var(--space-1);
  border: thin solid var(--border-1);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.options-status-pill.is-success {
  color: var(--positive-text);
  border-color: color-mix(in srgb, var(--positive-text), var(--border-1));
  background: color-mix(in srgb, var(--positive-bg), transparent);
}

.options-status-pill.is-error {
  color: var(--negative-text);
  border-color: color-mix(in srgb, var(--negative-text), var(--border-1));
  background: color-mix(in srgb, var(--negative-bg), transparent);
}

.options-status-pill.is-warning {
  color: var(--warning-color);
  border-color: color-mix(in srgb, var(--warning-color), var(--border-1));
  background: color-mix(in srgb, var(--warning-bg), transparent);
}

.options-status-pill.is-na {
  color: var(--text-normal);
  background: color-mix(in srgb, var(--bg-2), transparent);
}

.options-status-pill.is-running {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.options-last-message-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.options-etl-row-disabled .checkbox-row,
.options-etl-row-disabled input[disabled],
.options-etl-row-disabled .options-line-value {
  color: var(--text-muted);
}

@media (max-width: 1280px) {
  .options-etl-line--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .options-timezone-form,
  .options-schedule-list {
    grid-template-columns: 1fr;
  }

  .options-timezone-form > label,
  .options-timezone-form > :is(input, select),
  .options-timezone-form > button,
  .options-etl-line--controls,
  .options-etl-line--stats,
  .options-etl-line--prefix,
  .options-etl-line--meta,
  .options-etl-line--status {
    min-inline-size: 0;
  }

  .options-etl-line--controls {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    align-items: center;
  }

  .options-etl-line--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .options-etl-control-group--job {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .options-etl-control-group--time {
    display: inline-grid;
    grid-template-columns: max-content max-content;
    inline-size: auto;
    max-inline-size: 100%;
    align-items: center;
  }

  .options-etl-line--label,
  .options-etl-line--helper,
  .options-etl-line--prefix,
  .options-etl-line--meta,
  .options-etl-line--status {
    grid-template-columns: 1fr;
  }

  .options-etl-line--meta,
  .options-etl-line--status {
    gap: 0.375rem;
  }

  .options-etl-line--meta > :nth-child(odd),
  .options-etl-line--status > :nth-child(odd) {
    margin-block-start: 0.125rem;
  }
  .options-prefix-input,
  .options-prefix-field-group {
    inline-size: 100%;
    max-inline-size: none;
  }

  .options-timezone-form > select {
    inline-size: auto;
    max-inline-size: 100%;
  }

  .options-timezone-form > button {
    inline-size: max-content;
    max-inline-size: 100%;
  }

  .options-prefix-field-group {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .etl-time-input,
  .options-etl-card .etl-action-btn {
    inline-size: max-content;
    min-inline-size: fit-content;
    max-inline-size: 100%;
    justify-self: start;
  }

  .options-prefix-add,
  .options-prefix-action-slot,
  .options-prefix-remaining {
    justify-self: start;
    text-align: start;
    min-inline-size: 0;
  }

  .options-prefix-add {
    margin-inline-start: 0;
  }

  .options-status-pill {
    justify-self: start;
  }
}

/* --- components/options-settings.css --- */
/* Reusable settings layout for Options-style control panels. */
.options-ui-panel,
.options-ui-shell,
.options-ui-main,
.options-logs-form {
  --options-settings-gap: var(--space-2);
  --options-settings-row-gap: calc(var(--space-1) + 2px);
  --options-settings-card-gap: calc(var(--space-1) - 1px);
  --options-settings-log-label-width: 6.75rem;
  --options-settings-short-width: 5.25rem;
  --options-settings-control-min: 10rem;
  --options-sorting-direction-width: 7.25rem;
  --options-setting-card-padding: calc(var(--space-2) - 2px);
  --options-sorting-field-max: none;

  display: grid;
  gap: var(--options-settings-gap);
  inline-size: 100%;
  min-inline-size: 0;
}

.options-ui-shell,
.options-ui-main {
  grid-template-columns: minmax(0, 1fr);
}

.options-setting-grid {
  display: grid;
  gap: var(--options-settings-row-gap) var(--options-settings-gap);
  align-items: start;
  inline-size: 100%;
  min-inline-size: 0;
}

.options-setting-grid--ui-top {
  grid-template-columns: minmax(15rem, 20rem) minmax(15rem, 20rem) minmax(12rem, 14rem);
  align-items: stretch;
  justify-content: start;
}

.options-setting-grid--logs {
  grid-template-columns: repeat(3, minmax(16rem, 1fr));
}

.options-setting-grid--sorting {
  grid-template-columns: repeat(2, minmax(18rem, 1fr));
  align-items: stretch;
  justify-content: stretch;
}

.options-ui-cards {
  display: grid;
  grid-template-columns: minmax(21rem, 0.5fr) minmax(23rem, 1fr);
  gap: var(--options-settings-gap);
  align-items: start;
  inline-size: 100%;
  min-inline-size: 0;
}

.options-ui-card {
  display: grid;
  gap: var(--options-settings-gap);
  min-inline-size: 0;
  padding: calc(var(--space-3) - 2px);
  border: 1px solid var(--surface-border-2);
  border-radius: var(--radius-md);
  background: var(--surface-z-elevated);
}

.options-card-header {
  display: grid;
  gap: 0.2rem;
}

.options-card-title {
  margin: 0;
  font-size: calc(var(--content-font-size) - 2px);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--text-strong);
}

.options-banner-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--options-settings-row-gap);
  min-inline-size: 0;
}

.options-banner-field {
  display: grid;
  gap: var(--options-settings-card-gap);
  min-inline-size: 0;
}

.options-banner-field .options-setting-head {
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--space-1) + 2px);
  align-items: start;
}

.options-banner-field .options-setting-label {
  overflow-wrap: normal;
  hyphens: none;
}

.options-banner-field .options-setting-control--short {
  justify-self: start;
}

.options-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-1) + 2px);
  align-items: center;
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--border-1));
}

.options-card-actions .btn {
  min-inline-size: 10rem;
  justify-content: center;
}

.options-card-actions--sorting {
  justify-content: flex-end;
}

.options-setting-card {
  display: grid;
  gap: var(--options-settings-card-gap);
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  align-content: start;
}

.options-ui-panel .options-setting-card {
  padding: var(--options-setting-card-padding);
  border: 1px solid var(--surface-border-2);
  border-radius: var(--radius-md);
  background: var(--surface-z-elevated);
}

.options-setting-grid--ui-top .options-setting-card {
  inline-size: 100%;
  max-inline-size: 100%;
}

.options-setting-card--toggle {
  inline-size: max-content;
  max-inline-size: 100%;
}

.options-setting-head {
  display: grid;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  min-inline-size: 0;
}

.options-setting-grid--ui-top .options-setting-head,
.options-setting-card--toggle .options-setting-head {
  grid-template-columns: max-content max-content;
}

.options-setting-grid--logs .options-setting-head {
  grid-template-columns: var(--options-settings-log-label-width) minmax(0, 1fr);
}

.options-setting-label {
  min-inline-size: 0;
  font-size: var(--content-font-size);
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
  line-height: 1.2;
}

.options-setting-control {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.options-setting-control--short {
  inline-size: var(--options-settings-short-width);
  max-inline-size: var(--options-settings-short-width);
  justify-self: start;
}

.options-setting-control--select {
  min-inline-size: var(--options-settings-control-min);
}

.options-ui-footer {
  display: grid;
  grid-template-columns: max-content auto;
  gap: var(--options-settings-gap);
  justify-content: space-between;
  align-items: start;
}

.options-ui-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  margin: 0;
}

.options-field-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(var(--content-font-size) - 2px);
  line-height: 1.25;
}

.options-action-stack {
  display: grid;
  gap: calc(var(--space-1) + 2px);
}

.options-action-stack--panel {
  inline-size: min(100%, 13.5rem);
  align-self: start;
  justify-self: stretch;
}

.options-action-stack--panel .btn,
.options-action-stack--sorting .btn {
  inline-size: 100%;
  justify-content: center;
}

.options-settings-divider {
  display: grid;
  gap: var(--options-settings-gap);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px solid var(--border-1);
}

.options-section-copy {
  display: grid;
  gap: 0.2rem;
}

.options-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-strong);
}

.options-setting-card--sorting {
  gap: calc(var(--space-1) + 1px);
}

.options-setting-card--sorting .options-setting-label {
  font-size: calc(var(--content-font-size) - 1px);
}

.options-sorting-row {
  display: grid;
  gap: calc(var(--space-1) + 2px);
  min-inline-size: 0;
  padding-block: 0.1rem;
}

.options-sorting-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--options-sorting-direction-width);
  gap: var(--space-2);
  align-items: center;
  justify-content: stretch;
  inline-size: 100%;
  min-inline-size: 0;
}

.options-setting-control--sorting-field {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
}

.options-setting-control--sorting-direction {
  inline-size: var(--options-sorting-direction-width);
  min-inline-size: var(--options-sorting-direction-width);
  max-inline-size: var(--options-sorting-direction-width);
  box-sizing: border-box;
}

.options-setting-card--sorting-actions {
  align-content: start;
  justify-self: stretch;
}

.options-action-stack--sorting {
  inline-size: 100%;
}

@media (max-width: 1199.98px) {
  .options-setting-grid--logs {
    grid-template-columns: repeat(2, minmax(15rem, 1fr));
  }

  .options-setting-grid--ui-top {
    grid-template-columns: repeat(2, minmax(15rem, 1fr));
  }

  .options-setting-card--actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1099.98px) {
  .options-setting-grid--sorting {
    grid-template-columns: 1fr;
  }

  .options-sorting-controls {
    grid-template-columns: minmax(0, 20rem) var(--options-sorting-direction-width);
    justify-content: start;
  }
}

@media (max-width: 991.98px) {
  .options-setting-grid--ui-top,
  .options-setting-grid--logs {
    grid-template-columns: 1fr;
  }

  .options-banner-settings {
    grid-template-columns: 1fr;
  }

  .options-ui-footer {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .options-setting-grid--logs .options-setting-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .options-setting-grid--ui-top .options-setting-head,
  .options-setting-card--toggle .options-setting-head {
    grid-template-columns: minmax(0, 1fr) max-content;
    justify-items: stretch;
    align-items: center;
  }

  .options-setting-grid--ui-top .options-setting-card,
  .options-setting-card--toggle,
  .options-setting-control,
  .options-setting-control--select {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  .options-setting-control--short {
    inline-size: var(--options-settings-short-width);
    max-inline-size: var(--options-settings-short-width);
    min-inline-size: 0;
    justify-self: end;
  }

  .options-action-stack--panel,
  .options-action-stack--sorting {
    inline-size: max-content;
    max-inline-size: 100%;
    min-inline-size: 10rem;
    justify-self: end;
  }

  .options-action-stack--panel .btn,
  .options-action-stack--sorting .btn {
    inline-size: auto;
    min-inline-size: 10rem;
    max-inline-size: 100%;
  }
}

@media (max-width: 899.98px) {
  .options-ui-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .options-setting-grid--sorting {
    grid-template-columns: 1fr;
  }

  .options-sorting-controls {
    grid-template-columns: 1fr;
  }

  .options-setting-control--sorting-field,
  .options-setting-control--sorting-direction {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }
}

/* --- components/options-users.css --- */
.options-users-panel {
  display: grid;
  gap: var(--space-2);
}

.options-users-block,
.options-users-create-form,
.options-users-manage-panel,
.options-users-manage-rows {
  display: grid;
  gap: var(--space-2);
}

.options-users-block {
  min-inline-size: 0;
  padding: calc(var(--space-3) - 2px);
  border: 1px solid var(--surface-border-2);
  border-radius: var(--radius-md);
  background: var(--surface-z-elevated);
}

.options-users-create-form,
.options-users-pos-form {
  gap: calc(var(--space-1) + 2px);
}

.options-users-block-head {
  display: grid;
  gap: calc(var(--space-1) - 2px);
}

.options-users-block-head h3,
.options-users-block-head p {
  margin: 0;
}

.options-users-block-head h3 {
  font-size: calc(var(--content-font-size) - 1px);
  line-height: 1.2;
}

.options-users-block-head p {
  color: var(--text-muted);
  font-size: calc(var(--content-font-size) - 2px);
  line-height: 1.3;
}

.options-users-create-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 1.5fr) repeat(2, minmax(9rem, 0.8fr)) minmax(7.5rem, 9rem);
  gap: calc(var(--space-1) + 4px);
  align-items: end;
}

.options-users-field {
  display: grid;
  gap: calc(var(--space-1) - 2px);
  min-inline-size: 0;
}

.options-users-field--short {
  max-inline-size: 10rem;
}

.options-users-field--wide,
.options-users-field input,
.options-users-field select {
  inline-size: 100%;
  min-inline-size: 0;
}

.options-users-field-label {
  color: var(--text-strong);
  font-size: var(--content-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.options-users-table-shell {
  inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  border-radius: var(--radius-card);
}

.options-users-table {
  min-inline-size: 100%;
}

.options-users-table .is-selected td {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.options-users-table td:last-child,
.options-users-table th:last-child {
  text-align: right;
}

.options-users-row-form {
  display: inline-flex;
  justify-content: flex-end;
  margin: 0;
}

.options-users-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 5.25rem;
  min-block-size: 1.9rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-muted);
  background: var(--surface-subtle);
  color: var(--text-strong);
  font-size: calc(var(--content-font-size) - 1px);
  line-height: 1.1;
  white-space: nowrap;
}

.options-users-pill--role {
  min-inline-size: 5.75rem;
}

.options-users-pill--active {
  border-color: color-mix(in srgb, var(--success-color) 35%, var(--border-muted));
  color: var(--success-color);
}

.options-users-pill--inactive {
  border-color: color-mix(in srgb, var(--warning-color) 35%, var(--border-muted));
  color: var(--warning-color);
}

.options-users-manage-rows {
  --options-users-manage-primary-width: 14rem;
  --options-users-manage-secondary-width: 11rem;
}

.options-users-manage-row {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) max-content;
  gap: var(--space-2);
  align-items: center;
}

.options-users-manage-row-info,
.options-users-email-form,
.options-users-manage-actions {
  min-inline-size: 0;
}

.options-users-manage-row-info {
  display: grid;
  gap: 2px;
}

.options-users-manage-row-label {
  color: var(--text-muted);
  font-size: calc(var(--content-font-size) - 2px);
  line-height: 1.2;
}

.options-users-manage-row-value {
  color: var(--text-strong);
  font-size: var(--content-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.options-users-email-form {
  display: grid;
  grid-template-columns: var(--options-users-manage-primary-width) var(--options-users-manage-secondary-width);
  gap: var(--space-2);
  align-items: center;
  justify-content: start;
  justify-self: start;
  margin: 0;
}

.options-users-email-form input {
  inline-size: 100%;
  min-inline-size: 0;
}

.options-users-manage-actions {
  display: grid;
  grid-template-columns: var(--options-users-manage-primary-width) var(--options-users-manage-secondary-width);
  gap: var(--space-2);
  align-items: start;
  justify-content: start;
  justify-self: start;
}

.options-users-inline-action,
.options-users-role-menu {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  justify-self: start;
}

.options-users-email-form .btn,
.options-users-inline-action .btn,
.options-users-role-menu > summary.btn,
.options-users-role-form .btn {
  inline-size: 100%;
  min-inline-size: 0;
  justify-content: center;
}

.options-users-role-menu > summary {
  list-style: none;
}

.options-users-role-menu > summary::-webkit-details-marker {
  display: none;
}

.options-users-role-form {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

@media (max-width: 1199.98px) {
  .options-users-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .options-users-field--short {
    max-inline-size: none;
  }
}

@media (max-width: 991.98px) {
  .options-users-create-grid {
    grid-template-columns: 1fr;
  }

  .options-users-manage-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .options-users-email-form,
  .options-users-manage-actions {
    inline-size: 100%;
    min-inline-size: 0;
    justify-self: stretch;
  }

  .options-users-email-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1);
    align-items: center;
  }

  .options-users-manage-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
    align-items: start;
  }

  .options-users-inline-action,
  .options-users-role-menu {
    inline-size: 100%;
    max-inline-size: 100%;
    justify-self: stretch;
  }

  .options-users-email-form input {
    inline-size: 100%;
    min-inline-size: 0;
  }

  .options-users-email-form .btn,
  .options-users-inline-action .btn,
  .options-users-role-menu > summary.btn,
  .options-users-role-form .btn,
  .options-section-actions--end > .btn {
    min-inline-size: 0;
    inline-size: 100%;
  }

  .options-users-email-form .btn {
    min-inline-size: 8.25rem;
  }

  .options-users-role-form {
    inline-size: 100%;
  }
}

.options-users-create-grid--pos {
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 15rem);
  gap: var(--space-3) var(--space-3);
  align-items: end;
}

.options-users-pos-email {
  grid-column: 1 / -1;
}

.options-users-pos-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(9rem, 1fr));
  gap: calc(var(--space-1) + 4px);
}

.options-users-pos-summary-card,
.options-credential-reveal {
  display: grid;
  gap: var(--space-1);
}

.options-users-pos-summary-card {
  min-block-size: 3.35rem;
  padding: calc(var(--space-1) + 4px) var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
  align-content: center;
}

.options-users-pos-form {
  display: grid;
  gap: calc(var(--space-1) + 2px);
}

.options-users-pos-choice {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
  align-self: end;
}

.options-users-pos-choice > legend {
  margin-block-end: var(--space-1);
}

.options-users-pos-actions {
  align-self: end;
  justify-content: flex-end;
}

.options-users-pos-actions > .btn {
  inline-size: min(100%, 15rem);
  min-inline-size: 12rem;
}

.options-users-pos-choice-list {
  display: grid;
  gap: var(--space-1);
}

.options-users-pos-radio {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-1) + 2px);
  color: var(--text-strong);
}

.options-credential-grid {
  display: grid;
  gap: var(--space-2);
}

.options-credential-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.options-credential-copy {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

.options-credential-value {
  display: block;
  overflow-wrap: anywhere;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-1);
  background: var(--surface-subtle);
  color: var(--text-strong);
}

.options-copy-btn {
  inline-size: 2.5rem;
  min-inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
}

.options-copy-btn svg {
  inline-size: 1rem;
  block-size: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pos-access-modal[hidden] {
  display: none;
}

.pos-access-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.pos-access-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--surface-base) 62%, transparent);
  backdrop-filter: blur(14px);
  cursor: default;
}

.pos-access-dialog {
  position: relative;
  display: grid;
  gap: var(--space-3);
  inline-size: min(58rem, 100%);
  max-block-size: min(42rem, calc(100vh - 2rem));
  overflow: auto;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--surface-border-2));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 8%, transparent), transparent 48%),
    var(--surface-z-elevated);
  box-shadow: var(--shadow-lg);
}

.pos-access-dialog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-2);
}

.pos-access-dialog-head h3,
.pos-access-dialog-head p,
.pos-access-regenerate-note {
  margin: 0;
}

.pos-access-dialog-head h3 {
  font-size: calc(var(--content-font-size) + 4px);
  line-height: 1.15;
}

.pos-access-dialog-head p,
.pos-access-regenerate-note {
  color: var(--text-muted);
  font-size: calc(var(--content-font-size) - 1px);
  line-height: 1.35;
}

.pos-access-close {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-strong);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.pos-access-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.pos-access-choice-card {
  display: grid;
  min-block-size: 13rem;
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
  color: var(--text-strong);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.pos-access-choice-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-color) 35%, var(--border-1));
}

.pos-access-choice-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent-color) 70%, var(--border-1));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 55%),
    color-mix(in srgb, var(--accent-color) 10%, var(--surface-subtle));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 35%, transparent) inset;
}

.pos-access-choice-card > input[type="radio"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.pos-access-choice-card-body {
  display: grid;
  gap: calc(var(--space-1) + 2px);
  align-content: start;
}

.pos-access-choice-card-body strong {
  font-size: calc(var(--content-font-size) + 2px);
  line-height: 1.2;
}

.pos-access-choice-card-body span {
  color: var(--text-muted);
  font-size: calc(var(--content-font-size) - 1px);
  line-height: 1.35;
}

.pos-access-choice-card-body input[type="email"] {
  inline-size: 100%;
  margin-block-start: var(--space-1);
}

.pos-access-choice-card-body input[type="email"]:disabled {
  opacity: 0.55;
}

@media (max-width: 1199.98px) {
  .options-users-pos-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .options-users-create-grid--pos {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 15rem);
  }
}

@media (max-width: 991.98px) {
  .options-users-pos-summary-grid,
  .options-credential-row {
    grid-template-columns: 1fr;
  }

  .options-copy-btn {
    justify-self: start;
  }

  .options-users-create-grid--pos {
    grid-template-columns: 1fr;
  }

  .options-users-pos-actions {
    justify-content: flex-start;
  }

  .options-users-pos-actions > .btn {
    inline-size: 100%;
  }

  .pos-access-dialog {
    padding: var(--space-3);
  }

  .pos-access-choice-grid {
    grid-template-columns: 1fr;
  }

  .pos-access-choice-card {
    min-block-size: 0;
  }
}

/* --- components/options-authorizations.css --- */
.options-authorizations-panel {
  display: grid;
  gap: var(--space-3);
}

.options-authorizations-intro,
.options-authorizations-empty,
.options-authorizations-target span,
.options-auth-scope-label {
  color: var(--text-muted);
  font-size: calc(var(--content-font-size) - 2px);
  line-height: 1.35;
}

.options-authorizations-selector-form {
  max-inline-size: 42rem;
}

.options-authorizations-selector-form label {
  min-inline-size: 7.5rem;
}

.options-authorizations-target {
  display: grid;
  gap: 2px;
}

.options-authorizations-target strong {
  color: var(--text-strong);
  font-size: var(--content-font-size);
  line-height: 1.2;
}

.options-authorizations-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: start;
}

.options-auth-group {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-3);
}

.options-auth-group[data-options-auth-group="screen_access"] {
  order: 1;
}

.options-auth-group[data-options-auth-group="logs_visibility"] {
  order: 2;
}

.options-auth-group[data-options-auth-group="flags_controls"] {
  order: 3;
}

.options-auth-group[data-options-auth-group="orders_controls"] {
  order: 4;
  grid-column: 1 / -1;
}

.options-auth-group-head h4 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--content-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.options-auth-group-head p,
.options-auth-grid-head,
.options-auth-permission-help {
  display: none;
}

.options-auth-grid-body {
  display: grid;
  gap: calc(var(--space-1) + 1px);
}

.options-auth-row {
  display: grid;
  align-items: center;
  min-inline-size: 0;
  padding-block: calc(var(--space-1) + 1px);
  border-block-end: 1px solid color-mix(in srgb, var(--border-muted) 80%, transparent);
}

.options-auth-grid-body .options-auth-row:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.options-auth-row.is-unscoped {
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: var(--space-2);
}

.options-auth-row.is-scoped {
  grid-template-columns: minmax(11rem, 1fr) max-content max-content;
  column-gap: clamp(0.75rem, 1vw, 1rem);
  row-gap: var(--space-1);
}

.options-auth-permission,
.options-auth-inline,
.options-auth-state-form,
.options-auth-scope,
.options-auth-scope-form,
.options-auth-multiselect,
.options-auth-multiselect .filter-multiselect-details {
  min-inline-size: 0;
}

.options-auth-permission-label,
.options-auth-scope-summary {
  color: var(--text-strong);
  font-size: var(--content-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.options-auth-inline,
.options-auth-state,
.options-auth-state-form {
  display: flex;
  align-items: center;
}

.options-auth-inline {
  gap: clamp(1rem, 1.3vw, 1.5rem);
  justify-self: start;
}

.options-auth-state-form,
.options-auth-scope-form {
  margin: 0;
}

.options-auth-state-form {
  justify-self: start;
}

.options-auth-state-form .options-status-pill-button {
  min-inline-size: 6rem;
  min-block-size: 2.5rem;
  padding-inline: var(--space-2);
}

.options-auth-scope {
  display: grid;
  gap: 1px;
}

.options-auth-scope-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.options-auth-scope-form {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: var(--space-1);
  align-items: center;
  justify-self: start;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.options-auth-multiselect {
  inline-size: auto;
  max-inline-size: 100%;
  max-width: none;
  justify-self: start;
}

.options-auth-multiselect .filter-multiselect-details,
.options-auth-multiselect .filter-multiselect-summary {
  inline-size: auto;
  max-inline-size: 100%;
}

.options-auth-multiselect .filter-multiselect-details {
  display: block;
}

.options-auth-multiselect .filter-multiselect-summary {
  min-inline-size: 12rem;
  min-block-size: 2.5rem;
  justify-content: space-between;
}

.options-auth-multiselect .filter-multiselect-summary-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.options-auth-scope-form .btn {
  min-inline-size: 7.75rem;
  min-block-size: 2.5rem;
  padding-inline: var(--space-2);
  justify-content: center;
}

.options-auth-group[data-options-auth-group="orders_controls"] .options-auth-scope-form {
  column-gap: var(--space-1);
}

.options-auth-group[data-options-auth-group="orders_controls"] .options-auth-multiselect .filter-multiselect-summary {
  min-inline-size: clamp(11rem, 17vw, 15rem);
}

@media (max-width: 1399.98px) {
  .options-authorizations-groups {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas:
      "screen logs"
      "screen flags"
      "orders orders";
  }

  .options-auth-group[data-options-auth-group="screen_access"] {
    grid-area: screen;
  }

  .options-auth-group[data-options-auth-group="logs_visibility"] {
    grid-area: logs;
  }

  .options-auth-group[data-options-auth-group="flags_controls"] {
    grid-area: flags;
  }

  .options-auth-group[data-options-auth-group="orders_controls"] {
    grid-area: orders;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .options-auth-group {
    padding: var(--space-2);
  }

  .options-auth-row.is-scoped {
    grid-template-columns: minmax(9.5rem, 1fr) max-content max-content;
    column-gap: 0.7rem;
  }

  .options-auth-inline {
    gap: clamp(0.9rem, 1.1vw, 1.125rem);
  }

  .options-auth-group[data-options-auth-group="orders_controls"] .options-auth-multiselect .filter-multiselect-summary {
    min-inline-size: clamp(10rem, 22vw, 13rem);
  }
}

@media (max-width: 991.98px) {
  .options-authorizations-selector-form,
  .options-authorizations-selector-form label,
  .options-authorizations-selector-form select {
    inline-size: 100%;
    max-inline-size: none;
  }

  .options-authorizations-groups {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .options-auth-group[data-options-auth-group="screen_access"],
  .options-auth-group[data-options-auth-group="logs_visibility"],
  .options-auth-group[data-options-auth-group="flags_controls"],
  .options-auth-group[data-options-auth-group="orders_controls"] {
    grid-area: auto;
    grid-column: auto;
  }

  .options-auth-row.is-unscoped {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: var(--space-1);
    align-items: start;
  }

  .options-auth-row.is-scoped {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .options-auth-row.is-scoped > .options-auth-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-self: start;
    gap: calc(var(--space-1) - 2px) var(--space-2);
  }

  .options-auth-row.is-scoped > .options-auth-scope {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--space-1) - 2px);
  }

  .options-auth-row.is-scoped > .options-auth-scope-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
    inline-size: 100%;
    max-inline-size: 100%;
    justify-self: stretch;
  }

  .options-auth-row.is-scoped > .options-auth-scope-form .options-auth-multiselect {
    flex: 1 1 14rem;
    min-inline-size: min(100%, 14rem);
    inline-size: auto;
    max-inline-size: 100%;
  }

  .options-auth-row.is-scoped > .options-auth-scope-form .btn {
    flex: 0 0 auto;
    align-self: flex-start;
  }

  .options-auth-row.is-scoped .options-auth-multiselect,
  .options-auth-row.is-scoped .options-auth-multiselect .filter-multiselect-details,
  .options-auth-row.is-scoped .options-auth-multiselect .filter-multiselect-summary {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    max-width: none;
  }
}

@media (max-width: 759.98px) {
  .options-auth-group {
    gap: var(--space-1);
  }

  .options-auth-grid-body {
    gap: var(--space-1);
  }

  .options-auth-row {
    padding-block: var(--space-1);
  }

  .options-auth-row.is-unscoped {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .options-auth-state-form .options-status-pill-button {
    min-inline-size: 5.75rem;
  }

  .options-auth-scope-form .btn {
    min-inline-size: 6.5rem;
  }
}

@media (max-width: 639.98px) {
  .options-auth-row.is-scoped > .options-auth-inline {
    gap: calc(var(--space-1) - 2px) var(--space-1);
  }

  .options-auth-row.is-scoped > .options-auth-scope-form {
    flex-direction: column;
    align-items: stretch;
  }

  .options-auth-row.is-scoped > .options-auth-scope-form .options-auth-multiselect {
    flex: none;
    inline-size: 100%;
    min-inline-size: 0;
  }

  .options-auth-row.is-scoped > .options-auth-scope-form .btn {
    align-self: flex-start;
  }
}


/* --- patterns/filter-bar.css --- */
.screen-filters {
  display: grid;
  gap: var(--space-2);
}

.filter-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.screen-filters-primary {
  align-items: end;
}

.screen-filters-primary-multi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
}

.screen-filters-primary-multi > * {
  min-width: 0;
}

.filter-actions {
  display: inline-flex;
  align-items: end;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: max-content;
  margin-inline-start: auto;
  flex: 0 0 auto;
}

.filter-actions > .btn {
  min-width: 0;
  width: auto;
  padding-inline: var(--btn-pad-x);
}

.filter-multiselect {
  min-width: 0;
  flex: 0 1 calc((100% - (var(--space-2) * 3)) / 4);
  max-width: calc((100% - (var(--space-2) * 3)) / 4);
  min-inline-size: 0;
}

.filter-inline-select {
  min-width: 0;
  flex: 0 1 calc((100% - (var(--space-2) * 3)) / 4);
  max-width: calc((100% - (var(--space-2) * 3)) / 4);
  min-inline-size: 0;
}

.filter-inline-select select {
  width: 100%;
  min-height: var(--form-control-min-h);
}

.filter-inline-date {
  position: relative;
}

.filter-inline-date input[type="date"] {
  width: 100%;
  min-height: var(--form-control-min-h);
  padding-inline-end: 2.4rem;
  cursor: pointer;
}

.filter-inline-date:not(.has-value) input[type="date"] {
  color: transparent;
}

.filter-inline-date:not(.has-value) input[type="date"]::-webkit-date-and-time-value {
  color: transparent;
}

.filter-inline-date input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.88;
}

.filter-inline-date-placeholder {
  position: absolute;
  inset-inline-start: var(--form-control-pad-x);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-main);
  pointer-events: none;
  white-space: nowrap;
}

.filter-inline-date.has-value .filter-inline-date-placeholder {
  display: none;
}

.filter-inline-date:focus-within .filter-inline-date-placeholder {
  display: none;
}

.filter-multiselect-details {
  position: relative;
}

.filter-multiselect-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--form-control-min-h);
  min-width: 0;
  padding: calc(var(--form-control-pad-y) + 1px) calc(var(--form-control-pad-x) + 4px);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
}

.filter-multiselect-summary::-webkit-details-marker {
  display: none;
}

.filter-multiselect-summary-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.filter-multiselect-summary::after {
  content: "v";
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.filter-multiselect-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-1) 80%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--negative-text);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  flex: 0 0 auto;
}

.filter-multiselect-clear[hidden] {
  display: none;
}

.filter-multiselect-panel {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: auto;
  inline-size: min(max(100%, 16rem), calc(100vw - 1.5rem));
  max-inline-size: calc(100vw - 1.5rem);
  top: calc(100% + 0.35rem);
  display: grid;
  gap: 0.45rem;
  padding: 0.6rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-popover);
}

.filter-multiselect-search-shell {
  display: block;
  min-width: 0;
}

.filter-multiselect-search-shell input {
  width: 100%;
}

.filter-multiselect-options {
  display: grid;
  gap: 0.3rem;
  max-height: 16rem;
  overflow: auto;
}

.filter-multiselect-status {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.filter-multiselect-option {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.15rem 0;
}

.filter-multiselect-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.filter-multiselect-option.is-hidden {
  display: none;
}

.screen-filters-advanced {
  border-top: 1px solid var(--border-1);
  padding-top: calc(var(--space-2) - 2px);
}

.screen-filters-advanced > summary {
  display: block;
  min-block-size: 1.75rem;
  cursor: pointer;
  color: var(--text-strong);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
}

.screen-filters-advanced-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.screen-filters-advanced-summary-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.screen-filters-advanced-summary-side {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  margin-inline-start: auto;
  flex: 0 1 auto;
}

.screen-filters-advanced[open] > summary {
  margin-bottom: calc(var(--space-2) - 2px);
}

.status-column-settings {
  display: grid;
  gap: calc(var(--space-2) - 2px);
  margin-top: calc(var(--space-2) - 2px);
}

.status-column-settings-copy {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.status-column-settings-grid {
  display: grid;
  gap: calc(var(--space-3) - 4px);
}

.status-column-settings-grid.is-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.status-column-settings-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.status-column-settings-heading {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
}

.status-column-settings-list {
  display: grid;
  gap: 8px;
}

.status-column-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--border-1) 80%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-3) 92%, transparent);
}

.status-column-option.is-locked {
  opacity: 0.78;
}

.status-column-option.is-dragging {
  opacity: 0.72;
}

.status-column-option.is-picked {
  border-color: color-mix(in srgb, var(--text-strong) 24%, var(--border-1));
  background: color-mix(in srgb, var(--bg-3) 88%, var(--bg-2));
}

.status-column-option.is-simple {
  grid-template-columns: 32px minmax(0, 1fr);
}

.status-column-option.is-simple .status-column-toggle {
  grid-column: 2;
}

.status-column-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--border-1) 80%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: grab;
  font: inherit;
  touch-action: none;
}

.status-column-grip:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.status-column-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.status-column-toggle span {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.status-column-digits {
  display: inline-flex;
  align-items: center;
}

.status-column-digits select {
  min-width: 5.25rem;
}

.status-column-side-controls {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}

.status-column-side-controls > * {
  flex: 0 0 auto;
}

.status-column-toggle-filter,
.status-column-toggle-sticky {
  width: auto;
}

.status-column-toggle-filter span,
.status-column-toggle-sticky span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.status-column-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.status-column-actions {
  display: flex;
  justify-content: flex-end;
}

.table-infinite-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

@media (max-width: 1200px) {
  .filter-multiselect,
  .filter-inline-select {
    flex-basis: calc((100% - (var(--space-2) * 2)) / 3);
    max-width: calc((100% - (var(--space-2) * 2)) / 3);
  }
}

@media (max-width: 991.98px) {
  .filter-multiselect,
  .filter-inline-select {
    flex-basis: calc((100% - var(--space-2)) / 2);
    max-width: calc((100% - var(--space-2)) / 2);
    min-inline-size: 0;
  }

  .filter-actions {
    justify-content: flex-end;
  }

  .filter-actions > .btn {
    width: auto;
    min-width: 0;
  }


  .status-column-settings {
    gap: var(--space-1);
    padding: 0;
  }

  .status-column-settings-copy {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .status-column-settings-grid.is-split {
    grid-template-columns: 1fr;
  }

  .status-column-settings-panel {
    gap: 8px;
  }

  .status-column-settings-list {
    gap: 8px;
  }

  .status-column-option {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
  }

  .status-column-grip {
    min-width: 28px;
    min-height: 28px;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .status-column-toggle {
    justify-self: stretch;
    align-items: center;
  }

  .status-column-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  .status-column-digits {
    justify-self: auto;
  }

  .status-column-digits select {
    width: auto;
    min-width: 4.75rem;
    padding-inline: 0.45rem;
    font-size: 0.82rem;
  }

  .status-column-option.is-simple {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .status-column-side-controls {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-items: center;
    gap: 8px;
  }

  .status-column-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .status-column-actions {
    justify-content: flex-end;
  }

  .status-column-actions > .btn {
    width: auto;
  }

  .screen-filters-advanced-summary-side {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-inline-start: 0;
  }
}

@media (max-width: 370px) {
  .filter-multiselect,
  .filter-inline-select {
    flex-basis: 100%;
    max-width: 100%;
    min-inline-size: 0;
  }

  .filter-actions {
    flex-basis: 100%;
    margin-inline-start: 0;
  }
}

@media (min-width: 1880px) {
  .screen-filters-primary-multi {
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
  }

  .filter-multiselect,
  .filter-inline-select {
    flex: 1 1 0;
    max-width: none;
    min-inline-size: 0;
  }

  .filter-actions {
    flex: 0 0 auto;
    margin-inline-start: 0;
    justify-content: flex-start;
  }
}

/* --- patterns/business-table.css --- */
.freeze-col {
  left: 0;
  inset-inline-start: 0;
  background: var(--bg-3);
  background-clip: padding-box;
  box-shadow: 1px 0 0 color-mix(in srgb, var(--border-1) 70%, transparent);
}

table thead th.freeze-col,
.wide-table thead th.freeze-col,
.simple-grid thead th.freeze-col,
.table-clean thead th.freeze-col {
  position: sticky;
  z-index: calc(var(--z-sticky-col) + 3);
  background: var(--bg-2);
}

table tbody td.freeze-col,
.wide-table tbody td.freeze-col,
.simple-grid tbody td.freeze-col,
.table-clean tbody td.freeze-col {
  position: sticky;
  z-index: calc(var(--z-sticky-col) + 1);
  background: var(--bg-1);
}

tbody tr:hover td.freeze-col {
  background: color-mix(in srgb, var(--accent-color) var(--table-hover-mix), var(--bg-1));
}

.freeze-col-1 {
  left: var(--table-sticky-col-1-left);
  inset-inline-start: var(--table-sticky-col-1-left);
  width: var(--table-freeze-col-1-w);
  min-width: var(--table-freeze-col-1-w);
  max-width: var(--table-freeze-col-1-w);
  inline-size: var(--table-freeze-col-1-w);
  min-inline-size: var(--table-freeze-col-1-w);
  max-inline-size: var(--table-freeze-col-1-w);
}

.freeze-col-2 {
  left: var(--table-sticky-col-2-left);
  inset-inline-start: var(--table-sticky-col-2-left);
  width: var(--table-freeze-col-2-w);
  min-width: var(--table-freeze-col-2-w);
  max-width: var(--table-freeze-col-2-w);
  inline-size: var(--table-freeze-col-2-w);
  min-inline-size: var(--table-freeze-col-2-w);
  max-inline-size: var(--table-freeze-col-2-w);
}

.freeze-col-3 {
  left: var(--table-sticky-col-3-left);
  inset-inline-start: var(--table-sticky-col-3-left);
  width: var(--table-freeze-col-3-w);
  min-width: var(--table-freeze-col-3-w);
  max-width: var(--table-freeze-col-3-w);
  inline-size: var(--table-freeze-col-3-w);
  min-inline-size: var(--table-freeze-col-3-w);
  max-inline-size: var(--table-freeze-col-3-w);
}

.freeze-col-4 {
  left: var(--table-sticky-col-4-left);
  inset-inline-start: var(--table-sticky-col-4-left);
  width: var(--table-freeze-col-4-w);
  min-width: var(--table-freeze-col-4-w);
  max-width: var(--table-freeze-col-4-w);
  inline-size: var(--table-freeze-col-4-w);
  min-inline-size: var(--table-freeze-col-4-w);
  max-inline-size: var(--table-freeze-col-4-w);
}

.freeze-col-5 {
  left: var(--table-sticky-col-5-left);
  inset-inline-start: var(--table-sticky-col-5-left);
  width: var(--table-freeze-col-5-w);
  min-width: var(--table-freeze-col-5-w);
  max-width: var(--table-freeze-col-5-w);
  inline-size: var(--table-freeze-col-5-w);
  min-inline-size: var(--table-freeze-col-5-w);
  max-inline-size: var(--table-freeze-col-5-w);
}

.freeze-col-6 {
  left: var(--table-sticky-col-6-left);
  inset-inline-start: var(--table-sticky-col-6-left);
  width: var(--table-freeze-col-6-w);
  min-width: var(--table-freeze-col-6-w);
  max-width: var(--table-freeze-col-6-w);
  inline-size: var(--table-freeze-col-6-w);
  min-inline-size: var(--table-freeze-col-6-w);
  max-inline-size: var(--table-freeze-col-6-w);
}

.freeze-col-7 {
  left: var(--table-sticky-col-7-left);
  inset-inline-start: var(--table-sticky-col-7-left);
  width: var(--table-freeze-col-7-w);
  min-width: var(--table-freeze-col-7-w);
  max-width: var(--table-freeze-col-7-w);
  inline-size: var(--table-freeze-col-7-w);
  min-inline-size: var(--table-freeze-col-7-w);
  max-inline-size: var(--table-freeze-col-7-w);
}

.freeze-col-8 {
  left: var(--table-sticky-col-8-left);
  inset-inline-start: var(--table-sticky-col-8-left);
  width: var(--table-freeze-col-8-w);
  min-width: var(--table-freeze-col-8-w);
  max-width: var(--table-freeze-col-8-w);
  inline-size: var(--table-freeze-col-8-w);
  min-inline-size: var(--table-freeze-col-8-w);
  max-inline-size: var(--table-freeze-col-8-w);
}

.freeze-col-9 {
  left: var(--table-sticky-col-9-left);
  inset-inline-start: var(--table-sticky-col-9-left);
  width: var(--table-freeze-col-9-w);
  min-width: var(--table-freeze-col-9-w);
  max-width: var(--table-freeze-col-9-w);
  inline-size: var(--table-freeze-col-9-w);
  min-inline-size: var(--table-freeze-col-9-w);
  max-inline-size: var(--table-freeze-col-9-w);
}

.freeze-col-10 {
  left: var(--table-sticky-col-10-left);
  inset-inline-start: var(--table-sticky-col-10-left);
  width: var(--table-freeze-col-10-w);
  min-width: var(--table-freeze-col-10-w);
  max-width: var(--table-freeze-col-10-w);
  inline-size: var(--table-freeze-col-10-w);
  min-inline-size: var(--table-freeze-col-10-w);
  max-inline-size: var(--table-freeze-col-10-w);
}

.freeze-col-11 {
  left: var(--table-sticky-col-11-left);
  inset-inline-start: var(--table-sticky-col-11-left);
  width: var(--table-freeze-col-11-w);
  min-width: var(--table-freeze-col-11-w);
  max-width: var(--table-freeze-col-11-w);
  inline-size: var(--table-freeze-col-11-w);
  min-inline-size: var(--table-freeze-col-11-w);
  max-inline-size: var(--table-freeze-col-11-w);
}

.freeze-col-12 {
  left: var(--table-sticky-col-12-left);
  inset-inline-start: var(--table-sticky-col-12-left);
  width: var(--table-freeze-col-12-w);
  min-width: var(--table-freeze-col-12-w);
  max-width: var(--table-freeze-col-12-w);
  inline-size: var(--table-freeze-col-12-w);
  min-inline-size: var(--table-freeze-col-12-w);
  max-inline-size: var(--table-freeze-col-12-w);
}

.freeze-col-5 {
  left: var(--table-sticky-col-5-left);
  inset-inline-start: var(--table-sticky-col-5-left);
  width: var(--table-freeze-col-5-w);
  min-width: var(--table-freeze-col-5-w);
  max-width: var(--table-freeze-col-5-w);
  inline-size: var(--table-freeze-col-5-w);
  min-inline-size: var(--table-freeze-col-5-w);
  max-inline-size: var(--table-freeze-col-5-w);
}

.freeze-col-6 {
  left: var(--table-sticky-col-6-left);
  inset-inline-start: var(--table-sticky-col-6-left);
  width: var(--table-freeze-col-6-w);
  min-width: var(--table-freeze-col-6-w);
  max-width: var(--table-freeze-col-6-w);
  inline-size: var(--table-freeze-col-6-w);
  min-inline-size: var(--table-freeze-col-6-w);
  max-inline-size: var(--table-freeze-col-6-w);
}

.freeze-col-7 {
  left: var(--table-sticky-col-7-left);
  inset-inline-start: var(--table-sticky-col-7-left);
  width: var(--table-freeze-col-7-w);
  min-width: var(--table-freeze-col-7-w);
  max-width: var(--table-freeze-col-7-w);
  inline-size: var(--table-freeze-col-7-w);
  min-inline-size: var(--table-freeze-col-7-w);
  max-inline-size: var(--table-freeze-col-7-w);
}

.freeze-col-8 {
  left: var(--table-sticky-col-8-left);
  inset-inline-start: var(--table-sticky-col-8-left);
  width: var(--table-freeze-col-8-w);
  min-width: var(--table-freeze-col-8-w);
  max-width: var(--table-freeze-col-8-w);
  inline-size: var(--table-freeze-col-8-w);
  min-inline-size: var(--table-freeze-col-8-w);
  max-inline-size: var(--table-freeze-col-8-w);
}

.freeze-col-9 {
  left: var(--table-sticky-col-9-left);
  inset-inline-start: var(--table-sticky-col-9-left);
  width: var(--table-freeze-col-9-w);
  min-width: var(--table-freeze-col-9-w);
  max-width: var(--table-freeze-col-9-w);
  inline-size: var(--table-freeze-col-9-w);
  min-inline-size: var(--table-freeze-col-9-w);
  max-inline-size: var(--table-freeze-col-9-w);
}

.freeze-col-10 {
  left: var(--table-sticky-col-10-left);
  inset-inline-start: var(--table-sticky-col-10-left);
  width: var(--table-freeze-col-10-w);
  min-width: var(--table-freeze-col-10-w);
  max-width: var(--table-freeze-col-10-w);
  inline-size: var(--table-freeze-col-10-w);
  min-inline-size: var(--table-freeze-col-10-w);
  max-inline-size: var(--table-freeze-col-10-w);
}

.freeze-col-11 {
  left: var(--table-sticky-col-11-left);
  inset-inline-start: var(--table-sticky-col-11-left);
  width: var(--table-freeze-col-11-w);
  min-width: var(--table-freeze-col-11-w);
  max-width: var(--table-freeze-col-11-w);
  inline-size: var(--table-freeze-col-11-w);
  min-inline-size: var(--table-freeze-col-11-w);
  max-inline-size: var(--table-freeze-col-11-w);
}

.freeze-col-5 {
  left: var(--table-sticky-col-5-left);
  inset-inline-start: var(--table-sticky-col-5-left);
  width: var(--table-freeze-col-5-w);
  min-width: var(--table-freeze-col-5-w);
  max-width: var(--table-freeze-col-5-w);
  inline-size: var(--table-freeze-col-5-w);
  min-inline-size: var(--table-freeze-col-5-w);
  max-inline-size: var(--table-freeze-col-5-w);
}

.freeze-col-6 {
  left: var(--table-sticky-col-6-left);
  inset-inline-start: var(--table-sticky-col-6-left);
  width: var(--table-freeze-col-6-w);
  min-width: var(--table-freeze-col-6-w);
  max-width: var(--table-freeze-col-6-w);
  inline-size: var(--table-freeze-col-6-w);
  min-inline-size: var(--table-freeze-col-6-w);
  max-inline-size: var(--table-freeze-col-6-w);
}

.freeze-col-7 {
  left: var(--table-sticky-col-7-left);
  inset-inline-start: var(--table-sticky-col-7-left);
  width: var(--table-freeze-col-7-w);
  min-width: var(--table-freeze-col-7-w);
  max-width: var(--table-freeze-col-7-w);
  inline-size: var(--table-freeze-col-7-w);
  min-inline-size: var(--table-freeze-col-7-w);
  max-inline-size: var(--table-freeze-col-7-w);
}

.freeze-col-8 {
  left: var(--table-sticky-col-8-left);
  inset-inline-start: var(--table-sticky-col-8-left);
  width: var(--table-freeze-col-8-w);
  min-width: var(--table-freeze-col-8-w);
  max-width: var(--table-freeze-col-8-w);
  inline-size: var(--table-freeze-col-8-w);
  min-inline-size: var(--table-freeze-col-8-w);
  max-inline-size: var(--table-freeze-col-8-w);
}

.freeze-col-9 {
  left: var(--table-sticky-col-9-left);
  inset-inline-start: var(--table-sticky-col-9-left);
  width: var(--table-freeze-col-9-w);
  min-width: var(--table-freeze-col-9-w);
  max-width: var(--table-freeze-col-9-w);
  inline-size: var(--table-freeze-col-9-w);
  min-inline-size: var(--table-freeze-col-9-w);
  max-inline-size: var(--table-freeze-col-9-w);
}

.freeze-col-10 {
  left: var(--table-sticky-col-10-left);
  inset-inline-start: var(--table-sticky-col-10-left);
  width: var(--table-freeze-col-10-w);
  min-width: var(--table-freeze-col-10-w);
  max-width: var(--table-freeze-col-10-w);
  inline-size: var(--table-freeze-col-10-w);
  min-inline-size: var(--table-freeze-col-10-w);
  max-inline-size: var(--table-freeze-col-10-w);
}

.freeze-col-5 {
  left: var(--table-sticky-col-5-left);
  inset-inline-start: var(--table-sticky-col-5-left);
  width: var(--table-freeze-col-5-w);
  min-width: var(--table-freeze-col-5-w);
  max-width: var(--table-freeze-col-5-w);
  inline-size: var(--table-freeze-col-5-w);
  min-inline-size: var(--table-freeze-col-5-w);
  max-inline-size: var(--table-freeze-col-5-w);
}

.freeze-col-6 {
  left: var(--table-sticky-col-6-left);
  inset-inline-start: var(--table-sticky-col-6-left);
  width: var(--table-freeze-col-6-w);
  min-width: var(--table-freeze-col-6-w);
  max-width: var(--table-freeze-col-6-w);
  inline-size: var(--table-freeze-col-6-w);
  min-inline-size: var(--table-freeze-col-6-w);
  max-inline-size: var(--table-freeze-col-6-w);
}

.freeze-col-7 {
  left: var(--table-sticky-col-7-left);
  inset-inline-start: var(--table-sticky-col-7-left);
  width: var(--table-freeze-col-7-w);
  min-width: var(--table-freeze-col-7-w);
  max-width: var(--table-freeze-col-7-w);
  inline-size: var(--table-freeze-col-7-w);
  min-inline-size: var(--table-freeze-col-7-w);
  max-inline-size: var(--table-freeze-col-7-w);
}

.freeze-col-8 {
  left: var(--table-sticky-col-8-left);
  inset-inline-start: var(--table-sticky-col-8-left);
  width: var(--table-freeze-col-8-w);
  min-width: var(--table-freeze-col-8-w);
  max-width: var(--table-freeze-col-8-w);
  inline-size: var(--table-freeze-col-8-w);
  min-inline-size: var(--table-freeze-col-8-w);
  max-inline-size: var(--table-freeze-col-8-w);
}

.freeze-col-9 {
  left: var(--table-sticky-col-9-left);
  inset-inline-start: var(--table-sticky-col-9-left);
  width: var(--table-freeze-col-9-w);
  min-width: var(--table-freeze-col-9-w);
  max-width: var(--table-freeze-col-9-w);
  inline-size: var(--table-freeze-col-9-w);
  min-inline-size: var(--table-freeze-col-9-w);
  max-inline-size: var(--table-freeze-col-9-w);
}

.freeze-col-5 {
  left: var(--table-sticky-col-5-left);
  inset-inline-start: var(--table-sticky-col-5-left);
  width: var(--table-freeze-col-5-w);
  min-width: var(--table-freeze-col-5-w);
  max-width: var(--table-freeze-col-5-w);
  inline-size: var(--table-freeze-col-5-w);
  min-inline-size: var(--table-freeze-col-5-w);
  max-inline-size: var(--table-freeze-col-5-w);
}

.freeze-col-6 {
  left: var(--table-sticky-col-6-left);
  inset-inline-start: var(--table-sticky-col-6-left);
  width: var(--table-freeze-col-6-w);
  min-width: var(--table-freeze-col-6-w);
  max-width: var(--table-freeze-col-6-w);
  inline-size: var(--table-freeze-col-6-w);
  min-inline-size: var(--table-freeze-col-6-w);
  max-inline-size: var(--table-freeze-col-6-w);
}

.freeze-col-7 {
  left: var(--table-sticky-col-7-left);
  inset-inline-start: var(--table-sticky-col-7-left);
  width: var(--table-freeze-col-7-w);
  min-width: var(--table-freeze-col-7-w);
  max-width: var(--table-freeze-col-7-w);
  inline-size: var(--table-freeze-col-7-w);
  min-inline-size: var(--table-freeze-col-7-w);
  max-inline-size: var(--table-freeze-col-7-w);
}

.freeze-col-8 {
  left: var(--table-sticky-col-8-left);
  inset-inline-start: var(--table-sticky-col-8-left);
  width: var(--table-freeze-col-8-w);
  min-width: var(--table-freeze-col-8-w);
  max-width: var(--table-freeze-col-8-w);
  inline-size: var(--table-freeze-col-8-w);
  min-inline-size: var(--table-freeze-col-8-w);
  max-inline-size: var(--table-freeze-col-8-w);
}

.freeze-col-5 {
  left: var(--table-sticky-col-5-left);
  inset-inline-start: var(--table-sticky-col-5-left);
  width: var(--table-freeze-col-5-w);
  min-width: var(--table-freeze-col-5-w);
  max-width: var(--table-freeze-col-5-w);
  inline-size: var(--table-freeze-col-5-w);
  min-inline-size: var(--table-freeze-col-5-w);
  max-inline-size: var(--table-freeze-col-5-w);
}

.freeze-col-6 {
  left: var(--table-sticky-col-6-left);
  inset-inline-start: var(--table-sticky-col-6-left);
  width: var(--table-freeze-col-6-w);
  min-width: var(--table-freeze-col-6-w);
  max-width: var(--table-freeze-col-6-w);
  inline-size: var(--table-freeze-col-6-w);
  min-inline-size: var(--table-freeze-col-6-w);
  max-inline-size: var(--table-freeze-col-6-w);
}

.freeze-col-7 {
  left: var(--table-sticky-col-7-left);
  inset-inline-start: var(--table-sticky-col-7-left);
  width: var(--table-freeze-col-7-w);
  min-width: var(--table-freeze-col-7-w);
  max-width: var(--table-freeze-col-7-w);
  inline-size: var(--table-freeze-col-7-w);
  min-inline-size: var(--table-freeze-col-7-w);
  max-inline-size: var(--table-freeze-col-7-w);
}

.freeze-col-5 {
  left: var(--table-sticky-col-5-left);
  inset-inline-start: var(--table-sticky-col-5-left);
  width: var(--table-freeze-col-5-w);
  min-width: var(--table-freeze-col-5-w);
  max-width: var(--table-freeze-col-5-w);
  inline-size: var(--table-freeze-col-5-w);
  min-inline-size: var(--table-freeze-col-5-w);
  max-inline-size: var(--table-freeze-col-5-w);
}

.freeze-col-6 {
  left: var(--table-sticky-col-6-left);
  inset-inline-start: var(--table-sticky-col-6-left);
  width: var(--table-freeze-col-6-w);
  min-width: var(--table-freeze-col-6-w);
  max-width: var(--table-freeze-col-6-w);
  inline-size: var(--table-freeze-col-6-w);
  min-inline-size: var(--table-freeze-col-6-w);
  max-inline-size: var(--table-freeze-col-6-w);
}

.freeze-col-5 {
  left: var(--table-sticky-col-5-left);
  inset-inline-start: var(--table-sticky-col-5-left);
  width: var(--table-freeze-col-5-w);
  min-width: var(--table-freeze-col-5-w);
  max-width: var(--table-freeze-col-5-w);
  inline-size: var(--table-freeze-col-5-w);
  min-inline-size: var(--table-freeze-col-5-w);
  max-inline-size: var(--table-freeze-col-5-w);
}

.table-resizable thead th,
.table-resizable thead th[data-col-key] {
  position: sticky;
}

.table-resize-handle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -4px;
  z-index: var(--z-sticky-col);
  inline-size: 16px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}

.table-resizing,
.table-resizing * {
  cursor: col-resize;
  user-select: none;
}

@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  .table-resize-handle {
    display: none;
  }
}


/* --- patterns/admin-table.css --- */
.options-screen table {
  margin: 0;
  table-layout: auto;
  inline-size: max-content;
  min-inline-size: 100%;
}

.options-screen th,
.options-screen td {
  max-inline-size: var(--options-table-col-max);
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.options-screen th:last-child,
.options-screen td:last-child {
  white-space: nowrap;
  inline-size: 1%;
}

/* --- patterns/dialog.css --- */
.options-dirty-modal[hidden] {
  display: none;
}

.options-dirty-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 20vh 1rem 1rem;
}

.options-dirty-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-backdrop);
  backdrop-filter: blur(6px);
}

.options-dirty-modal .options-dirty-dialog {
  position: relative;
  justify-self: center;
  width: min(28rem, calc(100vw - 2rem));
  max-width: min(28rem, calc(100vw - 2rem));
  inline-size: min(28rem, calc(100vw - 2rem));
  min-inline-size: 0;
  margin: 0 auto;
  display: inline-grid;
  gap: var(--space-2);
}

.options-dirty-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}

body.options-modal-open {
  overflow: hidden;
}



/* --- pages/options.css --- */
/* Options page assembly only (uses generic + ETL component layers). */
.options-screen {
  --options-gap: var(--space-2);
  --options-table-col-max: min(22rem, calc(100vw - 8rem));
  --options-global-ban-add-inline: clamp(19rem, 23vw, 21rem);
  --options-global-ban-filter-inline: clamp(16rem, 21vw, 19rem);
  --options-global-ban-stack-inline: clamp(15rem, calc(100vw - 7rem), 17rem);

  display: grid;
  gap: var(--options-gap);
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  justify-self: stretch;
  font-size: calc(var(--content-font-size) - 1px);
}

.options-screen > details,
.options-screen > details.card,
.options-screen > details > :not(summary),
.options-screen > details .card,
.options-screen .options-section-body,
.options-screen .options-section-panel {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  justify-self: stretch;
}

.options-screen > details > summary {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.2;
}

.options-section-body {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.5rem;
  font-size: inherit;
}

.options-section-loading,
.options-section-error {
  min-block-size: 5.5rem;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  border: 1px dashed var(--border-muted);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  background: var(--surface-subtle);
  text-align: center;
}

.options-section-error {
  color: var(--danger-color);
  border-color: color-mix(in srgb, var(--danger-color) 35%, var(--border-muted));
}

.options-screen .meta-pairs {
  --options-meta-cols: repeat(2, minmax(0, 1fr));
  --options-meta-row-gap: 0.75rem;
  --options-meta-col-gap: 0.85rem;

  display: grid;
  grid-template-columns: var(--options-meta-cols);
  row-gap: var(--options-meta-row-gap);
  column-gap: var(--options-meta-col-gap);
}

.options-screen .control-row.is-inline {
  display: inline-flex;
  align-items: start;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.options-screen .control-row.is-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.options-screen .control-row.is-compact > label {
  min-inline-size: fit-content;
}

.options-screen table form.control-row {
  margin: 0;
}

.options-screen table td .btn {
  min-height: var(--options-table-btn-min-h);
}

.options-screen details > table + table {
  margin-top: var(--table-stack-gap);
}

.options-ui-form,
.options-logs-form,
.options-global-ban-form,
.options-users-create-form,
.options-global-ban-filter-form {
  inline-size: 100%;
  min-inline-size: 0;
}

.options-global-ban-form {
  display: grid;
  grid-template-columns: minmax(0, var(--options-global-ban-add-inline));
  justify-content: start;
  gap: var(--space-1);
}

.options-global-ban-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem var(--space-2);
}

.options-global-ban-filter-form > input[type="hidden"] {
  display: none;
}

.options-global-ban-field {
  display: grid;
  gap: calc(var(--space-1) - 2px);
  min-inline-size: 0;
  justify-self: start;
}

.options-global-ban-form .options-global-ban-field {
  inline-size: min(100%, var(--options-global-ban-add-inline));
}

.options-global-ban-filter-form .options-global-ban-field {
  inline-size: min(100%, var(--options-global-ban-filter-inline));
}

.options-global-ban-field > label {
  min-inline-size: 0;
  text-align: left;
}

.options-global-ban-form input[type="text"],
.options-global-ban-filter-form input[type="search"] {
  inline-size: 100%;
  max-inline-size: none;
  box-sizing: border-box;
}

.options-global-ban-actions,
.options-global-ban-search-action {
  justify-self: start;
}

.options-global-ban-actions {
  align-self: start;
}

.options-global-ban-search-action {
  align-self: end;
}

.options-global-ban-actions .btn,
.options-global-ban-search-action .btn {
  inline-size: auto;
  max-inline-size: 100%;
}

.options-flags-section,
.options-flags-panel {
  display: grid;
  gap: 0.85rem;
}

.options-flags-header,
.options-flag-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.options-flags-header h3,
.options-flags-panel h3 {
  margin: 0;
  font-size: 1rem;
}

.options-flags-header p {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
}

.options-flags-count {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--border-1);
  color: var(--text-muted);
  background: var(--surface-subtle);
  white-space: nowrap;
}

.options-flag-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--surface-border-1);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-base) 92%, transparent);
}

.options-flag-card--create {
  background: color-mix(in srgb, var(--surface-base) 95%, transparent);
}

.options-flag-card.is-dragging {
  opacity: 0.55;
}

.options-flag-drag-handle {
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-muted);
  cursor: grab;
}

.options-flag-drag-spacer {
  inline-size: 2rem;
  block-size: 2rem;
  display: block;
}

.options-flag-preview {
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid currentColor;
}

.options-flag-preview--empty {
  color: var(--text-muted);
  border-color: var(--border-1);
  background: var(--surface-subtle);
}

.options-flag-preview-svg,
.options-flag-icon-svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  fill: currentColor;
}

.options-flag-card-body,
.options-flag-edit-form,
.options-flag-list {
  display: grid;
  gap: 0.65rem;
}

.options-flag-edit-grid {
  display: grid;
  grid-template-columns: minmax(11rem, 0.85fr) minmax(15rem, 1.25fr) minmax(8rem, 0.5fr) minmax(20rem, 1.35fr);
  align-items: stretch;
  gap: 0.65rem;
}

.options-flag-block {
  min-inline-size: 0;
  min-block-size: 3.2rem;
  display: grid;
  align-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-subtle) 74%, transparent);
}

.options-flag-name-field {
  display: grid;
  align-content: center;
  gap: 0;
  min-inline-size: 0;
}

.options-flag-name-field input {
  inline-size: 100%;
}

.options-flag-picker,
.options-flag-behaviors {
  margin: 0;
  display: grid;
  gap: 0.35rem;
  min-inline-size: 0;
}

.options-flag-picker legend,
.options-flag-behaviors legend,
.options-flag-ban-group > span,
.options-flag-name-field > span {
  font-size: 0.76rem;
  font-weight: var(--font-weight-bold);
  color: var(--text-strong);
}

.options-flag-icon-grid,
.options-flag-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.options-flag-icon-choice,
.options-flag-color-choice {
  position: relative;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.options-flag-icon-choice input,
.options-flag-color-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.options-flag-icon-choice > span,
.options-flag-color-choice > span[aria-hidden="true"] {
  inline-size: 1.8rem;
  block-size: 1.8rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-normal);
}

.options-flag-icon-choice input:checked + span,
.options-flag-color-choice input:checked + span {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.options-flag-color-choice--accent > span[aria-hidden="true"] {
  background: color-mix(in srgb, var(--accent-color) 28%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

.options-flag-color-choice--positive > span[aria-hidden="true"] {
  background: var(--positive-bg);
  border-color: color-mix(in srgb, var(--positive-text) 55%, transparent);
}

.options-flag-color-choice--warning > span[aria-hidden="true"] {
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning-color) 55%, transparent);
}

.options-flag-color-choice--negative > span[aria-hidden="true"] {
  background: var(--negative-bg);
  border-color: color-mix(in srgb, var(--negative-text) 55%, transparent);
}

.options-flag-color-choice--neutral > span[aria-hidden="true"] {
  background: color-mix(in srgb, var(--text-muted) 22%, transparent);
  border-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

.options-flag-behaviors,
.options-flag-ban-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.options-flag-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-normal);
  white-space: nowrap;
}

.options-flag-delete-form {
  margin: 0;
}

.options-flag-reorder-form {
  display: none;
}

.options-flag-actions--grouped {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.options-flags-empty {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 1320px) {
  .options-flag-edit-grid {
    grid-template-columns: minmax(10rem, 0.9fr) minmax(14rem, 1.1fr) minmax(7rem, 0.45fr) minmax(16rem, 1.25fr);
  }
}

@media (max-width: 1099.98px) {
  .options-flag-edit-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .options-flag-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .options-flag-preview {
    grid-column: 2;
  }

  .options-flag-card-body {
    grid-column: 1 / -1;
  }

  .options-flag-edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.options-table-shell {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.options-table-shell > table {
  margin: 0;
}

[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] td:nth-child(1) .table-cell-wrap,
[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] td:nth-child(3) .table-cell-wrap {
  max-inline-size: 100%;
}

[data-options-table-shell="active-sessions"] {
  overflow-x: hidden;
}

[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] {
  inline-size: 100%;
  width: 100%;
  min-inline-size: 0;
  table-layout: fixed;
}

[data-options-table-shell="active-sessions"] .options-active-session-col-user {
  width: 18%;
}

[data-options-table-shell="active-sessions"] .options-active-session-col-ip {
  width: 10%;
}

[data-options-table-shell="active-sessions"] .options-active-session-col-device {
  width: 24%;
}

[data-options-table-shell="active-sessions"] .options-active-session-col-date {
  width: 12%;
}

[data-options-table-shell="active-sessions"] .options-active-session-col-action {
  width: 12%;
}

[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] th,
[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] td {
  min-inline-size: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] td:nth-child(4),
[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] td:nth-child(5),
[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] td:nth-child(6) {
  min-inline-size: 0;
  white-space: normal;
}

[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] form {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

[data-options-table-shell="active-sessions"] table[data-table-key="active-sessions"] .btn {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 7.25rem;
  padding-inline: 0.55rem;
  white-space: normal;
  line-height: 1.1;
}

[data-options-table-shell="trusted-devices"] {
  overflow-x: hidden;
}

[data-options-table-shell="trusted-devices"] table[data-table-key="trusted-devices"] {
  inline-size: 100%;
  width: 100%;
  min-inline-size: 0;
  table-layout: fixed;
}

[data-options-table-shell="trusted-devices"] .options-trusted-device-col-user {
  width: 6%;
}

[data-options-table-shell="trusted-devices"] .options-trusted-device-col-label {
  width: 31%;
}

[data-options-table-shell="trusted-devices"] .options-trusted-device-col-os {
  width: 31%;
}

[data-options-table-shell="trusted-devices"] .options-trusted-device-col-ip {
  width: 10%;
}

[data-options-table-shell="trusted-devices"] .options-trusted-device-col-seen {
  width: 13%;
}

[data-options-table-shell="trusted-devices"] .options-trusted-device-col-action {
  width: 9%;
}

[data-options-table-shell="trusted-devices"] table[data-table-key="trusted-devices"] th,
[data-options-table-shell="trusted-devices"] table[data-table-key="trusted-devices"] td {
  min-inline-size: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

[data-options-table-shell="trusted-devices"] table[data-table-key="trusted-devices"] form {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

[data-options-table-shell="trusted-devices"] table[data-table-key="trusted-devices"] .btn {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 5.75rem;
  padding-inline: 0.55rem;
  white-space: normal;
  line-height: 1.1;
}

.options-section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.75rem;
}

.options-section-actions--split {
  justify-content: space-between;
}

.options-section-actions--end {
  justify-content: flex-end;
}

.options-section-actions--end > .btn {
  min-inline-size: 10rem;
}

.options-screen td .options-action-stack .control-row.is-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.5rem;
}

.options-logs-meta,
.options-billing-cta {
  display: grid;
  gap: 0.5rem;
}

.options-billing-cta {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.options-billing-cta > p {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 991.98px) {
  .options-screen .meta-pairs,
  .options-screen .form-grid-pairs {
    grid-template-columns: minmax(0, 1fr);
  }

  .options-global-ban-form,
  .options-global-ban-filter-form {
    display: grid;
    grid-template-columns: minmax(0, var(--options-global-ban-stack-inline));
    justify-content: start;
    row-gap: var(--space-1);
    column-gap: 0;
  }

  .options-global-ban-form .options-global-ban-field,
  .options-global-ban-filter-form .options-global-ban-field {
    inline-size: 100%;
  }

  .options-global-ban-actions,
  .options-global-ban-search-action {
    justify-self: start;
    align-self: start;
  }

  .options-prefix-topline {
    align-items: flex-start;
  }

  .options-prefix-actions {
    justify-items: end;
  }

  .options-section-actions--split {
    justify-content: stretch;
  }

  .options-section-actions--split > .btn {
    width: 100%;
    inline-size: 100%;
  }
}



.options-billing-panel {
  display: grid;
  gap: 1rem;
}

.options-billing-shell {
  --options-billing-group-pad: 1rem;

  display: grid;
  gap: 1rem;
  max-width: 1120px;
  max-inline-size: 100%;
}

.options-billing-form {
  display: grid;
  gap: 1rem;
}

.options-billing-country-dropdown {
  position: relative;
  justify-self: start;
}

.options-billing-country-dropdown > summary {
  list-style: none;
}

.options-billing-country-dropdown > summary::-webkit-details-marker {
  display: none;
}

.options-billing-country-toggle {
  min-inline-size: min(18rem, 100%);
  justify-content: space-between;
  gap: 0.75rem;
}

.options-billing-country-menu {
  left: 0;
  right: auto;
  min-inline-size: min(18rem, calc(100vw - 2rem));
  width: max-content;
}

.options-billing-country-menu form {
  margin: 0;
}

.options-billing-country-choice {
  grid-template-columns: minmax(0, 1fr) auto;
}

.options-billing-country-choice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-inline-size: 0;
}

.options-billing-group {
  display: grid;
  gap: 0.95rem;
  padding: var(--options-billing-group-pad);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-subtle) 55%, transparent);
}

.options-billing-group-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
}

.options-billing-group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.options-billing-currency-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border-muted);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-base) 88%, transparent);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
}

.options-billing-currency-label {
  font-weight: 600;
}

.options-billing-currency-value {
  color: var(--text-strong);
  font-weight: 700;
}

.options-billing-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.options-billing-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.options-billing-segmented label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}

.options-billing-segmented input:checked + label {
  border-color: color-mix(in srgb, var(--success-color) 50%, var(--border-1));
  background: color-mix(in srgb, var(--success-color) 14%, transparent);
  color: color-mix(in srgb, var(--success-color) 72%, var(--text-strong));
}

.options-billing-group[data-billing-group="contact"]:has(#billing_customer_type_individual:checked) [data-billing-company-field] {
  display: none;
}

.options-billing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem 1rem;
  align-items: start;
}

.options-billing-field {
  min-inline-size: 0;
}

.options-billing-field--full {
  grid-column: 1 / -1;
}

.options-billing-field input,
.options-billing-field select {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

.options-billing-phone-inputs {
  display: grid;
  grid-template-columns: minmax(5.5rem, 6.25rem) minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

.options-billing-phone-inputs select,
.options-billing-phone-inputs input {
  min-inline-size: 0;
}

[data-billing-currency-field] {
  color: var(--text-strong);
  font-weight: 600;
  background: color-mix(in srgb, var(--surface-base) 92%, transparent);
}

.options-billing-form .options-section-actions {
  justify-content: flex-end;
}

.options-section-actions--billing-profile {
  padding-inline: var(--options-billing-group-pad);
}

.options-billing-form .options-section-actions .btn {
  inline-size: 10rem;
  width: 10rem;
}

@media (min-width: 768px) {
  .options-billing-grid[data-billing-grid="contact"],
  .options-billing-grid[data-billing-grid="billing"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1480px) {
  .options-billing-grid[data-billing-grid="contact"],
  .options-billing-grid[data-billing-grid="billing"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .options-billing-shell {
    max-width: none;
  }

  .options-billing-shell {
    --options-billing-group-pad: 0.9rem;
  }

  .options-billing-group {
    padding: var(--options-billing-group-pad);
  }

  .options-billing-country-dropdown {
    inline-size: 100%;
  }

  .options-billing-country-toggle {
    inline-size: 100%;
  }

  .options-billing-country-menu {
    min-inline-size: min(18rem, calc(100vw - 2.4rem));
    max-inline-size: calc(100vw - 2.4rem);
  }

  .options-billing-group-header {
    align-items: start;
  }

  .options-billing-currency-summary {
    inline-size: 100%;
    justify-content: space-between;
  }
}


.options-billing-group--subscription {
  gap: 1rem;
}

.options-billing-field-label {
  display: inline-block;
  margin-block-end: 0.4rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 600;
}

.options-billing-subscription-layout {
  display: grid;
  gap: 0.95rem;
}

.options-billing-subscription-summary {
  display: grid;
  gap: 0.55rem;
  min-inline-size: 0;
}

.options-billing-subscription-summary .options-billing-group-title {
  margin: 0;
}

.options-billing-subscription-situation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-inline-size: 0;
}

.options-billing-subscription-meta-value {
  display: block;
  color: var(--text-strong);
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 500;
}

.options-billing-subscription-copy {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.options-billing-subscription-form {
  display: grid;
  gap: 0.75rem;
}

.options-billing-grid--subscription,
.options-billing-grid--invoice-filters {
  grid-template-columns: minmax(0, 1fr);
}

.options-billing-field--own-code input {
  background: color-mix(in srgb, var(--surface-sunken) 74%, var(--surface-base) 26%);
  color: var(--text-strong);
  font-weight: 600;
}

.options-billing-field--subscription-price {
  display: flex;
  align-items: center;
}

.options-billing-subscription-price {
  display: grid;
  gap: 0.12rem;
  align-self: center;
  min-block-size: 42px;
  justify-content: center;
}

.options-billing-subscription-price-now {
  color: var(--text-strong);
  font-size: 0.98rem;
  font-weight: 700;
}

.options-billing-subscription-price-then {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

.options-section-actions--subscription {
  margin-block-start: 0;
}

.options-billing-subscription-form .btn,
.options-billing-field--filter-action .btn {
  min-inline-size: 10rem;
  inline-size: 10rem;
  width: 10rem;
}

.options-billing-subscription-feedback {
  display: grid;
  gap: 0.18rem;
  justify-items: end;
  text-align: right;
}

.options-billing-subscription-validation,
.options-billing-subscription-discount {
  font-size: 0.78rem;
  line-height: 1.25;
}

.options-billing-subscription-validation.is-success,
.options-billing-subscription-discount.is-success {
  color: var(--success-strong);
}

.options-billing-subscription-validation.is-danger {
  color: var(--danger-strong);
}

.options-billing-subscription-discount.is-neutral {
  color: var(--text-muted);
}

.options-billing-invoice-filters {
  display: grid;
  gap: 0.75rem;
}

.options-billing-field-label--ghost {
  visibility: hidden;
}

.options-billing-field--filter-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .options-billing-grid--subscription,
  .options-billing-grid--invoice-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .options-billing-field--filter-action {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1480px) {
  .options-billing-grid--subscription {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .options-billing-grid--invoice-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .options-billing-field--filter-action {
    grid-column: auto;
  }
}

@media (max-width: 767.98px) {
  .options-billing-subscription-feedback {
    justify-items: start;
    text-align: left;
  }

  .options-billing-subscription-form .btn,
  .options-billing-field--filter-action .btn {
    inline-size: 100%;
    width: 100%;
  }
}

.options-billing-stop-dialog {

  inline-size: min(32rem, calc(100vw - 2rem));
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-base) 98%, transparent);
  padding: 0;
  color: var(--text-strong);
}

.options-billing-stop-dialog::backdrop {
  background: rgba(5, 10, 20, 0.45);
  backdrop-filter: blur(6px);
}

.options-billing-stop-dialog-surface {
  display: grid;
  gap: 0.95rem;
  padding: 1.15rem;
}

.options-billing-stop-dialog-surface h3,
.options-billing-stop-dialog-surface p {
  margin: 0;
}

.options-billing-stop-dialog-hint {
  color: var(--text-muted);
}

.options-billing-stop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

@media (min-width: 992px) {
  .options-billing-plan-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}






/* --- pages/actual.css --- */
/* Status-specific page refinements intentionally kept minimal.
   Shared business-screen settings styles live in patterns/filter-bar.css. */

/* --- pages/orders.css --- */
.orders-screen {
  --orders-collapse-tail: 0px;
  --orders-sticky-panels-h: 0px;
  --orders-table-toolbar-h: 0px;
  --orders-export-green: #2fbf72;
  --orders-stack-gap: 0.8rem;
  --orders-stack-gap-collapsed: 0.45rem;
  --orders-card-gap: 0.72rem;
  --orders-section-gap: 0.55rem;
  --orders-block-pad: 0.72rem;
  --orders-section-pad: 0.72rem;
  --orders-summary-toggle-size: 1.82rem;
  --orders-card-title-size: 1rem;
  --orders-compact-copy-size: 0.78rem;
  --orders-recommended-color: var(--orders-export-green);
  --orders-recommended-bg: color-mix(in srgb, var(--orders-recommended-color) 16%, transparent);
  --orders-recommended-text: hsl(0 0% 100%);
  --orders-z-underlay: calc(var(--z-content) - var(--z-content));
  --orders-z-local: calc(var(--orders-z-underlay) + 1);
  --orders-z-action: calc(var(--orders-z-underlay) + 3);
  block-size: 100%;
  min-block-size: 100%;
  grid-template-rows: minmax(0, 1fr);
}

html[data-theme="dark"] .orders-screen,
html[data-theme-resolved="dark"] .orders-screen {
  --orders-export-green: #2a8d55;
  --orders-recommended-color: var(--orders-export-green);
  --orders-recommended-bg: color-mix(in srgb, var(--orders-recommended-color) 18%, transparent);
  --orders-recommended-text: hsl(0 0% 100%);
}

html[data-theme="light"] .orders-screen,
html[data-theme-resolved="light"] .orders-screen {
  --orders-export-green: #35bd74;
  --orders-recommended-color: var(--orders-export-green);
  --orders-recommended-bg: color-mix(in srgb, var(--orders-recommended-color) 14%, transparent);
  --orders-recommended-text: hsl(150 60% 10%);
}

.orders-screen::after {
  content: '';
  display: block;
  block-size: var(--orders-collapse-tail);
}

.orders-screen-stack {
  display: grid;
  gap: var(--orders-stack-gap);
  block-size: 100%;
  min-block-size: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

.orders-group-panels {
  display: grid;
  gap: var(--orders-stack-gap);
}

.orders-screen[data-orders-group-collapsed='true'] .orders-group-panels {
  gap: var(--orders-stack-gap-collapsed);
}

.orders-panel-row {
  display: grid;
  gap: var(--orders-stack-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.orders-screen[data-orders-group-collapsed='true'] .orders-panel-row {
  gap: var(--orders-stack-gap-collapsed);
}

.orders-panel-row > [data-orders-panel-slot] {
  min-width: 0;
  display: grid;
}

.orders-panel-row--loading {
  opacity: 0.92;
}

.orders-group-card--loading {
  min-block-size: 5rem;
}

.orders-panel-loading-copy {
  margin: 0.35rem 0 0;
  color: var(--text-2);
  font-size: var(--orders-compact-copy-size);
}

.orders-group-card {
  display: grid;
  gap: var(--orders-card-gap);
  block-size: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
}

.orders-group-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--orders-card-gap);
  cursor: pointer;
  list-style: none;
}

.orders-group-summary::-webkit-details-marker {
  display: none;
}

.orders-group-summary::after {
  content: '×';
  display: grid;
  place-items: center;
  inline-size: var(--orders-summary-toggle-size);
  block-size: var(--orders-summary-toggle-size);
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid var(--border-1);
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}

.orders-group-card:not([open]) .orders-group-summary::after {
  content: '+';
}

.orders-group-card-body {
  display: grid;
  gap: var(--orders-card-gap);
  block-size: 100%;
  min-block-size: 100%;
  grid-template-rows: minmax(0, 1fr);
  align-content: start;
}

.orders-group-header {
  display: flex;
  justify-content: space-between;
  gap: var(--orders-card-gap);
  align-items: flex-start;
}

[data-orders-panel-slot="parameters"] .orders-group-summary {
  display: block;
  position: relative;
  padding-inline-end: calc(var(--orders-summary-toggle-size) + 0.18rem);
}

[data-orders-panel-slot="parameters"] .orders-group-summary::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}

[data-orders-panel-slot="parameters"] .orders-group-header {
  display: block;
}

[data-orders-panel-slot="parameters"] .orders-group-header-copy {
  inline-size: 100%;
  max-inline-size: 100%;
}

.orders-group-card--supplier-forms .orders-group-summary {
  display: block;
  position: relative;
  padding-inline-end: calc(var(--orders-summary-toggle-size) + 0.18rem);
}

.orders-group-card--supplier-forms .orders-group-summary::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}

.orders-group-card--supplier-forms .orders-group-header {
  display: block;
}

.orders-group-card--supplier-forms .orders-group-header-copy {
  inline-size: 100%;
  max-inline-size: 100%;
}

.orders-group-header-copy {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  min-block-size: 0;
}

.orders-group-header h2 {
  font-size: var(--orders-card-title-size);
  line-height: 1.15;
}

.orders-group-header h2 {
  margin: 0;
}

.orders-group-card-body--placeholder {
  min-block-size: 0;
}

.orders-group-card-body--supplier-forms {
  min-block-size: 0;
}

.orders-group-header p {
  margin: 0.18rem 0 0;
  color: var(--text-soft);
  font-size: var(--orders-compact-copy-size);
  line-height: 1.3;
}

.orders-group-card:not([open]) .orders-group-header p {
  display: none;
}

.orders-group-card:not([open]) {
  gap: 0;
}

.orders-group-card:not([open]) .orders-group-header-copy {
  min-block-size: 0;
}

.orders-summary-quick {
  display: none;
  align-items: center;
  gap: 0.14rem 0.22rem;
  flex-wrap: wrap;
  margin-top: 0.28rem;
  inline-size: 100%;
}

.orders-group-card:not([open]) .orders-summary-quick {
  display: flex;
}

.orders-summary-quick-form {
  display: block;
  min-inline-size: 0;
  flex: 0 0 auto;
}

.orders-summary-quick .orders-summary-quick-form label {
  display: flex;
  align-items: center;
  gap: 0.14rem;
  min-inline-size: 0;
  white-space: nowrap;
}

.orders-summary-quick .orders-summary-quick-form span {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.orders-summary-quick-form select {
  inline-size: auto;
  width: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: 0.12rem 0.32rem;
  font-size: 0.72rem;
}

.orders-sheet-pill {
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  background: hsl(214 38% 13% / 0.08);
  color: var(--text-soft);
  font-size: 0.8rem;
}

.orders-sheet-pill.is-ready {
  background: hsl(153 59% 30% / 0.12);
  color: hsl(153 61% 23%);
}

.orders-sheet-pill.is-pending {
  background: hsl(39 100% 36% / 0.12);
  color: hsl(39 100% 27%);
}

.orders-sheet-pill.is-missing {
  background: hsl(214 38% 13% / 0.08);
  color: var(--text-soft);
}

.orders-group-grid {
  display: grid;
  gap: var(--orders-section-gap);
  grid-template-columns: minmax(0, 1fr);
  block-size: 100%;
  min-block-size: 100%;
  grid-template-rows: minmax(0, 1fr);
}

.orders-group-grid--parameters {
  gap: 0;
}

.orders-group-block {
  padding: var(--orders-block-pad);
  border-radius: 0.9rem;
  block-size: 100%;
  min-block-size: 100%;
  min-inline-size: 0;
  display: grid;
  align-content: start;
}

.orders-group-block--parameters {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-block-size: 0;
}

.orders-group-block--supplier-forms {
  --orders-supplier-select-width: clamp(8.75rem, calc(var(--orders-manufacturer-select-ch, 18) * 0.58ch + 2.25rem), 12.5rem);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--orders-section-gap);
  min-block-size: 0;
  overflow: hidden;
}

.orders-inline-form {
  display: grid;
  gap: var(--orders-section-gap);
}

.orders-inline-form label {
  display: grid;
  gap: 0.22rem;
}

.orders-parameters-shell {
  display: grid;
  gap: calc(var(--orders-section-gap) - 0.12rem);
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.orders-parameter-section {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  padding: 0.58rem 0.62rem;
  border: 1px solid var(--surface-border-2);
  border-radius: 0.76rem;
  background: var(--surface-z-elevated);
}

.orders-params-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: end;
  column-gap: var(--orders-section-gap);
  row-gap: calc(var(--orders-section-gap) - 0.06rem);
}


.orders-params-form label span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.15;
}

.orders-params-select span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.15;
}

.orders-params-form input,
.orders-params-form select {
  width: auto;
  min-inline-size: 0;
  padding: 0.24rem 0.38rem;
}


.orders-params-form label,
.orders-params-select {
  min-inline-size: 0;
  width: auto;
}

.orders-params-form .orders-parameter-field,
.orders-params-form .orders-params-select {
  flex: 0 0 auto;
}


.orders-params-form input {
  inline-size: 3.85rem;
  min-inline-size: 3.85rem;
  max-inline-size: 3.85rem;
}

.orders-params-form select {
  inline-size: auto;
  max-inline-size: 100%;
}

.orders-params-select select {
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.orders-parameter-field--delivery {
  max-inline-size: 7.1rem;
}

.orders-parameter-field--delivery select {
  min-inline-size: 6.05rem;
}

.orders-params-select--content-fit {
  grid-template-columns: max-content;
  justify-content: start;
}

.orders-params-select--content-fit::after {
  content: attr(data-orders-select-width);
  grid-column: 1;
  grid-row: 2;
  visibility: hidden;
  pointer-events: none;
  white-space: pre;
  font: inherit;
  line-height: 1.2;
  padding: 0.3rem 2.25rem 0.3rem 0.42rem;
}

.orders-params-select--content-fit select {
  grid-column: 1;
  grid-row: 2;
  inline-size: 100%;
  min-inline-size: 100%;
}

.orders-inline-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.orders-method-section {
  display: grid;
  justify-items: stretch;
}

.orders-method-form {
  inline-size: 100%;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-items: start;
  gap: 0;
}

.orders-method-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: calc(var(--orders-section-gap) - 0.06rem) var(--orders-section-gap);
}

.orders-method-card {
  display: grid;
  align-content: end;
  gap: 0.36rem;
  min-inline-size: 0;
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.orders-method-card h4,
.orders-method-card span {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

.orders-method-control select {
  inline-size: auto;
  min-inline-size: 7.55rem;
  max-inline-size: 9.1rem;
}

.orders-used-sort-control select {
  inline-size: min(100%, 5.1rem);
  min-inline-size: min(100%, 5.1rem);
}

.orders-fill-method-control select {
  inline-size: min(100%, 7.55rem);
  min-inline-size: min(100%, 7.55rem);
}

.orders-cutoff-section {
  display: grid;
  gap: 0.5rem;
}

.orders-cutoff-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.orders-cutoff-header h4 {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.2;
}

.orders-cutoff-grid-wrap {
  display: grid;
  gap: 0.28rem;
  max-inline-size: 100%;
  overflow-x: visible;
}

.orders-cutoff-grid-header,
.orders-cutoff-row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) repeat(3, 4.35rem);
  gap: 0.3rem;
  align-items: center;
}


.orders-cutoff-grid-header {
  padding-inline: 0.1rem;
}

.orders-cutoff-col-label,
.orders-cutoff-month {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-soft);
}

.orders-cutoff-grid {
  display: grid;
  gap: 0.25rem;
}

.orders-cutoff-row select {
  min-width: 0;
  width: auto;
  inline-size: 4.35rem;
  min-inline-size: 4.35rem;
  max-inline-size: 4.35rem;
  font-size: 0.72rem;
  padding: 0.2rem 0.35rem;
}


.orders-inline-actions--compact {
  align-items: stretch;
  justify-content: flex-start;
}

.orders-cutoff-day.is-hidden,
.orders-cutoff-col-label.is-hidden {
  visibility: hidden;
}

.orders-cutoff-day.is-hidden select {
  pointer-events: none;
}

.orders-table-frame th[data-col-key='manufacturer'],
.orders-table-frame td.freeze-col-1 {
  min-inline-size: 10rem;
}

.orders-upload-form,
.orders-fill-form {
  margin: 0;
}

.orders-upload-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.orders-upload-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
}

.orders-supplier-forms-upload {
  gap: 0;
}

.orders-supplier-forms-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.35rem;
}

.orders-supplier-forms-search-input {
  inline-size: 10rem;
  min-inline-size: 10rem;
  padding: 0.22rem 0.42rem;
  font-size: 0.72rem;
  line-height: 1.2;
}

.orders-supplier-forms-list {
  display: grid;
  gap: 0.28rem;
  margin-top: 0;
  align-content: start;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  block-size: 100%;
  max-block-size: min(30rem, 100%);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.18rem;
  max-inline-size: 100%;
}

.orders-supplier-forms-summary-list {
  display: grid;
  gap: 0.22rem;
  margin-top: 0.22rem;
  min-inline-size: 0;
  overflow: visible;
}

.orders-supplier-forms-summary-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 0.65rem;
  row-gap: 0.35rem;
  inline-size: 100%;
  min-inline-size: 0;
}

.orders-group-card--supplier-forms[open] .orders-supplier-forms-summary-line,
.orders-group-card--supplier-forms[open] .orders-supplier-forms-summary-list,
.orders-group-card--supplier-forms[open] .orders-export-actions {
  display: none;
}

.orders-supplier-forms-summary-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
}

.orders-supplier-forms-summary-name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1.1;
}

.orders-supplier-forms-summary-review,
.orders-supplier-forms-summary-item .orders-supplier-form-status-list {
  flex: 0 0 auto;
}

.orders-export-actions {
  --btn-tone-accent-1: var(--orders-export-green);
  --btn-min-h: 2.05rem;
  --btn-pad-y: 0.35rem;
  --btn-pad-x: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
  margin-left: 0;
  inline-size: max-content;
  max-inline-size: 100%;
  min-inline-size: 0;
  justify-self: end;
}

.orders-export-actions[data-orders-csv-configured='1'] {
  inline-size: 20.25rem;
}

.orders-screen:not([data-orders-simulation-active='true']) .orders-export-actions {
  display: none;
}

.orders-export-csv-shell,
.orders-export-csv-choice {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.orders-export-btn {
  flex: 0 0 auto;
  min-inline-size: 5.45rem;
  white-space: nowrap;
}

.orders-group-card--supplier-forms:has(.orders-supplier-form-status-icon:hover),
.orders-group-card--supplier-forms:has(.orders-supplier-form-status-icon:focus-visible),
.orders-supplier-forms-list:has(.orders-supplier-form-status-icon:hover),
.orders-supplier-forms-list:has(.orders-supplier-form-status-icon:focus-visible) {
  overflow: visible;
}

.orders-group-card--supplier-forms,
.orders-group-block--supplier-forms,
.orders-supplier-form-row,
.orders-supplier-form-summary-row {
  max-inline-size: 100%;
}

.orders-group-card--supplier-forms {
  container-type: inline-size;
}

@container (max-width: 41rem) {
  .orders-supplier-forms-summary-line {
    grid-template-columns: minmax(0, 1fr);
  }

  .orders-export-actions {
    justify-self: end;
  }
}

@container (max-width: 25rem) {
  .orders-export-actions[data-orders-csv-configured='1'] {
    inline-size: 100%;
  }

  .orders-export-actions,
  .orders-export-csv-choice {
    flex-wrap: wrap;
  }
}

.orders-supplier-form-row {
  position: relative;
  inline-size: 100%;
  min-width: 0;
  padding: 0.08rem 0;
  overflow: visible;
  --orders-supplier-summary-height: 0px;
  z-index: var(--z-content);
}

.orders-supplier-form-row[data-orders-supplier-form-review-open='1'] {
  z-index: calc(var(--z-content) + 5);
}

.orders-supplier-form-row:has(.filter-multiselect-details[open]) {
  z-index: calc(var(--z-popover) + 1);
}

.orders-supplier-form-row[hidden] {
  display: none;
}

.orders-supplier-form-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--orders-supplier-select-width);
  gap: 0.36rem;
  align-items: center;
  inline-size: 100%;
  min-width: 0;
  overflow: visible;
}

.orders-supplier-form-row[data-orders-supplier-form-assigned='1'][data-orders-supplier-form-editing='0'] .orders-supplier-form-summary-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.orders-supplier-form-row[data-orders-supplier-form-assigned='1'][data-orders-supplier-form-editing='0'] .orders-supplier-form-assign-row {
  display: none;
}

.orders-supplier-form-row[data-orders-supplier-form-editing='1'] .orders-supplier-form-mid {
  display: none;
}

.orders-supplier-form-row[data-orders-supplier-form-editing='1'] .orders-supplier-form-assign-row {
  grid-column: 2 / 4;
  max-inline-size: 100%;
  overflow: visible;
}

.orders-supplier-form-label-wrap {
  grid-column: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
}

.orders-supplier-form-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.15;
}

.orders-supplier-form-label-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  opacity: 0;
  transform: translateX(-0.12rem);
  pointer-events: none;
  transition: opacity 90ms linear, transform 120ms ease;
}

.orders-supplier-form-label-wrap:hover .orders-supplier-form-label-actions,
.orders-supplier-form-label-wrap:focus-within .orders-supplier-form-label-actions {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.orders-supplier-form-label-action {
  display: inline-grid;
  place-items: center;
  inline-size: 1.18rem;
  block-size: 1.18rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 90ms linear, border-color 90ms linear, background-color 90ms linear;
}

.orders-supplier-form-label-action svg {
  inline-size: 0.78rem;
  block-size: 0.78rem;
}

.orders-supplier-form-label-action:hover,
.orders-supplier-form-label-action:focus-visible {
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color) 38%, transparent);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  outline: none;
}

.orders-supplier-form-label-action--remove:hover,
.orders-supplier-form-label-action--remove:focus-visible {
  color: hsl(12 85% 56%);
  border-color: hsl(12 85% 56% / 0.4);
  background: hsl(12 85% 56% / 0.11);
}

.orders-supplier-form-remove-row {
  margin: 0;
}

.orders-supplier-form-mid {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  justify-content: center;
  gap: 0.26rem;
  min-width: 0;
  overflow: visible;
}

.orders-supplier-form-review {
  position: static;
  display: inline-flex;
  align-items: center;
}

.orders-supplier-form-review-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.28rem;
  inline-size: 1.28rem;
  min-block-size: 1.28rem;
  block-size: 1.28rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent-color) 52%, var(--border-color));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--accent-color);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.orders-supplier-form-review-toggle:hover,
.orders-supplier-form-review-toggle:focus-visible {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 62%, var(--border-color));
  outline: none;
}

.orders-supplier-form-review-toggle:active {
  transform: scale(0.97);
}

.orders-supplier-form-editor-panel {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: calc(var(--orders-supplier-select-width) + 0.55rem);
  top: calc(var(--orders-supplier-summary-height) + 0.45rem);
  z-index: var(--z-popover);
  inline-size: min(18rem, calc(100% - var(--orders-supplier-select-width) - 0.75rem));
  max-inline-size: min(18rem, calc(100% - var(--orders-supplier-select-width) - 0.75rem));
  display: grid;
  gap: 0.65rem;
  padding: 0.7rem;
  border: 1px solid var(--border-1);
  border-radius: 0.9rem;
  box-shadow: 0 18px 36px hsl(0 0% 0% / 0.24);
  overflow: hidden;
  transform: none;
  transform-origin: top right;
}

.orders-supplier-form-editor-panel[hidden],
.orders-supplier-form-editor-panel--source {
  display: none;
}

.orders-supplier-form-editor-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.38rem 0.55rem;
  align-items: center;
}

.orders-supplier-form-editor-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-soft);
}

.orders-supplier-form-select-wrap {
  width: fit-content;
  justify-self: end;
}

.orders-supplier-form-assign-row {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 0.34rem;
  margin: 0;
  justify-self: end;
  min-width: 0;
}

.orders-supplier-form-mid {
  grid-column: 2;
}

.orders-supplier-form-assign-row[hidden],
.orders-supplier-form-mid[hidden] {
  display: none;
}

.orders-supplier-form-multiselect,
.orders-supplier-form-details {
  inline-size: var(--orders-supplier-select-width);
  min-inline-size: 0;
  max-inline-size: var(--orders-supplier-select-width);
}

.orders-supplier-form-details[open] {
  z-index: calc(var(--z-popover) + 2);
}

.orders-supplier-form-summary {
  min-block-size: 1.72rem;
  padding: 0.2rem 0.44rem;
  font-size: 0.74rem;
  gap: 0.35rem;
}

.orders-supplier-form-summary .filter-multiselect-summary-text {
  font-size: 0.74rem;
}

.orders-supplier-form-panel {
  inline-size: var(--orders-supplier-select-width);
  max-inline-size: var(--orders-supplier-select-width);
  inset-inline-start: auto;
  inset-inline-end: 0;
  z-index: calc(var(--z-popover) + 3);
  gap: 0.42rem;
  padding: 0.5rem;
}

.orders-supplier-form-panel .filter-multiselect-search-shell {
  display: block;
}

.orders-supplier-form-panel .filter-multiselect-search-shell input {
  font-size: 0.74rem;
  padding: 0.3rem 0.48rem;
}

.orders-supplier-form-panel .filter-multiselect-options {
  gap: 0.2rem;
  max-block-size: 10rem;
}

.orders-supplier-form-panel .filter-multiselect-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.08rem 0;
  font-size: 0.74rem;
}

.orders-supplier-form-panel .filter-multiselect-option.is-hidden,
.orders-supplier-form-panel .filter-multiselect-option[hidden] {
  display: none;
}

.orders-supplier-form-panel .filter-multiselect-option input {
  margin: 0;
  flex: 0 0 auto;
}

.orders-supplier-form-panel .filter-multiselect-option span {
  flex: 1 1 auto;
}

.orders-supplier-form-edit-cancel {
  flex: 0 0 auto;
  min-block-size: 1.72rem;
  padding: 0.2rem 0.52rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-soft);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

.orders-supplier-form-edit-cancel:hover,
.orders-supplier-form-edit-cancel:focus-visible {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--accent-color) 38%, var(--border-color));
  outline: none;
}

.orders-supplier-form-assign-busy {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  color: var(--text-soft);
  font-size: 0.72rem;
  white-space: nowrap;
}

.orders-supplier-form-assign-busy[hidden] {
  display: none;
}

.orders-supplier-form-assign-row[aria-busy='true'] .orders-supplier-form-assign-busy {
  display: inline-flex;
}

.orders-supplier-form-assign-row .orders-supplier-form-assign-busy[hidden] {
  display: none;
}

.orders-supplier-form-confirm {
  gap: 0.55rem;
  padding-top: 0;
  border-top: 0;
}

.orders-supplier-form-confirm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.55rem;
  align-items: start;
}

.orders-supplier-form-confirm-field {
  display: grid;
  gap: 0.22rem;
  min-inline-size: 0;
}

.orders-supplier-form-confirm-field span {
  font-size: 0.72rem;
  color: var(--text-soft);
}

.orders-supplier-form-confirm-field input {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: 0.28rem 0.44rem;
  box-sizing: border-box;
  font-size: 0.74rem;
}

.orders-supplier-form-confirm-actions {
  display: flex;
  justify-content: flex-end;
}

.orders-supplier-form-modal[hidden] {
  display: none;
}

.orders-supplier-form-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}

.orders-supplier-form-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  background: hsl(0 0% 5% / 0.44);
  backdrop-filter: blur(10px);
}

.orders-supplier-form-modal-dialog {
  position: relative;
  z-index: calc(var(--z-content) + 1);
  inline-size: min(112rem, calc(100vw - 1rem));
  max-inline-size: calc(100vw - 1rem);
  max-block-size: calc(100dvh - 1rem);
  margin: 0.5rem auto;
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  overflow: auto;
  box-shadow: 0 28px 72px hsl(0 0% 0% / 0.34);
}

.orders-supplier-form-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.orders-supplier-form-modal-copy {
  display: grid;
  gap: 0.22rem;
}

.orders-supplier-form-modal-copy h3,
.orders-supplier-form-modal-copy p {
  margin: 0;
}

.orders-supplier-form-modal-copy p {
  color: var(--text-soft);
  font-size: 0.88rem;
}

.orders-supplier-form-modal-subtitle-secondary {
  font-size: 0.8rem;
}

.orders-supplier-form-modal-close-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-1);
  background: transparent;
  color: var(--text-soft);
  font-size: 1rem;
  cursor: pointer;
}

.orders-supplier-form-modal-close-btn:hover,
.orders-supplier-form-modal-close-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  color: var(--text-strong);
  outline: none;
}

.orders-supplier-form-modal-body {
  display: grid;
  gap: 1rem;
}

.orders-supplier-form-modal-fields {
  padding: 0.9rem;
  border: 1px solid var(--border-1);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--surface-1, #171717) 88%, transparent);
  overflow-x: auto;
}

.orders-supplier-form-modal-fields .orders-supplier-form-review-source {
  display: grid;
  gap: 0.7rem;
  min-inline-size: 0;
}

.orders-supplier-form-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.orders-supplier-form-tab {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 100ms linear, background-color 100ms linear, color 100ms linear, transform 120ms ease;
}

.orders-supplier-form-tab.is-yellow {
  color: hsl(45 100% 46%);
  border-color: hsl(45 100% 46% / 0.42);
}

.orders-supplier-form-tab.is-green {
  color: hsl(153 61% 36%);
  border-color: hsl(153 61% 36% / 0.42);
}

.orders-supplier-form-tab.is-active {
  background: color-mix(in srgb, currentColor 12%, transparent);
  transform: translateY(-0.03rem);
}

.orders-supplier-form-tab:hover,
.orders-supplier-form-tab:focus-visible {
  border-color: currentColor;
  outline: none;
}

.orders-supplier-form-lane-pane {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  min-inline-size: max-content;
}

.orders-supplier-form-lane-pane[hidden] {
  display: none;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0.55rem;
  min-inline-size: max-content;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm-grid {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0.55rem;
  min-inline-size: max-content;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm-group {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm-field {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-inline-size: 0;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm-field span {
  font-size: 0.76rem;
  white-space: nowrap;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm-field input {
  inline-size: 2.2rem;
  min-inline-size: 2.2rem;
  padding: 0.32rem 0.36rem;
  font-size: 0.78rem;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm-field input[name="confirmed_fullness_cell"] {
  inline-size: 3.15rem;
  min-inline-size: 3.15rem;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm-field input[name^="confirmed_fullness_cell__"] {
  inline-size: 3.15rem;
  min-inline-size: 3.15rem;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm-field input[name="confirmed_last_row_index"],
.orders-supplier-form-modal-fields .orders-supplier-form-confirm-field input[name^="confirmed_last_row_index__"],
.orders-supplier-form-modal-fields .orders-supplier-form-confirm-field input[name="data_start_row"],
.orders-supplier-form-modal-fields .orders-supplier-form-confirm-field input[name^="data_start_row__"] {
  inline-size: 2.6rem;
  min-inline-size: 2.6rem;
}

.orders-supplier-form-modal-fields .orders-supplier-form-confirm-actions {
  margin-inline-start: auto;
  align-self: flex-end;
  flex: 0 0 auto;
}

.orders-supplier-form-modal-fields .orders-supplier-form-lane-remove {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  margin: 0;
}

.orders-supplier-form-modal-fields .orders-supplier-form-lane-remove .btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.orders-supplier-form-modal-preview-shell {
  position: relative;
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid var(--border-1);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--surface-1, #171717) 88%, transparent);
  min-block-size: 12rem;
}

.orders-supplier-form-modal-preview-empty {
  color: var(--text-soft);
  font-size: 0.86rem;
  padding-top: 2rem;
}

.orders-supplier-form-modal-preview-empty.is-loading {
  display: inline-flex;
  align-items: center;
}

.orders-supplier-form-modal-preview-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 0.85rem;
  border: 1px solid var(--border-1);
  background: #fff;
}

.orders-supplier-form-modal-preview-refresh {
  position: absolute;
  inset-block-start: 0.7rem;
  inset-inline-end: 0.7rem;
  z-index: calc(var(--z-content) + 2);
  display: inline-grid;
  place-items: center;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--bg-3) 92%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.orders-supplier-form-modal-preview-refresh svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
}

.orders-supplier-form-modal-preview-refresh:hover,
.orders-supplier-form-modal-preview-refresh:focus-visible {
  border-color: color-mix(in srgb, var(--accent-color) 44%, var(--border-color));
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-3));
  outline: none;
}

.orders-supplier-form-modal-preview-refresh:active {
  transform: scale(0.97);
}

.orders-supplier-form-modal-preview-refresh:disabled {
  opacity: 0.55;
  cursor: wait;
}

.orders-supplier-form-modal.is-open {
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 0;
}

body.orders-supplier-form-modal-open {
  overflow: hidden;
}

.orders-supplier-form-dirty-modal[hidden] {
  display: none;
}

.orders-supplier-form-dirty-modal {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-content) + 5);
}

.orders-supplier-form-dirty-modal.is-open {
  display: block;
}

.orders-supplier-form-dirty-backdrop {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0.35rem);
  background: hsl(0 0% 0% / 0.24);
}

.orders-supplier-form-dirty-dialog {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: min(26rem, calc(100% - 2rem));
  padding: 1rem;
  border-radius: 1rem;
  display: grid;
  gap: 0.7rem;
  box-shadow: 0 24px 48px hsl(0 0% 0% / 0.32);
}

.orders-supplier-form-dirty-dialog h4,
.orders-supplier-form-dirty-dialog p {
  margin: 0;
}

.orders-supplier-form-dirty-dialog p {
  color: var(--text-soft);
}

.orders-supplier-form-dirty-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.orders-busy-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-inline-size: 0;
  color: var(--text-soft);
  font-size: 0.76rem;
  white-space: nowrap;
}

.orders-busy-indicator-spinner {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
  border-top-color: var(--accent-color);
  animation: orders-busy-spin 0.7s linear infinite;
  flex: 0 0 auto;
}

.orders-busy-indicator-text {
  min-inline-size: 0;
}

@keyframes orders-busy-spin {
  to {
    transform: rotate(360deg);
  }
}

.orders-supplier-form-status-list {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.24rem;
  flex-wrap: nowrap;
}

.orders-supplier-form-status-icon {
  display: inline-grid;
  place-items: center;
  position: relative;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border-radius: 999px;
  transition: transform 120ms ease;
}

.orders-supplier-form-status-icon svg {
  inline-size: 0.86rem;
  block-size: 0.86rem;
}

.orders-supplier-form-status-icon:hover,
.orders-supplier-form-status-icon:focus-visible {
  transform: scale(1.12);
  outline: none;
  z-index: calc(var(--z-content) + 2);
}

.orders-supplier-form-status-icon.is-green {
  color: hsl(153 61% 23%);
  background: hsl(153 59% 30% / 0.14);
}

.orders-supplier-form-status-icon.is-yellow {
  color: hsl(45 100% 46%);
  background: hsl(45 100% 50% / 0.14);
}

.orders-supplier-form-status-icon.is-red {
  color: hsl(12 85% 32%);
  background: hsl(12 88% 52% / 0.14);
}

.orders-supplier-form-status-tooltip {
  position: absolute;
  inset-block-start: calc(100% + 0.38rem);
  inset-inline-start: 50%;
  z-index: calc(var(--z-popover) + 4);
  display: block;
  min-inline-size: max-content;
  max-inline-size: min(16rem, calc(100vw - 2rem));
  padding: 0.28rem 0.44rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text-strong);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 14px 28px hsl(0 0% 0% / 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.12rem);
  transition: opacity 40ms linear, transform 90ms ease;
}

.orders-supplier-form-status-icon:hover .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon:focus-visible .orders-supplier-form-status-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.orders-supplier-form-status-icon[data-orders-supplier-form-status='file'] .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon[data-orders-supplier-form-status='item'] .orders-supplier-form-status-tooltip {
  inset-inline-start: 0;
  transform: translate(0, -0.12rem);
}

.orders-supplier-form-status-icon[data-orders-supplier-form-status='container'] .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon[data-orders-supplier-form-status='fullness'] .orders-supplier-form-status-tooltip {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translate(0, -0.12rem);
}

.orders-supplier-form-status-icon[data-orders-supplier-form-status='file']:hover .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon[data-orders-supplier-form-status='file']:focus-visible .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon[data-orders-supplier-form-status='item']:hover .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon[data-orders-supplier-form-status='item']:focus-visible .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon[data-orders-supplier-form-status='container']:hover .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon[data-orders-supplier-form-status='container']:focus-visible .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon[data-orders-supplier-form-status='fullness']:hover .orders-supplier-form-status-tooltip,
.orders-supplier-form-status-icon[data-orders-supplier-form-status='fullness']:focus-visible .orders-supplier-form-status-tooltip {
  transform: translate(0, 0);
}

.orders-supplier-form-status-tooltip {
  display: none;
}

.orders-tooltip-floating {
  position: fixed;
  z-index: var(--z-tooltip);
  display: block;
  inline-size: max-content;
  max-inline-size: min(18rem, calc(100vw - 1rem));
  padding: 0.34rem 0.5rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-strong);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 16px 32px hsl(0 0% 0% / 0.35);
  opacity: 1;
  transform: translateY(0);
}

.orders-tooltip-floating[hidden] {
  display: none;
}

.orders-supplier-forms-empty {
  margin: 0;
  color: var(--text-soft);
}

.orders-sheet-status-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.orders-sheet-review {
  margin-top: 0.75rem;
}

.orders-sheet-preview {
  margin-top: 0.75rem;
}

.orders-final-form {
  margin: 0;
}

.orders-final-input {
  width: 100%;
  min-width: 4.5rem;
}

.orders-table-frame .table-frame-header {
  display: grid;
  gap: 0.25rem;
}

.orders-table-frame .table-frame-header p {
  margin: 0;
  color: var(--text-soft);
}

@media (max-width: 991.98px) {
  .orders-panel-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .orders-group-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .orders-group-summary::after {
    align-self: flex-start;
  }

  .orders-group-header {
    grid-template-columns: 1fr;
    display: grid;
  }

  .orders-params-form {
    column-gap: calc(var(--orders-section-gap) - 0.05rem);
    row-gap: calc(var(--orders-section-gap) - 0.02rem);
  }

  .orders-cutoff-grid-wrap {
    overflow-x: visible;
    padding-bottom: 0;
  }

  .orders-cutoff-grid-header,
  .orders-cutoff-row {
    min-width: 0;
  }

  .orders-supplier-form-select-wrap,
  .orders-supplier-form-multiselect,
  .orders-supplier-form-details {
    width: 100%;
    min-inline-size: 0;
    max-inline-size: none;
  }

  .orders-supplier-forms-head,
  .orders-supplier-form-summary-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(8.5rem, 11rem);
  }

  .orders-supplier-form-editor-panel {
    inset-inline-start: 0;
    inset-inline-end: 0;
    inline-size: min(100%, calc(100vw - 2.5rem));
    max-inline-size: min(100%, calc(100vw - 2.5rem));
  }

  .orders-supplier-form-editor-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .orders-supplier-form-confirm-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .orders-supplier-form-panel {
    inline-size: min(max(100%, 11rem), calc(100vw - 2rem));
    inset-inline-start: 0;
    inset-inline-end: auto;
  }

  .orders-supplier-form-modal,
  .orders-supplier-form-modal.is-open {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .orders-params-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .orders-params-form .orders-parameter-field,
  .orders-params-form .orders-params-select {
    width: 100%;
    flex: 1 1 100%;
  }

  .orders-params-form input,
  .orders-params-form select,
  .orders-parameter-field--delivery select {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none;
  }

  .orders-method-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .orders-method-card {
    width: 100%;
  }

  .orders-method-controls select {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none;
  }

  .orders-cutoff-grid-wrap {
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .orders-cutoff-grid-header,
  .orders-cutoff-row {
    min-width: 23rem;
  }
}

.orders-group-panels,
.orders-table-frame {
  scroll-margin-top: calc(var(--layout-header-h) + 0.35rem);
}

.orders-table-frame {
  --orders-recommended-gap: 1.95rem;
  --orders-recommended-mask-overlap: 2px;
  --orders-toolbar-veil-overlap: 0.7rem;
  min-block-size: 0;
}

.orders-table-toolbar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky-col) + 4);
  padding-block-end: 0.45rem;
  background: var(--bg-1);
  isolation: isolate;
}

.orders-table-toolbar:has(.orders-inline-warning),
.orders-table-toolbar:has(.orders-sim-actions:not([hidden])) {
  display: flex;
}

.orders-table-toolbar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(-1 * var(--orders-toolbar-veil-overlap));
  block-size: calc(var(--orders-toolbar-veil-overlap) + 2px);
  background: var(--bg-1);
  pointer-events: none;
  z-index: var(--orders-z-underlay);
}

.orders-table-toolbar .orders-inline-warning,
.orders-table-toolbar .orders-sim-actions {
  margin: 0;
  position: relative;
  z-index: var(--orders-z-local);
}

.orders-table-frame .table-frame-body[data-infinite-root] table thead th,
.orders-table-frame .table-frame-body[data-infinite-root] .wide-table thead th {
  top: var(--orders-table-toolbar-h, 0px);
}

.orders-table-frame .table-frame-body[data-infinite-root] {
  padding-block-start: 0;
}

.orders-recommended-scroll-mask {
  position: sticky;
  top: var(--orders-table-toolbar-h, 0px);
  display: block;
  block-size: calc(var(--orders-recommended-gap) + var(--orders-recommended-mask-overlap));
  margin-block-end: calc(-1 * (var(--orders-recommended-gap) + var(--orders-recommended-mask-overlap)));
  background: var(--bg-1);
  pointer-events: auto;
  z-index: calc(var(--z-sticky-col) + 2);
}

.orders-table-frame .table-frame-body[data-infinite-root] table.orders-table--has-recommended thead th,
.orders-table-frame .table-frame-body[data-infinite-root] .wide-table.orders-table--has-recommended thead th {
  top: calc(var(--orders-table-toolbar-h, 0px) + var(--orders-recommended-gap));
  z-index: calc(var(--z-sticky-col) + 3);
}

.orders-table-frame .wide-table[data-page='orders'].orders-table--has-recommended {
  margin-block-start: var(--orders-recommended-gap);
}

.orders-table-frame .wide-table[data-page='orders'].orders-table--has-recommended thead th {
  overflow: visible;
}

.orders-screen[data-orders-simulation-active='true'] .orders-recommended-scroll-mask,
.orders-screen[data-orders-simulation-active='true'] .orders-recommended-layer {
  display: none;
}

.orders-screen[data-orders-simulation-active='true'] .orders-table-frame .table-frame-body[data-infinite-root] table.orders-table--has-recommended thead th,
.orders-screen[data-orders-simulation-active='true'] .orders-table-frame .table-frame-body[data-infinite-root] .wide-table.orders-table--has-recommended thead th {
  top: var(--orders-table-toolbar-h, 0px);
}

.orders-screen[data-orders-simulation-active='true'] .orders-table-frame .wide-table[data-page='orders'].orders-table--has-recommended {
  margin-block-start: 0;
}

.orders-params-select {
  display: grid;
  gap: 0.28rem;
  min-inline-size: 0;
}

.orders-params-select span {
  font-size: 0.8rem;
}

.orders-inline-warning {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.35rem;
  padding: 0.22rem 0.46rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
}

.orders-progressive-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  padding: 0.46rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border-subtle) 40%);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, var(--bg-1) 76%), color-mix(in srgb, var(--accent) 12%, var(--bg-1) 88%));
  color: color-mix(in srgb, var(--accent) 82%, var(--text-1) 18%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow-soft);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.orders-progressive-status--filters {
  align-self: end;
  min-block-size: 2.2rem;
  margin-inline-start: auto;
  margin-inline-end: 0.25rem;
}

.orders-progressive-status--page-settings {
  margin-inline-start: auto;
  max-inline-size: min(100%, 30rem);
  white-space: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
  justify-content: flex-start;
  flex: 0 1 auto;
}

.screen-filters-primary:has(.orders-progressive-status--filters) .filter-actions {
  margin-inline-start: 0;
}

.orders-progressive-spinner {
  display: inline-block;
  flex: 0 0 auto;
  inline-size: 0.82rem;
  block-size: 0.82rem;
  vertical-align: middle;
  border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
  border-block-start-color: currentColor;
  border-radius: 999px;
  animation: orders-progressive-spin 0.85s linear infinite;
}

@keyframes orders-progressive-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (max-width: 991.98px) {
  .orders-progressive-status--page-settings {
    max-inline-size: 100%;
    margin-inline-start: 0;
  }
}

.orders-sim-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.45rem;
}

.orders-sim-actions[hidden] {
  display: none;
}

.orders-sim-action-btn {
  min-inline-size: 8.9rem;
  inline-size: 8.9rem;
  block-size: 2.05rem;
  justify-content: center;
}

.orders-sim-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.orders-projection-header {
  position: relative;
  display: grid;
  gap: 0.35rem;
  justify-items: stretch;
  align-items: start;
  min-block-size: 4.75rem;
}

.orders-recommended-layer {
  position: absolute;
  inset-block-start: -2.22rem;
  inset-inline-start: calc(-0.5rem - 2%);
  inset-inline-end: calc(-0.5rem - 3%);
  block-size: 1.78rem;
  pointer-events: none;
  z-index: var(--orders-z-local);
}

.orders-recommended-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
  padding: 0.2rem 0.4rem 0.32rem;
  border: 2px solid var(--orders-recommended-color);
  border-block-end: 0;
  border-radius: 0.75rem 0.75rem 0 0;
  background: var(--orders-recommended-color);
  color: var(--orders-recommended-text);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
  pointer-events: none;
}

.orders-column-info {
  position: absolute;
  inset-block-start: -0.72rem;
  inset-inline-end: 0.2rem;
  z-index: calc(var(--z-popover) + 6);
  pointer-events: auto;
}

.orders-column-info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.35rem;
  min-block-size: 1.35rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-1, #171717) 88%, transparent);
  color: var(--accent-color);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.orders-column-info-trigger:hover,
.orders-column-info-trigger:focus-visible,
.orders-column-info[data-orders-column-info-open='1'] .orders-column-info-trigger {
  border-color: color-mix(in srgb, var(--accent-color) 68%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 14%, var(--surface-1, #171717));
  color: var(--text-strong);
  outline: none;
}

.orders-column-info-popover {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-end: 0;
  z-index: calc(var(--z-popover) + 7);
  inline-size: max-content;
  min-inline-size: 11rem;
  max-inline-size: min(16rem, calc(100vw - 1rem));
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--border-1);
  border-radius: 0.65rem;
  text-align: start;
  color: var(--text-strong);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 0 0.85rem 1.7rem hsl(0 0% 0% / 0.24);
}

.orders-column-info-popover[hidden] {
  display: none;
}

.orders-projection-header--simulation {
  min-block-size: 6.1rem;
}

.orders-projection-label {
  display: block;
  text-align: center;
}

.orders-projection-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 1.65rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: hsl(216 98% 52% / 0.14);
  color: hsl(216 100% 28%);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.orders-projection-trigger:hover,
.orders-projection-trigger:focus-visible {
  background: hsl(216 98% 52% / 0.22);
  border-color: hsl(216 98% 52% / 0.2);
  outline: none;
}

.orders-projection-trigger:active {
  transform: translateY(1px);
}

.orders-simulation-fullness {
  display: inline-flex;
  inline-size: 100%;
  justify-content: center;
  align-items: center;
  min-block-size: 1.9rem;
  padding: 0.22rem 0.38rem;
  border: 1px solid hsl(45 96% 43% / 0.36);
  border-radius: 0.8rem;
  background: hsl(48 100% 73% / 0.86);
  color: hsl(38 86% 22%);
  line-height: 1;
}

.orders-simulation-fullness strong {
  font-size: 0.86rem;
  font-weight: 900;
}

.orders-simulation-fullness-spinner {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border-color: hsl(38 86% 22% / 0.28);
  border-block-start-color: currentColor;
}

.orders-simulation-fullness[data-orders-sim-fullness-state='green'] {
  border-color: hsl(142 64% 36% / 0.42);
  background: hsl(139 67% 58% / 0.88);
  color: hsl(142 70% 14%);
}

.orders-projection-trigger[data-orders-sim-trigger='cancel'] {
  background: hsl(12 88% 52% / 0.16);
  color: hsl(12 85% 30%);
}

.orders-projection-trigger[data-orders-sim-trigger='cancel']:hover,
.orders-projection-trigger[data-orders-sim-trigger='cancel']:focus-visible {
  background: hsl(12 88% 52% / 0.24);
  border-color: hsl(12 88% 52% / 0.18);
}

.orders-table-frame th[data-orders-simulation-column='true'],
.orders-table-frame td[data-orders-simulation-cell='true'] {
  position: relative;
}

.orders-table-frame td[data-orders-simulation-cell='true'] {
  z-index: var(--orders-z-local);
  border-left: 1px dashed hsl(216 98% 52% / 0.35);
  overflow: hidden;
  isolation: isolate;
}

.orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--filled {
  box-shadow: inset 0 0 0 1px hsl(216 98% 52% / 0.14);
}

.orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--filled .orders-simulation-input {
  font-weight: var(--font-weight-semibold);
}

.orders-simulation-input {
  position: relative;
  z-index: var(--orders-z-underlay);
  inline-size: 100%;
  min-inline-size: 4.5rem;
  padding: 0.28rem 0.42rem;
  border-radius: 0.7rem;
  border: 1px solid hsl(216 98% 52% / 0.25);
  background: hsl(0 0% 100% / 0.92);
  color: inherit;
  font: inherit;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.orders-simulation-input::-webkit-outer-spin-button,
.orders-simulation-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.orders-simulation-input:focus-visible {
  outline: 2px solid hsl(216 98% 52% / 0.35);
  outline-offset: 1px;
}

.orders-simulation-cell-actions {
  position: absolute;
  z-index: var(--orders-z-action);
  inset-inline: 0.42rem;
  inset-block-end: 0.38rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  pointer-events: none;
}

.orders-simulation-cell-action {
  display: inline-grid;
  place-items: center;
  inline-size: 1.45rem;
  block-size: 1.45rem;
  padding: 0;
  border: 1px solid hsl(216 98% 62% / 0.52);
  border-radius: 999px;
  background: hsl(216 98% 52% / 0.34);
  color: var(--text-strong);
  opacity: 0;
  transform: translateY(0.12rem);
  pointer-events: none;
  cursor: pointer;
  box-shadow: 0 0.2rem 0.55rem hsl(0 0% 0% / 0.26);
  transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.orders-simulation-cell-action svg {
  inline-size: 1rem;
  block-size: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orders-table-frame td[data-orders-simulation-cell='true']:hover .orders-simulation-cell-action,
.orders-table-frame td[data-orders-simulation-cell='true']:focus-within .orders-simulation-cell-action,
.orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.orders-simulation-cell-action:hover,
.orders-simulation-cell-action:focus-visible,
.orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze {
  border-color: hsl(216 98% 62% / 0.7);
  background: hsl(216 98% 52% / 0.58);
  color: var(--text-strong);
  outline: none;
}

.orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze,
.orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze:hover,
.orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: currentColor;
  transition: opacity 120ms ease, transform 120ms ease, color 120ms ease;
}

html[data-theme="light"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze,
html[data-theme-resolved="light"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze {
  color: hsl(0 0% 0%);
}

html[data-theme="light"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze svg,
html[data-theme-resolved="light"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze svg {
  stroke: hsl(0 0% 0%);
  stroke-width: 2.05;
}

html[data-theme="dark"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze,
html[data-theme-resolved="dark"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze {
  color: hsl(0 0% 100%);
}

html[data-theme="dark"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze svg,
html[data-theme-resolved="dark"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--frozen .orders-simulation-cell-action--freeze svg {
  stroke: hsl(0 0% 100%);
  stroke-width: 2.55;
}

.orders-simulation-freeze-confirm {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1rem;
  background: hsl(0 0% 0% / 0.42);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 140ms ease;
}

.orders-simulation-freeze-confirm.is-open {
  opacity: 1;
}

.orders-simulation-freeze-confirm-card {
  inline-size: min(28rem, 100%);
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border-1);
  border-radius: 1rem;
  background: var(--bg-2);
  color: var(--text-strong);
  box-shadow: 0 22px 54px hsl(0 0% 0% / 0.35);
}

.orders-simulation-freeze-confirm-card h3,
.orders-simulation-freeze-confirm-card p {
  margin: 0;
}

.orders-simulation-freeze-confirm-card h3 {
  font-size: 1.05rem;
}

.orders-simulation-freeze-confirm-card p {
  color: var(--text-muted);
  line-height: 1.45;
}

.orders-simulation-freeze-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.orders-export-settings-card {
  inline-size: min(40rem, 100%);
  max-block-size: min(44rem, calc(100vh - 2rem));
  overflow: auto;
}

.orders-export-settings-copy {
  display: grid;
  gap: 0.25rem;
}

.orders-export-settings-copy h3,
.orders-export-settings-copy p {
  margin: 0;
}

.orders-export-settings-copy p {
  color: var(--text-muted);
  line-height: 1.4;
}

.orders-export-settings-list {
  display: grid;
  gap: 0.55rem;
}

.orders-export-settings-row {
  display: grid;
  grid-template-columns: auto minmax(9rem, 0.72fr) minmax(12rem, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--border-1);
  border-radius: 0.8rem;
  background: var(--bg-1);
}

.orders-export-settings-row input[type='text'] {
  inline-size: 100%;
  min-inline-size: 0;
}

.orders-export-settings-enabled {
  color: var(--text-strong);
  font-weight: 700;
}

.orders-export-settings-enabled input:disabled {
  opacity: 0.92;
}

.orders-export-settings-grip {
  align-self: center;
}

@media (max-width: 760px) {
  .orders-export-settings-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .orders-export-settings-row input[type='text'] {
    grid-column: 1 / -1;
  }
}

.orders-table-frame th[data-col-key^='week__'] {
  border-left: 1px solid hsl(216 98% 52% / 0.16);
  overflow: visible;
}

.orders-projection-cell {
  border-left: 1px solid hsl(216 98% 52% / 0.12);
  transition: background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.orders-table-frame th.orders-recommended-column,
.orders-table-frame td.orders-recommended-column {
  border-inline-start: 2px solid var(--orders-recommended-color);
  border-inline-end: 2px solid var(--orders-recommended-color);
}

.orders-table-frame th.orders-recommended-column {
  border-block-start: 2px solid var(--orders-recommended-color);
  z-index: calc(var(--z-sticky-header) + 1);
}

.orders-table-frame tbody tr:last-child td.orders-recommended-column {
  border-block-end: 2px solid var(--orders-recommended-color);
}

.orders-screen[data-orders-simulation-active='true'] .orders-table-frame th.orders-recommended-column,
.orders-screen[data-orders-simulation-active='true'] .orders-table-frame td.orders-recommended-column {
  border-inline-color: transparent;
}

.orders-screen[data-orders-simulation-active='true'] .orders-table-frame th.orders-recommended-column {
  border-block-start-color: transparent;
}

.orders-screen[data-orders-simulation-active='true'] .orders-table-frame tbody tr:last-child td.orders-recommended-column {
  border-block-end-color: transparent;
}

html[data-theme="light"] .orders-table-frame th[data-col-key^='week__'],
html[data-theme-resolved="light"] .orders-table-frame th[data-col-key^='week__'] {
  background-color: hsl(216 100% 97%);
}

html[data-theme="light"] .orders-table-frame th[data-orders-simulation-column='true'],
html[data-theme-resolved="light"] .orders-table-frame th[data-orders-simulation-column='true'] {
  background-color: hsl(216 100% 95%);
}

html[data-theme="light"] .orders-projection-cell,
html[data-theme-resolved="light"] .orders-projection-cell {
  background-color: hsl(216 100% 98%);
}

html[data-theme="light"] .orders-table-frame td[data-orders-simulation-cell='true'],
html[data-theme-resolved="light"] .orders-table-frame td[data-orders-simulation-cell='true'] {
  background-color: hsl(216 100% 96%);
}

html[data-theme="light"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--fill-override,
html[data-theme-resolved="light"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--fill-override {
  background-color: hsl(216 98% 52% / 0.14);
}

html[data-theme="light"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--user-override,
html[data-theme-resolved="light"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--user-override {
  background-color: hsl(142 64% 42% / 0.16);
}

html[data-theme="dark"] .orders-table-frame th[data-col-key^='week__'],
html[data-theme-resolved="dark"] .orders-table-frame th[data-col-key^='week__'] {
  background-color: hsl(216 24% 12%);
}

html[data-theme="dark"] .orders-table-frame th[data-orders-simulation-column='true'],
html[data-theme-resolved="dark"] .orders-table-frame th[data-orders-simulation-column='true'] {
  background-color: hsl(216 28% 15%);
}

html[data-theme="dark"] .orders-projection-cell,
html[data-theme-resolved="dark"] .orders-projection-cell {
  background-color: hsl(216 24% 10%);
}

html[data-theme="dark"] .orders-table-frame td[data-orders-simulation-cell='true'],
html[data-theme-resolved="dark"] .orders-table-frame td[data-orders-simulation-cell='true'] {
  background-color: hsl(216 26% 13%);
}

html[data-theme="dark"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--fill-override,
html[data-theme-resolved="dark"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--fill-override {
  background-color: hsl(216 98% 62% / 0.18);
}

html[data-theme="dark"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--user-override,
html[data-theme-resolved="dark"] .orders-table-frame td[data-orders-simulation-cell='true'].orders-simulation-cell--user-override {
  background-color: hsl(142 63% 34% / 0.22);
}

html[data-theme="dark"] .orders-projection-trigger,
html[data-theme-resolved="dark"] .orders-projection-trigger {
  background: hsl(216 98% 62% / 0.18);
  color: hsl(208 100% 88%);
}

html[data-theme="dark"] .orders-simulation-fullness,
html[data-theme-resolved="dark"] .orders-simulation-fullness {
  border-color: hsl(45 90% 56% / 0.38);
  background: hsl(45 83% 42% / 0.32);
  color: hsl(44 100% 83%);
}

html[data-theme="dark"] .orders-simulation-fullness-spinner,
html[data-theme-resolved="dark"] .orders-simulation-fullness-spinner {
  border-color: hsl(44 100% 83% / 0.24);
  border-block-start-color: currentColor;
}

html[data-theme="dark"] .orders-simulation-fullness[data-orders-sim-fullness-state='green'],
html[data-theme-resolved="dark"] .orders-simulation-fullness[data-orders-sim-fullness-state='green'] {
  border-color: hsl(142 68% 58% / 0.42);
  background: hsl(142 63% 34% / 0.42);
  color: hsl(142 94% 84%);
}

html[data-theme="dark"] .orders-projection-trigger:hover,
html[data-theme-resolved="dark"] .orders-projection-trigger:hover,
html[data-theme="dark"] .orders-projection-trigger:focus-visible,
html[data-theme-resolved="dark"] .orders-projection-trigger:focus-visible {
  background: hsl(216 98% 62% / 0.28);
  border-color: hsl(216 98% 62% / 0.22);
}

html[data-theme="dark"] .orders-projection-trigger[data-orders-sim-trigger='cancel'],
html[data-theme-resolved="dark"] .orders-projection-trigger[data-orders-sim-trigger='cancel'] {
  background: hsl(12 92% 58% / 0.2);
  color: hsl(20 100% 88%);
}

html[data-theme="dark"] .orders-projection-trigger[data-orders-sim-trigger='cancel']:hover,
html[data-theme-resolved="dark"] .orders-projection-trigger[data-orders-sim-trigger='cancel']:hover,
html[data-theme="dark"] .orders-projection-trigger[data-orders-sim-trigger='cancel']:focus-visible,
html[data-theme-resolved="dark"] .orders-projection-trigger[data-orders-sim-trigger='cancel']:focus-visible {
  background: hsl(12 92% 58% / 0.3);
  border-color: hsl(12 92% 58% / 0.22);
}

html[data-theme="dark"] .orders-simulation-input,
html[data-theme-resolved="dark"] .orders-simulation-input {
  background: hsl(216 24% 11%);
  border-color: hsl(216 98% 62% / 0.24);
}

html[data-theme="light"] .orders-simulation-cell--fill-override .orders-simulation-input,
html[data-theme-resolved="light"] .orders-simulation-cell--fill-override .orders-simulation-input,
html[data-theme="light"] .orders-simulation-cell--user-override .orders-simulation-input,
html[data-theme-resolved="light"] .orders-simulation-cell--user-override .orders-simulation-input {
  background: transparent;
}

html[data-theme="dark"] .orders-simulation-cell--fill-override .orders-simulation-input,
html[data-theme-resolved="dark"] .orders-simulation-cell--fill-override .orders-simulation-input,
html[data-theme="dark"] .orders-simulation-cell--user-override .orders-simulation-input,
html[data-theme-resolved="dark"] .orders-simulation-cell--user-override .orders-simulation-input {
  background: transparent;
}

html[data-theme="light"] .orders-projection-cell--warning,
html[data-theme-resolved="light"] .orders-projection-cell--warning {
  background-color: hsl(50 100% 80% / 0.5);
}

html[data-theme="light"] .orders-projection-cell--critical,
html[data-theme-resolved="light"] .orders-projection-cell--critical {
  background-color: hsl(360 80% 80% / 0.5);
}

html[data-theme="dark"] .orders-projection-cell--warning,
html[data-theme-resolved="dark"] .orders-projection-cell--warning {
  background-color: hsl(50 50% 20% / 0.5);
}

html[data-theme="dark"] .orders-projection-cell--critical,
html[data-theme-resolved="dark"] .orders-projection-cell--critical {
  background-color: hsl(360 50% 20% / 0.5);
}



/* --- pages/orders-tracking.css --- */
.tracking-screen {
  gap: 1rem;
  block-size: 100%;
  min-block-size: 100%;
  grid-template-rows: minmax(0, 1fr);
}

.tracking-empty-state {
  padding: 1.25rem;
}

.tracking-export-menu {
  position: relative;
}

.tracking-export-menu > summary {
  list-style: none;
}

.tracking-export-menu > summary::-webkit-details-marker {
  display: none;
}

.tracking-export-menu-panel {
  position: absolute;
  inset-block-start: calc(100% + 0.45rem);
  inset-inline-end: 0;
  z-index: var(--z-popover);
  display: grid;
  gap: 0.35rem;
  min-inline-size: 9.5rem;
  padding: 0.55rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.tracking-export-menu-item {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: 2.1rem;
  padding: 0.38rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-main);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.tracking-export-menu-item:hover,
.tracking-export-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent-color) 13%, transparent);
  color: var(--text-strong);
}

.tracking-export-settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.tracking-export-settings-overlay:target {
  display: flex;
}

.tracking-export-settings-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-1) 68%, transparent);
  backdrop-filter: blur(14px);
}

.tracking-export-settings-card {
  position: relative;
  z-index: calc(var(--z-modal) + 1);
  display: grid;
  gap: var(--space-3);
  inline-size: min(46rem, calc(100vw - 2rem));
  max-block-size: min(38rem, calc(100vh - 2rem));
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.tracking-export-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.tracking-export-settings-head h2,
.tracking-export-settings-head p {
  margin: 0;
}

.tracking-export-settings-head h2 {
  font-size: 1.15rem;
}

.tracking-export-settings-head p {
  margin-top: 0.25rem;
  color: var(--text-muted);
}

.tracking-export-settings-close {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  color: var(--text-main);
  text-decoration: none;
}

.tracking-export-settings-form {
  display: grid;
  gap: var(--space-3);
  min-block-size: 0;
}

.tracking-export-supplier-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  min-block-size: 0;
  max-block-size: 22rem;
  overflow: auto;
}

.tracking-export-supplier-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-3);
}

.tracking-export-supplier-option.is-dragging {
  opacity: 0.58;
  border-color: var(--accent-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 36%, transparent);
}

.tracking-export-supplier-grip {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  color: var(--text-muted);
  cursor: grab;
}

.tracking-export-supplier-grip:active {
  cursor: grabbing;
}

.tracking-export-supplier-choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  inline-size: 100%;
}

.tracking-export-supplier-choice span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tracking-export-empty {
  color: var(--text-muted);
}

.tracking-export-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.tracking-linked-frame {
  min-width: 0;
  block-size: 100%;
  min-block-size: 100%;
}

.tracking-shared-scroll {
  block-size: 100%;
  overflow: scroll;
  scrollbar-gutter: stable both-edges;
}

.tracking-scroll-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 100%;
  width: max-content;
}

.tracking-scroll-stack.is-meta-snapped {
  gap: var(--space-2);
}


.tracking-scroll-stack.is-compact-mode {
  gap: 0;
}
.tracking-meta-layout {
  width: max-content;
  min-width: 0;
  transition: none;
}

.tracking-scroll-stack.is-meta-collapsed .tracking-meta-layout {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.tracking-matrix-layout {
  width: max-content;
  min-width: 0;
  scroll-margin-top: calc(var(--layout-header-h) + 0.75rem);
}

.tracking-meta-table-wrap,
.tracking-matrix-table-wrap {
  width: max-content;
  min-width: 0;
}

.tracking-meta-table {
  width: max-content;
  min-width: 0;
  --form-control-font-size: var(--table-cell-font-size);
}

.tracking-matrix-table {
  width: max-content;
  min-width: 0;
  --tracking-header-shift: 0px;
}

.tracking-meta-field-col {
  width: var(--tracking-meta-panel, 7.25rem);
}

.tracking-order-col {
  width: 5.75rem;
}

col.tracking-meta-field-col {
  width: var(--tracking-meta-panel, 7.25rem);
}

col.tracking-order-col {
  width: 5.75rem;
}

.tracking-meta-table tbody td[data-order-po],
.tracking-matrix-table thead th.tracking-order-header,
.tracking-matrix-table tbody td.tracking-qty-cell {
  width: 5.75rem;
  min-width: 5.75rem;
  max-width: 5.75rem;
  inline-size: 5.75rem;
  min-inline-size: 5.75rem;
  max-inline-size: 5.75rem;
  text-align: center;
}

.tracking-meta-table tbody th.tracking-meta-field-cell {
  width: var(--tracking-meta-panel, 7.25rem);
  min-width: var(--tracking-meta-panel, 7.25rem);
  max-width: var(--tracking-meta-panel, 7.25rem);
  inline-size: var(--tracking-meta-panel, 7.25rem);
  min-inline-size: var(--tracking-meta-panel, 7.25rem);
  max-inline-size: var(--tracking-meta-panel, 7.25rem);
  position: relative;
  transform: translateX(var(--tracking-meta-sticky-shift, 0px));
  z-index: calc(var(--z-content) + 2);
  text-align: right;
  padding-inline: 0.5rem 0.9rem;
  background: var(--bg-2);
  color: var(--text-strong);
  white-space: nowrap;
  font-size: var(--table-cell-font-size);
  line-height: 1.25;
  text-transform: none;
  letter-spacing: normal;
}

.tracking-meta-table tbody td {
  background: var(--bg-3);
  vertical-align: top;
}

.tracking-meta-table tbody tr:hover td.tracking-meta-value-cell,
.tracking-meta-table tbody tr:hover td.tracking-meta-editable-cell,
.tracking-meta-table tbody tr:hover td.tracking-meta-inline-cell {
  background: var(--bg-3);
}

.tracking-meta-static-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.95rem;
  padding: 0.38rem 0.24rem;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: none;
  font-size: var(--table-cell-font-size);
  line-height: 1.25;
}

.tracking-meta-editable-cell {
  position: relative;
  padding: 0.24rem;
  overflow: visible;
}

.tracking-meta-editor {
  display: block;
  position: relative;
  z-index: var(--z-content);
}

.tracking-meta-editor > summary {
  list-style: none;
}

.tracking-meta-editor > summary::-webkit-details-marker {
  display: none;
}

.tracking-meta-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 1.95rem;
  padding: 0.34rem 0.28rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-strong);
  font: inherit;
  font-size: var(--table-cell-font-size);
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.tracking-meta-trigger:hover,
.tracking-meta-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--accent-color) 44%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-2));
}

.tracking-meta-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-color) 42%, transparent);
  outline-offset: 1px;
}

.tracking-meta-trigger-text {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.tracking-meta-editor-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-popover) + 6);
  border: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

.tracking-meta-editor-popover {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-start: 0;
  z-index: calc(var(--z-popover) + 7);
  display: none;
  gap: 0.7rem;
  inline-size: min(15rem, calc(100vw - 1rem));
  max-inline-size: min(15rem, calc(100vw - 1rem));
  padding: 0.75rem;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  transform: translate(var(--tracking-meta-editor-shift-x, 0px), var(--tracking-meta-editor-shift-y, 0px));
  transform-origin: top left;
}

.tracking-meta-editor[data-popover-align="end"] .tracking-meta-editor-popover {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform-origin: top right;
}

.tracking-meta-editor[open] {
  z-index: calc(var(--z-popover) + 8);
}

.tracking-meta-editable-cell:has(.tracking-meta-editor[open]) {
  z-index: calc(var(--z-popover) + 7);
  isolation: isolate;
}

.tracking-meta-editor[open] .tracking-meta-editor-backdrop {
  display: block;
}

.tracking-meta-editor[open] .tracking-meta-editor-popover {
  display: grid;
}

.tracking-meta-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tracking-meta-editor-header strong {
  font-size: 0.8rem;
}

.tracking-meta-editor-close {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--negative-text);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.tracking-meta-editor-body {
  display: grid;
  gap: 0.5rem;
}

.tracking-meta-editor-input {
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  padding: 0.34rem 0.42rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-strong);
  font: inherit;
  font-size: var(--table-cell-font-size);
  line-height: 1.25;
}

.tracking-meta-editor-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-color) 42%, transparent);
  outline-offset: 1px;
}

.tracking-meta-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.tracking-meta-editor-submit,
.tracking-meta-editor-cancel {
  min-width: 0;
}

.tracking-meta-choice-list {
  display: grid;
  gap: 0.35rem;
}

.tracking-meta-choice-btn {
  display: block;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-strong);
  font: inherit;
  font-size: var(--table-cell-font-size);
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.tracking-meta-choice-btn:hover,
.tracking-meta-choice-btn:focus-visible,
.tracking-meta-choice-btn.is-active {
  border-color: color-mix(in srgb, var(--accent-color) 44%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-2));
  color: var(--accent-color);
  outline: none;
}

.tracking-meta-value-cell,
.tracking-qty-cell {
  font-variant-numeric: tabular-nums;
}

.tracking-meta-inline-cell {
  padding: 0.24rem;
}

.tracking-meta-inline-form {
  display: block;
  width: 100%;
}

.tracking-meta-inline-input,
.tracking-meta-inline-form input.tracking-meta-inline-input,
.tracking-meta-table tbody td .tracking-meta-inline-input {
  width: 100%;
  min-width: 0;
  min-height: 1.95rem;
  padding: 0.34rem 0.42rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-strong);
  font: inherit;
  font-size: var(--table-cell-font-size);
  line-height: 1.25;
  text-align: center;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.tracking-meta-inline-input:hover {
  border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 6%, var(--bg-2));
}

.tracking-meta-inline-input:focus-visible {
  border-color: color-mix(in srgb, var(--accent-color) 56%, var(--border-color));
  outline: 2px solid color-mix(in srgb, var(--accent-color) 42%, transparent);
  outline-offset: 1px;
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-2));
}

.tracking-meta-inline-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.tracking-meta-date-form {
  display: block;
  width: 100%;
}

.tracking-meta-date-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.tracking-meta-date-input::-webkit-calendar-picker-indicator {
  opacity: 0.88;
  cursor: pointer;
}

.tracking-meta-date-input::-webkit-date-and-time-value {
  text-align: center;
}

.tracking-meta-date-input:focus-visible {
  cursor: pointer;
}

.tracking-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
  transform: translateY(var(--tracking-header-shift, 0px));
}

.tracking-meta-qty-cell,
.tracking-qty-cell {
  font-weight: 600;
}

.tracking-matrix-table thead th.tracking-order-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
  text-align: center;
  overflow: visible;
  vertical-align: top;
}

.tracking-matrix-table thead th.tracking-order-header:has(.tracking-order-card[open]) {
  z-index: calc(var(--z-popover) + 2);
  isolation: isolate;
}

.tracking-matrix-table thead th.tracking-order-header:has(.tracking-order-actions-menu[open]) {
  z-index: calc(var(--z-popover) + 7);
  isolation: isolate;
}

.tracking-matrix-table thead th.tracking-order-header .table-resize-handle {
  display: none;
}

.tracking-order-header-stack {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
}

.tracking-order-header-topline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
}

.tracking-order-po,
.tracking-order-date {
  display: block;
}

.tracking-order-po {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.tracking-order-date {
  display: none;
  margin-top: 0.05rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: normal;
  text-transform: none;
}

.tracking-order-card-trigger {
  display: none;
}

.tracking-scroll-stack.is-scroll-info-active .tracking-order-date,
.tracking-scroll-stack.is-meta-collapsed .tracking-order-date {
  display: block;
}

.tracking-scroll-stack.is-scroll-info-active .tracking-order-card-trigger,
.tracking-scroll-stack.is-meta-collapsed .tracking-order-card-trigger {
  display: inline-flex;
}

.tracking-order-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: var(--z-modal);
}

.tracking-order-modal:target {
  display: flex;
}

.tracking-order-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface-base) 56%, transparent);
  backdrop-filter: blur(8px);
}

.tracking-order-modal-dialog {
  position: relative;
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1rem;
}

.tracking-order-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.tracking-order-modal-header h2 {
  margin: 0;
  font-size: 1rem;
}

.tracking-order-modal-close {
  color: var(--negative-text);
  text-decoration: none;
  font-weight: 700;
}

.tracking-order-edit-table {
  width: 100%;
}

.tracking-order-edit-table th {
  width: 11rem;
  white-space: nowrap;
}

.tracking-order-modal-form input,
.tracking-order-modal-form select {
  width: 100%;
}

.tracking-order-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.tracking-order-card,
.tracking-order-actions-menu {
  position: relative;
}

.tracking-order-card[open] {
  z-index: calc(var(--z-popover) + 1);
}

.tracking-order-card:has(.tracking-order-actions-menu[open]) {
  z-index: calc(var(--z-popover) + 5);
}

.tracking-order-actions-menu[open] {
  z-index: calc(var(--z-popover) + 6);
}

.tracking-order-card > summary,
.tracking-order-actions-menu > summary {
  list-style: none;
}

.tracking-order-card > summary::-webkit-details-marker,
.tracking-order-actions-menu > summary::-webkit-details-marker {
  display: none;
}

.tracking-order-card-trigger,
.tracking-order-actions-trigger {
  align-items: center;
  justify-content: center;
  min-inline-size: 1.45rem;
  min-block-size: 1.45rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent-color) 52%, var(--border-color));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--accent-color);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}

.tracking-order-actions-trigger {
  min-inline-size: 1.8rem;
  color: var(--text-strong);
  background: var(--bg-2);
  border-color: var(--border-color);
}

.tracking-order-card-popover {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-end: 0;
  z-index: calc(var(--z-popover) + 1);
  inline-size: min(17rem, calc(100vw - 1.5rem));
  max-inline-size: min(17rem, calc(100vw - 1rem));
  padding: 0.75rem;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  overflow: visible;
  transform: translate(var(--tracking-popover-shift-x, 0px), var(--tracking-popover-shift-y, 0px));
}

.tracking-order-card-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  min-block-size: 1.8rem;
}

.tracking-order-card-top strong {
  font-size: 0.82rem;
}

.tracking-order-card-meta {
  display: grid;
  gap: 0.4rem;
  margin: 0.65rem 0 0;
}

.tracking-order-card-meta div {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
}

.tracking-order-card-meta dt {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.71rem;
  font-weight: 600;
}

.tracking-order-card-meta dd {
  margin: 0;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
  text-transform: none;
  letter-spacing: normal;
}

.tracking-order-actions-panel {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-end: 0;
  z-index: calc(var(--z-popover) + 4);
  display: grid;
  gap: 0.25rem;
  min-inline-size: 9.75rem;
  max-inline-size: min(12rem, calc(100vw - 1rem));
  padding: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
  border-radius: var(--radius-md);
  background: var(--bg-3);
  box-shadow: var(--elevation-2);
  transform: translate(var(--tracking-actions-shift-x, 0px), var(--tracking-actions-shift-y, 0px));
}

.tracking-order-actions-panel form {
  margin: 0;
}

.tracking-order-action-link,
.tracking-order-action-link:visited {
  display: block;
  inline-size: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-strong);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.tracking-order-action-link:hover,
.tracking-order-action-link:focus-visible {
  background: var(--bg-2);
  color: var(--accent-color);
  outline: none;
}

@media (max-width: 991px) {
  .tracking-order-col,
  col.tracking-order-col,
  .tracking-meta-table tbody td[data-order-po],
  .tracking-matrix-table thead th.tracking-order-header,
  .tracking-matrix-table tbody td.tracking-qty-cell {
    width: 5.1rem;
    min-width: 5.1rem;
    max-width: 5.1rem;
    inline-size: 5.1rem;
    min-inline-size: 5.1rem;
    max-inline-size: 5.1rem;
  }

  .tracking-meta-table tbody th.tracking-meta-field-cell,
  col.tracking-meta-field-col {
    width: var(--tracking-meta-panel, 6.5rem);
    min-width: var(--tracking-meta-panel, 6.5rem);
    max-width: var(--tracking-meta-panel, 6.5rem);
    inline-size: var(--tracking-meta-panel, 6.5rem);
    min-inline-size: var(--tracking-meta-panel, 6.5rem);
    max-inline-size: var(--tracking-meta-panel, 6.5rem);
  }

  .tracking-meta-trigger,
  .tracking-meta-editor-input,
  .tracking-meta-choice-btn,
  .tracking-meta-inline-input {
    font-size: var(--table-cell-font-size);
  }

  .tracking-meta-editor-popover {
    inline-size: min(13.5rem, calc(100vw - 0.75rem));
    max-inline-size: min(13.5rem, calc(100vw - 0.75rem));
  }

  .tracking-meta-editor-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .tracking-order-modal-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    padding: 0.85rem;
  }

  .tracking-order-modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .tracking-order-card-popover {
    inline-size: min(15rem, calc(100vw - 1rem));
    inset-inline-end: -0.15rem;
  }

  .tracking-order-card-meta div {
    grid-template-columns: 4.85rem minmax(0, 1fr);
  }
}





.tracking-inline-warning {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.4rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warning-color) 55%, var(--border-color));
  background: color-mix(in srgb, var(--warning-color) 10%, var(--bg-2));
  color: var(--warning-color);
  font-size: 0.78rem;
  font-weight: 600;
}



/* --- pages/profile.css --- */
.profile-screen {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  font-size: calc(var(--content-font-size) - 1px);
}

.profile-card {
  display: grid;
  gap: 0.85rem;
  inline-size: min(100%, 64rem);
  max-inline-size: 64rem;
  justify-self: start;
  padding: 1rem 1.15rem;
}

.profile-form,
.profile-form-layout,
.profile-field,
.profile-actions {
  min-inline-size: 0;
}

.profile-form-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(14rem, 1fr));
  gap: 0.72rem 0.9rem;
  align-items: start;
}

.profile-field {
  margin: 0;
  gap: 0.32rem;
}

.profile-field .options-users-field-label {
  font-size: 0.82rem;
  line-height: 1.15;
}

.profile-field input {
  min-block-size: 2.35rem;
  padding-block: 0.42rem;
  padding-inline: 0.62rem;
  font-size: 0.88rem;
}

.profile-readonly-field input[readonly] {
  background: color-mix(in srgb, var(--bg-2) 72%, var(--bg-3));
  border-color: color-mix(in srgb, var(--border-1) 88%, transparent);
  color: var(--text-strong);
}

.profile-disabled-field input[disabled] {
  opacity: 0.68;
}

.profile-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-self: stretch;
  padding-block-start: 0.15rem;
}

.profile-actions .btn {
  inline-size: auto;
  min-inline-size: 8.2rem;
  min-height: 2.25rem;
  font-size: 0.88rem;
  line-height: 1.15;
}

@media (max-width: 1200px) {
  .profile-form-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .profile-form-layout {
    grid-template-columns: 1fr;
  }

  .profile-card {
    inline-size: 100%;
    padding: 0.9rem;
  }

  .profile-actions {
    display: grid;
    justify-content: stretch;
  }

  .profile-actions .btn {
    inline-size: 100%;
  }
}


/* --- responsive/mobile.css --- */
/* Mobile overrides intentionally live next to their owning component and page files. */


/* --- components/demo-app.css --- */
body.tiona-demo-protected-page .page-root {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

body.tiona-demo-app .options-screen [data-demo-blur-section] .options-section-body {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

body.tiona-demo-app .options-screen [data-demo-blur-inline],
body.tiona-demo-app .options-screen [data-demo-global-ban-blur] {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

:root {
  --demo-cta-green: #2f9b61;
  --demo-cta-green-hover: #288353;
  --demo-cta-green-outline: #2ebd72;
  --demo-cta-green-soft: color-mix(in srgb, var(--demo-cta-green-outline) 14%, transparent);
  --demo-cta-green-ring: color-mix(in srgb, var(--demo-cta-green-outline) 34%, transparent);
}

[data-theme="light"] {
  --demo-cta-green: #257a4d;
  --demo-cta-green-hover: #1f6841;
  --demo-cta-green-outline: #228d58;
  --demo-cta-green-soft: color-mix(in srgb, var(--demo-cta-green-outline) 11%, transparent);
}

.btn-cta-fill {
  background: var(--demo-cta-green);
  border-color: var(--demo-cta-green);
  color: #fff;
  box-shadow: 0 0.75rem 1.45rem -1.1rem var(--demo-cta-green-ring);
}

.btn-cta-fill:hover,
.btn-cta-fill:focus-visible {
  background: var(--demo-cta-green-hover);
  border-color: var(--demo-cta-green-hover);
  color: #fff;
}

.btn-cta-outline {
  color: var(--demo-cta-green-outline);
  background: transparent;
  border: thin solid var(--demo-cta-green-outline);
}

.btn-cta-outline:hover,
.btn-cta-outline:focus-visible {
  color: var(--demo-cta-green-outline);
  background: var(--demo-cta-green-soft);
  border-color: var(--demo-cta-green-outline);
}

.orders-simulation-freeze-confirm {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: hsl(0 0% 0% / 0.42);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 140ms ease;
}

.orders-simulation-freeze-confirm.is-open {
  opacity: 1;
}

.orders-simulation-freeze-confirm-card {
  box-sizing: border-box;
  inline-size: min(28rem, 100%);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: 1rem;
  background: var(--bg-2);
  color: var(--text-strong);
  box-shadow: 0 22px 54px hsl(0 0% 0% / 0.35);
}

.orders-simulation-freeze-confirm-card h3,
.orders-simulation-freeze-confirm-card p {
  margin: 0;
}

.orders-export-demo-cta {
  width: min(42rem, calc(100vw - 2rem));
  padding: var(--space-4);
}

.orders-export-demo-cta .orders-export-confirm-copy {
  margin-bottom: 0;
}

.orders-export-demo-cta .orders-export-confirm-copy h3 {
  margin-bottom: var(--space-2);
}

.orders-export-demo-cta .orders-export-confirm-copy p {
  color: var(--text-muted);
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.25rem);
  line-height: 1.45;
}

.orders-export-demo-cta .orders-export-confirm-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.orders-export-demo-cta .orders-export-confirm-actions form {
  display: inline-flex;
  margin: 0;
}