/* Settings workspace reuses billing folds, PlantaEvo fields, tables and dialogs. */
.settings-subnav-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; width: 100%; min-width: 0; box-sizing: border-box; }
.settings-subnav-card > .tab-selector { max-width: 100%; box-sizing: border-box; }
.settings-subnav-card > .settings-topic-nav { grid-row: 1; }
.settings-subnav-card > .settings-detail-nav { grid-row: 2; }
.settings-topic-nav, .settings-detail-nav { flex-wrap: wrap; min-width: 0; }
.settings-detail-nav { margin-top: 8px; gap: 6px; }
.settings-detail-nav .subnav-button { padding: 8px 14px; }
.partner-row-actions-menu { position: fixed; right: auto; z-index: 10050; max-height: calc(100dvh - 16px); overflow-y: auto; }
.partner-row-actions-menu .mini-button { min-height: 36px; }
.partner-settings-table:not(.mobile-card-table) .partner-row-actions-cell { vertical-align: middle; }
.partner-settings-table .action-cell.partner-row-actions-cell .partner-row-actions-trigger.mini-button { width: 34px; min-height: 32px; margin: 0; padding: 4px; }
.partner-settings-table.mobile-card-table td.action-cell.partner-row-actions-cell { display: flex; justify-content: flex-end; padding-top: 6px; }
@media (pointer: coarse) {
  .partner-row-actions-menu .mini-button { min-height: 44px; }
  .partner-settings-table .action-cell.partner-row-actions-cell .partner-row-actions-trigger.mini-button { width: 44px; min-height: 44px; }
}
.settings-list-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.settings-list-actions .settings-partner-import { flex: 1 1 260px; }
.settings-integration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.settings-integration-sections { display: grid; gap: 22px; }
.settings-integration-section { min-width: 0; }
.settings-integration-section > .eyebrow { margin: 0 0 12px; }
.settings-integration-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.settings-integration-card header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.settings-integration-card img { display: block; width: 150px; height: 54px; object-fit: contain; object-position: left center; padding: 5px; border-radius: var(--layout-input-radius); background: #fff; }
.settings-integration-card h3, .settings-integration-card p { margin: 0; }
.settings-integration-card .form-actions { margin-top: auto; }
.settings-integration-icon svg { width: 36px; height: 36px; color: var(--primary); }
.settings-integration-card .pill { white-space: normal; }
.settings-workspace-dialog { width: min(720px, calc(100vw - 48px)); box-sizing: border-box; }
.settings-workspace-dialog .profile-settings-head { align-items: flex-start; }
.settings-workspace-dialog .profile-settings-head h3 { margin: 0; }
.settings-workspace-dialog .profile-settings-head .topbar-icon-button { flex-shrink: 0; }
.settings-workspace-dialog code { overflow-wrap: anywhere; font-size: 12px; }
.settings-workspace-dialog .inline-check { align-self: center; }
.settings-workspace-dialog .form-grid, .settings-company-workspace .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-workspace-dialog .field, .settings-company-workspace .field { min-width: 0; }
.settings-workspace-dialog input, .settings-workspace-dialog select, .settings-workspace-dialog textarea { max-width: 100%; box-sizing: border-box; }
.settings-modal-content { min-width: 0; }
.settings-partner-fold { margin-bottom: 10px; }
.settings-company-workspace { display: grid; gap: 16px; }
.settings-company-workspace > .order-form { max-width: 920px; }
.settings-module-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-readiness-list { display: grid; gap: 10px; padding-block: 12px; }
.settings-readiness-list .settings-section-row-head { gap: 12px; flex-wrap: wrap; }
.settings-template-switch { display: none; }
.settings-technical-preview { margin-top: 12px; }
.settings-dialog-open { overflow: hidden; }
@media (max-width: 720px) {
  .settings-workspace-backdrop { padding: 12px; }
  .settings-workspace-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 16px; }
  .settings-module-choices { grid-template-columns: minmax(0, 1fr); }
  .settings-workspace-dialog .form-actions { flex-wrap: wrap; }
  .settings-template-switch { display: flex; gap: 8px; margin-bottom: 12px; }
  .settings-email-template-shell[data-template-mode="editor"] .email-template-preview-card { display: none; }
  .settings-email-template-shell[data-template-mode="preview"] .email-template-editor-card { display: none; }
  .settings-email-template-shell .email-template-page { grid-template-columns: minmax(0, 1fr); }
  .settings-workspace-dialog input, .settings-workspace-dialog select, .settings-workspace-dialog textarea { max-width: 100%; box-sizing: border-box; }
}
:root {
  --color-background: #f5f7f2;
  --color-surface: #ffffff;
  --color-surface-muted: #eef3e7;
  --color-primary: #4f7d3a;
  --color-primary-hover: #3f642f;
  --color-secondary: #8ca66a;
  --color-text: #1f2933;
  --color-muted-text: #667085;
  --color-border: #d0d7c8;
  --color-sidebar: #eef3e7;
  --color-sidebar-text: #1f2933;
  --color-header: #ffffff;
  --color-button-text: #ffffff;
  --color-input-background: #ffffff;
  --color-table-header: #dfead5;
  --color-table-row-alt: #fafcf7;
  --color-selected-row: #cfe6b8;
  --selection-bg: var(--color-selected-row);
  --selection-soft: color-mix(in srgb, var(--color-selected-row) 48%, var(--color-surface));
  --selection-strong: color-mix(in srgb, var(--color-selected-row) 74%, var(--color-surface));
  --selection-border: var(--color-primary);
  --selection-text: var(--color-text);
  --selection-ring: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --focus-ring: color-mix(in srgb, var(--color-primary) 14%, transparent);
  --active-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 20%, transparent);
  --plantaevo-logo-filter: none;
  --color-success: #2f7d32;
  --color-warning: #b7791f;
  --color-danger: #b42318;
  --color-info: #2563eb;
  --font-font-family: "Aptos Display", "Segoe UI", sans-serif;
  --font-base-size: 14px;
  --font-title-size: 22px;
  --font-section-title-size: 18px;
  --font-table-size: 13px;
  --font-button-size: 14px;
  --font-input-size: 14px;
  --font-font-weight-normal: 400;
  --font-font-weight-bold: 700;
  --sidebar-font-size: 14px;
  --layout-sidebar-width: 290px;
  --layout-header-height: 56px;
  --layout-card-radius: 28px;
  --layout-button-radius: 14px;
  --layout-input-radius: 13px;
  --layout-table-radius: 18px;
  --layout-table-row-height: 38px;
  --layout-input-height: 40px;
  --layout-spacing: 12px;
  --layout-page-padding: 22px;
  --layout-card-padding: 16px;
  --layout-shadow-strength: 24px;
  --layout-occupancy-table-min-width: 67px;
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --surface-strong: var(--color-surface-muted);
  --ink: var(--color-text);
  --muted: var(--color-muted-text);
  --line: var(--color-border);
  --primary: var(--color-primary);
  --primary-strong: var(--color-primary-hover);
  --accent: var(--color-warning);
  --leaf: var(--color-secondary);
  --danger: var(--color-danger);
  --shadow: 0 24px 70px rgba(21, 34, 29, 0.13);
  --radius-lg: var(--layout-card-radius);
  --radius-md: 18px;
  --radius-sm: var(--layout-button-radius);
}

/* A magyar nyelvű táblázatfejlécek csak szóhatáron vagy szabályos
   elválasztási ponton törjenek, ne tetszőleges karakterek között. */
table th,
[role="columnheader"] {
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* PlantaEvo premium dashboard theme, inspired by the dark greenhouse reference. */
:root {
  --color-background: #f6f8f4;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f6ee;
  --color-primary: #2f7d32;
  --color-primary-hover: #0f4a2b;
  --color-secondary: #72ad44;
  --color-text: #111827;
  --color-muted-text: #687487;
  --color-border: #e4e8df;
  --color-sidebar: #06351f;
  --color-sidebar-text: #eef7ec;
  --color-table-header: #f4f6f1;
  --color-table-row-alt: #fbfcf8;
  --color-selected-row: #dff1d7;
  --selection-bg: var(--color-selected-row);
  --selection-soft: color-mix(in srgb, var(--color-selected-row) 48%, var(--color-surface));
  --selection-strong: color-mix(in srgb, var(--color-selected-row) 74%, var(--color-surface));
  --selection-border: var(--color-primary);
  --selection-text: var(--color-text);
  --selection-ring: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --focus-ring: color-mix(in srgb, var(--color-primary) 14%, transparent);
  --active-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 20%, transparent);
  --layout-sidebar-width: 248px;
  --layout-card-radius: 18px;
  --layout-button-radius: 12px;
  --layout-table-radius: 14px;
  --layout-page-padding: 0px;
  --layout-occupancy-table-min-width: 67px;
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --surface-strong: var(--color-surface-muted);
  --ink: var(--color-text);
  --muted: var(--color-muted-text);
  --line: var(--color-border);
  --primary: var(--color-primary);
  --primary-strong: var(--color-primary-hover);
  --accent: var(--color-secondary);
  --leaf: var(--color-secondary);
  --shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

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

body {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 28rem),
    linear-gradient(135deg, color-mix(in srgb, var(--bg) 88%, #ffffff) 0%, var(--bg) 48%, color-mix(in srgb, var(--surface-strong) 86%, var(--bg)) 100%);
}

.app-shell {
  grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: transparent;
}

.sidebar {
  top: 0;
  height: 100vh;
  padding: 26px 16px 22px;
  border: 0;
  border-radius: 0;
  color: var(--color-sidebar-text);
  background:
    radial-gradient(circle at 28% 78%, color-mix(in srgb, var(--leaf) 22%, transparent), transparent 12rem),
    radial-gradient(circle at 10% 105%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 14rem),
    linear-gradient(165deg, var(--color-sidebar) 0%, color-mix(in srgb, var(--color-sidebar) 82%, #000000) 52%, color-mix(in srgb, var(--color-sidebar) 62%, #000000) 100%);
  box-shadow: 18px 0 44px color-mix(in srgb, var(--color-sidebar) 28%, transparent);
  overflow: visible;
}

.sidebar::before {
  content: "";
  position: absolute;
  right: -42px;
  bottom: 18px;
  width: 190px;
  height: 270px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--leaf) 20%, transparent), transparent 62%),
    linear-gradient(35deg, transparent 45%, color-mix(in srgb, var(--leaf) 18%, transparent) 46%, transparent 49%),
    linear-gradient(68deg, transparent 47%, color-mix(in srgb, var(--color-sidebar-text) 10%, transparent) 48%, transparent 51%);
  border-radius: 80% 30% 0 0;
  opacity: 0.9;
}

.sidebar-collapse-button {
  right: -14px;
  width: 30px;
  height: 48px;
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.brand {
  position: relative;
  z-index: 1;
  gap: 12px;
  margin-bottom: 34px;
}

.brand-mark {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.brand h1 {
  color: var(--color-sidebar-text);
  font-size: 1.35rem;
  letter-spacing: -0.04em;
}

.brand .eyebrow {
  max-width: 145px;
  color: color-mix(in srgb, var(--color-sidebar-text) 66%, transparent);
  line-height: 1.25;
}

.nav {
  position: relative;
  z-index: 1;
  gap: 10px;
  padding-right: 0;
  scrollbar-color: color-mix(in srgb, var(--color-sidebar-text) 42%, transparent) transparent;
  scrollbar-width: thin;
}

.nav::-webkit-scrollbar {
  width: 7px;
}

.nav::-webkit-scrollbar-track {
  background: transparent;
}

.nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-sidebar-text) 28%, transparent);
}

.nav-group {
  gap: 8px;
}

.nav-group-toggle,
.nav-group-label {
  color: color-mix(in srgb, var(--color-sidebar-text) 56%, transparent);
  letter-spacing: 0.14em;
}

.nav-group-toggle {
  padding: 8px 8px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: color-mix(in srgb, var(--color-sidebar-text) 92%, transparent);
  background: transparent;
  font-weight: 700;
}

.nav-item::before {
  display: grid;
  place-items: center;
  width: 22px;
  color: color-mix(in srgb, var(--color-sidebar-text) 88%, transparent);
  font-size: 1.05rem;
}

.nav-item[data-view="overview"]::before { content: "⌂"; }
.nav-item[data-view="todos"]::before { content: "\2713"; }
.nav-item[data-view="notes"]::before { content: "\270E"; }
.nav-item[data-view="orders"]::before { content: "▣"; }
.nav-item[data-view="items"]::before { content: "✣"; }
.nav-item[data-view="occupancy"]::before { content: "◫"; }
.nav-item[data-view="plc"]::before { content: "▥"; }
.nav-item[data-view="weekly"]::before { content: "◷"; }
.nav-item[data-view="potting"]::before { content: "♧"; }
.nav-item[data-view="input"]::before { content: "▤"; }
.nav-item[data-view="inventory"]::before { content: "▦"; }
.nav-item[data-view="billing"]::before { content: "▧"; }
.nav-item[data-view="accounting"]::before { content: "▨"; }
.nav-item[data-view="email"]::before { content: "✉"; }
.nav-item[data-view="market"]::before { content: "◎"; }
.nav-item[data-view="export"]::before { content: "↗"; }
.nav-item[data-view="settings"]::before { content: "⚙"; }

.nav-item:hover,
.nav-item.is-active {
  border-color: color-mix(in srgb, var(--selection-border) 42%, transparent);
  color: var(--color-sidebar-text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--selection-border) 28%, transparent), color-mix(in srgb, var(--color-sidebar-text) 8%, transparent));
  box-shadow: inset 3px 0 0 var(--selection-border);
}

.content {
  min-height: 100vh;
  min-width: 0;
  padding: 20px 26px 28px;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  backdrop-filter: none;
}

.topbar {
  align-items: center;
  min-height: 72px;
  margin: -20px -26px 22px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.topbar-left {
  display: grid;
  gap: 0;
  min-width: 0;
}

.global-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(360px, 44vw);
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px 0 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.global-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
}

.global-search input:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.topbar-actions {
  justify-content: flex-end;
  gap: 12px;
}

.year-picker,
.ghost-button,
.primary-button,
.topbar-icon-button,
.profile-chip {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.primary-button {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
}

.topbar-icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--muted);
  cursor: pointer;
}

.topbar-icon-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.undo-button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

.undo-button .undo-icon-shape {
  fill: currentColor;
  stroke: none;
}

.topbar-icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.undo-button:not(:disabled) {
  color: var(--primary);
}

.notification-button {
  position: relative;
}

.notification-button.has-unread {
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  padding: 0 5px;
  color: var(--color-button-text);
  background: var(--danger);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.notification-badge[hidden] {
  display: none;
}

.notification-panel {
  position: fixed;
  z-index: 10060;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 20px;
  padding: 14px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--leaf) 16%, transparent), transparent 15rem),
    color-mix(in srgb, var(--surface) 98%, transparent);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.24);
}

.notification-panel[hidden] {
  display: none;
}

.notification-panel-head,
.notification-panel-actions,
.notification-item,
.notification-push-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.notification-panel-head h3 {
  margin: 0;
}

.notification-panel-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.notification-panel-close-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  color: var(--muted);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.notification-panel-close-button:hover,
.notification-panel-close-button:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.notification-push-card {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--layout-card-radius);
  padding: 12px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.notification-push-card > div,
.notification-empty,
.notification-item > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.notification-push-card strong,
.notification-empty strong,
.notification-item strong {
  color: var(--ink);
}

.notification-push-card small,
.notification-empty span,
.notification-item p,
.notification-item small {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.notification-push-card small,
.notification-item p {
  margin: 0;
}

.notification-panel-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.notification-list {
  display: grid;
  gap: 8px;
}

.notification-item {
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: 16px;
  padding: 11px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.notification-item.is-unread {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  box-shadow: inset 3px 0 0 var(--primary);
}

.notification-item.is-read {
  opacity: 0.75;
}

.notification-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.notification-empty {
  border: 1px dashed color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 16px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface-strong) 50%, transparent);
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 12px 5px 6px;
  text-align: left;
  cursor: pointer;
}

.profile-menu-wrap {
  position: relative;
}

.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 80;
  display: grid;
  min-width: 220px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
}

.profile-menu.is-portaled {
  position: fixed;
  z-index: 10050;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.24);
}

.profile-menu[hidden] {
  display: none;
}

.profile-menu button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}

.profile-menu button:hover,
.profile-menu button.is-active {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 11%, transparent);
}

.profile-menu button[hidden] {
  display: none;
}

.profile-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--color-sidebar) 42%, transparent);
  backdrop-filter: blur(6px);
}

.profile-settings-dialog {
  display: grid;
  gap: 16px;
  width: min(880px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 26px;
  padding: 22px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--leaf) 18%, transparent), transparent 22rem),
    var(--surface);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.profile-settings-dialog.ios-install-dialog {
  width: min(440px, 100%);
}

.profile-settings-dialog.portal-address-notice-dialog {
  width: min(640px, 100%);
}

.portal-address-notice-copy,
.portal-address-notice-steps {
  display: grid;
  gap: 12px;
  color: var(--text);
}

.portal-address-notice-copy p,
.portal-address-notice-steps {
  margin: 0;
  line-height: 1.5;
}

.portal-address-notice-steps {
  padding-left: 22px;
}

.portal-address-notice-link {
  color: var(--primary-strong);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.portal-address-notice-dialog .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.profile-settings-backdrop.employee-pick-confirm-backdrop {
  align-items: center;
  justify-items: center;
  padding: 12px;
}

.profile-settings-dialog.employee-pick-confirm-dialog {
  align-self: center;
  justify-self: center;
  align-content: start;
  grid-template-rows: auto auto;
  grid-auto-rows: min-content;
  width: min(380px, calc(100vw - 24px));
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 24px);
  overflow: visible;
  gap: 14px;
  border-radius: 18px;
  padding: 16px;
}

.employee-pick-confirm-copy {
  display: grid;
  gap: 5px;
}

.employee-pick-confirm-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.35;
}

.employee-pick-confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.employee-pick-confirm-actions > button {
  min-height: 42px;
  height: auto;
  padding: 10px 12px;
  justify-content: center;
}

.profile-settings-dialog.completed-order-summary-dialog {
  width: min(1060px, 100%);
  max-height: min(88vh, 860px);
}

.completed-order-summary-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.completed-order-summary-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.completed-order-summary-stats > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 16px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--leaf) 9%, var(--surface-strong));
}

.completed-order-summary-stats small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.completed-order-summary-stats strong {
  overflow-wrap: anywhere;
  color: var(--primary-strong);
}

.completed-order-summary-table-wrap {
  max-height: min(50vh, 460px);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 18px;
}

.completed-order-summary-table {
  width: 100%;
  min-width: 760px;
}

.completed-order-summary-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

@media (max-width: 720px) {
  .completed-order-summary-filters {
    grid-template-columns: 1fr;
  }

  .completed-order-summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.active-order-delivery-editor-backdrop {
  z-index: 145;
}

.active-order-delivery-editor-dialog {
  width: min(780px, 100%);
  max-height: min(820px, calc(100dvh - 32px));
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.active-order-delivery-editor-table-wrap {
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 18px;
  background: var(--surface-strong);
}

.active-order-delivery-editor-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
}

.active-order-delivery-editor-table th,
.active-order-delivery-editor-table td {
  padding: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.active-order-delivery-editor-table th:last-child,
.active-order-delivery-editor-table td:last-child {
  border-right: 0;
}

.active-order-delivery-editor-table tbody tr:last-child th,
.active-order-delivery-editor-table tbody tr:last-child td {
  border-bottom: 0;
}

.active-order-delivery-editor-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: color-mix(in srgb, var(--leaf) 12%, var(--surface-strong));
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.active-order-delivery-editor-table thead th:first-child,
.active-order-delivery-editor-table tbody th {
  width: 46%;
  text-align: left;
}

.active-order-delivery-editor-table tbody th strong,
.active-order-delivery-editor-table tbody th small {
  display: block;
}

.active-order-delivery-editor-table tbody th small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 700;
}

.active-order-delivery-editor-table input {
  width: 100%;
  min-width: 72px;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--layout-input-radius);
  padding: 8px 10px;
  color: var(--text);
  background: var(--color-input-background);
  font: inherit;
  font-weight: 850;
  text-align: center;
}

.active-order-delivery-editor-table input:focus {
  border-color: var(--primary);
  outline: 3px solid color-mix(in srgb, var(--primary) 16%, transparent);
}

.active-order-delivery-editor-actions {
  justify-content: flex-end;
}

.ios-install-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
  color: var(--text);
  font-weight: 700;
}

.profile-settings-head,
.profile-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.profile-settings-head h3,
.profile-password-card h4 {
  margin: 0;
  letter-spacing: -0.04em;
}

.profile-settings-form {
  display: grid;
  gap: 16px;
}

.profile-password-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-strong) 58%, transparent);
}

.profile-settings-message {
  min-height: 20px;
  margin: 0;
  color: var(--primary-strong);
  font-weight: 800;
}

.profile-settings-message.is-error {
  color: var(--danger);
}

/* Own-account forms reuse the order-form fields and compact settings dialog. */
.profile-settings-dialog.account-profile-dialog {
  box-sizing: border-box;
  max-height: calc(100dvh - 48px);
  overflow-x: hidden;
}

.account-profile-dialog:not(.customer-profile-dialog) {
  width: min(720px, 100%);
  padding: 20px;
}

.account-profile-dialog .profile-settings-head {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.account-profile-dialog .profile-settings-head > div {
  min-width: 0;
}

.account-profile-dialog .profile-settings-head .topbar-icon-button {
  flex-shrink: 0;
}

.account-profile-dialog .profile-settings-head small,
.account-profile-dialog .profile-password-card > div > small,
.account-profile-dialog .field-help {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}

.account-profile-dialog .profile-account-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.account-profile-dialog .profile-password-card {
  padding: 14px;
  gap: 12px;
}

.account-profile-dialog .profile-password-card.profile-security-fold {
  display: block;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.account-profile-dialog .profile-security-fold:last-of-type { border-bottom: 0; }
.account-profile-dialog .profile-security-fold > summary small { color: var(--muted); font-weight: 400; line-height: 1.5; }

.account-profile-dialog .profile-security-fold > summary > div {
  flex: 1;
  min-width: 0;
}

.account-profile-dialog .profile-security-fold > .profile-account-grid,
.account-profile-dialog .profile-security-fold > .profile-security-actions,
.account-profile-dialog .profile-security-fold > .profile-account-grid + div {
  margin-top: 12px;
}

.account-profile-dialog .profile-password-card:not(.profile-two-factor-card):has(#profileCurrentPassword) .profile-account-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-profile-dialog .field,
.account-profile-dialog .password-field {
  min-width: 0;
  align-content: start;
}

.account-profile-dialog .field input {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.account-profile-dialog .password-field input {
  padding-right: 48px;
}

.account-profile-dialog .field input:disabled {
  opacity: 0.82;
  color: var(--ink);
  background: color-mix(in srgb, var(--color-input-background) 84%, var(--leaf));
}

.account-profile-dialog .profile-notification-option input[type="checkbox"] {
  width: 20px;
  min-height: 0;
  padding: 0;
}

.account-profile-dialog .profile-security-heading {
  gap: 12px;
}

.account-profile-dialog .profile-security-heading small {
  font-weight: 400;
}

.account-profile-dialog .profile-two-factor-card .profile-account-grid > .field > span {
  min-height: 2.5em;
}

.account-profile-dialog .profile-settings-message:empty {
  display: none;
}

.account-profile-dialog .profile-settings-actions {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  .profile-settings-backdrop:has(.account-profile-dialog) { padding: 12px; }
  .profile-settings-dialog.account-profile-dialog { max-height: calc(100dvh - 24px); }
  .account-profile-dialog:not(.customer-profile-dialog) { padding: 16px; border-radius: 22px; }
  .account-profile-dialog .profile-account-grid,
  .account-profile-dialog .profile-password-card:not(.profile-two-factor-card):has(#profileCurrentPassword) .profile-account-grid { grid-template-columns: minmax(0, 1fr); }
  .account-profile-dialog .profile-two-factor-card .profile-account-grid > .field > span { min-height: 0; }
  .account-profile-dialog .profile-security-heading { flex-direction: row; align-items: flex-start; }
  .account-profile-dialog .profile-security-actions { align-items: stretch; }
  .account-profile-dialog .profile-security-actions > button { flex: 1 1 100%; white-space: normal; }
  .account-profile-dialog .two-factor-qr-wrap { min-width: 0; }
}

.profile-security-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-security-heading,
.two-factor-qr-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.profile-security-heading > div,
.two-factor-qr-wrap > div {
  display: grid;
  gap: 6px;
}

.profile-security-heading small,
.two-factor-qr-wrap small,
.two-factor-recovery-panel small {
  color: var(--muted);
  font-weight: 700;
}

.status-pill {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  font-size: 0.78rem;
  font-weight: 900;
}

.status-pill.is-ready {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 15%, var(--surface));
}

.two-factor-setup-panel,
.two-factor-recovery-panel {
  display: grid;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 13%, var(--line));
}

.two-factor-setup-panel[hidden] {
  display: none;
}

.two-factor-qr-wrap {
  justify-content: flex-start;
}

.two-factor-qr-wrap img {
  width: 190px;
  height: 190px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  background: #ffffff;
}

.two-factor-qr-wrap code,
.two-factor-recovery-codes code {
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  font-weight: 900;
  overflow-wrap: anywhere;
}

.two-factor-recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 640px) {
  .profile-security-heading,
  .two-factor-qr-wrap {
    align-items: stretch;
    flex-direction: column;
  }

  .two-factor-qr-wrap img {
    align-self: center;
  }

  .two-factor-recovery-codes {
    grid-template-columns: 1fr;
  }
}

.user-manual-dialog {
  width: min(1080px, 100%);
}

.user-manual-head small {
  color: var(--muted);
  font-weight: 800;
}

.user-manual-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.user-manual-toc {
  position: sticky;
  top: 0;
  display: grid;
  gap: 6px;
  max-height: calc(86vh - 150px);
  overflow: auto;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--layout-card-radius);
  background: color-mix(in srgb, var(--surface-strong) 48%, transparent);
}

.user-manual-toc a {
  border-radius: var(--layout-button-radius);
  padding: 9px 10px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
}

.user-manual-toc a:hover,
.user-manual-toc a:focus-visible {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  outline: 0;
}

.user-manual-content {
  display: grid;
  gap: 18px;
  min-width: 0;
  outline: 0;
}

.user-manual-note {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--line));
  border-radius: var(--layout-card-radius);
  padding: 14px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.user-manual-note strong,
.user-manual-section h4 {
  color: var(--ink);
}

.user-manual-note span,
.user-manual-section p,
.user-manual-section li {
  color: var(--muted);
  line-height: 1.55;
}

.user-manual-section {
  scroll-margin-top: 18px;
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
}

.user-manual-section h4,
.user-manual-section p,
.user-manual-section ol,
.user-manual-section ul {
  margin: 0;
}

.user-manual-section h4 {
  font-size: 1.05rem;
}

.user-manual-section ol,
.user-manual-section ul {
  display: grid;
  gap: 7px;
  padding-left: 1.15rem;
}

.user-manual-section ol li::marker {
  color: var(--primary-strong);
  font-weight: 900;
}

.profile-chip > strong {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--color-button-text);
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
}

.profile-chip span {
  color: var(--ink);
  line-height: 1.1;
  font-weight: 800;
}

.profile-chip small {
  color: var(--muted);
  font-weight: 600;
}

.hero-card,
.panel,
.stat-card,
.subnav-card,
.action-card {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.hero-card {
  border-radius: 18px;
  background:
    radial-gradient(circle at 2% 0%, color-mix(in srgb, var(--leaf) 14%, transparent), transparent 18rem),
    var(--surface);
}

.stat-grid {
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 10px;
}

.stat-card {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  min-height: 138px;
  padding: 22px 20px;
  overflow: hidden;
}

.stat-card::before {
  content: "◇";
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--selection-bg) 64%, var(--surface));
  font-size: 1.45rem;
  font-weight: 900;
}

.stat-card:nth-child(2)::before { content: "♧"; }
.stat-card:nth-child(3)::before { content: "▤"; }
.stat-card:nth-child(4)::before { content: "▣"; }
.stat-card:nth-child(5)::before { content: "◌"; }
.stat-card:nth-child(6)::before { content: "↗"; }

.stat-card span {
  color: var(--muted);
  font-weight: 700;
}

.stat-card strong {
  margin-top: 4px;
  font-size: clamp(1.8rem, 2.6vw, 2.35rem);
  color: var(--ink);
}

.panel-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
}

.panel {
  border-radius: 16px;
}

.panel h3 {
  color: var(--ink);
}

.pill {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--selection-bg) 64%, var(--surface));
}

.bar-track {
  background: color-mix(in srgb, var(--line) 70%, var(--surface-strong));
}

.bar-fill {
  background: linear-gradient(90deg, var(--primary-strong), var(--leaf));
}

.status-row {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}

.table-wrap {
  border-color: var(--line);
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

.table-scroll table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th {
  background: #f4f6f1;
}

td {
  background: rgba(255, 255, 255, 0.9);
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.app-shell.sidebar-collapsed .sidebar::before {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-collapse-button {
  left: 10px;
  right: auto;
  pointer-events: auto;
}

@media (max-width: 1200px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }

  .panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: minmax(74px, var(--layout-sidebar-width)) minmax(0, 1fr);
  }

  .content {
    padding: 14px;
  }

  .topbar {
    margin: -14px -14px 16px;
    padding: 14px;
  }

  .global-search {
    width: min(420px, 100%);
  }
}

@media (max-width: 720px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .profile-chip {
    display: none;
  }
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.content {
  max-width: 100vw;
}

.content {
  overflow-x: hidden;
}

.sidebar .nav-item {
  color: color-mix(in srgb, var(--color-sidebar-text) 88%, transparent) !important;
}

.sidebar .nav-item:hover,
.sidebar .nav-item.is-active {
  border-color: color-mix(in srgb, var(--selection-border) 38%, transparent) !important;
  color: var(--color-sidebar-text) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--selection-border) 26%, transparent), color-mix(in srgb, var(--color-sidebar-text) 8%, transparent)) !important;
  box-shadow: inset 3px 0 0 var(--selection-border);
}

.sidebar .nav-group-toggle,
.sidebar .nav-group-label {
  color: color-mix(in srgb, var(--color-sidebar-text) 58%, transparent) !important;
}

.occupancy-workspace {
  display: grid;
  grid-template-columns: minmax(620px, 1.35fr) minmax(360px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.occupancy-page {
  display: grid;
  gap: 14px;
}

.occupancy-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 0 4px;
}

.occupancy-tabs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #dce8d7;
  border-radius: 999px;
  padding: 4px;
  background:
    linear-gradient(135deg, rgba(232, 245, 225, 0.96), rgba(255, 253, 247, 0.96));
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.occupancy-tabs button {
  border: 0;
  border-radius: 999px;
  padding: 9px 17px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.occupancy-tabs button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: var(--active-shadow);
}

.occupancy-list-panel,
.occupancy-detail-card,
.occupancy-map-panel,
.occupancy-map-board {
  border: 1px solid #e6e9e2;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.occupancy-list-panel {
  overflow: hidden;
}

.occupancy-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #edf0eb;
}

.occupancy-toolbar h3,
.occupancy-detail-head h3 {
  margin: 0;
}

.occupancy-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  border: 1px solid #e1e5dd;
  border-radius: 12px;
  padding: 8px 10px;
  background: #fbfcfa;
}

.occupancy-list-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.occupancy-filter span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.occupancy-filter select {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.occupancy-filter .select-combo {
  flex: 1 1 auto;
  min-width: 0;
  width: 170px;
}

.occupancy-filter .select-combo input {
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  padding: 4px 32px 4px 6px;
  background: transparent;
  box-shadow: none;
}

.occupancy-filter .select-combo input:focus {
  box-shadow: none;
}

.occupancy-filter .combo-toggle {
  right: 1px;
  width: 24px;
  height: 24px;
  border-color: color-mix(in srgb, var(--selection-border) 12%, var(--line));
  background: color-mix(in srgb, var(--selection-border) 6%, var(--surface));
}

.occupancy-map-workspace {
  display: grid;
  grid-template-columns: minmax(760px, 1.75fr) minmax(300px, 0.5fr);
  gap: 18px;
  align-items: start;
}

.occupancy-map-panel {
  overflow: hidden;
}

body.occupancy-map-fullscreen-active {
  overflow: hidden;
}

body.occupancy-map-fullscreen-active .occupancy-map-workspace,
.occupancy-map-workspace:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: stretch;
  gap: 12px;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  padding: 12px;
  background: #fbfcfa;
}

body.occupancy-map-fullscreen-active .occupancy-map-panel,
.occupancy-map-workspace:fullscreen .occupancy-map-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

body.occupancy-map-fullscreen-active .occupancy-detail-card,
.occupancy-map-workspace:fullscreen .occupancy-detail-card {
  position: static;
  min-height: 0;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

body.occupancy-map-fullscreen-active .occupancy-map-actions,
body.occupancy-map-fullscreen-active .occupancy-legend,
.occupancy-map-workspace:fullscreen .occupancy-map-actions,
.occupancy-map-workspace:fullscreen .occupancy-legend {
  flex: 0 0 auto;
}

body.occupancy-map-fullscreen-active .occupancy-map-world-shell,
.occupancy-map-workspace:fullscreen .occupancy-map-world-shell {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: auto;
  border-top: 1px solid #edf0eb;
}

.occupancy-map-world-shell {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.occupancy-map-world-shell.is-panning {
  cursor: grabbing;
}

.occupancy-map-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #edf0eb;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--leaf) 14%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 253, 247, 0.98), rgba(244, 249, 240, 0.98));
}

.occupancy-map-actions h3 {
  margin: 0 0 4px;
}

.occupancy-map-actions small {
  color: var(--muted);
  font-weight: 700;
}

.occupancy-map-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.occupancy-map-action-buttons button:disabled {
  opacity: 0.48;
  cursor: default;
}

.occupancy-map-icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1;
}

.occupancy-site-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 999px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.82);
}

.occupancy-site-switch button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: #1f5f33;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.occupancy-site-switch button.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: var(--active-shadow);
}

.occupancy-zoom-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 999px;
  padding: 8px 10px;
  color: #1f5f33;
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 900;
}

.occupancy-map-world-shell {
  position: relative;
  min-height: 760px;
  max-height: 84vh;
  overflow: auto;
  padding: 22px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--primary) 4.5%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--leaf) 15%, transparent), transparent 30%),
    #fbfcfa;
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.occupancy-map-viewport {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.occupancy-map-world {
  position: absolute;
  inset: 0 auto auto 0;
  min-width: 520px;
  min-height: 340px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 18%, rgba(188, 223, 154, 0.24), transparent 30%),
    linear-gradient(135deg, rgba(250, 253, 247, 0.98), rgba(240, 247, 235, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76), 0 20px 54px rgba(15, 23, 42, 0.12);
  transform: scale(var(--occupancy-map-zoom, 1));
  transform-origin: top left;
}

.occupancy-site-blueprint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.occupancy-site-blueprint-block {
  position: absolute;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 8px;
  border: 2px solid rgba(0, 0, 0, 0.78);
  padding: 18px 22px;
  color: rgba(0, 0, 0, 0.82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 1.35vw, 54px);
  line-height: 1.08;
  text-align: right;
  opacity: 0.72;
}

.occupancy-site-blueprint-block span,
.occupancy-site-blueprint-block em {
  font-style: normal;
  font-size: 0.82em;
}

.occupancy-site-blueprint-block strong {
  font-size: 1.08em;
  font-weight: 500;
}

.occupancy-site-blueprint-block.tone-green {
  background: rgba(116, 255, 127, 0.46);
}

.occupancy-site-blueprint-block.tone-cyan {
  background: rgba(153, 245, 239, 0.52);
}

.occupancy-site-blueprint-block.tone-yellow {
  background: rgba(248, 250, 113, 0.58);
}

.occupancy-site-blueprint-block.tone-orange {
  background: rgba(246, 183, 96, 0.58);
}

.occupancy-site-blueprint-block.tone-blue {
  background: rgba(102, 148, 230, 0.58);
}

.occupancy-site-blueprint-block.tone-gray {
  background: rgba(150, 150, 150, 0.56);
}

.occupancy-site-blueprint-block.tone-dark-gray {
  background: rgba(85, 85, 85, 0.66);
}

.occupancy-site-blueprint-block.tone-note {
  justify-items: start;
  border-color: transparent;
  background: transparent;
  font-size: clamp(28px, 1.15vw, 46px);
  text-align: left;
  opacity: 0.88;
}

.occupancy-map-world-shell.is-editing .occupancy-map-world {
  outline: 2px dashed color-mix(in srgb, var(--primary) 24%, transparent);
  outline-offset: -12px;
}

.occupancy-greenhouse-zone {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(15, 74, 43, 0.2);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(15, 74, 43, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(15, 74, 43, 0.055) 1px, transparent 1px),
    rgba(255, 255, 255, 0.7);
  background-size: 28px 28px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14);
  touch-action: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.occupancy-greenhouse-zone:hover,
.occupancy-greenhouse-zone.is-dragging {
  z-index: 8;
  border-color: color-mix(in srgb, var(--selection-border) 58%, var(--line));
  box-shadow: 0 0 0 2px var(--selection-ring), 0 22px 48px rgba(15, 23, 42, 0.18);
}

.occupancy-greenhouse-zone.is-editable {
  cursor: move;
}

.occupancy-greenhouse-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 13px;
  border-bottom: 1px solid rgba(15, 74, 43, 0.12);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
}

.occupancy-greenhouse-head h4 {
  margin: 0;
  font-size: 1rem;
}

.occupancy-greenhouse-head span {
  color: rgba(17, 24, 39, 0.68);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.occupancy-greenhouse-site {
  display: inline-grid;
  gap: 2px;
  min-width: 116px;
  color: rgba(17, 24, 39, 0.68);
  font-size: 0.68rem;
  font-weight: 900;
}

.occupancy-greenhouse-site select {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 999px;
  padding: 5px 24px 5px 9px;
  color: #1f5f33;
  background: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
  font-weight: 900;
}

.occupancy-greenhouse-stage {
  position: absolute;
  inset: 60px 10px 10px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--leaf) 12%, transparent), transparent 28%),
    rgba(247, 250, 244, 0.72);
  overscroll-behavior: contain;
}

.occupancy-greenhouse-resize {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: none;
  width: 20px;
  height: 20px;
  border-right: 3px solid rgba(15, 74, 43, 0.45);
  border-bottom: 3px solid rgba(15, 74, 43, 0.45);
  border-radius: 3px;
  cursor: nwse-resize;
}

.occupancy-greenhouse-zone.is-editable .occupancy-greenhouse-resize {
  display: block;
}

.occupancy-map-boards {
  display: grid;
  gap: 16px;
  padding: 16px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 3.5%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--primary) 3.5%, transparent) 1px, transparent 1px),
    #fbfcfa;
  background-size: 34px 34px;
}

.occupancy-map-board {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(246, 250, 242, 0.96));
}

.occupancy-map-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid #edf0eb;
}

.occupancy-map-board-head h4 {
  margin: 0;
  font-size: 1.08rem;
}

.occupancy-map-board-head span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
}

.occupancy-map-canvas {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(90deg, rgba(15, 74, 43, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(15, 74, 43, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--leaf) 14%, transparent), transparent 28%),
    #f7faf4;
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.occupancy-map-boards.is-editing .occupancy-map-canvas {
  outline: 2px dashed color-mix(in srgb, var(--primary) 28%, transparent);
  outline-offset: -10px;
}

.occupancy-map-table {
  position: absolute;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 6px;
  min-width: 118px;
  min-height: 86px;
  overflow: hidden;
  border: 1px solid rgba(15, 74, 43, 0.2);
  border-radius: 14px;
  padding: 9px;
  color: #12311f;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  touch-action: none;
}

.occupancy-map-table:hover,
.occupancy-map-table.is-selected {
  z-index: 4;
  border-color: var(--selection-border);
  box-shadow: 0 0 0 2px var(--selection-ring), 0 18px 34px rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

.occupancy-map-table.is-editable {
  cursor: move;
}

.occupancy-map-table.is-compact {
  gap: 3px;
  min-width: 0;
  min-height: 0;
  border-radius: 9px;
  padding: 5px;
}

.occupancy-map-table.is-compact strong {
  font-size: clamp(0.68rem, 0.74vw, 0.9rem);
}

.occupancy-map-table.is-compact span,
.occupancy-map-table.is-compact em {
  font-size: clamp(0.54rem, 0.58vw, 0.72rem);
}

.occupancy-map-table.is-compact .occupancy-map-mini-tables {
  gap: 2px;
  min-height: 22px;
}

.occupancy-map-table.is-compact .occupancy-map-mini-tables i {
  min-height: 18px;
  border-radius: 5px;
}

.occupancy-map-table.is-compact .occupancy-map-mini-tables b {
  font-size: 0.58rem;
}

.occupancy-map-table.is-dragging {
  z-index: 9;
  opacity: 0.92;
  transform: scale(1.015);
}

.occupancy-snap-guide {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  background: color-mix(in srgb, var(--selection-border) 78%, transparent);
  box-shadow: 0 0 0 3px var(--focus-ring), 0 0 18px var(--selection-ring);
}

.occupancy-snap-guide.is-x {
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
}

.occupancy-snap-guide.is-y {
  right: 0;
  left: 0;
  height: 2px;
  transform: translateY(-1px);
}

.occupancy-map-table strong {
  font-size: clamp(0.82rem, 0.95vw, 1.08rem);
  line-height: 1.05;
}

.occupancy-map-table span,
.occupancy-map-table em {
  color: rgba(17, 24, 39, 0.72);
  font-size: clamp(0.66rem, 0.72vw, 0.84rem);
  font-style: normal;
  font-weight: 900;
}

.occupancy-map-mini-tables {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-self: stretch;
  min-height: 34px;
  margin-top: 2px;
  overflow: hidden;
}

.occupancy-map-mini-tables i {
  display: grid;
  flex: 0 0 var(--layout-occupancy-table-min-width, 18px);
  width: var(--layout-occupancy-table-min-width, 18px);
  place-items: center;
  min-height: 30px;
  border: 1px solid rgba(15, 74, 43, 0.18);
  border-radius: 7px;
  color: rgba(15, 74, 43, 0.58);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.occupancy-map-mini-tables b {
  font-size: 0.72rem;
  font-weight: 900;
}

.occupancy-map-mini-tables i.is-used {
  color: #fff;
  background: rgba(15, 74, 43, 0.72);
}

.occupancy-map-table.occupancy-row-ok {
  background: linear-gradient(135deg, rgba(217, 239, 255, 0.9), rgba(255, 255, 255, 0.86));
}

.occupancy-map-table.occupancy-row-partial {
  background: linear-gradient(135deg, rgba(185, 246, 202, 0.88), rgba(255, 255, 255, 0.86));
}

.occupancy-map-table.occupancy-row-warning {
  background: linear-gradient(135deg, rgba(255, 230, 166, 0.9), rgba(255, 255, 255, 0.88));
}

.occupancy-map-table.occupancy-row-full {
  background: linear-gradient(135deg, rgba(255, 210, 210, 0.92), rgba(255, 255, 255, 0.88));
}

.occupancy-map-resize {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: none;
  width: 17px;
  height: 17px;
  border-right: 3px solid rgba(15, 74, 43, 0.42);
  border-bottom: 3px solid rgba(15, 74, 43, 0.42);
  border-radius: 2px;
  cursor: nwse-resize;
}

.occupancy-map-table.is-editable .occupancy-map-resize {
  display: block;
}

.occupancy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid #edf0eb;
}

.occupancy-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #edf0eb;
  border-radius: 999px;
  padding: 5px 9px;
  color: #4b5563;
  background: #fbfcfa;
  font-size: 0.78rem;
  font-weight: 800;
}

.occupancy-legend i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.legend-empty { background: #d9efff; }
.legend-partial { background: #b9f6ca; }
.legend-warning { background: #ffe6a6; }
.legend-full { background: #ffd2d2; }

.occupancy-table-shell {
  max-height: 68vh;
  overflow: auto;
  overflow-anchor: none;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.occupancy-table {
  width: 100%;
  min-width: 660px;
}

.occupancy-table th,
.occupancy-table td {
  padding-inline: 9px;
  padding-block: 8px;
}

.occupancy-table th:first-child,
.occupancy-table td:first-child {
  width: 138px;
  min-width: 125px;
}

.occupancy-table th:nth-child(3),
.occupancy-table td:nth-child(3) {
  width: 62px;
  min-width: 56px;
  white-space: nowrap;
}

.occupancy-table th.occupancy-list-number-column,
.occupancy-table td.occupancy-list-number-column {
  width: 64px;
  min-width: 54px;
  max-width: 70px;
  padding-inline: 6px;
  text-align: right;
  white-space: nowrap;
}

.occupancy-table th.occupancy-list-percent-column,
.occupancy-table td.occupancy-list-percent-column {
  width: 156px;
  min-width: 136px;
}

.occupancy-table th.occupancy-list-status-column,
.occupancy-table td.occupancy-list-status-column {
  width: 98px;
  min-width: 92px;
  white-space: nowrap;
}

.occupancy-percent-cell {
  display: grid;
  grid-template-columns: 44px minmax(68px, 1fr);
  align-items: center;
  gap: 8px;
}

.occupancy-percent-cell strong {
  text-align: right;
}

.occupancy-row {
  cursor: pointer;
}

.occupancy-row:hover td {
  filter: brightness(0.985);
}

.occupancy-row.is-selected td {
  background: var(--selection-soft);
  box-shadow: inset 0 2px 0 var(--selection-border), inset 0 -2px 0 var(--selection-border);
}

.occupancy-row.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--selection-border), inset 0 2px 0 var(--selection-border), inset 0 -2px 0 var(--selection-border);
}

.occupancy-row.is-selected td:last-child {
  box-shadow: inset -2px 0 0 var(--selection-border), inset 0 2px 0 var(--selection-border), inset 0 -2px 0 var(--selection-border);
}

.occupancy-detail-card {
  position: sticky;
  top: 92px;
  overflow: hidden;
  overflow-anchor: none;
}

.occupancy-detail-card::before {
  content: "";
  display: block;
  height: 8px;
  background: #27b5e7;
}

.occupancy-detail-card.occupancy-row-partial::before {
  background: #19a974;
}

.occupancy-detail-card.occupancy-row-warning::before {
  background: #f4b740;
}

.occupancy-detail-card.occupancy-row-full::before {
  background: #ef5a5a;
}

.occupancy-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
}

.occupancy-detail-meter {
  height: 18px;
  margin: 0 18px 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0eb;
}

.occupancy-detail-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #27b5e7, #19a974 45%, #f4b740 80%, #ef5a5a);
}

.occupancy-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
}

.occupancy-detail-stats div,
.occupancy-fit-list div {
  border: 1px solid #edf0eb;
  border-radius: 13px;
  padding: 10px 12px;
  background: #fbfcfa;
}

.occupancy-detail-stats span,
.occupancy-fit-list span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.occupancy-detail-stats strong,
.occupancy-fit-list strong {
  color: var(--ink);
}

.occupancy-detail-section {
  padding: 0 18px 18px;
}

.occupancy-detail-section h4 {
  margin: 0 0 10px;
}

.occupancy-fit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 230px;
  overflow: auto;
}

.occupancy-items-table {
  max-height: 360px;
  overflow: auto;
  border: 1px solid #edf0eb;
  border-radius: 13px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.occupancy-items-table table {
  min-width: 520px;
}

@media (max-width: 1180px) {
  .occupancy-workspace,
  .occupancy-map-workspace {
    grid-template-columns: 1fr;
  }

  .occupancy-detail-card {
    position: static;
  }
}

@media (max-width: 720px) {
  .occupancy-page-toolbar,
  .occupancy-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .occupancy-filter {
    width: 100%;
  }

  .occupancy-list-filters {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .occupancy-list-filters .occupancy-site-switch {
    width: 100%;
  }

  .occupancy-list-filters .occupancy-site-switch button {
    flex: 1 1 0;
  }

  .occupancy-tabs {
    width: 100%;
  }

  .occupancy-tabs button {
    flex: 1 1 0;
  }

  .occupancy-map-actions,
  .occupancy-map-action-buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .occupancy-detail-stats,
  .occupancy-fit-list {
    grid-template-columns: 1fr;
  }

  .occupancy-map-canvas {
    min-height: 560px;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34rem),
    linear-gradient(135deg, #f7f1df 0%, var(--bg) 48%, #dfead8 100%);
  font-family: var(--font-font-family);
  font-size: var(--font-base-size);
}

button,
select {
  font: inherit;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(246, 248, 244, 0.94), rgba(238, 244, 234, 0.96)),
    url("/static/plantaevo_wordmark.png?v=20260605-plantaevo-brand") center 12% / min(640px, 84vw) no-repeat;
}

.auth-panel {
  width: min(440px, 100%);
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.13);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-brand .brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 8px;
}

.auth-brand h1,
.auth-copy h2 {
  margin: 0;
  color: var(--ink);
}

.auth-copy {
  display: grid;
  gap: 6px;
}

.auth-copy p:last-child {
  margin: 0;
  color: var(--muted);
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.auth-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.auth-tabs button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
}

.auth-form {
  display: grid;
  gap: 13px;
}

.auth-billing-section {
  display: grid;
  gap: 12px;
  margin: 2px 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong) 62%, #ffffff);
}

.auth-billing-section legend {
  padding: 0 6px;
  color: var(--primary-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-prefill-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  font-size: 0.86rem;
  font-weight: 800;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.auth-form-grid .span-2 {
  grid-column: 1 / -1;
}

.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.auth-form label.required-field > span::after {
  content: " *";
  color: #dc2626;
}

.auth-password-help,
.field-help {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.auth-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--color-input-background);
  outline: 0;
  font: inherit;
}

.auth-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--color-input-background);
  outline: 0;
  font: inherit;
}

.auth-form input:focus {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.auth-form .auth-trusted-device {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  cursor: pointer;
}

.auth-form .auth-trusted-device input[type="checkbox"] {
  width: 21px;
  height: 21px;
  min-height: 21px;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}

.auth-trusted-device > span {
  display: grid;
  gap: 2px;
}

.auth-trusted-device small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .auth-form-grid {
    grid-template-columns: 1fr;
  }
}

.password-field {
  position: relative;
}

.integration-secret-field {
  display: block;
  width: 100%;
  min-width: 0;
}

.integration-secret-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.integration-secret-field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.integration-secret-status {
  overflow-wrap: anywhere;
}

.password-field input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--primary);
  background: var(--surface-strong);
}

.password-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-toggle.is-visible::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-42deg);
}

.auth-submit {
  min-height: 44px;
}

.auth-link-button {
  justify-self: center;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--primary-strong);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
}

.auth-link-button:hover,
.auth-link-button:focus-visible {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  outline: 0;
}

.auth-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.auth-message,
.auth-dev-code {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
}

.auth-message.is-error {
  color: var(--danger);
}

.auth-dev-code {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 8px;
  color: var(--ink);
  background: #f2f7ef;
  font-weight: 800;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  min-width: 0;
  gap: calc(var(--layout-spacing) + 10px);
  padding: var(--layout-page-padding);
}

.content,
#tableView,
#actionPanel,
.mail-admin-mount,
.panel,
.table-panel,
.table-wrap,
.full-panel-cell {
  min-width: 0;
  max-width: 100%;
}

.sidebar,
.content,
.panel,
.hero-card {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.sidebar {
  position: sticky;
  top: 22px;
  height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 247, 0.78);
  background: color-mix(in srgb, var(--color-sidebar) 82%, transparent);
  backdrop-filter: blur(18px);
  overflow: visible;
}

.sidebar-collapse-button {
  position: absolute;
  top: 24px;
  right: -15px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 30px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 999px;
  color: var(--color-button-text);
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, var(--primary), var(--leaf));
  font-size: 1.45rem;
  font-weight: 800;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand .brand-mark,
.auth-brand .brand-mark,
.shop-public-brand .brand-mark {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  overflow: visible;
}

.brand .brand-mark {
  width: 72px;
  height: 72px;
  border-radius: 14px;
}

.auth-brand .brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

.shop-public-brand .brand-mark {
  width: 68px;
  height: 68px;
  border-radius: 14px;
}

.brand .brand-mark img,
.auth-brand .brand-mark img,
.shop-public-brand .brand-mark img {
  display: block;
  object-fit: contain;
}

.brand .brand-mark img,
.auth-brand .brand-mark img,
.market-branding-logo:not(.is-custom-logo) img,
.shop-public-brand .shop-public-brand-logo:not(.is-custom-logo) img {
  filter: var(--plantaevo-logo-filter);
  transition: filter 160ms ease;
}

.brand h1,
.panel h3,
.hero-card h3 {
  margin: 0;
}

.panel h3,
.hero-card h3 {
  font-size: var(--font-section-title-size);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nav {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 7px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.sidebar,
.sidebar .nav {
  scrollbar-color:
    color-mix(in srgb, var(--color-sidebar-text) 54%, var(--primary) 46%)
    color-mix(in srgb, var(--color-sidebar-text) 10%, transparent);
  scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar,
.sidebar .nav::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.sidebar::-webkit-scrollbar-track,
.sidebar .nav::-webkit-scrollbar-track {
  margin: 12px 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-sidebar-text) 8%, transparent);
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar .nav::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-sidebar-text) 62%, var(--primary) 38%),
      color-mix(in srgb, var(--color-sidebar-text) 34%, var(--primary) 66%)
    )
    padding-box;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar .nav::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-sidebar-text) 72%, var(--primary) 28%),
      color-mix(in srgb, var(--color-sidebar-text) 44%, var(--primary) 56%)
    )
    padding-box;
}

.nav-group {
  display: grid;
  align-self: start;
  gap: 6px;
}

.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 8px 0 1px;
  border: 0;
  padding: 7px 4px;
  color: var(--muted);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  font-size: calc(var(--sidebar-font-size) - 2px);
}

.nav-group-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.nav-group.is-collapsed .nav-group-toggle::after {
  transform: rotate(-45deg);
}

.nav-group-items {
  display: grid;
  gap: 7px;
}

.nav-group.is-collapsed .nav-group-items {
  display: none !important;
}

.nav-group-label {
  grid-column: 1 / -1;
  margin: 8px 0 1px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-item {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: var(--sidebar-font-size);
}

.nav-item:hover,
.nav-item.is-active {
  border-color: color-mix(in srgb, var(--selection-border) 22%, var(--line));
  background: var(--selection-soft);
}

.content {
  min-width: 0;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: rgba(255, 253, 247, 0.66);
  backdrop-filter: blur(20px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: var(--layout-header-height);
  margin-bottom: 18px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.year-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}

.year-picker select {
  width: 5.5ch;
  min-width: 5.5ch;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.year-picker .select-combo {
  width: 7ch;
  min-width: 7ch;
}

.year-picker .select-combo input {
  min-width: 0;
  padding-left: 5px;
}

.market-phone-order-form {
  margin-bottom: 18px;
}

.market-phone-customer-field,
.market-phone-order-form .form-grid > .market-phone-day-choices {
  grid-column: 1 / -1;
}

.market-phone-day-choices {
  display: grid;
  gap: 8px;
  margin: -2px 0 2px;
}

.market-phone-day-choices[hidden] {
  display: none;
}

.market-phone-day-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.market-phone-day-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.market-phone-day-button {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 82px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 12px;
  padding: 9px 8px;
  color: var(--ink);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 58%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  cursor: pointer;
  text-align: center;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.market-phone-day-button:hover,
.market-phone-day-button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  box-shadow: 0 10px 20px rgba(15, 47, 35, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.market-phone-day-button strong {
  color: inherit;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1;
}

.market-phone-day-button span {
  margin-top: 3px;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: capitalize;
}

.market-phone-day-button small {
  margin-top: 6px;
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  font-size: 0.68rem;
  font-weight: 900;
}

.market-phone-day-button.is-special-day:not(.is-selected) {
  border-color: color-mix(in srgb, var(--color-warning) 42%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-warning) 13%, transparent), transparent 62%),
    var(--surface);
}

.market-phone-day-button.is-selected {
  border-color: var(--primary);
  color: #ffffff;
  background: linear-gradient(160deg, var(--primary), var(--primary-strong));
  box-shadow: 0 12px 24px var(--selection-ring);
}

.market-phone-day-button.is-selected small {
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.16);
}

.market-phone-product-list {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
}

.market-phone-product-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.82fr) 96px;
  grid-template-areas: "info note qty";
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface);
}

.market-phone-product-row > span {
  grid-area: info;
  min-width: 0;
}

.market-phone-product-row small {
  display: block;
  color: var(--muted);
}

.market-phone-product-note-input {
  grid-area: note;
  width: 100%;
  min-width: 0;
  min-height: 38px;
}

.market-phone-product-row > input[type="number"] {
  grid-area: qty;
  width: 100%;
}

.billing-catalog-product-list {
  max-height: 520px;
  margin-top: 14px;
}

.billing-delivery-choice-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.billing-catalog-product-row {
  grid-template-columns: minmax(210px, 1fr) minmax(122px, 0.48fr) minmax(122px, 0.48fr) minmax(160px, 0.72fr) 96px;
  grid-template-areas: "info net gross note qty";
}

.billing-catalog-product-info {
  grid-area: info;
}

.billing-catalog-product-row .billing-catalog-price-field,
.billing-catalog-product-row .billing-catalog-quantity-field {
  margin: 0;
}

.billing-catalog-product-row .billing-catalog-price-field:nth-of-type(1) {
  grid-area: net;
}

.billing-catalog-product-row .billing-catalog-price-field:nth-of-type(2) {
  grid-area: gross;
}

.billing-catalog-product-row .billing-catalog-quantity-field {
  grid-area: qty;
}

.billing-catalog-product-row .field > span {
  font-size: 0.72rem;
}

.billing-catalog-product-row input {
  width: 100%;
  min-width: 0;
}

.billing-catalog-summary {
  grid-template-columns: repeat(2, minmax(150px, 240px));
  margin-top: 14px;
}

.simple-delivery-order-form .market-phone-product-row {
  grid-template-columns: minmax(220px, 1fr) minmax(92px, auto) 96px minmax(180px, 0.82fr) 96px;
  grid-template-areas: "info price packing note qty";
}

.simple-delivery-net-price {
  grid-area: price;
  white-space: nowrap;
  color: var(--primary-strong);
  font-size: 0.82rem;
}

.simple-delivery-packing-input {
  grid-area: packing;
  width: 100%;
  min-width: 0;
  min-height: 38px;
}

@media (max-width: 640px) {
  .market-phone-day-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-phone-day-button {
    min-height: 76px;
  }

  .market-phone-product-row {
    grid-template-columns: minmax(0, 1fr) 86px;
    grid-template-areas:
      "info qty"
      "note note";
  }

  .billing-catalog-product-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "info info"
      "net gross"
      "note note"
      "qty qty";
  }

  .billing-catalog-summary {
    grid-template-columns: 1fr;
  }

  .simple-delivery-order-form .market-phone-product-row {
    grid-template-columns: minmax(0, 1fr) 86px;
    grid-template-areas:
      "info qty"
      "price packing"
      "note note";
  }

  .market-phone-product-note-input {
    grid-column: auto;
  }
}

.primary-button,
.ghost-button,
.danger-button {
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  cursor: pointer;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
}

.billing-internal-delivery-button {
  color: #123d27;
  background: linear-gradient(135deg, #cdeed9, #9dd9b2);
  border: 1px solid #8bcba3;
}

.ghost-button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
}

.hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff8ea, #e6f3eb);
}

.hero-card h3 {
  max-width: 820px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.hero-card p:last-child {
  margin: 0;
  color: var(--muted);
}

.view {
  display: none;
}

.view.is-visible {
  display: block;
}

#tableView.is-items-view.is-visible {
  display: grid;
  grid-template-columns: minmax(380px, 470px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

#tableView.is-items-view #subNavPanel {
  grid-column: 1 / -1;
}

#tableView.is-items-view .action-panel {
  min-width: 0;
  margin-bottom: 0;
}

#tableView.is-items-view .table-panel {
  min-width: 0;
  min-height: 0;
}

#tableView.is-items-view .table-panel > .table-wrap > table {
  min-width: 960px;
}

#tableView.is-items-view .item-form .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#tableView.is-items-view .item-live-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#tableView.is-items-view .item-editor-card .form-actions {
  flex-wrap: wrap;
}

@media (max-width: 899px) {
  #tableView.is-items-view.is-visible {
    grid-template-columns: 1fr;
  }

  #tableView.is-items-view .action-panel {
    margin-bottom: 18px;
  }

  #tableView.is-items-view .item-form .form-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.stat-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.stat-card strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  letter-spacing: -0.04em;
}

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 18px;
}

.panel {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: 0.82rem;
  font-weight: 700;
}

.bar-list,
.status-list {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 80px;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4dfd2;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #f7f3e7;
}

.table-panel {
  min-height: 580px;
}

.app-status-sink {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 2px 0 12px;
}

.table-toolbar .settings-search-input {
  flex: 0 1 420px;
}

.table-toolbar .settings-filter-field {
  flex: 0 1 220px;
}

.potting-search-field {
  flex: 1 1 360px;
}

.table-search-field {
  display: grid;
  gap: 5px;
  width: min(420px, 100%);
}

.table-search-field span {
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.table-search-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 10px;
  padding: 8px 11px;
  color: var(--ink);
  background: var(--surface);
  outline: 0;
}

.table-search-field input:focus {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

#pottingPrintButton,
#activeOrderDeliverySheetPrintButton {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
  color: var(--color-button-text, #fff);
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  font-weight: 850;
}

#pottingFilterClearButton[hidden] {
  display: none !important;
}

.table-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: min(72vh, 760px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--layout-table-radius);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.table-panel > .table-wrap {
  max-height: max(340px, calc(100vh - 270px));
}

.table-panel > .table-wrap > table:has(> tbody > tr:only-child > .full-panel-cell:only-child),
.table-panel > .table-wrap > table:has(> tbody > tr:only-child > .full-panel-cell:only-child) > tbody,
.table-panel > .table-wrap > table:has(> tbody > tr:only-child > .full-panel-cell:only-child) > tbody > tr,
.table-panel > .table-wrap > table:has(> tbody > tr:only-child > .full-panel-cell:only-child) > tbody > tr > .full-panel-cell {
  display: block;
  width: 100%;
  min-width: 0;
}

#tableView.is-occupancy-view .table-panel {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#tableView.is-occupancy-view .table-panel > .panel-head {
  display: none;
}

#tableView.is-occupancy-view .table-panel > .table-wrap {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#tableView.is-occupancy-view .table-panel > .table-wrap > table {
  min-width: 0;
}

#tableView.is-employee-hours-view .table-panel {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#tableView.is-employee-hours-view .table-panel > .panel-head {
  display: none;
}

#tableView.is-employee-hours-view .table-panel > .table-wrap {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#tableView.is-employee-hours-view .table-panel > .table-wrap > table,
#tableView.is-employee-hours-view .table-panel > .table-wrap > table > tbody > tr > td {
  min-width: 0;
  background: transparent;
}

#tableView.is-design-view .table-panel > .table-wrap {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#tableView.is-design-view .table-panel {
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#tableView.is-design-view .table-panel > .panel-head {
  display: none;
}

#tableView.is-design-view .table-panel > .table-wrap > table {
  min-width: 0;
}

#tableView.is-design-view .design-editor-page,
#tableView.is-design-view .full-panel-cell {
  overflow: visible;
}

#tableView.is-design-view .design-theme-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

#tableView.is-input-view .table-panel,
#tableView.is-accounting-view .table-panel,
#tableView.is-email-view .table-panel,
#tableView.is-market-view .table-panel,
#tableView.is-orders-view .table-panel,
#tableView.is-inventory-moves-view .table-panel,
#tableView.is-billing-view .table-panel {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#tableView.is-input-view .table-panel > .table-wrap,
#tableView.is-accounting-view .table-panel > .table-wrap,
#tableView.is-email-view .table-panel > .table-wrap,
#tableView.is-mail-admin-view .table-panel > .table-wrap,
#tableView.is-market-view .table-panel > .table-wrap,
#tableView.is-orders-view .table-panel > .table-wrap,
#tableView.is-inventory-moves-view .table-panel > .table-wrap,
#tableView.is-billing-view .table-panel > .table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#tableView.is-input-view .table-panel > .table-wrap > table,
#tableView.is-accounting-view .table-panel > .table-wrap > table,
#tableView.is-email-view .table-panel > .table-wrap > table,
#tableView.is-mail-admin-view .table-panel > .table-wrap > table,
#tableView.is-market-view .table-panel > .table-wrap > table,
#tableView.is-inventory-moves-view .table-panel > .table-wrap > table,
#tableView.is-billing-view .table-panel > .table-wrap > table {
  min-width: 0;
}

#tableView.is-orders-view .table-panel > .table-wrap.delivery-orders-table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

#tableView.is-orders-view .table-panel > .table-wrap.delivery-order-cards-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: none;
  overflow: visible;
  scrollbar-gutter: auto;
}

#tableView.is-orders-view .table-panel > .table-wrap > table.delivery-order-cards-table {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  border-collapse: separate;
}

.delivery-order-cards-table > tbody,
.delivery-order-cards-table > tbody > tr,
.delivery-order-cards-table > tbody > tr > td {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
}

.delivery-order-cards-table > thead {
  display: none;
}

.delivery-order-cards-table > tbody > tr > td {
  padding: 0;
}

.delivery-order-cards-host {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.delivery-order-card-list {
  margin-top: 0;
}

.delivery-order-card-list,
.delivery-order-card-list .market-order-day-group,
.delivery-order-card-summary {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.delivery-order-card-list .market-order-day-group {
  grid-template-columns: minmax(0, 1fr);
}

.delivery-order-card-list .market-order-card-grid {
  align-items: start;
  min-width: 0;
}

.market-order-card.delivery-order-card {
  align-content: start;
}

.delivery-order-card .market-order-card-title {
  align-items: baseline;
}

.delivery-order-card .market-order-card-title > small {
  color: var(--muted);
  font-weight: 850;
}

.delivery-order-card.is-no-delivery-response {
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #ffe6a6 56%, var(--surface)), var(--surface));
}

.delivery-order-no-delivery-text {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
  font-size: 0.86rem;
  font-weight: 800;
}

.delivery-order-card-item-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.delivery-order-card-item-actions .mini-button {
  min-height: 30px;
  padding: 6px 10px;
}

.delivery-order-card:not(.is-admin-order-card) .market-order-item.delivery-order-card-item,
.delivery-order-card:not(.is-admin-order-card) .market-order-item.delivery-order-card-shipping {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main price" "note note" "actions actions";
  align-content: start;
}

.delivery-order-card.is-preparation-mode .market-order-item.delivery-order-card-item {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main" "note";
}

.delivery-order-card-item .market-order-item-note {
  grid-area: note;
}

.delivery-order-card .market-order-card-bottom.delivery-order-card-bottom {
  grid-template-areas: "payment payment" "ready delete";
  align-items: flex-end;
}

.delivery-order-card.is-admin-order-card .market-order-card-bottom.is-admin-flow {
  grid-template-areas: "payment payment" "ready ready";
}

.delivery-order-card.is-admin-order-card .delivery-order-card-totals strong {
  font-size: 1.15rem;
}

#tableView:has(.is-delivery-inbox-head) #tableToolbar {
  display: none !important;
}

.delivery-order-card-totals {
  grid-area: payment;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.delivery-order-card-totals span {
  display: grid;
  gap: 2px;
}

.delivery-order-card-totals small {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.delivery-order-card-totals strong {
  color: var(--primary-strong);
  font-size: 0.95rem;
  font-weight: 950;
  white-space: nowrap;
}

.delivery-order-card-summary {
  margin-top: 0;
}

@media (max-width: 680px) {
  .delivery-order-card-item-actions {
    justify-content: flex-start;
  }

  .delivery-order-card-bottom {
    align-items: stretch;
  }
}

@media (max-width: 720px), (max-width: 960px) and (any-pointer: coarse) {
  .delivery-order-card-list .market-order-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .delivery-order-card:not(.is-admin-order-card) .market-order-card-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .delivery-order-card .market-order-card-head > .pill {
    justify-self: start;
  }

  .delivery-order-card .market-order-card-items,
  .delivery-order-card .market-order-item {
    min-width: 0;
    max-width: 100%;
  }

  .delivery-order-card:not(.is-admin-order-card) .market-order-item.delivery-order-card-item,
  .delivery-order-card:not(.is-admin-order-card) .market-order-item.delivery-order-card-shipping {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "price" "note" "actions";
  }

  .delivery-order-card:not(.is-admin-order-card) .market-order-item-price {
    justify-self: end;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .delivery-order-card:not(.is-admin-order-card) .market-order-card-bottom.delivery-order-card-bottom {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "payment" "ready" "delete";
  }

  .delivery-order-card .market-order-card-delete-action {
    justify-self: start;
  }
}

#tableView.is-orders-view .table-panel > .table-wrap > table.delivery-orders-table {
  width: max-content;
  min-width: 0;
  table-layout: auto;
  border: 1px solid var(--line);
  border-radius: var(--layout-table-radius);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  overflow: hidden;
}

.delivery-orders-table > thead > tr > th,
.delivery-orders-table > tbody > tr > td,
.active-order-summary-table > thead > tr > th,
.active-order-summary-table > tbody > tr > td {
  padding: 8px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  white-space: nowrap;
}

.delivery-orders-table > thead > tr > th:last-child,
.delivery-orders-table > tbody > tr > td:last-child,
.active-order-summary-table > thead > tr > th:last-child,
.active-order-summary-table > tbody > tr > td:last-child {
  border-right: 0;
}

.delivery-orders-table > tbody > tr:last-child > td,
.active-order-summary-table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.delivery-orders-table .table-cell-destination_name,
.delivery-orders-table .table-cell-plant,
.delivery-orders-table .table-cell-notes {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.delivery-orders-table .table-cell-destination_name {
  min-width: 0;
}

.delivery-orders-table .order-partner-stack {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.delivery-orders-table .order-partner-stack strong,
.delivery-orders-table .order-partner-stack small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.delivery-orders-table .order-partner-stack small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.delivery-orders-table .table-cell-notes {
  min-width: 0;
}

.delivery-orders-table .action-cell {
  min-width: 0;
  white-space: normal;
}

.delivery-orders-table .action-cell .mini-button {
  margin: 2px 3px 2px 0;
}

@media (max-width: 680px) {
  #tableView.is-orders-view .table-panel > .table-wrap > table.delivery-orders-table {
    min-width: 900px;
  }
}

.settings-partner-sites {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.settings-partner-sites-head strong,
.settings-partner-sites-head small {
  display: block;
}

.settings-partner-sites-head small {
  margin-top: 3px;
  color: var(--muted);
}

.destination-sites-dialog {
  width: min(760px, 100%);
  gap: 18px;
}

.destination-sites-list {
  display: grid;
  gap: 12px;
}

.destination-site-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: var(--radius-card, 18px);
  background: color-mix(in srgb, var(--surface-strong) 70%, var(--surface));
}

.destination-site-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.destination-site-form-head strong {
  color: var(--primary-strong);
}

.destination-site-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .destination-sites-dialog {
    gap: 14px;
  }

  .destination-site-form {
    padding: 14px;
  }

  .destination-site-form-head,
  .destination-site-form-actions {
    align-items: stretch;
  }

  .destination-site-form-head {
    flex-direction: column;
  }

  .destination-site-form-actions > * {
    flex: 1 1 0;
  }
}

.settings-partner-sites-add {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

@media (max-width: 640px) {
  .settings-partner-sites-add {
    grid-template-columns: 1fr;
  }
}

#tableView.is-accounting-view .table-panel > .panel-head {
  display: none;
}

#tableView.is-mail-admin-view .table-panel > .table-wrap {
  max-height: none;
  overflow: visible;
}

#tableView.is-mail-admin-view .table-panel {
  display: none;
}

.mail-admin-page-panel {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.mail-admin-page-panel > .panel-head {
  margin-bottom: 0;
}

#tableView.is-inventory-summary-view .table-panel {
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--layout-card-radius);
  background:
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--leaf) 18%, transparent), transparent 22rem),
    radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 18rem),
    linear-gradient(145deg, rgba(255, 253, 247, 0.96), rgba(232, 243, 228, 0.78));
  box-shadow: var(--shadow);
}

#tableView.is-inventory-summary-view .table-panel > .table-wrap {
  overflow: auto;
  border: 0;
  border-radius: calc(var(--layout-table-radius) + 4px);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}

#tableView.is-inventory-summary-view .table-panel > .table-wrap > table {
  overflow: hidden;
  border-radius: inherit;
}

#tableView.is-inventory-summary-view th {
  background:
    linear-gradient(180deg, rgba(246, 250, 242, 0.98), rgba(231, 242, 225, 0.94));
}

#tableView.is-inventory-summary-view td {
  background: rgba(255, 255, 255, 0.58);
}

#tableView.is-inventory-summary-view tbody tr:hover td {
  background: color-mix(in srgb, var(--leaf) 12%, rgba(255, 255, 255, 0.72));
}

#tableView.is-page-scroll-view .table-panel {
  min-height: 0;
  overflow: visible;
}

#tableView.is-page-scroll-view .table-panel > .table-wrap {
  max-height: none;
  overflow: visible;
  scrollbar-gutter: auto;
  overscroll-behavior: auto;
}

#tableView.is-billing-view .billing-documents-panel .table-wrap,
#tableView.is-email-view .email-choice-list,
#tableView.is-email-view .email-rich-editor,
#tableView.is-email-view .email-html-preview,
#tableView.is-email-view .email-variable-row {
  max-height: none;
  overflow: visible;
  padding-right: 0;
  overscroll-behavior: auto;
}

#tableView.is-email-view .email-list-card,
#tableView.is-email-view .email-compose-card,
#tableView.is-email-view .email-template-editor-card,
#tableView.is-email-view .email-template-preview-card {
  min-height: 0;
}

table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: var(--font-table-size);
  overflow-wrap: anywhere;
}

.table-cell-number {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

th {
  position: sticky;
  top: 0;
  z-index: 12;
  color: var(--muted);
  background: var(--color-table-header);
  box-shadow: 0 1px 0 var(--line), 0 8px 16px rgba(15, 23, 42, 0.04);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

td {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.data-row.is-expanded td {
  border-top: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-bottom-color: color-mix(in srgb, var(--primary) 8%, transparent);
  background: color-mix(in srgb, var(--color-selected-row) 34%, transparent);
}

.table-wrap.plant-prices-table-wrap {
  max-width: none;
  max-height: max(360px, calc(100vh - 248px));
}

.plant-prices-table {
  width: 100%;
  min-width: 880px;
  table-layout: fixed;
}

.plant-prices-table th,
.plant-prices-table td {
  padding: 6px 8px;
  white-space: nowrap;
}

.table-sort-button {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.table-sort-button:hover,
.table-sort-button:focus-visible,
.table-sort-button.is-active {
  color: var(--primary);
}

.table-sort-indicator {
  min-width: 10px;
  font-size: 0.72rem;
  line-height: 1;
}

.plant-prices-table th:nth-child(1),
.plant-prices-table td:nth-child(1) {
  width: 64px;
  max-width: 64px;
}

.plant-prices-table th:nth-child(2),
.plant-prices-table td:nth-child(2) {
  width: 360px;
  max-width: 360px;
}

.plant-prices-table th:nth-child(3),
.plant-prices-table td:nth-child(3),
.plant-prices-table th:nth-child(4),
.plant-prices-table td:nth-child(4) {
  width: 118px;
  max-width: 118px;
}

.plant-prices-table th:nth-child(5),
.plant-prices-table td:nth-child(5) {
  width: 96px;
  max-width: 96px;
}

.plant-prices-table th:nth-child(6),
.plant-prices-table td:nth-child(6) {
  width: 160px;
  max-width: 160px;
}

.plant-prices-table td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-row.is-plant-prices-compact td {
  padding: 7px 10px;
  font-size: 0.82rem;
  line-height: 1.22;
  vertical-align: middle;
}

.data-row.is-missing-price-row td {
  color: #991b1b;
  background: color-mix(in srgb, #fee2e2 78%, var(--surface) 22%);
}

.data-row.is-missing-price-row td:nth-child(2) {
  font-weight: 800;
}

.data-row.is-plant-prices-compact .action-cell {
  min-width: 146px;
  padding-top: 5px;
  padding-bottom: 4px;
}

.data-row.is-plant-prices-compact .mini-button {
  min-height: 27px;
  margin: 0 3px 2px 0;
  padding: 5px 9px;
  border-radius: 10px;
  font-size: 0.76rem;
  line-height: 1;
}

.data-row.is-plant-prices-compact input,
.data-row.is-plant-prices-compact select,
.data-row.is-plant-prices-compact textarea,
.data-row.is-plant-prices-compact .select-combo input {
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 0.78rem;
}

.order-group-row td {
  font-weight: 800;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 96%, transparent);
}

.order-group-row.is-collapsed td {
  border-top: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-bottom-color: color-mix(in srgb, var(--primary) 8%, transparent);
  background: color-mix(in srgb, var(--color-selected-row) 34%, transparent);
}

.order-group-row.is-no-delivery-response td {
  background: color-mix(in srgb, #ffe6a6 48%, var(--surface));
}

.order-group-row td:first-child {
  white-space: nowrap;
}

.order-collapse-button {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin: -2px 8px -2px 0;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary-strong);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.order-collapse-button:hover {
  border-color: color-mix(in srgb, var(--primary) 44%, transparent);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: 0 8px 18px rgba(18, 55, 38, 0.12);
}

.order-child-row td {
  background: color-mix(in srgb, var(--color-table-row-alt) 82%, var(--surface));
}

.potting-color-row td {
  border-bottom-color: color-mix(in srgb, var(--potting-row-border, var(--line)) 42%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--potting-row-color, var(--surface)) 30%, transparent), transparent 76%),
    color-mix(in srgb, var(--potting-row-color, var(--surface)) 16%, var(--surface));
}

.potting-color-row:hover td {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--potting-row-color, var(--surface)) 42%, transparent), transparent 78%),
    color-mix(in srgb, var(--potting-row-color, var(--surface)) 23%, var(--surface));
}

.potting-color-purple { --potting-row-color: #d8c8ff; --potting-row-border: #8b5cf6; }
.potting-color-yellow { --potting-row-color: #fff0a8; --potting-row-border: #d99a00; }
.potting-color-white { --potting-row-color: #ffffff; --potting-row-border: #cfd7cf; }
.potting-color-pink { --potting-row-color: #ffd0df; --potting-row-border: #ec4899; }
.potting-color-red { --potting-row-color: #ffc4c4; --potting-row-border: #dc2626; }
.potting-color-gray { --potting-row-color: #dde3ea; --potting-row-border: #64748b; }
.potting-color-neutral { --potting-row-color: #e6f0df; --potting-row-border: var(--primary); }

.potting-color-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--potting-row-border, var(--line)) 54%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--ink);
  background: color-mix(in srgb, var(--potting-row-color, var(--surface)) 76%, var(--surface));
  font-weight: 800;
}

.potting-color-pill-purple { --potting-row-color: #d8c8ff; --potting-row-border: #8b5cf6; }
.potting-color-pill-yellow { --potting-row-color: #fff0a8; --potting-row-border: #d99a00; }
.potting-color-pill-white { --potting-row-color: #ffffff; --potting-row-border: #cfd7cf; }
.potting-color-pill-pink { --potting-row-color: #ffd0df; --potting-row-border: #ec4899; }
.potting-color-pill-red { --potting-row-color: #ffc4c4; --potting-row-border: #dc2626; }
.potting-color-pill-gray { --potting-row-color: #dde3ea; --potting-row-border: #64748b; }
.potting-color-pill-neutral { --potting-row-color: #e6f0df; --potting-row-border: var(--primary); }

.detail-row td {
  display: none;
}

.occupancy-row td {
  transition: background-color 120ms ease;
}

.occupancy-row-ok td {
  background: color-mix(in srgb, #d9efff 54%, var(--surface));
}

.occupancy-row-partial td {
  background: color-mix(in srgb, #b9f6ca 54%, var(--surface));
}

.occupancy-row-warning td {
  background: color-mix(in srgb, #ffe6a6 62%, var(--surface));
}

.occupancy-row-full td {
  background: color-mix(in srgb, #ffd2d2 66%, var(--surface));
}

.occupancy-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 33, 29, 0.12);
}

.occupancy-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #27b5e7, #19a974 45%, #f4b740 80%, #ef5a5a);
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  z-index: 10;
  pointer-events: none;
}

.app-shell.sidebar-collapsed .brand,
.app-shell.sidebar-collapsed .nav-group-toggle,
.app-shell.sidebar-collapsed .nav-group-items,
.app-shell.sidebar-collapsed .nav,
.app-shell.sidebar-collapsed .eyebrow {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-collapse-button {
  top: 24px;
  right: auto;
  left: 10px;
  z-index: 20;
  pointer-events: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item::before {
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  width: 22px;
}

.nav-group-toggle,
.nav-group-label {
  white-space: nowrap;
}

.nav-item[data-view="overview"]::before { content: "\2302"; }
.nav-item[data-view="todos"]::before { content: "\2713"; }
.nav-item[data-view="notes"]::before { content: "\270E"; }
.nav-item[data-view="orders"]::before { content: "\25A3"; }
.nav-item[data-view="items"]::before { content: "\2723"; }
.nav-item[data-view="occupancy"]::before { content: "\25EB"; }
.nav-item[data-view="plc"]::before { content: "\25A5"; }
.nav-item[data-view="weekly"]::before { content: "\25F7"; }
.nav-item[data-view="potting"]::before { content: "\2667"; }
.nav-item[data-view="input"]::before { content: "\25A4"; }
.nav-item[data-view="inventory"]::before { content: "\25A6"; }
.nav-item[data-view="billing"]::before { content: "\25A7"; }
.nav-item[data-view="accounting"]::before { content: "\25A8"; }
.nav-item[data-view="email"]::before { content: "\2709"; }
.nav-item[data-view="market"]::before { content: "\25CE"; }
.nav-item[data-view="export"]::before { content: "\2197"; }
.nav-item[data-view="design"]::before { content: "\25C9"; }
.nav-item[data-view="settings"]::before { content: "\2699"; }

.nav-item::before {
  content: none !important;
  display: none !important;
}

.nav-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--nav-icon-color, rgba(255, 255, 255, 0.86));
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: color 140ms ease, transform 140ms ease;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-order-badge {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: auto;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.nav-order-badge[hidden] {
  display: none;
}

.active-order-summary-row > .full-panel-cell {
  padding: 16px 0 0;
  background: transparent;
}

.active-order-summary-panel {
  margin-top: 8px;
}

.active-order-summary-panel .panel-head {
  padding: 0 2px 10px;
}

.active-order-summary-table-wrap {
  width: fit-content;
  max-width: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.active-order-summary-table {
  width: max-content;
  min-width: 0;
  table-layout: auto;
  border: 1px solid var(--line);
  border-radius: var(--layout-table-radius);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  overflow: hidden;
}

.active-order-summary-table th,
.active-order-summary-table td {
  white-space: nowrap;
}

.active-order-summary-table tbody td {
  background: color-mix(in srgb, var(--color-selected-row) 34%, transparent);
  font-weight: 800;
}

.nav-item[data-view="overview"] { --nav-icon-color: color-mix(in srgb, var(--leaf) 82%, #ffffff); }
.nav-item[data-view="todos"] { --nav-icon-color: color-mix(in srgb, var(--color-warning) 82%, #ffffff); }
.nav-item[data-view="notes"] { --nav-icon-color: color-mix(in srgb, var(--primary) 58%, #ffffff); }
.nav-item[data-view="items"] { --nav-icon-color: color-mix(in srgb, var(--primary) 74%, #ffffff); }
.nav-item[data-view="occupancy"] { --nav-icon-color: color-mix(in srgb, var(--color-info) 76%, #ffffff); }
.nav-item[data-view="foilControl"] { --nav-icon-color: color-mix(in srgb, var(--leaf) 82%, #ffffff); }
.nav-item[data-view="plc"] { --nav-icon-color: color-mix(in srgb, var(--color-info) 68%, #ffffff); }
.nav-item[data-view="weekly"] { --nav-icon-color: color-mix(in srgb, var(--color-warning) 68%, #ffffff); }
.nav-item[data-view="potting"] { --nav-icon-color: color-mix(in srgb, var(--leaf) 56%, var(--color-warning)); }
.nav-item[data-view="input"] { --nav-icon-color: color-mix(in srgb, var(--primary) 46%, #ffffff); }
.nav-item[data-view="inventory"] { --nav-icon-color: color-mix(in srgb, var(--primary) 62%, #ffffff); }
.nav-item[data-view="orders"] { --nav-icon-color: color-mix(in srgb, var(--color-warning) 74%, #ffffff); }
.nav-item[data-view="billing"] { --nav-icon-color: color-mix(in srgb, var(--color-warning) 58%, #ffffff); }
.nav-item[data-view="accounting"] { --nav-icon-color: color-mix(in srgb, var(--primary) 54%, #ffffff); }
.nav-item[data-view="email"] { --nav-icon-color: color-mix(in srgb, var(--color-info) 72%, #ffffff); }
.nav-item[data-view="market"] { --nav-icon-color: color-mix(in srgb, var(--leaf) 76%, #ffffff); }
.nav-item[data-view="webshop"] { --nav-icon-color: color-mix(in srgb, var(--primary) 64%, var(--leaf)); }
.nav-item[data-view="marketOrders"] { --nav-icon-color: color-mix(in srgb, var(--primary) 62%, #ffffff); }
.nav-item[data-view="shop"] { --nav-icon-color: color-mix(in srgb, var(--leaf) 86%, #ffffff); }
.nav-item[data-view="export"] { --nav-icon-color: color-mix(in srgb, var(--primary) 42%, #ffffff); }
.nav-item[data-view="design"] { --nav-icon-color: color-mix(in srgb, var(--primary) 34%, #ffffff); }
.nav-item[data-view="settings"] { --nav-icon-color: color-mix(in srgb, var(--color-info) 30%, #ffffff); }
.nav-item[data-view="management"] { --nav-icon-color: color-mix(in srgb, var(--color-warning) 58%, #ffffff); }

.nav-item:hover .nav-icon,
.nav-item.is-active .nav-icon {
  color: var(--color-sidebar-text);
  transform: translateX(1px);
}

.row-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.row-detail-item {
  min-width: 0;
  border: 1px solid rgba(23, 33, 29, 0.1);
  border-radius: 14px;
  padding: 9px 11px;
  background: rgba(255, 253, 247, 0.78);
}

.row-detail-item span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.row-detail-item strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.94rem;
}

.empty-state {
  padding: 24px;
  color: var(--muted);
}

.app-toast-host {
  position: fixed;
  top: 82px;
  right: 22px;
  z-index: 3200;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.app-toast-host.is-bottom {
  top: auto;
  bottom: 22px;
}

.app-toast {
  pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--surface) 88%, #e7f6df);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
  font-weight: 900;
  line-height: 1.35;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 180ms ease, transform 180ms ease;
}

.app-toast.is-warning {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: #8a4d0f;
  background: #fff8e8;
}

.app-toast.is-error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
  background: #fff1f0;
}

.app-toast.is-hiding {
  opacity: 0;
  transform: translateY(-6px);
}

@media (max-width: 680px) {
  .app-toast-host {
    top: 70px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .app-toast-host.is-bottom {
    top: auto;
    bottom: 18px;
  }
}

.subnav-panel {
  margin-bottom: 12px;
}

.subnav-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.subnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subnav-head > span {
  display: none;
}

.subnav-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.orders-subnav-head {
  justify-content: stretch;
  width: 100%;
}

.orders-subnav-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

.orders-subnav-buttons {
  flex: 0 1 auto;
  justify-content: flex-start;
  width: fit-content;
}

.orders-subnav-actions {
  justify-content: flex-start;
  margin-left: auto;
}

.orders-subnav-normal {
  justify-content: flex-end;
  margin-left: auto;
}

.orders-subnav-normal-zone {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.orders-subnav-normal-zone .orders-subnav-normal {
  margin-left: 0;
  justify-content: flex-start;
}

.delivery-work-subnav {
  margin-top: 9px;
  padding-left: 35px;
}

.orders-subnav-buttons > button,
.tab-selector > button,
.billing-tabs > button,
.todo-tabbar > button,
.foil-control-tabbar > button,
.plc-foil-tabbar > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.market-subnav-layout .orders-subnav-normal {
  min-width: max-content;
}

.orders-subnav-spacer {
  display: none;
}

.subnav-action-button {
  color: var(--muted);
  background: transparent;
}

.subnav-button {
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: var(--font-button-size);
  font-weight: 900;
}

.subnav-button:hover,
.subnav-button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: var(--active-shadow);
}

.settings-tab-button {
  color: color-mix(in srgb, var(--settings-tab-color, var(--primary)) 58%, var(--muted));
}

.settings-tab-button:hover,
.settings-tab-button.is-active {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--settings-tab-color, var(--primary)),
    color-mix(in srgb, var(--settings-tab-color, var(--primary-strong)) 70%, var(--primary-strong))
  );
  box-shadow: 0 10px 22px color-mix(in srgb, var(--settings-tab-color, var(--primary)) 20%, transparent);
}

.settings-meta {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.68);
  color: var(--muted);
}

.settings-meta strong {
  color: var(--ink);
}

.settings-meta small {
  color: var(--primary-strong);
  font-weight: 800;
}

.appearance-settings-page {
  display: grid;
  gap: 18px;
  padding: 4px;
}

.appearance-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.appearance-settings-head h3 {
  margin: 0;
  font-size: var(--font-section-title-size);
}

.appearance-custom-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr) minmax(220px, 0.62fr);
  gap: 14px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--line));
  border-radius: var(--layout-card-radius);
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, var(--surface)), var(--surface)),
    var(--surface);
}

.appearance-custom-copy {
  min-width: 0;
}

.appearance-custom-copy h4,
.appearance-custom-copy p {
  margin: 0;
}

.appearance-custom-copy h4 {
  font-size: 1.02rem;
}

.appearance-custom-copy p:not(.eyebrow) {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.appearance-custom-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  justify-content: flex-start;
}

.appearance-custom-color-field,
.appearance-custom-text-field {
  display: grid;
  gap: 5px;
}

.appearance-custom-color-field span,
.appearance-custom-text-field span {
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.appearance-custom-color-field input[type="color"] {
  width: 54px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: var(--layout-input-radius);
  padding: 4px;
  background: var(--surface);
  cursor: pointer;
}

.appearance-custom-color-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.appearance-custom-color-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--layout-input-radius) - 5px);
}

.appearance-custom-text-field input {
  width: 118px;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--layout-input-radius);
  padding: 9px 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-transform: lowercase;
}

.appearance-custom-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.appearance-custom-preview .appearance-scheme-preview {
  min-height: 64px;
}

@media (max-width: 1120px) {
  .appearance-custom-tools {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
  }

  .appearance-custom-preview {
    grid-column: 1 / -1;
  }
}

.appearance-scheme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}

.appearance-scheme-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--scheme-primary) 18%, var(--line));
  border-radius: var(--layout-card-radius);
  padding: 14px;
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--scheme-bg) 86%, #ffffff), var(--scheme-surface)),
    var(--scheme-surface);
  text-align: left;
  box-shadow: 0 12px 26px rgba(21, 34, 29, 0.06);
  cursor: pointer;
}

.appearance-scheme-card:hover,
.appearance-scheme-card.is-active {
  border-color: var(--scheme-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--scheme-primary) 13%, transparent), 0 16px 32px rgba(21, 34, 29, 0.09);
}

.appearance-scheme-card.is-active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--scheme-selected) 74%, #ffffff), var(--scheme-surface)),
    var(--scheme-surface);
}

.appearance-scheme-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.appearance-scheme-card-head strong,
.appearance-scheme-card-head small {
  display: block;
}

.appearance-scheme-card-head strong {
  font-size: 1rem;
}

.appearance-scheme-card-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.appearance-scheme-check {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--scheme-primary);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.appearance-scheme-card.is-active .appearance-scheme-check {
  opacity: 1;
  transform: scale(1);
}

.appearance-scheme-preview {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 90px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--scheme-primary) 16%, var(--line));
  border-radius: var(--layout-button-radius);
  background: var(--scheme-bg);
}

.appearance-scheme-sidebar {
  background: linear-gradient(180deg, var(--scheme-sidebar), color-mix(in srgb, var(--scheme-sidebar) 82%, #000000));
}

.appearance-scheme-body {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 14px;
}

.appearance-scheme-line,
.appearance-scheme-pill {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scheme-primary) 22%, var(--scheme-surface));
}

.appearance-scheme-line.is-strong {
  width: 72%;
  background: linear-gradient(90deg, var(--scheme-primary), var(--scheme-primary-strong));
}

.appearance-scheme-line:not(.is-strong) {
  width: 88%;
}

.appearance-scheme-pill {
  width: 42%;
  height: 18px;
  background: var(--scheme-secondary);
}

.appearance-scheme-swatches {
  display: flex;
  gap: 7px;
}

.appearance-scheme-swatches span {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(17, 24, 39, 0.11);
  border-radius: 999px;
}

@media (max-width: 680px) {
  .appearance-settings-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .appearance-custom-tools {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .appearance-custom-controls {
    align-items: stretch;
  }

  .appearance-custom-controls .primary-button {
    width: 100%;
  }

  .appearance-scheme-card {
    border-radius: 14px;
    padding: 12px;
  }

  .appearance-scheme-preview {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 78px;
  }
}

.settings-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 8px;
}

.settings-filter-field {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.settings-filter-field span {
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.settings-filter-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 13px;
  padding: 8px 34px 8px 11px;
  color: var(--ink);
  background: rgba(255, 253, 247, 0.88);
}

.settings-filter-field .select-combo {
  min-width: 220px;
}

.management-panel {
  display: grid;
  gap: 16px;
}

.management-page-head,
.management-card-head,
.management-actions,
.management-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.management-page-head h3,
.management-card h4 {
  margin: 0;
  letter-spacing: -0.035em;
}

.management-grid {
  display: grid;
  gap: 14px;
}

.management-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.management-metric-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--leaf) 11%, transparent), transparent 8rem),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 32px rgba(15, 47, 35, 0.07);
}

.management-metric-card span,
.management-section-title .eyebrow {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.management-metric-card strong {
  color: var(--primary-strong);
  font-size: clamp(1.5rem, 2.3vw, 2.2rem);
  line-height: 1;
}

.management-metric-card small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.management-company-summary-list,
.management-company-groups,
.management-company-group-body,
.management-company-users {
  display: grid;
  gap: 14px;
}

.management-company-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
}

.management-company-summary h4,
.management-section-title h4 {
  margin: 0;
  color: var(--ink);
}

.management-company-summary small,
.management-company-group > summary small {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.management-summary-metrics,
.management-company-summary-pills,
.management-user-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.management-summary-metrics span,
.management-company-summary-pills em,
.management-permission-token {
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.management-company-group {
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.management-company-group > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  transition: background 0.18s ease;
}

.management-company-group > summary::-webkit-details-marker {
  display: none;
}

.management-company-group > summary:hover {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.management-company-group > summary strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.15;
}

.management-company-title {
  min-width: 0;
}

.management-disclosure-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 999px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  transition: transform 0.18s ease, background 0.18s ease;
}

.management-disclosure-icon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.18s ease;
}

.management-company-group[open] > summary .management-disclosure-icon::before,
.management-people-group[open] > summary .management-disclosure-icon::before {
  transform: translateY(2px) rotate(225deg);
}

.management-disclosure-icon.small {
  width: 28px;
  height: 28px;
}

.management-disclosure-icon.small::before {
  width: 7px;
  height: 7px;
}

.management-company-group-body {
  padding: 0 16px 16px;
}

.management-company-users {
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.management-people-group:not([open]) {
  cursor: pointer;
}

.management-company-customers {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.74);
}

.management-people-group > summary.management-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.management-people-group > summary.management-section-title::-webkit-details-marker {
  display: none;
}

.management-people-group > summary.management-section-title:hover h4 {
  color: var(--primary-strong);
}

.management-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 2px 0;
}

.management-section-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.management-user-list {
  display: grid;
  gap: 9px;
  padding: 0 14px 14px;
}

.management-customer-access-groups {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.management-customer-access-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.56);
}

.management-customer-access-group.is-shop {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, rgba(255, 255, 255, 0.62));
}

.management-customer-access-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.management-customer-access-head .eyebrow {
  margin: 0 0 3px;
}

.management-customer-access-head h5 {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
}

.management-customer-access-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.79rem;
}

.management-customer-access-group .management-user-list {
  padding: 0;
}

.management-user-row {
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  overflow: hidden;
}

.management-user-row.is-customer {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}

.management-user-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.management-user-row summary::-webkit-details-marker {
  display: none;
}

.management-user-row[open] summary {
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.management-user-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.management-user-row-main strong {
  color: var(--ink);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.management-user-row-main small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.management-user-row-cue {
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  font-size: 0.75rem;
  font-weight: 900;
}

.management-user-details {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.management-customer-note {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 14px;
  padding: 11px 12px;
  color: color-mix(in srgb, var(--primary-strong) 80%, var(--ink));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 0.86rem;
  font-weight: 800;
}

.management-permission-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 14px;
}

.management-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 38%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.management-create-card {
  border-style: dashed;
}

.management-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.management-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.management-card select,
.management-card textarea,
.management-user-details input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.management-user-details select,
.management-user-details textarea {
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  outline: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--color-input-background) 92%, transparent);
  font-size: var(--font-input-size);
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.management-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.management-card select:focus,
.management-card textarea:focus,
.management-user-details input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.management-user-details select:focus,
.management-user-details textarea:focus {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.management-card textarea {
  resize: vertical;
}

.management-permissions {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 18px;
  background: rgba(241, 246, 238, 0.55);
}

.management-permissions h5 {
  margin: 0;
  color: var(--primary-strong);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.management-permissions section {
  display: grid;
  gap: 8px;
}

.management-permissions section.is-disabled {
  opacity: 0.54;
}

.management-permission-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
}

.management-user-details .management-permission-grid {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.management-permission-grid .inline-check.compact {
  width: auto;
  min-width: 0;
  grid-template-columns: 18px max-content;
  justify-content: start;
  padding-right: 4px;
}

.management-user-details .management-permission-grid .inline-check.compact {
  flex: 0 1 180px;
  width: auto;
  grid-template-columns: 22px minmax(0, 1fr);
  padding-right: 6px;
}

.management-user-details .management-permission-grid .inline-check.compact {
  white-space: normal;
  overflow-wrap: anywhere;
}

.management-invite-mobile-list {
  display: none;
}

.management-invite-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.management-invite-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  table-layout: fixed;
}

.management-invite-table th,
.management-invite-table td {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  text-align: left;
  vertical-align: middle;
}

.management-invite-table th {
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.management-invite-table td {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.management-invite-table th:nth-child(1) {
  width: 220px;
}

.management-invite-table th:nth-child(2) {
  width: 112px;
}

.management-invite-table th:nth-child(3),
.management-invite-table th:nth-child(4),
.management-invite-table th:nth-child(5),
.management-invite-table th:nth-child(7) {
  width: 118px;
}

.management-invite-table th:nth-child(6) {
  width: 190px;
}

.management-invite-table th:nth-child(8) {
  width: 168px;
}

.management-invite-table th:nth-child(8),
.management-invite-table th:nth-child(9) {
  width: 142px;
  white-space: nowrap;
}

.management-invite-table th:nth-child(10),
.management-invite-table td:nth-child(10) {
  width: 142px;
  text-align: right;
  white-space: nowrap;
}

.management-invite-mobile-row {
  display: grid;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(23, 33, 29, 0.1);
}

.management-invite-mobile-row:first-child {
  border-top: 1px solid rgba(23, 33, 29, 0.1);
}

.management-invite-mobile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.management-invite-mobile-head div {
  min-width: 0;
}

.management-invite-mobile-head small,
.management-invite-mobile-details dt {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.management-invite-mobile-head strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.98rem;
}

.management-invite-mobile-head .pill {
  flex: 0 0 auto;
}

.management-invite-mobile-details {
  display: grid;
  gap: 8px;
  margin: 0;
}

.management-invite-mobile-details div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.management-invite-mobile-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.management-invite-row-actions,
.management-invite-mobile-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.management-invite-row-actions {
  justify-content: flex-end;
}

.management-invite-mobile-actions {
  justify-content: flex-start;
}

.management-qr-create-dialog,
.management-qr-invite-dialog {
  width: min(440px, calc(100vw - 28px));
}

.profile-settings-backdrop.management-qr-create-backdrop,
.profile-settings-backdrop.management-qr-invite-backdrop {
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--color-sidebar) 24%, transparent);
  backdrop-filter: blur(2px);
}

.profile-settings-dialog.management-qr-create-dialog,
.profile-settings-dialog.management-qr-invite-dialog {
  display: flex;
  flex-direction: column;
  align-self: center;
  align-content: flex-start;
  width: min(340px, calc(100vw - 40px));
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  gap: 12px;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.management-qr-create-dialog .profile-settings-head,
.management-qr-invite-dialog .profile-settings-head {
  align-items: flex-start;
  flex-direction: row;
  gap: 10px;
}

.management-qr-create-dialog .profile-settings-head > div,
.management-qr-invite-dialog .profile-settings-head > div {
  min-width: 0;
}

.management-qr-create-dialog .profile-settings-head h3,
.management-qr-invite-dialog .profile-settings-head h3 {
  font-size: 1.15rem;
  line-height: 1.15;
}

.management-qr-create-dialog .icon-button,
.management-qr-invite-dialog .icon-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.management-qr-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  align-items: end;
  align-content: start;
}

.management-qr-create-form .field {
  align-content: start;
  gap: 5px;
}

.management-qr-create-form select,
.management-qr-create-form input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: 12px;
  outline: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--color-input-background) 92%, transparent);
  font-size: 0.95rem;
}

.management-qr-create-form select:focus,
.management-qr-create-form input:focus {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.management-qr-create-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.management-qr-create-actions > * {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.management-qr-create-dialog .primary-button,
.management-qr-create-dialog .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: auto;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.88rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

.management-qr-invite-body {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.management-qr-invite-body img {
  width: min(230px, 68vw);
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  background: #fff;
  padding: 10px;
}

.management-qr-invite-body div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.management-qr-invite-body strong {
  color: var(--primary);
  font-size: 1.05rem;
}

.management-qr-invite-body span,
.management-qr-invite-body a {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.management-qr-invite-body a {
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 980px) {
  .management-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .management-form-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .management-company-summary,
  .management-company-group > summary {
    align-items: flex-start;
  }

  .management-company-group > summary {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .management-company-summary-pills {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .management-metric-grid {
    grid-template-columns: 1fr;
  }

  .management-company-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .management-summary-metrics,
  .management-user-badges {
    justify-content: flex-start;
  }

  .management-user-row summary {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .management-user-row-cue {
    width: fit-content;
  }

  .management-form-grid {
    grid-template-columns: 1fr;
  }

  .management-invite-card {
    padding: 14px;
    border-radius: 18px;
  }

  .management-invite-card .management-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  .management-invite-card .management-permission-grid .inline-check.compact {
    width: 100%;
    grid-template-columns: 22px minmax(0, 1fr);
    padding-right: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .management-qr-create-form {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .management-user-details .management-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  .management-user-details .management-permission-grid .inline-check.compact {
    width: 100%;
    grid-template-columns: 22px minmax(0, 1fr);
    padding-right: 8px;
  }

  .management-invite-table-wrap {
    display: none;
  }

  .management-invite-mobile-list {
    display: grid;
  }
}

@media (max-width: 390px) {
  .management-invite-card .management-permission-grid {
    grid-template-columns: 1fr;
  }

  .management-user-details .management-permission-grid {
    grid-template-columns: 1fr;
  }

  .management-invite-mobile-details div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.action-panel {
  margin-bottom: 18px;
}

.mail-admin-mount {
  display: grid;
  gap: 12px;
  width: 100%;
}

.action-card {
  overflow: visible;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 34%),
    var(--surface);
}

.order-entry-card.is-collapsed .panel-head {
  margin-bottom: 0;
}

.market-editor-card.is-collapsed .billing-card-head {
  margin-bottom: 0;
}

.order-entry-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.order-entry-toggle {
  min-height: 32px;
  padding-inline: 14px;
  font-weight: 800;
}

.order-entry-toggle.is-open-action {
  border-color: transparent;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent);
}

.order-entry-toggle.is-open-action:hover {
  background: var(--primary-strong);
}

.order-form {
  display: grid;
  gap: 14px;
}

.order-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.order-lines-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.order-lines-head strong {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  font-size: 0.82rem;
}

.order-lines {
  display: grid;
  gap: 0;
}

.order-line {
  display: grid;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
}

.order-line:first-child {
  padding-top: 0;
  border-top: 0;
}

.order-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.order-line-head strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.order-line-remove {
  margin: 0;
}

.order-line-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.order-line-live-grid {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

.field.span-2 {
  grid-column: span 2;
}

.form-grid > .span-2 {
  grid-column: span 2;
}

.field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.order-form input,
.order-form select,
.order-form textarea,
.settings-complex-form input,
.settings-complex-form select {
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  outline: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--color-input-background) 92%, transparent);
  font-size: var(--font-input-size);
}

.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus,
.settings-complex-form input:focus,
.settings-complex-form select:focus {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.field.is-field-error span {
  color: var(--danger);
}

.field.is-field-error input,
.field.is-field-error select,
.field.is-field-error textarea,
.field.is-field-error .select-combo input {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--color-input-background));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

.field.is-field-error::after {
  content: attr(data-error-code);
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.order-form textarea {
  min-height: 86px;
  resize: vertical;
}

.order-form textarea.settings-compact-textarea {
  min-height: var(--layout-input-height);
  height: var(--layout-input-height);
  resize: none;
  overflow: hidden;
  line-height: 1.35;
  white-space: pre-wrap;
}

.settings-editor-card {
  margin-top: 12px;
}

.partner-import-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 14px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.partner-import-panel-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.partner-import-panel-copy:hover small,
.partner-import-panel-copy:focus-visible small {
  color: var(--primary-strong);
}

.partner-import-manage-dialog {
  width: min(760px, 100%);
}

.partner-import-manage-list {
  display: grid;
  gap: 8px;
  max-height: min(58vh, 620px);
  overflow: auto;
  padding-right: 3px;
}

.partner-import-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--radius-card, 16px);
  background: color-mix(in srgb, var(--surface-strong) 70%, var(--surface));
}

.partner-import-manage-row strong,
.partner-import-manage-row small {
  display: block;
}

.partner-import-manage-row small {
  margin-top: 3px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .partner-import-manage-row {
    align-items: stretch;
    flex-direction: column;
  }

  .partner-import-manage-row .danger-button {
    width: 100%;
  }
}

.partner-import-panel-copy strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.partner-import-panel-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.partner-import-field {
  position: relative;
  z-index: 5;
}

.partner-import-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  max-height: min(310px, 56vh);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 14px;
  padding: 6px;
  background: var(--surface);
  box-shadow: 0 18px 34px rgba(15, 61, 42, 0.16);
}

.partner-import-suggestions[hidden] {
  display: none;
}

.partner-import-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.partner-import-suggestion:hover,
.partner-import-suggestion:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.partner-import-suggestion span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.partner-import-suggestion strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-import-suggestion small,
.partner-import-suggestion em {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-import-suggestion em {
  color: var(--primary-strong);
}

.partner-import-suggestion-empty {
  padding: 9px 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.settings-search-input {
  width: min(420px, 100%);
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 13px;
  padding: 8px 11px;
  color: var(--ink);
  background: rgba(255, 253, 247, 0.88);
}

.settings-inline-editor {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}

.settings-complex-form {
  display: grid;
  gap: 16px;
}

.settings-complex-form h4 {
  margin: 0 0 8px;
  color: var(--ink);
}

.settings-section-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.settings-section-row-head h4 {
  margin: 0;
}

.sidebar-add-menu-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: min(100%, 360px);
}

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

.sidebar-group-card-list {
  display: grid;
  gap: 12px;
}

.sidebar-group-editor {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.sidebar-group-editor.is-dragging {
  opacity: 0.48;
}

.sidebar-group-empty {
  margin: 2px 4px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.settings-sort-row {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) minmax(150px, 220px) auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.72);
}

.settings-sort-row.is-dragging {
  opacity: 0.48;
}

.drag-handle {
  color: var(--primary-strong);
  cursor: grab;
  font-weight: 900;
  letter-spacing: -0.18em;
}

.inline-check.compact {
  grid-template-columns: 22px minmax(0, max-content);
  font-size: 0.86rem;
  color: var(--muted);
}

.settings-check-field input[type="checkbox"] {
  width: 22px;
  min-height: 22px;
  justify-self: start;
  accent-color: var(--primary);
}

.shipping-settings-field {
  align-content: start;
}

.shipping-settings-box {
  display: grid;
  grid-template-columns: 24px minmax(84px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: var(--layout-input-height);
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  padding: 7px 9px;
  background: color-mix(in srgb, var(--color-input-background) 92%, transparent);
}

.shipping-settings-box:focus-within {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.shipping-settings-check {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--ink);
  font-size: var(--font-input-size);
  font-weight: 800;
  cursor: pointer;
}

.shipping-settings-check input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.shipping-settings-percent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.shipping-settings-percent input {
  min-height: 30px;
  border: 0;
  border-radius: 10px;
  padding: 4px 6px;
  text-align: right;
  background: color-mix(in srgb, var(--surface-muted) 76%, transparent);
}

.shipping-settings-percent input:focus {
  box-shadow: none;
}

.shipping-settings-percent span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.shipping-settings-box:not(.is-enabled) .shipping-settings-percent {
  opacity: 0.5;
}

.data-row.is-inline-editing td {
  background: color-mix(in srgb, var(--color-selected-row) 50%, var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--primary) 45%, transparent);
}

.partner-price-rule-row.is-inline-editing td,
.partner-price-group-row.is-inline-editing td {
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: middle;
}

.partner-price-rule-row.is-inline-editing .action-cell,
.partner-price-group-row.is-inline-editing .action-cell {
  min-width: 190px;
}

.partner-price-rule-row.is-inline-editing .mini-button,
.partner-price-group-row.is-inline-editing .mini-button {
  margin: 0 3px 0 0;
  padding: 5px 8px;
  min-height: 29px;
  font-size: 0.78rem;
}

.partner-price-rule-row.is-inline-editing .settings-inline-input,
.partner-price-group-row.is-inline-editing .settings-inline-input {
  min-height: 28px;
  min-width: 82px;
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 0.86rem;
  line-height: 1.15;
}

.partner-price-rule-row.is-inline-editing select.settings-inline-input,
.partner-price-group-row.is-inline-editing select.settings-inline-input {
  padding-right: 22px;
}

.partner-price-rule-row.is-inline-editing .settings-inline-input[type="checkbox"],
.partner-price-group-row.is-inline-editing .settings-inline-input[type="checkbox"] {
  min-height: 18px;
  min-width: 18px;
  width: 18px;
}

.settings-inline-cell {
  min-width: 150px;
}

.settings-inline-input {
  width: 100%;
  min-width: 110px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 9px;
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.settings-inline-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 68%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.settings-inline-input.is-field-error,
.settings-inline-cell.is-field-error .settings-inline-input {
  border-color: color-mix(in srgb, var(--danger) 66%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

.data-row.is-settings-row-error td {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.data-row.is-error-flash td {
  animation: settings-row-error-flash 1.05s ease;
}

@keyframes settings-row-error-flash {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 transparent;
  }
  18%,
  62% {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 34%, transparent);
  }
}

.settings-inline-input[type="checkbox"] {
  width: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  accent-color: var(--primary);
}

.settings-inline-input[type="color"] {
  min-width: 48px;
  width: 54px;
  padding: 3px;
}

.settings-inline-textarea {
  min-height: 70px;
  resize: vertical;
  white-space: pre-wrap;
}

.maintenance-panel {
  display: grid;
  gap: 14px;
  padding: 4px;
}

.maintenance-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.maintenance-stat-card {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 8rem),
    var(--surface);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.maintenance-stat-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.maintenance-stat-card strong {
  color: var(--ink);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1;
}

.maintenance-stat-card.is-actionable {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 8rem),
    var(--surface);
}

.maintenance-stat-card.is-warning {
  border-color: color-mix(in srgb, var(--color-warning) 42%, var(--line));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--color-warning) 18%, transparent), transparent 8rem),
    var(--surface);
}

.maintenance-action-card {
  margin: 0;
}

.maintenance-action-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.maintenance-warning {
  margin-top: 8px !important;
  color: color-mix(in srgb, var(--danger) 82%, var(--ink)) !important;
  font-weight: 800;
}

.maintenance-year-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.maintenance-sample-table {
  max-height: none;
  overflow: visible;
}

.maintenance-sample-table table {
  min-width: 860px;
}

.settings-inline-readonly {
  color: var(--muted);
}

.partner-price-group-row td {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 72%),
    rgba(255, 253, 247, 0.98);
  font-weight: 800;
}

.partner-price-group-row.is-collapsed td {
  border-bottom-color: color-mix(in srgb, var(--primary) 24%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 72%),
    rgba(255, 253, 247, 0.98);
}

.settings-group-row {
  cursor: default;
}

.settings-collapse-button {
  vertical-align: middle;
}

.settings-group-add-button {
  margin-left: 10px;
  padding: 5px 10px;
}

.partner-price-rule-row td:first-child {
  padding-left: 32px;
}

.partner-price-rule-row {
  cursor: default;
  user-select: none;
}

.partner-price-rule-row.is-selected .partner-price-rule-index {
  color: var(--primaryHover);
}

.partner-price-rule-index {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.partner-prices-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.partner-prices-table:not(.mobile-card-table) {
  min-width: 980px;
  table-layout: fixed;
}

.partner-prices-table:not(.mobile-card-table) th,
.partner-prices-table:not(.mobile-card-table) td {
  padding: 8px 10px;
  vertical-align: middle;
}

.partner-prices-table:not(.mobile-card-table) th:nth-child(1) {
  width: 220px;
}

.partner-prices-table:not(.mobile-card-table) th:nth-child(2) {
  width: 280px;
}

.partner-prices-table:not(.mobile-card-table) th:nth-child(3) {
  width: 115px;
}

.partner-prices-table:not(.mobile-card-table) th:nth-child(4) {
  width: 115px;
}

.partner-prices-table:not(.mobile-card-table) th:nth-child(5) {
  width: 90px;
}

.partner-prices-table:not(.mobile-card-table) th:nth-child(6) {
  width: 240px;
}

.partner-prices-table:not(.mobile-card-table) .action-cell {
  min-width: 0;
  white-space: normal;
}

.partner-prices-table:not(.mobile-card-table) .action-cell .mini-button {
  min-height: 30px;
  margin: 2px 3px 2px 0;
  padding: 5px 9px;
}

.partner-prices-table:not(.mobile-card-table) .partner-price-group-row td:empty {
  background: rgba(255, 253, 247, 0.98);
}

.partner-settings-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.partner-settings-table:not(.mobile-card-table) {
  min-width: 1080px;
  table-layout: fixed;
}

.partner-settings-table:not(.mobile-card-table) th,
.partner-settings-table:not(.mobile-card-table) td {
  padding: 7px 8px;
  vertical-align: top;
}

.partner-settings-table:not(.mobile-card-table) th:nth-child(1) {
  width: 24%;
}

.partner-settings-table:not(.mobile-card-table) th:nth-child(2) {
  width: 14%;
}

.partner-settings-table:not(.mobile-card-table) th:nth-child(3) {
  width: 10%;
}

.partner-settings-table:not(.mobile-card-table) th:nth-child(4) {
  width: 22%;
}

.partner-settings-table:not(.mobile-card-table) th:nth-child(5) {
  width: 15%;
}

.partner-settings-table:not(.mobile-card-table) th:nth-child(6) {
  width: 80px;
}

.partner-settings-table:not(.mobile-card-table) th:nth-child(7) {
  width: 80px;
}

.partner-settings-table:not(.mobile-card-table) .table-cell-email,
.partner-settings-table:not(.mobile-card-table) .table-cell-list_email {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.partner-settings-table:not(.mobile-card-table) .table-cell-destination_type,
.partner-settings-table:not(.mobile-card-table) .table-cell-default_shipping_pct,
.partner-settings-table:not(.mobile-card-table) .table-cell-site_count,
.partner-settings-table:not(.mobile-card-table) .table-cell-default_invoice_type,
.partner-settings-table:not(.mobile-card-table) .table-cell-default_payment_method,
.partner-settings-table:not(.mobile-card-table) .table-cell-default_due_days {
  white-space: nowrap;
}

.partner-settings-table:not(.mobile-card-table) .action-cell {
  white-space: normal;
}

.partner-settings-table:not(.mobile-card-table) .action-cell .mini-button {
  min-height: 30px;
  margin: 2px 3px 2px 0;
  padding: 5px 9px;
}

@media (max-width: 680px) {
  .partner-settings-table-wrap {
    overflow: visible;
  }

  .partner-settings-table.mobile-card-table tbody {
    gap: 12px;
  }

  .partner-settings-table.mobile-card-table tr {
    border-color: rgba(21, 94, 48, 0.12);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  }

  .partner-settings-table.mobile-card-table td {
    display: none;
  }

  .partner-settings-table.mobile-card-table .table-cell-name,
  .partner-settings-table.mobile-card-table .table-cell-destination_type,
  .partner-settings-table.mobile-card-table .table-cell-email,
  .partner-settings-table.mobile-card-table .table-cell-list_email,
  .partner-settings-table.mobile-card-table .table-cell-site_count,
  .partner-settings-table.mobile-card-table .table-cell-default_invoice_type,
  .partner-settings-table.mobile-card-table .table-cell-default_payment_method,
  .partner-settings-table.mobile-card-table .table-cell-default_due_days {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 6px 0;
    color: var(--ink);
  }

  .partner-settings-table.mobile-card-table .table-cell-name {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(21, 94, 48, 0.1);
    color: #071120;
    font-size: 1.02rem;
    font-weight: 900;
  }

  .partner-settings-table.mobile-card-table .table-cell-email,
  .partner-settings-table.mobile-card-table .table-cell-list_email {
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .partner-settings-table.mobile-card-table .table-cell-site_count,
  .partner-settings-table.mobile-card-table .table-cell-default_invoice_type,
  .partner-settings-table.mobile-card-table .table-cell-default_payment_method,
  .partner-settings-table.mobile-card-table .table-cell-default_due_days {
    font-size: 0.95rem;
    font-weight: 750;
  }

  .partner-settings-table.mobile-card-table td::before {
    color: #4f5d73;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }

  .partner-settings-table.mobile-card-table .action-cell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 12px;
  }

  .partner-settings-table.mobile-card-table .action-cell::before {
    display: none;
  }

  .partner-settings-table.mobile-card-table .action-cell .mini-button {
    justify-content: center;
    min-height: 38px;
    margin: 0;
    border-radius: 18px;
  }
}

.muted-inline,
.muted-cell {
  color: var(--muted);
  font-weight: 700;
}

.combo-box {
  position: relative;
  display: grid;
}

.select-combo-source {
  display: none !important;
}

.select-combo {
  min-width: 100%;
}

.select-combo input {
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  outline: 0;
  padding: 8px 42px 8px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--color-input-background) 92%, transparent);
  font-size: var(--font-input-size);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.select-combo input:focus {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.select-combo-source:disabled + .select-combo {
  opacity: 0.68;
}

.year-picker .combo-box {
  min-width: 96px;
}

.year-picker .combo-box input {
  min-height: 30px;
  border: 0;
  padding: 3px 36px 3px 4px;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.year-picker .combo-toggle {
  right: 0;
  width: 24px;
  height: 24px;
}

.combo-box input {
  padding-right: 42px;
}

.combo-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--selection-border) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--selection-border) 8%, var(--surface));
  cursor: pointer;
  transform: translateY(-50%);
}

.combo-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--primary-strong);
  border-bottom: 2px solid var(--primary-strong);
  transform: translateY(-2px) rotate(45deg);
}

.combo-list {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 245px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border: 1px solid color-mix(in srgb, var(--selection-border) 22%, var(--line));
  border-radius: 15px;
  padding: 6px;
  background: var(--surface);
  box-shadow: 0 20px 45px rgba(21, 34, 29, 0.18);
}

.combo-list.is-opening-up {
  top: auto;
  bottom: calc(100% + 7px);
}

.combo-option {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 9px 10px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
}

.combo-option small {
  color: var(--muted);
  font-size: 0.76rem;
}

.combo-option:hover,
.combo-option.is-active {
  color: var(--primary-strong);
  background: var(--selection-soft);
}

.combo-empty {
  padding: 11px;
  color: var(--muted);
  font-size: 0.9rem;
}

.inline-check {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.inline-check input[type="checkbox"] {
  width: 22px;
  min-height: 22px;
  justify-self: center;
  accent-color: var(--primary);
}

.order-live-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 8px;
}

.order-live-grid span {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  color: var(--muted);
  font-size: 0.86rem;
}

.order-live-grid strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.action-cell {
  min-width: 260px;
  white-space: nowrap;
}

.mini-button {
  display: inline-flex;
  align-items: center;
  margin: 0 4px 4px 0;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  text-decoration: none;
  cursor: pointer;
}

.mini-button:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.market-order-invoiced-button,
.market-order-invoiced-button:hover {
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  cursor: default;
}

.danger-button {
  border-color: rgba(185, 56, 47, 0.2);
  color: var(--danger);
  background: rgba(185, 56, 47, 0.08);
}

.full-panel-cell {
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.settings-matrix-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 300px);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 22px;
  background: rgba(255, 253, 247, 0.96);
  box-shadow: var(--shadow-soft);
}

.settings-matrix-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 10.5px;
}

.settings-matrix-table th,
.settings-matrix-table td {
  min-width: 0;
  border-right: 1px solid rgba(23, 33, 29, 0.15);
  border-bottom: 1px solid rgba(23, 33, 29, 0.15);
  padding: 3px;
  text-align: center;
  background: rgba(255, 255, 255, 0.88);
  overflow: hidden;
}

.settings-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  color: var(--primary-strong);
  background: linear-gradient(180deg, rgba(229, 244, 219, 0.98), rgba(248, 251, 242, 0.98));
  font-weight: 900;
}

.settings-matrix-table thead tr:nth-child(2) th {
  top: 24px;
  color: var(--ink);
  background: rgba(255, 253, 247, 0.98);
}

.settings-matrix-greenhouse {
  font-size: 0.62rem;
  line-height: 1.05;
  white-space: normal;
  word-break: break-word;
}

.settings-matrix-side {
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  padding: 2px 1px !important;
}

.settings-matrix-corner,
.settings-matrix-row-head {
  position: sticky;
  left: 0;
  z-index: 5;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  text-align: left !important;
  color: var(--ink);
  background: rgba(255, 253, 247, 0.98) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-matrix-corner {
  z-index: 7 !important;
}

.settings-matrix-row-head {
  font-weight: 900;
}

.settings-matrix-table tr.is-tray-blue {
  --settings-matrix-row-color: rgba(180, 214, 239, 0.74);
}

.settings-matrix-table tr.is-tray-yellow {
  --settings-matrix-row-color: rgba(255, 222, 112, 0.76);
}

.settings-matrix-table tr.is-tray-orange {
  --settings-matrix-row-color: rgba(246, 181, 121, 0.76);
}

.settings-matrix-table tr.is-tray-green {
  --settings-matrix-row-color: rgba(166, 206, 139, 0.78);
}

.settings-matrix-cell-box {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
}

.settings-matrix-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 2px 2px;
  text-align: center;
  font: inherit;
  font-weight: 850;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.42);
  outline: 0;
}

.settings-matrix-input:focus {
  border-color: color-mix(in srgb, var(--selection-border) 64%, var(--line));
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.settings-matrix-input.is-dirty {
  border-color: rgba(247, 127, 0, 0.58);
  background: rgba(255, 247, 232, 0.94);
}

.settings-matrix-derived {
  width: 100%;
  min-width: 0;
  color: rgba(23, 33, 29, 0.68);
  font-size: 0.6rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.055em;
  text-align: center;
}

.settings-matrix-cell.is-missing .settings-matrix-input {
  color: rgba(23, 33, 29, 0.62);
  background: rgba(255, 255, 255, 0.22);
}

.settings-matrix-cell.is-saving {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.settings-matrix-cell.is-error {
  animation: item-error-flash 0.58s ease-in-out 0s 2;
  box-shadow: inset 0 0 0 2px rgba(185, 56, 47, 0.35);
}

.todo-page {
  display: grid;
  grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1.45fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  min-width: 0;
  padding: 4px;
}

.employee-hours-page {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 4px;
}

.employee-hours-card {
  width: min(100%, 920px);
  min-width: 0;
}

.employee-hours-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}

.employee-hours-actions {
  justify-content: center;
}

.employee-hours-management {
  display: grid;
  width: min(100%, 1240px);
  margin: 0 auto;
  gap: 16px;
}

.employee-hours-management .employee-hours-card {
  width: 100%;
}

.employee-profile-fields {
  display: grid;
  grid-template-columns: minmax(200px, 1.35fr) repeat(2, minmax(170px, 0.8fr)) auto;
  gap: 12px;
  align-items: end;
}

.employee-profile-table-wrap,
.employee-hours-log-wrap {
  margin-top: 14px;
}

.employee-profile-table input {
  width: 100%;
  min-width: 0;
}

.employee-profile-table .action-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.employee-profile-table tr.is-muted {
  opacity: 0.62;
}

.employee-hours-week-head,
.employee-hours-week-nav,
.employee-hours-summary,
.employee-hours-report-head,
.employee-hours-report-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.employee-hours-week-head {
  justify-content: space-between;
}

.employee-hours-report-head {
  justify-content: space-between;
  align-items: end;
}

.employee-hours-report-filters {
  justify-content: flex-end;
}

.employee-hours-report-filters .field {
  min-width: 140px;
}

.employee-hours-week-nav {
  justify-content: flex-end;
}

.employee-hours-summary {
  margin-top: 12px;
}

.employee-hours-summary span {
  display: inline-flex;
  gap: 6px;
  min-height: 34px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.employee-hours-settlement {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  line-height: 1.35;
}

.employee-hours-deduction-field {
  min-width: 150px;
}

.employee-hours-deduction-field input {
  width: 100%;
  min-width: 0;
}

.todo-editor-card,
.todo-list-card {
  min-width: 0;
  max-width: 100%;
}

.todo-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.todo-form textarea {
  min-height: 116px;
}

.todo-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.todo-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  font-size: 0.82rem;
  font-weight: 800;
}

.todo-stats strong {
  color: var(--primary-strong);
}

.todo-stats .is-overdue {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.todo-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 12px;
}

.todo-tab-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--primary-strong);
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font-weight: 900;
}

.todo-tab-button strong {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 24px;
  border-radius: 999px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--selection-border) 10%, var(--surface));
  font-size: 0.78rem;
}

.todo-tab-button:hover,
.todo-tab-button.is-active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: var(--active-shadow);
}

.todo-tab-button:hover strong,
.todo-tab-button.is-active strong {
  color: var(--primary-strong);
  background: rgba(255, 255, 255, 0.9);
}

.todo-table-wrap {
  max-height: none;
  overflow: auto;
  width: 100%;
  max-width: 100%;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

.todo-row td:first-child {
  min-width: 220px;
  max-width: 420px;
}

.todo-row td:first-child strong,
.todo-row td:first-child small {
  display: block;
}

.todo-row td:first-child small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
  white-space: pre-wrap;
}

.todo-row.is-done {
  opacity: 0.72;
}

.todo-row.is-done td:first-child strong {
  text-decoration: line-through;
}

.todo-row.is-overdue td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

.todo-status,
.todo-priority,
.todo-warning {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.78rem;
  font-weight: 900;
}

.todo-status.is-open {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.todo-status.is-progress {
  color: #075985;
  background: rgba(14, 165, 233, 0.12);
}

.todo-status.is-paused {
  color: #92400e;
  background: rgba(245, 158, 11, 0.14);
}

.todo-status.is-done {
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
}

.todo-priority.is-urgent {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.todo-priority.is-high,
.todo-priority.is-important {
  color: #92400e;
  background: rgba(245, 158, 11, 0.14);
}

.todo-priority.is-low {
  color: var(--muted);
  background: rgba(104, 116, 135, 0.12);
}

.todo-priority.is-normal {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.todo-warning {
  margin-left: 5px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
}

.todo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 260px;
}

#tableView.is-todos-view .table-panel {
  min-height: 0;
}

#tableView.is-todos-view .table-panel > .table-wrap {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#tableView.is-todos-view .todo-table-wrap table {
  min-width: 760px;
}

#tableView.is-todos-view .todo-list-card,
#tableView.is-todos-view .todo-table-wrap,
#tableView.is-todos-view .mobile-card-table,
#tableView.is-todos-view .mobile-card-table tr,
#tableView.is-todos-view .mobile-card-table td {
  touch-action: pan-y;
}

.note-page {
  display: grid;
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1.45fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  min-width: 0;
  padding: 4px;
}

.note-editor-card,
.note-list-card {
  min-width: 0;
  max-width: 100%;
}

.note-form textarea {
  min-height: 180px;
}

.note-pin-field {
  justify-content: flex-start;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: var(--input-radius);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.note-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 14px;
}

.note-category-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  font-weight: 850;
  cursor: pointer;
}

.note-category-button strong {
  color: var(--muted);
  font-size: 0.78rem;
}

.note-category-button:hover,
.note-category-button.is-active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: var(--active-shadow);
}

.note-category-button:hover strong,
.note-category-button.is-active strong {
  color: rgba(255, 255, 255, 0.86);
}

.note-list {
  display: grid;
  gap: 10px;
}

.note-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: var(--card-radius);
  padding: 14px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.note-card.is-pinned {
  border-color: color-mix(in srgb, var(--selection-border) 38%, var(--line));
  background: color-mix(in srgb, var(--selection-border) 6%, var(--surface));
}

.note-card.is-closed {
  opacity: 0.72;
}

.note-card-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.note-card h4 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.note-card p {
  margin: 8px 0 0;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
}

.note-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 750;
}

.note-category.is-growing {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.note-category.is-shopping {
  color: #92400e;
  background: rgba(245, 158, 11, 0.14);
}

.note-category.is-task {
  color: #075985;
  background: rgba(14, 165, 233, 0.12);
}

.note-category.is-general {
  color: var(--muted);
  background: rgba(104, 116, 135, 0.12);
}

.note-actions {
  justify-content: flex-end;
  max-width: 310px;
}

#tableView.is-notes-view .table-panel {
  min-height: 0;
}

#tableView.is-notes-view .table-panel > .table-wrap {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 1050px) {
  .todo-page,
  .note-page {
    grid-template-columns: 1fr;
  }

  .note-card {
    grid-template-columns: 1fr;
  }

  .note-actions {
    justify-content: flex-start;
    max-width: none;
  }
}

.billing-page {
  display: grid;
  gap: 16px;
  padding: 4px;
}

/* Billing reform: reuse PlantaEvo fields, surfaces, themes and compact dialogs. */
.billing-workspace.billing-reform { display: block; min-width: 0; }
.billing-page > .billing-tabs { background: var(--surface); }
.content.billing-content { overflow: visible; backdrop-filter: none; }
.content.billing-content > .topbar { margin-inline: 0; }
body.billing-page-open { overflow: visible; }
body.billing-page-open.billing-ekaer-open { overflow: hidden; }
#tableView.is-page-scroll-view.is-billing-view .table-panel > .table-wrap { overflow: visible; }
.billing-reform .billing-order-toolbar {
  position: sticky; top: 0; z-index: 12; display: flex; align-items: center;
  gap: 12px; padding: 12px 16px; margin-bottom: 12px; background: var(--surface);
}
.billing-order-toolbar > div { min-width: 0; flex: 1 1 30%; }
.billing-order-toolbar strong, .billing-order-toolbar small { display: block; overflow-wrap: anywhere; }
.billing-order-toolbar > .field { flex: 1 1 50%; min-width: 0; margin: 0; }
.billing-reform #billingForm { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); gap: 12px; margin: 0; align-items: start; }
.billing-reform .billing-editor-card, .billing-reform .billing-items-card { min-width: 0; padding: 14px 16px; }
.billing-reform .billing-card-head { margin-bottom: 10px; align-items: center; }
.billing-reform h3 { font-size: 1rem; margin: 0; }
.billing-fold { border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; min-width: 0; }
.billing-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; min-height: 44px; list-style: none; color: var(--ink); }
.billing-fold > summary::-webkit-details-marker, .billing-mobile-item > summary::-webkit-details-marker { display: none; }
.billing-fold > summary > span:first-child { display: grid; gap: 4px; min-width: 0; }
.billing-fold [data-billing-summary] { display: grid; gap: 3px; font-weight: 400; font-size: 0.84rem; overflow-wrap: anywhere; }
.billing-fold small { color: var(--muted); }
.billing-fold-edit { flex: none; font-size: 0.8rem; color: var(--primary-strong); }
.billing-fold-edit::after { content: " ▾"; }
.billing-fold[open] .billing-fold-edit::after { content: " ▴"; }
.billing-fold > .form-grid { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.billing-fold input, .billing-fold select, .billing-fold textarea { min-width: 0; }
.billing-ekaer-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-top: 14px; align-items: center; }
.billing-ekaer-summary .pill, .billing-ekaer-summary small { grid-column: 1 / -1; justify-self: start; }
.billing-ekaer-summary > button { grid-row: 1; grid-column: 2; padding: 9px 12px; }
.billing-reform .billing-desktop-items table { width: 100%; min-width: 0; table-layout: auto; }
.billing-reform .billing-desktop-items th, .billing-reform .billing-desktop-items td { padding: 9px 7px; font-size: 0.81rem; white-space: normal; }
.billing-reform .billing-desktop-items th:first-child { width: 30%; }
.billing-reform .billing-desktop-items td:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.billing-item-note { display: block; color: var(--muted); font-size: 0.77rem; margin-top: 3px; font-weight: 400; }
.billing-mobile-items { display: none; }
.billing-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 0 10px; border-top: 1px solid var(--line); margin-top: 10px; }
.billing-total strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.billing-total-details summary { cursor: pointer; font-size: 0.82rem; color: var(--muted); padding: 6px 0; }
.billing-reform .billing-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.billing-reform .billing-summary-grid > span { padding: 6px 0; min-height: 0; border: 0; border-radius: 0; background: none; font-weight: 400; }
.billing-reform .billing-summary-grid strong { font-size: 0.93rem; }
.billing-create-bar { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-top: 12px; }
.billing-create-bar button { padding: 10px 12px; font-size: 0.82rem; }
.billing-more-actions > summary { display: none; }
.billing-more-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
.billing-reform .billing-passport-note { background: none; border: 0; padding: 4px 0; font-size: 0.76rem; font-weight: 400; }
.billing-documents-table td { padding: 9px 10px; font-size: 0.85rem; }
.billing-documents-table .action-cell { max-width: 290px; }
.billing-documents-table .action-cell > * { margin: 2px; }
.profile-settings-dialog.billing-ekaer-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px; }
.billing-ekaer-dialog .billing-card-head { flex-direction: row; }
.billing-ekaer-dialog .billing-card-head { position: sticky; top: -20px; z-index: 3; background: var(--surface); padding: 8px 0; }
.billing-ekaer-auto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.billing-ekaer-auto > div { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.billing-ekaer-auto span, .billing-ekaer-auto small { color: var(--muted); font-size: 0.82rem; }
.billing-ekaer-dialog fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.billing-ekaer-dialog .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.billing-ekaer-dialog .field, .billing-classification-dialog .field { min-width: 0; }
.billing-ekaer-dialog .field input, .billing-ekaer-dialog .field select { width: 100%; min-width: 0; }
.billing-unit-input { position: relative; display: block; }
.billing-unit-input input { padding-right: 36px; }
.billing-unit-input small { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-weight: 400; }
.billing-ekaer-validation { margin-top: 14px; color: var(--ink); }
.billing-ekaer-validation > small { display: block; color: var(--danger); padding: 3px 0; }
.billing-ekaer-dialog[aria-busy="true"] { cursor: progress; }
.billing-classification-dialog { width: min(560px, calc(100vw - 24px)); padding: 20px; }
body.billing-ekaer-open { overflow: hidden; }

@media (max-width: 1200px) and (min-width: 769px) {
  .billing-reform #billingForm { grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr); }
  .billing-partner-column .form-grid { grid-template-columns: minmax(0, 1fr); }
  .billing-partner-column .span-2 { grid-column: 1; }
  .billing-order-toolbar > .pill { display: none; }
  .billing-ekaer-summary { grid-template-columns: minmax(0, 1fr); }
  .billing-ekaer-summary > button { grid-row: auto; grid-column: 1; justify-self: start; }
}
@media (max-width: 1024px) {
  .billing-reform #billingForm { grid-template-columns: minmax(0, 1fr); }
  .billing-reform .billing-partner-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .billing-reform .billing-ekaer-summary { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .billing-page { padding: 0; gap: 8px; min-width: 0; }
  .billing-tabs { width: 100%; gap: 2px; padding: 4px; border-radius: 14px; }
  .billing-tabs button { padding: 8px 10px; font-size: 0.8rem; }
  .billing-reform .billing-order-toolbar { flex-wrap: wrap; padding: 10px; gap: 6px; margin-bottom: 8px; }
  .billing-order-toolbar > div, .billing-order-toolbar > .field { flex: 1 1 100%; }
  .billing-order-toolbar .field > span { display: none; }
  .billing-order-toolbar > .pill { font-size: 0.72rem; }
  .billing-order-toolbar > .billing-total { flex: 1 1 100%; padding: 6px 0 0; margin: 0; font-size: 0.82rem; }
  .billing-order-toolbar .billing-total strong { font-size: 1.12rem; }
  .billing-order-column > .billing-ekaer-summary { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
  .billing-reform #billingForm { display: flex; flex-direction: column; gap: 8px; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .billing-reform .billing-partner-column { display: block; }
  .billing-reform .billing-editor-card, .billing-reform .billing-items-card { padding: 10px 12px; width: 100%; box-sizing: border-box; }
  .billing-reform .billing-desktop-items { display: none; }
  .billing-mobile-items { display: block; }
  .billing-mobile-item { border-bottom: 1px solid var(--line); }
  .billing-mobile-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 7px 0; cursor: pointer; list-style: none; }
  .billing-mobile-item > summary > span { min-width: 0; }
  .billing-mobile-item strong { display: block; font-size: 0.9rem; overflow-wrap: anywhere; }
  .billing-mobile-item small { display: block; color: var(--muted); padding-top: 3px; font-size: 0.8rem; }
  .billing-mobile-item b { flex: none; font-size: 0.87rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .billing-item-detail { display: grid; gap: 4px; font-size: 0.79rem; color: var(--muted); padding: 4px 0 10px; }
  .billing-fold > .form-grid { grid-template-columns: minmax(0, 1fr); }
  .billing-fold .span-2 { grid-column: 1; }
  .billing-create-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 28; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); box-shadow: 0 -4px 16px rgba(0,0,0,0.08); }
  .billing-create-bar > button, .billing-more-actions > summary { min-height: 44px; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
  .billing-more-actions { position: relative; min-width: 0; }
  .billing-more-actions > div { position: absolute; bottom: calc(100% + 14px); right: 0; width: min(310px, calc(100vw - 24px)); padding: 10px; border: 1px solid var(--line); border-radius: var(--layout-card-radius); background: var(--surface); box-shadow: var(--shadow); flex-direction: column; }
  .billing-more-actions:not([open]) > div { display: none; }
  .billing-more-actions > div button { width: 100%; min-height: 44px; }
  .billing-documents-panel > .table-wrap { overflow: visible; }
  .billing-documents-table, .billing-documents-table tbody { display: block; min-width: 0; width: 100%; }
  .billing-documents-table thead { display: none; }
  .billing-documents-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .billing-documents-table tbody td { display: block !important; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .billing-documents-table tbody td::before { display: none !important; }
  .billing-documents-table td:nth-child(3) { grid-column: 1; grid-row: 1; font-weight: 800; }
  .billing-documents-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; }
  .billing-documents-table td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 800; }
  .billing-documents-table td:nth-child(1), .billing-documents-table td:nth-child(2), .billing-documents-table td:nth-child(6) { color: var(--muted); font-size: 0.77rem; }
  .billing-documents-table .action-cell { grid-column: 1 / -1; max-width: none; }
  .billing-documents-table .mini-button { min-height: 36px; }
  #billingEkaerDialog { padding: 0; align-items: stretch; }
  .profile-settings-dialog.billing-ekaer-dialog { width: 100%; max-width: none; height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(24px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
  .billing-ekaer-dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
  .billing-ekaer-auto { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .billing-ekaer-dialog .billing-card-head { top: -12px; }
  .billing-ekaer-dialog .form-actions { position: sticky; bottom: -12px; background: var(--surface); padding: 10px 0; z-index: 2; }
}

.tab-selector,
.billing-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.tab-selector button,
.billing-tabs button {
  border: 0;
  border-radius: 16px;
  padding: 10px 15px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 900;
}

.tab-selector button:hover,
.tab-selector button.is-active,
.billing-tabs button:hover,
.billing-tabs button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: var(--active-shadow);
}

.tab-selector .settings-tab-button {
  color: color-mix(in srgb, var(--settings-tab-color, var(--primary)) 58%, var(--muted));
}

.tab-selector .settings-tab-button:hover,
.tab-selector .settings-tab-button.is-active {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--settings-tab-color, var(--primary)),
    color-mix(in srgb, var(--settings-tab-color, var(--primary-strong)) 70%, var(--primary-strong))
  );
  box-shadow: 0 10px 22px color-mix(in srgb, var(--settings-tab-color, var(--primary)) 20%, transparent);
}

.billing-workspace {
  display: grid;
  grid-template-columns: minmax(430px, 0.95fr) minmax(420px, 1.05fr);
  gap: 16px;
  align-items: start;
}

.accounting-settings-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.accounting-page {
  padding: 0;
}

.accounting-outgoing-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.accounting-outgoing-filters .field { flex: 1 1 180px; min-width: 0; }
.accounting-outgoing-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.accounting-outgoing-group { padding: 12px 0; border-bottom: 1px solid var(--line); }
.accounting-outgoing-group summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; cursor: pointer; }
.accounting-outgoing-group .accounting-transfer-card { margin-top: 8px; }
.accounting-page .accounting-tabs { flex-wrap: wrap; max-width: 100%; }
.accounting-outgoing [data-results] { min-width: 0; }
.accounting-outgoing .ghost-button { min-height: 44px; }
@media (max-width: 767px) {
  .accounting-outgoing-filters { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .accounting-outgoing-toolbar .tab-selector { flex-wrap: wrap; max-width: 100%; }
  .accounting-outgoing-group .accounting-transfer-card { display: block; }
}

.accounting-transfers {
  display: grid;
  gap: 14px;
  min-width: 0;
  color: #142638;
  --transfer-green: #0f7a42;
  --transfer-border: #dce5de;
}

.accounting-transfers .table-wrap {
  max-height: none;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
}

.accounting-transfers-toolbar {
  display: none;
}

.accounting-transfer-month-field {
  min-width: 160px;
}

.accounting-transfer-sync {
  overflow-wrap: anywhere;
  font-size: 0.8rem;
}

.accounting-transfer-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.accounting-transfer-table th:first-child {
  min-width: 170px;
}

.accounting-transfer-row-button {
  border: 0;
  padding: 0;
  color: var(--primary-strong);
  background: none;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.accounting-transfer-row-button:hover,
.accounting-transfer-row-button:focus-visible {
  text-decoration: underline;
}

.accounting-transfer-month,
.accounting-transfer-status {
  display: inline-block;
  margin-left: 8px;
}

.accounting-transfer-amount {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.accounting-transfer-due {
  display: block;
  white-space: nowrap;
}

.accounting-transfer-numbers {
  overflow-wrap: anywhere;
}

.accounting-transfer-detail-row > td {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.accounting-transfer-detail-row .mini-table {
  width: 100%;
}

.accounting-transfer-source-details,
.accounting-transfer-errors {
  margin-top: 8px;
}

.accounting-transfer-source-details summary,
.accounting-transfer-errors summary {
  color: var(--primary-strong);
  font-weight: 700;
  cursor: pointer;
}

.accounting-transfer-errors {
  border-top: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  padding-top: 16px;
}

.accounting-transfer-source {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.accounting-transfer-total th {
  border-top: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.billing-documents-panel.accounting-beppler-panel,
.billing-documents-panel.accounting-connection-panel {
  min-width: 0;
}

.billing-documents-panel.accounting-email-settings-panel {
  border-left: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
}

.billing-documents-panel.accounting-szamlazzhu-settings-panel {
  grid-column: 1 / -1;
}

.accounting-download-grid,
.accounting-settings-grid {
  align-items: start;
}

.accounting-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accounting-settings-grid .inline-check {
  min-height: var(--layout-input-height);
  align-content: center;
}

.accounting-szamlazzhu-settings-panel .muted-cell {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  min-height: var(--layout-input-height);
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--layout-input-radius);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  line-height: 1.4;
}

.accounting-actions {
  justify-content: flex-start;
}

.accounting-source-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.accounting-progress-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 8px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--surface) 92%, white);
}

.accounting-progress-panel.is-busy {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}

.accounting-progress-panel.is-success {
  border-color: color-mix(in srgb, var(--leaf) 42%, var(--line));
  background: color-mix(in srgb, var(--leaf) 10%, var(--surface));
}

.accounting-progress-panel.is-warning {
  border-color: rgba(217, 119, 6, 0.36);
  background: rgba(245, 158, 11, 0.1);
}

.accounting-progress-panel.is-error {
  border-color: rgba(185, 28, 28, 0.34);
  background: rgba(248, 113, 113, 0.1);
}

.accounting-progress-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-top-color: var(--primary);
  border-radius: 999px;
}

.accounting-progress-panel.is-active .accounting-progress-spinner {
  animation: accounting-progress-spin 0.85s linear infinite;
}

.accounting-progress-panel:not(.is-active) .accounting-progress-spinner {
  border-width: 0;
  background: var(--primary);
  box-shadow: inset 0 0 0 5px color-mix(in srgb, white 68%, transparent);
}

.accounting-progress-panel.is-success:not(.is-active) .accounting-progress-spinner {
  background: var(--leaf);
}

.accounting-progress-panel.is-warning:not(.is-active) .accounting-progress-spinner {
  background: #d97706;
}

.accounting-progress-panel.is-error:not(.is-active) .accounting-progress-spinner {
  background: #b91c1c;
}

.accounting-progress-copy {
  min-width: 0;
}

.accounting-progress-copy strong,
.accounting-progress-copy small {
  display: block;
}

.accounting-progress-copy strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.accounting-progress-copy small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

@keyframes accounting-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

.accounting-preview-block {
  margin-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  padding-top: 14px;
}

.accounting-preview-actions {
  margin-bottom: 10px;
}

.accounting-download-actions {
  margin-top: 10px;
}

.accounting-download-result {
  margin-top: 12px;
}

.accounting-download-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.accounting-download-summary strong,
.accounting-download-summary small {
  display: block;
}

.accounting-download-summary strong {
  color: var(--ink);
}

.accounting-download-summary small {
  margin-top: 2px;
  color: var(--muted);
}

.accounting-checklist-block {
  margin-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  padding-top: 14px;
}

.accounting-checklist-block .billing-card-head {
  margin-bottom: 10px;
}

.accounting-checklist-block .billing-card-head small {
  display: block;
  margin-top: 4px;
}

.accounting-checklist-toolbar,
.accounting-checklist-counts,
.accounting-checklist-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.accounting-checklist-toolbar {
  justify-content: space-between;
  margin-bottom: 9px;
}

.accounting-checklist-found-pill {
  color: color-mix(in srgb, var(--leaf) 82%, var(--ink));
  background: color-mix(in srgb, var(--leaf) 11%, var(--surface));
}

.accounting-checklist-missing-pill {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.accounting-checklist-filters {
  margin-bottom: 8px;
}

.accounting-checklist-filters .mini-button {
  min-width: 76px;
}

.accounting-checklist-filters .mini-button.is-active {
  border-color: var(--primary);
  color: #fff;
  background: var(--primary);
}

.accounting-checklist-source-warning {
  margin: 0 0 8px;
  border-left: 3px solid #d97706;
  padding: 7px 9px;
  color: color-mix(in srgb, #d97706 76%, var(--ink));
  background: color-mix(in srgb, #d97706 8%, var(--surface));
  font-size: 0.82rem;
  line-height: 1.4;
}

.accounting-checklist-list {
  max-height: 580px;
  overflow-y: auto;
  border-top: 1px solid color-mix(in srgb, var(--primary) 11%, transparent);
}

.accounting-checklist-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 9%, transparent);
}

.accounting-checklist-row.is-missing {
  box-shadow: inset 3px 0 0 var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.accounting-checklist-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
  opacity: 1;
}

.accounting-checklist-checkbox:disabled {
  opacity: 0.72;
}

.accounting-checklist-copy {
  min-width: 0;
}

.accounting-checklist-copy strong,
.accounting-checklist-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.accounting-checklist-copy strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.accounting-checklist-copy small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}

.accounting-checklist-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--leaf) 24%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
  color: color-mix(in srgb, var(--leaf) 82%, var(--ink));
  background: color-mix(in srgb, var(--leaf) 9%, var(--surface));
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.accounting-checklist-status.is-missing {
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.accounting-checklist-print {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.accounting-checklist-print input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--primary);
}

.accounting-checklist-print:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.accounting-bank-block {
  margin-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  padding-top: 14px;
}

.accounting-bank-block .billing-card-head {
  margin-bottom: 10px;
}

.accounting-bank-block .billing-card-head small {
  display: block;
  margin-top: 4px;
}

.accounting-bank-actions,
.accounting-bank-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.accounting-bank-summary {
  margin-bottom: 9px;
}

.accounting-bank-summary-pill {
  white-space: normal;
}

.accounting-bank-list {
  max-height: 580px;
  overflow-y: auto;
  border-top: 1px solid color-mix(in srgb, var(--primary) 11%, transparent);
}

.accounting-bank-row {
  display: grid;
  grid-template-columns: 90px 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 9%, transparent);
}

.accounting-bank-date,
.accounting-bank-direction {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.accounting-bank-direction.is-incoming,
.accounting-bank-amount.is-incoming {
  color: color-mix(in srgb, var(--leaf) 82%, var(--ink));
}

.accounting-bank-direction.is-outgoing,
.accounting-bank-amount.is-outgoing {
  color: var(--danger);
}

.accounting-bank-copy {
  min-width: 0;
}

.accounting-bank-copy strong,
.accounting-bank-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.accounting-bank-copy strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.accounting-bank-copy small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}

.accounting-bank-amount {
  text-align: right;
  white-space: nowrap;
}

.accounting-preview-list {
  display: grid;
  gap: 12px;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}

.accounting-preview-document {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 11%, transparent);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 92%, white);
}

.accounting-preview-document-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.accounting-preview-document strong,
.accounting-preview-document small {
  display: block;
}

.accounting-preview-document strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.accounting-preview-document small {
  margin-top: 3px;
  color: var(--muted);
}

.accounting-page-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.accounting-page-choice {
  display: grid;
  grid-template-rows: auto minmax(240px, 34vh);
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 11%, transparent);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface);
  cursor: pointer;
}

.accounting-page-choice:hover,
.accounting-page-choice.is-selected {
  border-color: color-mix(in srgb, var(--selection-border) 42%, var(--line));
  background: var(--selection-soft);
}

.accounting-page-choice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-strong);
  font-size: 0.84rem;
  font-weight: 800;
}

.accounting-page-choice input {
  accent-color: var(--primary);
}

.accounting-page-preview-image,
.accounting-page-preview-fallback {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 6px;
  background: #fff;
  pointer-events: none;
}

.accounting-page-preview-image {
  display: block;
  object-fit: contain;
}

.accounting-page-preview-fallback {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 720px) {
  .accounting-page-preview-grid {
    grid-template-columns: 1fr;
  }

  .accounting-download-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .accounting-checklist-block .billing-card-head,
  .accounting-checklist-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .accounting-checklist-block .billing-card-head button,
  .accounting-checklist-toolbar > button {
    width: 100%;
  }

  .accounting-checklist-row {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .accounting-checklist-status {
    grid-column: 2;
    justify-self: start;
  }

  .accounting-checklist-print {
    grid-column: 2;
    justify-self: start;
  }

  .accounting-bank-block .billing-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .accounting-bank-actions > * {
    flex: 1 1 100%;
    width: 100%;
  }

  .accounting-bank-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .accounting-bank-direction {
    justify-self: end;
  }

  .accounting-bank-copy,
  .accounting-bank-amount {
    grid-column: 1 / -1;
  }

  .accounting-bank-amount {
    justify-self: end;
  }
}

.billing-editor-card,
.billing-items-card,
.billing-documents-panel,
.billing-empty-card {
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  border-radius: var(--layout-card-radius);
  padding: var(--layout-card-padding);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--leaf) 12%, transparent), transparent 20rem),
    var(--surface);
  box-shadow: var(--shadow);
}

.billing-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.billing-card-head h3 {
  margin: 2px 0 0;
  letter-spacing: -0.035em;
}

.billing-form {
  margin-top: 14px;
}

.billing-section-title {
  margin-top: 8px;
  color: var(--primary-strong);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.billing-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.billing-summary-grid span {
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 14px;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  font-size: 0.82rem;
  font-weight: 800;
}

.billing-summary-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 1.02rem;
}

.billing-actions {
  padding-top: 4px;
}

.billing-passport-note {
  width: 100%;
  margin: 8px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(209, 170, 35, 0.14);
  border-radius: 12px;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  background: rgba(255, 243, 184, 0.32);
  font-size: 0.84rem;
  font-weight: 800;
}

.billing-all-delivery-button {
  border: 1px solid color-mix(in srgb, var(--color-warning) 62%, #fff3bd);
  color: #513806;
  background: linear-gradient(135deg, #ffeeb0, color-mix(in srgb, var(--color-warning) 72%, #ffd96a));
}

.compact-table table {
  min-width: 680px;
}

.billing-documents-panel .table-wrap {
  max-height: min(68vh, 720px);
}

.billing-doc-row td:nth-child(2) {
  font-weight: 900;
}

.email-shell {
  display: grid;
  gap: 16px;
  padding: 4px;
}

.email-tabs {
  margin: 0;
}

.email-page {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(300px, 0.95fr) minmax(420px, 1.2fr);
  gap: 16px;
  align-items: start;
}

.email-template-page {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(420px, 1.1fr);
  gap: 16px;
  align-items: start;
}

.email-card {
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  border-radius: var(--layout-card-radius);
  padding: var(--layout-card-padding);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--leaf) 12%, transparent), transparent 20rem),
    var(--surface);
  box-shadow: var(--shadow);
}

.email-list-card,
.email-compose-card,
.email-template-editor-card,
.email-template-preview-card {
  min-height: 620px;
}

.email-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.partner-filter-grid {
  grid-template-columns: minmax(160px, 0.8fr) minmax(200px, 1.2fr);
}

.email-filter-grid .span-2 {
  grid-column: span 2;
}

.order-inbox-senders-editor {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: stretch;
  margin-top: 16px;
}

.order-inbox-sender-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--leaf) 16%, transparent), transparent 16rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 248, 235, 0.74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 24px rgba(15, 23, 42, 0.05);
}

.order-inbox-sender-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.order-inbox-sender-panel-head strong {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
}

.order-inbox-sender-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
}

.order-inbox-sender-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 8px 7px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(224, 244, 217, 0.95), rgba(255, 255, 255, 0.92));
  color: var(--primary-strong);
  font-weight: 850;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--primary) 8%, transparent);
}

.order-inbox-sender-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-inbox-sender-chip button {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary-strong);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.order-inbox-sender-chip button:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #b42318;
}

.order-inbox-sender-empty {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--muted);
  font-weight: 750;
}

.order-inbox-sender-add-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.order-inbox-sender-save {
  align-self: end;
  min-height: 48px;
  white-space: nowrap;
}

.email-check-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--layout-input-height);
}

.email-check-field input {
  width: auto;
  min-height: auto;
}

.email-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.email-choice-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.email-choice-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--primary) 11%, transparent);
  border-radius: 14px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.email-choice-row:hover,
.email-choice-row.is-selected {
  border-color: color-mix(in srgb, var(--selection-border) 42%, var(--line));
  background: var(--selection-soft);
  box-shadow: inset 0 0 0 1px var(--selection-ring);
}

.email-choice-row input {
  margin-top: 4px;
  accent-color: var(--primary);
}

.email-choice-row strong {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}

.email-choice-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.email-empty {
  border: 1px dashed color-mix(in srgb, var(--selection-border) 22%, var(--line));
  border-radius: 16px;
  padding: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--selection-border) 5%, var(--surface));
}

.email-template-form textarea {
  min-height: 170px;
  font-family: "Cascadia Code", "Consolas", monospace;
}

.email-template-selector-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(220px, 1.1fr);
  gap: 12px;
  align-items: stretch;
}

.email-template-sender-note {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: var(--layout-input-height);
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--selection-border) 14%, var(--line));
  border-radius: var(--layout-input-radius);
  background: color-mix(in srgb, var(--selection-border) 5%, var(--surface));
}

.email-template-sender-note span,
.email-template-sender-note small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.email-template-sender-note strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.email-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--selection-border) 12%, var(--line));
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--selection-border) 6%, var(--surface));
}

.email-format-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 34px;
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.98rem;
  line-height: 1;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.email-format-button:hover {
  border-color: color-mix(in srgb, var(--selection-border) 42%, var(--line));
  box-shadow: 0 8px 18px var(--selection-ring);
  transform: translateY(-1px);
}

.email-format-button.is-active {
  border-color: color-mix(in srgb, var(--selection-border) 78%, var(--line));
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: #ffffff;
  box-shadow: var(--active-shadow);
}

.email-toolbar-number,
.email-toolbar-color {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(23, 33, 29, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.email-toolbar-number input {
  width: 68px;
  min-height: 26px;
  border: 1px solid rgba(23, 33, 29, 0.12);
  border-radius: 8px;
  padding: 3px 8px;
  color: var(--ink);
  font-weight: 800;
}

.email-toolbar-color input[type="color"] {
  width: 36px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.email-rich-editor {
  min-height: 190px;
  max-height: 380px;
  overflow: auto;
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-top: 0;
  border-radius: 0 0 var(--layout-input-radius) var(--layout-input-radius);
  outline: 0;
  padding: 12px;
  color: var(--ink);
  background: #ffffff;
  font: 0.95rem/1.5 "Segoe UI", "Manrope", sans-serif;
}

.email-rich-editor:focus {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.email-variable-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
  max-height: 120px;
  overflow: auto;
}

.order-inbox-page {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.1fr);
  gap: 16px;
  align-items: start;
}

.order-inbox-settings-card {
  grid-column: 1 / -1;
}

.order-inbox-preview-card {
  min-height: 620px;
}

.order-inbox-list-wrap {
  max-height: 620px;
}

.mini-table-wrap {
  max-height: min(62vh, 620px);
  overflow: auto;
  border: 1px solid rgba(23, 33, 29, 0.1);
  border-radius: 14px;
  background: #ffffff;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.maintenance-sample-table {
  max-height: none;
  overflow: visible;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  font-size: 0.84rem;
}

.mini-table th,
.mini-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(23, 33, 29, 0.08);
  text-align: left;
  vertical-align: top;
}

.mini-table th {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--table-header, #f4f6f1);
  box-shadow: 0 1px 0 rgba(23, 33, 29, 0.1), 0 8px 16px rgba(15, 23, 42, 0.04);
  color: var(--muted);
  font-weight: 900;
}

.market-admin-page,
.shop-page {
  display: grid;
  gap: 18px;
}

.market-admin-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr);
  gap: 18px;
  align-items: start;
}

.market-admin-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.market-catalog-card {
  min-width: 0;
}

.market-catalog-notification-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 24px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--secondary) 25%, transparent), transparent 24rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--primary)), var(--surface));
  box-shadow: 0 18px 48px rgba(15, 47, 35, 0.1);
}

.market-catalog-notification-banner h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: -0.035em;
}

.market-catalog-notification-banner small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.market-catalog-notification-button {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 12px 22px;
  font-size: 1rem;
  white-space: nowrap;
}

body.shop-public-mode {
  background:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--leaf) 18%, transparent), transparent 28rem),
    linear-gradient(135deg, #f8faf4, #eef5ea 48%, #f7f4e9);
}

body.shop-public-mode .app-shell {
  display: block;
  min-height: 100vh;
  padding: 0;
}

body.shop-public-mode .sidebar,
body.shop-public-mode .mobile-nav-button,
body.shop-public-mode .topbar,
body.shop-public-mode .app-status-sink,
body.shop-public-mode #subNavPanel,
body.shop-public-mode #actionPanel,
body.shop-public-mode #tableView .table-panel > .panel-head,
body.shop-public-mode #tableToolbar {
  display: none !important;
}

body.shop-public-mode .content {
  min-height: 100vh;
  padding: clamp(12px, 1.4vw, 22px);
  background: transparent;
}

body.shop-public-mode #tableView,
body.shop-public-mode #tableView .table-panel,
body.shop-public-mode #tableView .table-panel > .table-wrap,
body.shop-public-mode #tableView .full-panel-cell {
  overflow: visible;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.shop-public-mode #tableView .table-panel > .table-wrap > table,
body.shop-public-mode #tableView .table-panel > .table-wrap > table > tbody,
body.shop-public-mode #tableView .table-panel > .table-wrap > table > tbody > tr,
body.shop-public-mode #tableView .table-panel > .table-wrap > table > tbody > tr > td {
  display: block;
  width: 100%;
  min-width: 0;
}

body.shop-public-mode .shop-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

.shop-public-header {
  display: grid;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(15, 47, 35, 0.08);
  backdrop-filter: blur(14px);
}

.shop-public-header.is-customer {
  gap: 10px;
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.shop-public-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.shop-public-brand,
.shop-public-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-public-brand {
  min-width: 0;
}

.shop-public-actions {
  flex-shrink: 0;
}

.shop-weekly-delivery-pill {
  display: inline-grid;
  gap: 2px;
  min-width: 176px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 18px;
  padding: 8px 12px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 9%, #ffffff);
  box-shadow: 0 10px 24px rgba(15, 47, 35, 0.06);
}

.shop-weekly-delivery-pill small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.shop-weekly-delivery-pill strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.shop-weekly-delivery-day {
  display: inline-grid;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--line));
  border-radius: 16px;
  padding: 7px 12px;
  color: color-mix(in srgb, var(--color-warning) 78%, #5a3a00);
  background: linear-gradient(135deg, #fff7cf, #ffedaa);
}

.shop-weekly-delivery-day small {
  color: color-mix(in srgb, var(--color-warning) 68%, #67501f);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.shop-weekly-delivery-day strong {
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.15;
}

.shop-weekly-delivery-day.is-empty {
  border-color: color-mix(in srgb, var(--muted) 24%, var(--line));
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 92%, #ffffff);
}

.profile-settings-dialog.shop-weekly-response-dialog {
  align-self: center;
  width: min(430px, 100%);
  max-height: none;
  overflow: visible;
  padding: 24px;
}

.shop-weekly-response-question {
  display: grid;
  gap: 6px;
  text-align: center;
}

.shop-weekly-response-question p,
.shop-weekly-response-question h3,
.shop-weekly-response-dialog .form-note {
  margin: 0;
}

.shop-weekly-response-question h3 {
  color: var(--ink);
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  letter-spacing: -0.04em;
}

.shop-weekly-response-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-weekly-response-actions button {
  min-height: 50px;
  font-size: 1rem;
}

.shop-weekly-response-dialog .form-note {
  min-height: 1.2em;
  color: var(--muted);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
}

.shop-weekly-response-hint {
  display: block;
  margin-top: -2px;
  color: var(--muted);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
}

.shop-weekly-response-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--line));
  border-radius: 22px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fffaf0, #fff2bd);
}

.shop-weekly-response-banner .shop-weekly-response-question {
  text-align: left;
}

.shop-weekly-response-banner .shop-weekly-response-question h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
}

.shop-weekly-response-banner .shop-weekly-response-question small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.shop-weekly-response-banner .shop-weekly-response-actions {
  grid-template-columns: repeat(2, minmax(92px, 1fr));
}

.shop-weekly-response-banner .form-note {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}

.shop-market-countdown-pill {
  min-width: 205px;
  border-color: color-mix(in srgb, #d9a400 42%, var(--line));
  color: color-mix(in srgb, #765000 88%, var(--primary-strong));
  background: color-mix(in srgb, #ffd968 26%, #ffffff);
}

.shop-market-countdown-pill strong {
  font-variant-numeric: tabular-nums;
}

.shop-market-closed-pill {
  min-width: 205px;
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  color: color-mix(in srgb, var(--danger) 82%, #542410);
  background: color-mix(in srgb, var(--danger) 9%, #fff8ed);
}

.market-shop-settings-divider {
  height: 1px;
  margin: 18px 0;
  background: color-mix(in srgb, var(--primary) 13%, transparent);
}

.market-orders-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* Keep order pages compact without changing their navigation or controls. */
#tableView.is-market-view #subNavPanel,
#tableView.is-orders-view #subNavPanel {
  margin-bottom: 8px;
}

#tableView.is-market-view #subNavPanel .subnav-card,
#tableView.is-orders-view #subNavPanel .subnav-card {
  padding: 0;
}

#tableView.is-market-view .table-panel > .panel-head:has(> #tableCount:empty),
#tableView.is-orders-view .table-panel > .panel-head:has(> #tableCount:empty) {
  display: none;
}

#tableView.is-market-view .market-orders-panel {
  gap: 10px;
}

#tableView.is-market-view .market-orders-panel .market-order-search-row,
#tableView.is-market-view .market-orders-panel .market-order-date-list {
  margin: 0;
}

#tableView.is-market-view .market-orders-panel .market-order-day-group > .empty-state {
  padding: 8px 0;
}

.shop-mode-switch-button {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: var(--active-shadow);
}

.shop-mode-switch-button:hover,
.shop-mode-switch-button:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
}

.shop-preview-mode-tabs {
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  box-shadow: none;
}

.shop-preview-mode-tabs button {
  border-radius: 14px;
  padding: 8px 11px;
}

.shop-public-brand h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.6vw, 2.35rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.shop-public-brand small {
  color: var(--muted);
}

.shop-public-brand-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.shop-public-brand-copy .eyebrow {
  width: fit-content;
  margin: 0 0 2px;
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  letter-spacing: 0.09em;
}

.shop-brand-week-inline {
  color: inherit;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.shop-public-brand .shop-public-brand-logo {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 22px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 47, 35, 0.1);
  overflow: hidden;
}

.shop-public-brand .shop-public-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 15px;
}

.shop-public-brand .shop-public-brand-logo.is-custom-logo {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.shop-public-brand .shop-public-brand-logo.is-custom-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.shop-public-brand .shop-public-brand-logo.is-custom-logo.logo-frame-rounded,
.shop-public-brand .shop-public-brand-logo.is-custom-logo.logo-frame-square,
.shop-public-brand .shop-public-brand-logo.is-custom-logo.logo-frame-circle {
  padding: 7px;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 47, 35, 0.1);
  overflow: hidden;
}

.shop-public-brand .shop-public-brand-logo.is-custom-logo.logo-frame-rounded {
  border-radius: 22px;
}

.shop-public-brand .shop-public-brand-logo.is-custom-logo.logo-frame-square {
  border-radius: 7px;
}

.shop-public-brand .shop-public-brand-logo.is-custom-logo.logo-frame-circle {
  border-radius: 999px;
}

.shop-public-brand .shop-public-brand-logo.is-custom-logo.logo-frame-circle img,
.market-branding-logo.is-custom-logo.logo-frame-circle img {
  border-radius: 999px;
}

.shop-public-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.market-card {
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--leaf) 13%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-soft);
}

.market-order-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.market-notification-page {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
  gap: 18px;
  align-items: start;
}

.market-notification-search {
  display: grid;
  width: 100%;
  margin-top: 14px;
}

.market-notification-recipient-list {
  max-height: 610px;
}

.market-notification-recipient-list .email-choice-row.is-disabled {
  cursor: default;
  opacity: 0.58;
}

.market-notification-compose-card textarea {
  min-height: 210px;
  resize: vertical;
}

.market-notification-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.market-notification-mode-button {
  appearance: none;
  display: grid;
  gap: 4px;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 16px;
  padding: 10px 12px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--surface) 92%, #ffffff);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 47, 35, 0.05);
}

.market-notification-mode-button strong,
.market-notification-mode-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-notification-mode-button strong {
  font-size: 0.9rem;
  font-weight: 950;
}

.market-notification-mode-button span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.market-notification-mode-button.is-active {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--line));
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 18%, transparent);
}

.market-notification-mode-button.is-active span {
  color: rgba(255, 255, 255, 0.82);
}

.market-notification-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.market-notification-preview-head > div {
  display: grid;
  gap: 2px;
}

.market-notification-preview-head span:first-child {
  color: var(--primary-strong);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.market-notification-preview-head small {
  color: var(--muted);
}

.market-notification-email-shell {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 20px;
  padding: clamp(12px, 2vw, 22px);
  background: #eef4ec;
}

.market-notification-email-card {
  max-width: 680px;
  margin: 0 auto;
  border: 1px solid rgba(23, 33, 29, 0.08);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 28px);
  color: #17211d;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(15, 47, 35, 0.08);
  line-height: 1.55;
}

.market-notification-email-subject {
  display: grid;
  gap: 3px;
  margin-bottom: 22px;
  border-bottom: 1px solid #e4e8df;
  padding-bottom: 14px;
}

.market-notification-email-subject small {
  color: #687487;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.market-notification-email-subject strong {
  font-size: 1.08rem;
}

.market-notification-fixed-hint {
  color: #687487;
  font-size: 0.82rem;
}

.market-notification-weekly-notice {
  margin: 18px 0;
  padding: 14px 16px;
  border: 2px solid #d49a00;
  border-radius: 12px;
  background: #fff4c2;
  color: #4b3900;
  font-weight: 800;
  line-height: 1.5;
}

.market-notification-preview-button {
  display: inline-block;
  margin: 8px 0 14px;
  border-radius: 12px;
  padding: 12px 18px;
  color: #ffffff;
  background: #2f7d32;
  font-weight: 800;
  text-decoration: none;
  pointer-events: none;
}

.market-notification-preview-link {
  display: grid;
  gap: 5px;
  border-radius: 12px;
  padding: 11px 12px;
  background: #f5f7f2;
  font-size: 0.84rem;
}

.market-notification-preview-link span {
  color: #687487;
}

.market-notification-preview-link strong {
  overflow-wrap: anywhere;
  color: #245c2d;
  font-weight: 750;
}

.market-notification-preview-signature {
  margin: 22px 0 0;
}

.market-branding-card {
  grid-column: 1 / -1;
}

.market-branding-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 17%, var(--line));
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.market-branding-logo {
  appearance: none;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 19px;
  padding: 6px;
  background: #ffffff;
  overflow: hidden;
  cursor: default;
}

.market-branding-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.market-branding-logo.is-custom-logo {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.market-branding-logo.is-custom-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

button.market-branding-logo.is-custom-logo {
  cursor: pointer;
}

button.market-branding-logo.is-custom-logo:hover,
button.market-branding-logo.is-custom-logo:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 34%, transparent);
  outline-offset: 4px;
}

.market-branding-logo.is-custom-logo.logo-frame-rounded,
.market-branding-logo.is-custom-logo.logo-frame-square,
.market-branding-logo.is-custom-logo.logo-frame-circle {
  padding: 7px;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 47, 35, 0.08);
  overflow: hidden;
}

.market-branding-logo.is-custom-logo.logo-frame-rounded {
  border-radius: 22px;
}

.market-branding-logo.is-custom-logo.logo-frame-square {
  border-radius: 7px;
}

.market-branding-logo.is-custom-logo.logo-frame-circle {
  border-radius: 999px;
}

.market-logo-frame-picker {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.market-logo-frame-picker > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.market-logo-frame-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.market-logo-frame-buttons .mini-button.is-active {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  box-shadow: 0 8px 18px var(--selection-ring);
}

.market-branding-preview > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.market-branding-preview small {
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.market-branding-preview strong {
  color: var(--ink);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.08;
}

.market-branding-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.market-branding-actions small {
  color: var(--muted);
}

.market-logo-crop-dialog {
  width: min(640px, 100%);
}

.market-logo-crop-body {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.market-logo-crop-frame {
  position: relative;
  width: 260px;
  height: 260px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 28px;
  background:
    linear-gradient(45deg, rgba(15, 74, 43, 0.06) 25%, transparent 25% 75%, rgba(15, 74, 43, 0.06) 75%),
    linear-gradient(45deg, rgba(15, 74, 43, 0.06) 25%, transparent 25% 75%, rgba(15, 74, 43, 0.06) 75%),
    #ffffff;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.62), 0 18px 38px rgba(15, 23, 42, 0.11);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.market-logo-crop-frame.is-dragging {
  cursor: grabbing;
}

.market-logo-crop-frame.logo-frame-square {
  border-radius: 8px;
}

.market-logo-crop-frame.logo-frame-rounded {
  border-radius: 28px;
}

.market-logo-crop-frame.logo-frame-circle {
  border-radius: 999px;
}

.market-logo-crop-frame img {
  position: absolute;
  inset: 0 auto auto 0;
  max-width: none;
  max-height: none;
  transform-origin: top left;
  will-change: transform, width, height;
  pointer-events: none;
}

.market-logo-crop-controls {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.market-logo-crop-zoom {
  gap: 10px;
}

.market-logo-crop-zoom span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.market-logo-crop-zoom strong {
  color: var(--primary-strong);
  font-size: 0.9rem;
}

.market-logo-crop-zoom input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

.market-logo-crop-controls small {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .shop-weekly-response-banner {
    grid-template-columns: 1fr;
  }

  .shop-weekly-response-banner .shop-weekly-response-actions {
    width: 100%;
  }

  .market-logo-crop-body {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .market-logo-crop-controls {
    width: 100%;
  }

  .market-logo-crop-frame {
    width: min(260px, calc(100vw - 78px));
    height: min(260px, calc(100vw - 78px));
  }
}

.shop-notification-card {
  padding: 13px 16px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--leaf) 18%, transparent), transparent 22rem),
    rgba(255, 255, 255, 0.88);
}

.shop-notification-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.shop-notification-option input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--primary);
}

.shop-notification-option strong,
.shop-notification-option small {
  display: block;
}

.shop-notification-option strong {
  color: var(--primary-strong);
}

.shop-notification-option small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.4;
}

.market-editor-card {
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
}

.market-editor-card .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.market-editor-card .form-grid > .span-2,
.market-editor-card .field.span-2,
.market-editor-card .market-product-media-row {
  grid-column: 1 / -1;
}

.market-editor-card .market-product-source-picker {
  grid-column: 1 / -1;
}

.market-editor-card .market-product-date-field {
  grid-column: 1 / -1;
}

.market-source-picker {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(220px, 0.85fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.market-editor-card .field,
.market-editor-card .market-image-field,
.market-editor-card .market-product-date-field {
  min-width: 0;
}

.market-editor-card .market-source-picker {
  grid-template-columns: minmax(0, 1fr);
}

.market-editor-card .order-form input,
.market-editor-card .order-form select,
.market-editor-card .order-form textarea,
.market-editor-card .shop-date-button {
  min-height: 40px;
}

.market-editor-card .order-form textarea {
  min-height: 84px;
}

.market-editor-card .inline-check {
  grid-template-columns: 26px minmax(0, 1fr);
  min-height: 46px;
  border: 1px solid rgba(23, 33, 29, 0.13);
  border-radius: var(--layout-input-radius);
  padding: 8px 11px;
  background: color-mix(in srgb, var(--color-input-background) 92%, transparent);
}

.market-source-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr)) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), color-mix(in srgb, var(--leaf) 8%, transparent));
}

.market-editor-card .market-source-info {
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 7px;
  padding: 9px;
  border-radius: 14px;
}

.market-source-info-multi {
  grid-template-columns: repeat(4, minmax(90px, 1fr));
}

.market-editor-card .market-source-info-multi {
  grid-template-columns: repeat(2, minmax(80px, 1fr));
}

.market-source-info.is-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.market-source-info span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.market-source-info strong {
  color: var(--ink);
}

.market-source-change-button {
  justify-self: end;
  white-space: nowrap;
}

.market-source-multi-select {
  min-height: 132px;
  padding: 8px;
}

.market-editor-card .market-source-multi-select {
  min-height: 116px;
}

.market-source-multi-select option {
  padding: 7px 8px;
  white-space: normal;
}

.market-source-chip-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.market-editor-card .market-source-chip-list {
  max-height: 58px;
  overflow: auto;
}

.market-source-info .market-source-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--primary-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.market-image-field {
  display: grid;
  gap: 8px;
}

.market-product-media-row {
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(280px, 1.18fr);
  gap: 10px;
  align-items: stretch;
}

.market-image-dropzone {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 84px;
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.market-image-dropzone:hover,
.market-image-dropzone.is-drag-over {
  border-color: color-mix(in srgb, var(--primary) 76%, transparent);
  background: rgba(223, 241, 215, 0.52);
  box-shadow: 0 14px 34px rgba(15, 47, 35, 0.11);
  transform: translateY(-1px);
}

.market-image-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 70px;
  height: 70px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(223, 241, 215, 0.94), rgba(217, 236, 229, 0.82));
  color: var(--primary-strong);
  font-weight: 900;
}

.market-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.market-image-dropzone small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.market-image-preview-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 6px;
  overscroll-behavior-inline: contain;
}

.market-image-preview-item {
  display: grid;
  flex: 0 0 82px;
  justify-items: center;
  gap: 5px;
}

.market-image-preview-item .market-image-preview {
  width: 76px;
  height: 76px;
}

.market-image-preview-item .mini-button {
  min-height: 30px;
  padding: 4px 8px;
}

.market-product-list {
  display: grid;
  gap: 7px;
}

.market-product-row {
  display: grid;
  grid-template-columns: 44px minmax(220px, 1fr) minmax(118px, auto) auto;
  gap: 8px;
  align-items: center;
  min-height: 62px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.78);
}

.market-product-row.is-inline-editing {
  grid-template-columns: 44px minmax(220px, 1fr) minmax(260px, 0.7fr) auto;
  align-items: center;
}

.market-product-row.is-muted {
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.market-product-row.is-muted .market-product-thumb,
.market-product-row.is-muted .market-product-main,
.market-product-row.is-muted .market-product-price {
  opacity: 0.62;
}

.market-product-thumb,
.shop-product-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(223, 241, 215, 0.9), rgba(217, 236, 229, 0.72));
  color: var(--primary-strong);
  font-weight: 900;
}

.market-product-thumb {
  width: 44px;
  height: 44px;
  align-self: start;
  font-size: 0.72rem;
}

.market-product-thumb img,
.shop-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.market-product-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.market-product-main strong {
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-product-title-line small {
  color: var(--primary-strong);
  font-size: 0.92em;
  font-weight: 900;
}

.market-product-main p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.market-product-main small,
.shop-product-body small,
.shop-cart-row small {
  color: var(--muted);
}

.market-product-meta,
.market-product-availability {
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-product-source-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.market-product-source-summary span {
  max-width: 220px;
  overflow: hidden;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary-strong);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-product-price,
.shop-cart-total {
  color: var(--primary-strong);
  font-weight: 900;
}

.market-product-price,
.shop-product-price-pair,
.shop-cart-total {
  display: grid;
  gap: 2px;
}

.market-product-price > *,
.shop-product-price-pair > *,
.shop-cart-total > * {
  white-space: nowrap;
}

.market-product-price {
  justify-items: end;
  text-align: right;
  font-size: 0.86rem;
}

.market-product-price small,
.shop-product-price-pair span,
.shop-cart-total small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.market-product-row .action-cell {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.market-product-row .mini-button {
  min-height: 36px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.76rem;
}

.market-product-row:has(.market-product-more[open]) {
  position: relative;
  z-index: 8;
}

.market-product-row .market-product-more > summary {
  box-sizing: border-box;
  width: 36px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  font-size: 1.2rem;
}

.market-product-row .market-order-more-list .mini-button {
  min-height: 32px;
  text-align: left;
}

.market-product-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 7px;
  min-width: 0;
}

.market-product-inline-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.market-product-inline-summary .market-product-title-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-product-inline-field,
.market-product-inline-check {
  min-width: 0;
}

.market-product-inline-field.is-wide {
  grid-column: span 2;
}

.market-product-inline-field input,
.market-product-inline-field select,
.market-product-inline-field textarea {
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 0.78rem;
}

.market-product-inline-field textarea {
  resize: vertical;
}

.market-product-inline-check {
  align-self: end;
  min-height: 30px;
  padding: 5px 8px;
}

.market-product-inline-actions {
  align-self: start;
}

.market-product-inline-actions .primary-button {
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 11px;
  font-size: 0.78rem;
}

.shop-product-price-pair strong {
  color: var(--primary-strong);
  font-weight: 900;
}

.shop-cart-total {
  justify-items: end;
  text-align: right;
}

.market-debt-page {
  gap: 16px;
}

.market-debt-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.86fr) minmax(420px, 1.14fr);
  gap: 16px;
  align-items: start;
}

.market-debt-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.market-debt-person-field,
.market-debt-touch-section,
.market-debt-actions,
.market-debt-form .span-2 {
  grid-column: 1 / -1;
}

.market-debt-quantity-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.market-debt-form input,
.market-debt-form .select-combo input,
.market-debt-form .shop-date-button {
  min-height: var(--layout-input-height);
  font-size: var(--font-input-size);
}

.market-debt-entry-card:has(.shop-date-calendar:not([hidden])) {
  position: relative;
  z-index: 2100;
  overflow: visible;
}

.market-debt-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.market-debt-choice-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.market-debt-direction-row,
.market-debt-lock-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventory-movement-unit-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#inventoryMovementForm .market-debt-direction-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 650px) {
  #inventoryMovementForm .market-debt-direction-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inventory-movement-unit-row .market-debt-choice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#inventoryMovementForm + .form-actions {
  margin-top: 16px;
}

.market-debt-choice {
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 47, 35, 0.06);
}

.market-debt-choice.is-active {
  border-color: color-mix(in srgb, var(--selection-border) 72%, var(--line));
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  color: #fff;
  box-shadow: 0 14px 34px var(--selection-ring);
}

.market-debt-lock-row .market-debt-choice[data-market-debt-lock="Zöld"].is-active {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
}

.market-debt-lock-row .market-debt-choice[data-market-debt-lock="Sárga"].is-active {
  background: linear-gradient(135deg, #d99a00, #96640a);
}

.market-debt-lock-section.is-hidden {
  display: none;
}

.market-debt-save-button {
  width: 100%;
  min-height: 58px;
  font-size: 1.05rem;
}

.market-debt-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.market-debt-balance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 84px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
}

.market-debt-balance-card strong,
.market-debt-entry-main strong {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
}

.market-debt-balance-card small,
.market-debt-entry-main span,
.market-debt-entry-main small,
.market-debt-entry-side small {
  color: var(--muted);
  font-weight: 800;
}

.market-debt-balance-card > span {
  color: var(--primary-strong);
  font-size: 1.28rem;
  font-weight: 950;
  white-space: nowrap;
}

.market-debt-balance-card.is-owed,
.market-debt-balance-card.is-positive {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.market-debt-balance-card.is-owed > span,
.market-debt-balance-card.is-positive > span {
  color: var(--danger);
}

.market-debt-balance-card.is-returned,
.market-debt-balance-card.is-negative {
  border-color: color-mix(in srgb, var(--color-success) 28%, var(--line));
  background: color-mix(in srgb, var(--color-success) 6%, var(--surface));
}

.market-debt-balance-card.is-returned > span,
.market-debt-balance-card.is-negative > span {
  color: var(--color-success);
}

.market-debt-summary-table-wrap {
  width: 100%;
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-strong));
}

.market-debt-summary-table {
  width: 100%;
  min-width: 660px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}

.market-debt-summary-table th,
.market-debt-summary-table td {
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  white-space: nowrap;
}

.market-debt-summary-table tbody tr:last-child th,
.market-debt-summary-table tbody tr:last-child td {
  border-bottom: 0;
}

.market-debt-summary-table thead th {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-strong));
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.market-debt-summary-table thead tr + tr th {
  background: color-mix(in srgb, var(--primary) 3%, var(--surface-strong));
}

.market-debt-summary-person-head,
.market-debt-summary-person {
  position: sticky;
  left: 0;
  min-width: 180px;
  text-align: left !important;
}

.market-debt-summary-person-head {
  z-index: 3;
}

.market-debt-summary-person {
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-strong));
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 950;
}

.market-debt-summary-table tbody tr:hover .market-debt-summary-person,
.market-debt-summary-table tbody tr:hover .market-debt-summary-cell {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.market-debt-summary-cell {
  min-width: 104px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 850;
  text-align: right;
}

.market-debt-summary-cell > span {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 72px;
  font-weight: 950;
}

.market-debt-summary-cell.is-empty {
  color: color-mix(in srgb, var(--muted) 48%, transparent);
  text-align: center;
}

.market-debt-summary-cell.is-owed {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.market-debt-summary-cell.is-owed > span {
  color: var(--danger);
}

.market-debt-summary-cell.is-returned {
  background: color-mix(in srgb, var(--color-success) 6%, var(--surface));
}

.market-debt-summary-cell.is-returned > span {
  color: var(--color-success);
}

.market-debt-entry-list {
  display: grid;
  gap: 9px;
}

.market-debt-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.market-debt-entry-main,
.market-debt-entry-side {
  display: grid;
  gap: 3px;
}

.market-debt-entry-side {
  justify-items: end;
}

.market-debt-entry-side strong {
  color: var(--primary-strong);
  font-size: 1.05rem;
  white-space: nowrap;
}

.market-debt-entry-row.is-debt-out .market-debt-entry-side strong {
  color: var(--danger);
}

.market-debt-entry-row.is-debt-returned .market-debt-entry-side strong {
  color: var(--color-success);
}

@media (max-width: 1100px) {
  .market-debt-layout {
    grid-template-columns: 1fr;
  }

  .market-debt-form {
    grid-template-columns: 1fr;
  }

  .market-debt-choice-row,
  .market-debt-direction-row,
  .market-debt-lock-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-debt-entry-row {
    grid-template-columns: 1fr;
  }

  .market-debt-entry-side {
    justify-items: start;
  }
}

@media (max-width: 680px) {
  .market-debt-summary-table-wrap {
    margin-top: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .market-debt-summary-table {
    display: block;
    min-width: 0;
    font-size: 0.9rem;
  }

  .market-debt-summary-table thead {
    display: none;
  }

  .market-debt-summary-table tbody {
    display: grid;
    gap: 10px;
  }

  .market-debt-summary-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 96%, var(--surface-strong));
    box-shadow: var(--shadow-soft);
  }

  .market-debt-summary-table th,
  .market-debt-summary-table td,
  .market-debt-summary-table tbody tr:last-child th,
  .market-debt-summary-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .market-debt-summary-person,
  .market-debt-summary-cell {
    position: static;
    min-width: 0;
    width: auto;
    padding: 0;
    white-space: normal;
  }

  .market-debt-summary-person {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 9%, var(--line));
    background: transparent;
    font-size: 0.98rem;
    line-height: 1.25;
  }

  .market-debt-summary-table tbody tr:hover .market-debt-summary-person {
    background: transparent;
  }

  .market-debt-summary-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-strong) 72%, var(--surface));
    text-align: left;
  }

  .market-debt-summary-cell::before {
    content: attr(data-short-label);
    min-width: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: uppercase;
  }

  .market-debt-summary-cell > span {
    min-width: 0;
    justify-content: flex-end;
    color: var(--ink);
    font-size: 0.96rem;
    white-space: nowrap;
  }

  .market-debt-summary-cell.is-empty {
    display: none;
  }

  .market-debt-summary-cell.is-owed {
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  }

  .market-debt-summary-cell.is-returned {
    background: color-mix(in srgb, var(--color-success) 7%, var(--surface));
  }
}

@media (max-width: 380px) {
  .market-debt-summary-table tbody tr {
    grid-template-columns: 1fr;
  }
}

.market-invite-link {
  min-width: min(100%, 560px);
}

.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
  gap: 18px;
  align-items: start;
}

.shop-catalog-card,
.shop-side,
.shop-cart-card {
  min-width: 0;
}

.shop-catalog-unframed {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shop-catalog-card .billing-card-head .eyebrow,
.shop-cart-card .billing-card-head .eyebrow {
  color: var(--primary-strong);
  font-size: 0.9rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.shop-catalog-card .billing-card-head h3,
.shop-cart-card .billing-card-head h3 {
  color: var(--primary-strong);
  font-size: clamp(1.32rem, 1.8vw, 1.78rem);
  font-weight: 950;
  letter-spacing: -0.045em;
}

.shop-catalog-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin: 2px 0 16px;
}

.shop-catalog-search {
  flex: 1 1 360px;
  width: auto;
}

.shop-catalog-toolbar .pill {
  margin-left: auto;
  white-space: nowrap;
}

.shop-side {
  display: grid;
  gap: 18px;
  position: static;
}

.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.shop-product-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  border-radius: 24px;
  background: rgba(255, 253, 247, 0.9);
  box-shadow: 0 16px 42px rgba(15, 47, 35, 0.08);
}

.shop-product-image {
  height: 150px;
  border-radius: 0;
  font-size: 1.8rem;
}

.shop-product-image-button {
  width: 100%;
  border: 0;
  padding: 0;
  appearance: none;
  cursor: zoom-in;
}

.shop-product-image-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 52%, transparent);
  outline-offset: -4px;
}

.shop-product-gallery {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: color-mix(in srgb, var(--primary) 42%, transparent) transparent;
  scrollbar-width: thin;
}

.shop-product-gallery .shop-product-image {
  flex: 0 0 100%;
}

.shop-product-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.shop-product-body h3,
.shop-product-body p {
  margin: 0;
}

.shop-product-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px;
  color: var(--primary-strong);
  font-size: 1.1rem;
  font-weight: 950;
  line-height: 1.18;
}

.shop-product-title small {
  color: var(--primary);
  font-size: 1em;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.shop-product-description {
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 9%, var(--color-input-background));
  color: var(--primary-strong);
  line-height: 1.4;
}

.shop-product-meta,
.shop-product-actions,
.shop-cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shop-product-meta {
  flex-wrap: wrap;
}

.shop-product-meta small {
  flex: 1 0 100%;
  color: var(--muted);
}

.shop-product-meta .shop-product-available-from {
  display: inline-flex;
  flex: 0 1 auto;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--primary-strong);
  background: var(--selection-soft);
  font-size: 0.72rem;
  font-weight: 900;
}

.shop-product-meta .shop-product-available-from.is-upcoming {
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--line));
  color: color-mix(in srgb, var(--color-warning) 72%, var(--ink));
  background: color-mix(in srgb, var(--color-warning) 11%, var(--surface));
}

.shop-product-card.is-upcoming .shop-product-actions input:disabled,
.shop-product-card.is-upcoming .shop-product-note-field input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.shop-product-card.is-unavailable {
  filter: grayscale(1);
  opacity: 0.62;
}

.shop-product-actions input {
  width: 82px;
  min-height: var(--layout-input-height);
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  padding: 8px 10px;
  background: var(--color-input-background);
}

.shop-product-note-field {
  display: grid;
  gap: 5px;
}

.shop-product-note-field span {
  color: var(--primary-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shop-product-note-field input {
  width: 100%;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: var(--layout-input-radius);
  padding: 8px 10px;
  color: var(--ink);
  background: var(--color-input-background);
}

.shop-cart-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.shop-cart-row {
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}

.shop-cart-row span {
  flex: 1;
}

.shop-cart-item-note {
  flex: 1 0 100%;
  color: var(--primary-strong);
  font-weight: 800;
}

.shop-order-edit-note {
  flex: 1 0 100%;
  min-width: 0;
}

[data-shop-order-edit-lines] .shop-cart-row > .field {
  flex: 0 0 88px;
  min-width: 0;
}

[data-shop-order-edit-lines] .shop-cart-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shop-cart-card .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shop-cart-card .shop-date-field,
.shop-cart-card .shop-week-field {
  grid-column: 1 / -1;
}

.shop-cart-card .field.span-2 {
  grid-column: 1 / -1;
}

.shop-cart-card .form-actions {
  align-items: center;
  flex-wrap: wrap;
}

.shop-cart-card #shopOrderNotes {
  min-width: 0;
}

.shop-image-viewer-backdrop {
  padding: 14px;
}

.shop-image-viewer-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: hidden;
  padding: 14px;
}

.shop-image-viewer-head {
  margin-bottom: 12px;
}

.shop-image-viewer-body {
  display: grid;
  place-items: center;
  min-height: 0;
}

.shop-image-viewer-body img {
  display: block;
  max-width: 100%;
  max-height: min(76vh, 780px);
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.95);
}

.shop-date-field {
  position: relative;
}

.shop-date-picker {
  position: relative;
}

.market-phone-date-field {
  gap: 8px;
}

.market-product-crate-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.market-product-crate-control input[readonly] {
  background: color-mix(in srgb, var(--primary) 4%, var(--color-input-background));
  cursor: default;
}

.shop-date-picker:has(.shop-date-calendar:not([hidden])) {
  z-index: 2200;
}

.shop-date-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: var(--layout-input-radius);
  padding: 8px 11px;
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-input-background) 94%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.shop-date-button:hover,
.shop-date-button:focus-visible,
.shop-date-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.shop-date-button span {
  color: var(--ink);
  font-size: var(--font-input-size);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
}

.shop-date-button small {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.shop-date-button:not(.has-value) span {
  color: var(--muted);
}

.shop-date-calendar {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  margin-top: 0;
  z-index: 2200;
  width: min(380px, 100%);
  min-width: min(320px, 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 20px;
  padding: 12px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 10rem),
    color-mix(in srgb, var(--surface) 96%, #f6fbf2);
  box-shadow: 0 24px 60px rgba(15, 47, 35, 0.18);
}

.shop-page.is-date-calendar-open .shop-side,
.shop-page.is-date-calendar-open .shop-cart-card,
.market-special-days-card:has(.shop-date-calendar:not([hidden])),
.market-editor-card:has(.shop-date-calendar:not([hidden])) {
  position: relative;
  z-index: 2100;
  overflow: visible;
}

.shop-page.is-date-calendar-open .shop-orders-details {
  position: relative;
  z-index: 1;
}

.shop-page.is-date-calendar-open .shop-orders-details .mini-table th {
  z-index: 1;
}

.shop-date-calendar[hidden] {
  display: none;
}

.shop-calendar-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.shop-calendar-head strong {
  color: var(--ink);
  font-size: 1rem;
  text-align: center;
  text-transform: capitalize;
}

.shop-calendar-nav {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 12px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
}

.shop-calendar-nav:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.shop-calendar-weekdays,
.shop-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.shop-calendar-weekdays {
  margin-bottom: 6px;
}

.shop-calendar-weekdays span {
  display: grid;
  place-items: center;
  min-height: 24px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-calendar-day {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 45px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 13px;
  padding: 4px 2px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, var(--color-surface-muted));
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.shop-calendar-day span {
  color: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: normal;
  text-transform: none;
}

.shop-calendar-day small {
  margin-top: 1px;
  color: color-mix(in srgb, var(--primary-strong) 86%, var(--muted));
  font-size: 0.55rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.shop-calendar-day.is-market-day:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  box-shadow: 0 10px 20px rgba(15, 47, 35, 0.12);
}

.shop-calendar-day.is-special-day:not(.is-selected) {
  border-color: color-mix(in srgb, var(--color-warning) 42%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 16%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 90%, #fff7de);
}

.shop-calendar-day.is-special-day:not(.is-selected) small {
  color: color-mix(in srgb, var(--color-warning) 82%, var(--ink));
}

.shop-calendar-day.is-selected {
  border-color: var(--primary);
  color: #ffffff;
  background: linear-gradient(160deg, var(--primary), var(--primary-strong));
  box-shadow: 0 12px 26px var(--selection-ring);
}

.shop-calendar-day.is-selected small {
  color: rgba(255, 255, 255, 0.82);
}

.shop-calendar-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.shop-calendar-day.is-outside-month {
  opacity: 0.58;
}

.shop-calendar-day.is-disabled-day,
.shop-calendar-day:disabled {
  border-color: rgba(104, 132, 112, 0.18);
  color: color-mix(in srgb, #6f8a76 72%, #ffffff);
  background:
    repeating-linear-gradient(135deg, rgba(104, 132, 112, 0.075) 0 6px, transparent 6px 12px),
    color-mix(in srgb, var(--surface) 80%, #dbe5d8);
  box-shadow: none;
  cursor: not-allowed;
}

.shop-calendar-day.is-disabled-day small,
.shop-calendar-day:disabled small {
  color: color-mix(in srgb, #5f7f68 82%, #ffffff);
}

.shop-calendar-hint {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.muted-text {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.market-product-date-field,
.market-special-days-card .shop-date-field {
  grid-column: span 2;
}

.market-date-clear-button {
  justify-self: start;
}

.market-product-availability {
  color: var(--primary-strong);
  font-weight: 900;
}

.market-product-row.is-muted .market-product-availability {
  color: var(--muted);
}

.market-product-availability-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 32px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 12px;
  padding: 4px 8px;
  color: var(--primary-strong);
  background: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.market-product-availability-toggle:has(input:checked) {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.market-product-availability-toggle input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 16px;
  box-sizing: border-box;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--primary);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.market-product-availability-toggle input:checked {
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.market-product-availability-toggle input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.shop-orders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-weight: 900;
}

.shop-orders-head h3 {
  margin: 0;
  font-size: 1rem;
}

.shop-tabs {
  width: 100%;
  margin: 2px 0 16px;
}

.shop-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.shop-tabs button span {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: 0.74rem;
  line-height: 1;
  text-align: center;
}

.shop-tabs button.is-active span {
  color: var(--primary-strong);
  background: rgba(255, 255, 255, 0.86);
}

.shop-orders-details {
  max-width: 100%;
  overflow: visible;
}

.shop-orders-details .mini-table-wrap {
  width: 100%;
  margin-top: 12px;
  max-height: min(58vh, 520px);
  overflow: auto;
}

.shop-orders-details .mini-table {
  min-width: min(920px, 100%);
}

.shop-orders-details .mini-table td:nth-child(4) {
  max-width: 42vw;
  white-space: normal;
  overflow-wrap: anywhere;
}

.shop-invoices-panel {
  display: grid;
  gap: 16px;
}

.shop-invoice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

.shop-invoice-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--leaf) 10%, transparent), transparent 12rem),
    rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(15, 47, 35, 0.07);
}

.shop-invoice-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.shop-invoice-card-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shop-invoice-card-head small,
.shop-invoice-meta dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.shop-invoice-card-head strong {
  color: var(--ink);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.shop-invoice-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.shop-invoice-meta div {
  display: grid;
  gap: 4px;
}

.shop-invoice-meta dd {
  margin: 0;
  color: var(--primary-strong);
  font-weight: 900;
}

.shop-invoice-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  text-decoration: none;
}

.market-order-date-list {
  display: grid;
  gap: 18px;
  margin-top: 14px;
}

.market-order-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(246, 251, 241, 0.9), rgba(255, 253, 247, 0.86));
}

.market-order-search-field {
  width: min(560px, 100%);
}

.market-order-search-actions {
  display: flex;
  flex: 1 1 260px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.market-orders-export-button {
  min-height: 36px;
  padding: 8px 14px;
  white-space: nowrap;
}

.market-orders-tool-button {
  min-height: 36px;
  padding: 8px 14px;
  border-color: color-mix(in srgb, var(--color-warning) 62%, #fff3bd);
  color: #513806;
  background: linear-gradient(135deg, #ffeeb0, color-mix(in srgb, var(--color-warning) 72%, #ffd96a));
  box-shadow: none;
  white-space: nowrap;
}

.market-orders-tool-button:hover:not(:disabled),
.market-orders-tool-button:focus-visible,
.market-orders-tool-button.is-active {
  border-color: color-mix(in srgb, var(--color-warning) 82%, #bd7f00);
  color: #3d2900;
  background: linear-gradient(135deg, #ffd968, color-mix(in srgb, var(--color-warning) 88%, #f4b740));
}

.market-orders-new-invoice-button {
  border-color: color-mix(in srgb, var(--danger) 58%, #ffd7d3);
  color: #fff;
  background: linear-gradient(135deg, #d94b42, #a92f29);
}

.market-orders-new-invoice-button:hover:not(:disabled),
.market-orders-new-invoice-button:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 82%, #7f211d);
  color: #fff;
  background: linear-gradient(135deg, #c33d35, #8f251f);
}

.market-order-dialog-backdrop {
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--color-sidebar) 26%, transparent);
  backdrop-filter: blur(2px);
}

.profile-settings-dialog.market-order-compact-dialog {
  align-content: start;
  grid-auto-rows: min-content;
  width: min(430px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  gap: 14px;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
}

.profile-settings-dialog.market-order-compact-dialog .form-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0;
}

.profile-settings-dialog.market-order-compact-dialog .field.span-2 {
  grid-column: 1 / -1 !important;
}

.profile-settings-dialog.market-order-compact-dialog .field,
.profile-settings-dialog.market-order-compact-dialog .market-debt-choice-row,
.profile-settings-dialog.market-order-compact-dialog .market-debt-choice {
  min-width: 0;
}

.profile-settings-dialog.market-order-compact-dialog .market-debt-choice-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-settings-dialog.market-order-compact-dialog .market-debt-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 8px 9px;
  font-size: 0.88rem;
  line-height: 1.1;
  text-align: center;
}

.profile-settings-dialog.market-order-compact-dialog .market-debt-choice input[type="radio"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
}

.profile-settings-dialog.market-order-summary-dialog {
  width: min(600px, calc(100vw - 32px));
}

.profile-settings-dialog.market-billing-catalog-dialog {
  align-content: start;
  grid-auto-rows: min-content;
  width: min(1120px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  gap: 14px;
  border-radius: 18px;
  padding: 16px;
}

.market-billing-catalog-dialog-body .billing-editor-card {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.market-billing-catalog-dialog-body .billing-card-head {
  display: none;
}

.profile-settings-head.market-order-dialog-head {
  align-items: flex-start;
  flex-direction: row;
  gap: 10px;
}

.market-order-dialog-head h3 {
  margin: 0;
  font-size: 1.14rem;
  line-height: 1.18;
  letter-spacing: 0;
}

.market-order-dialog-head .topbar-icon-button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.market-order-dialog-day-list {
  display: grid;
  align-content: start;
  grid-auto-rows: min-content;
  gap: 8px;
}

.market-order-dialog-day-button {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: start;
  gap: 14px;
  width: 100%;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-strong) 64%, #ffffff);
  text-align: left;
  cursor: pointer;
}

.market-order-dialog-day-button:hover,
.market-order-dialog-day-button:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 9%, #ffffff);
  outline: 0;
}

.market-order-dialog-day-button span {
  min-width: 0;
  color: var(--primary-strong);
  font-weight: 900;
}

.market-order-dialog-day-button strong {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.market-order-summary-list {
  display: grid;
  gap: 8px;
  max-height: min(62vh, 520px);
  max-height: min(62dvh, 520px);
  overflow: auto;
  width: 100%;
  min-width: 0;
  font-size: 0.9rem;
}

.market-order-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-strong));
  box-shadow: var(--shadow-soft);
}

.market-order-summary-pot-separator {
  color: color-mix(in srgb, var(--primary-strong) 66%, var(--muted));
}

.market-order-summary-pot {
  color: var(--primary-strong);
  white-space: nowrap;
}

.market-order-summary-plant {
  min-width: 0;
  line-height: 1.18;
}

.market-order-summary-plant::before {
  display: none;
}

.market-order-summary-plant strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--primary-strong);
  text-overflow: ellipsis;
  font-weight: 950;
  white-space: nowrap;
}

.market-order-summary-metrics {
  display: contents;
}

.market-order-summary-cell {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  white-space: normal;
}

.market-order-summary-cell::before {
  content: attr(data-short-label);
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.market-order-summary-cell > span {
  min-width: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.1;
}

.market-order-summary-cell.number {
  color: var(--ink);
  font-weight: 950;
  text-align: left;
  white-space: normal;
}

@media (max-width: 680px) {
  .market-order-summary-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px;
  }

  .market-order-summary-plant {
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  }

  .market-order-summary-plant::before {
    content: "Növény";
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
  }

  .market-order-summary-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .market-order-summary-cell {
    display: grid;
    gap: 2px;
  }
}

.market-order-summary-cell.number > span {
  white-space: nowrap;
}

.market-order-day-group {
  display: grid;
  gap: 12px;
}

.market-order-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(120deg, var(--primary-strong), color-mix(in srgb, var(--primary) 76%, #102515));
  box-shadow: 0 18px 40px rgba(19, 74, 36, 0.16);
  color: #fff;
}

.market-order-day-head h4 {
  margin: 0;
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  line-height: 1.1;
}

.market-order-day-head .eyebrow {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 4px;
}

.market-order-day-head .pill {
  color: #0d3b1e;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.46);
}

.market-order-day-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.market-order-day-summary-button {
  min-height: 34px;
  border-color: rgba(255, 255, 255, 0.45);
  color: #0d3b1e;
  background: rgba(255, 255, 255, 0.86);
  font-weight: 950;
  white-space: nowrap;
}

.market-order-day-summary-button:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

.market-orders-panel:has(.is-market-inbox-head) #marketOrderResultCount,
.market-orders-panel:has(.is-market-inbox-head) #marketOrdersPreparationModeButton,
.market-orders-panel:has(.is-market-inbox-head) #marketOrdersNewInvoiceButton,
.market-orders-panel:has(.is-market-inbox-head) #marketOrdersPrintButton,
.market-orders-panel:has(.is-market-inbox-head) .market-order-search-actions {
  display: none !important;
}

.market-order-day-head.is-market-inbox-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  min-height: 84px;
  padding: 16px 20px;
  border-radius: 18px;
}

.market-order-day-head.is-market-inbox-head:has(.market-order-day-more[open]) {
  position: relative;
  z-index: 4;
}

.market-order-day-head.is-market-inbox-head h4 {
  font-size: clamp(1.12rem, 1.5vw, 1.45rem);
}

.market-order-day-actions.is-market-inbox-actions {
  flex-wrap: wrap;
  gap: 10px;
}

.market-order-day-actions.is-market-inbox-actions > .pill {
  min-height: 36px;
  padding: 8px 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.market-order-day-preparation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.83rem;
  font-weight: 850;
  white-space: nowrap;
}

.market-order-day-switch {
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 28px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.market-order-day-switch > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: transform 150ms ease;
}

.market-order-day-switch[aria-checked="true"] {
  background: #0c9b55;
}

.market-order-day-switch[aria-checked="true"] > span {
  transform: translateX(18px);
}

.market-order-day-new-invoice,
.market-order-day-more-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.market-order-day-new-invoice {
  color: #fff;
  background: linear-gradient(135deg, #078c4c, #087942);
}

.market-order-day-new-invoice:hover {
  background: linear-gradient(135deg, #0aa55b, #07854a);
}

.market-order-day-new-invoice > span {
  font-size: 1.3rem;
  font-weight: 500;
}

.market-order-day-more {
  position: relative;
}

.market-order-day-more-trigger {
  color: var(--primary-strong);
  background: #fff;
  list-style: none;
}

.market-order-day-more-trigger::-webkit-details-marker {
  display: none;
}

.market-order-day-more-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 6px;
  min-width: 170px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.market-order-day-more-list .mini-button {
  width: 100%;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 12px;
  justify-content: flex-start;
  color: var(--primary-strong);
  background: var(--surface);
}

.market-order-day-more-list .mini-button:hover,
.market-order-day-more-list .mini-button:focus-visible {
  color: var(--primary-strong);
  background: var(--selection-soft);
}

.market-order-day-switch:focus-visible,
.market-order-day-new-invoice:focus-visible,
.market-order-day-more-trigger:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.market-order-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 420px));
  justify-content: start;
  align-items: stretch;
  gap: 14px;
}

.market-order-card {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(23, 33, 29, 0.1);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 253, 247, 0.96), rgba(246, 251, 241, 0.86));
  box-shadow: 0 14px 30px rgba(20, 45, 30, 0.08);
}

.market-order-card.is-awaiting-preparation {
  border-color: rgba(185, 145, 35, 0.24);
  background: linear-gradient(145deg, rgba(255, 250, 218, 0.96), rgba(255, 246, 198, 0.82));
}

.market-order-card.is-admin-order-card {
  position: relative;
  overflow: visible;
  gap: 18px;
  padding: 20px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 14px 32px rgba(20, 45, 30, 0.08);
}

.market-order-card.is-admin-order-card.is-awaiting-preparation {
  border-color: rgba(185, 145, 35, 0.19);
  background: linear-gradient(145deg, #fffdf2, #fff9df);
}

.market-order-card.is-admin-order-card:has(.market-order-more[open]) {
  z-index: 3;
}

.market-order-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.market-order-card-head.is-admin-head {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 8px;
}

.is-admin-order-card .market-order-card-title {
  display: grid;
  align-content: start;
  gap: 5px;
}

.is-admin-order-card .market-order-card-title strong {
  font-size: 1.04rem;
  line-height: 1.2;
}

.is-admin-order-card .market-order-card-title small {
  font-size: 0.75rem;
}

.market-order-state-pill {
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.is-admin-order-card .market-order-action-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.market-order-state-pill.is-new {
  color: #684506;
  background: #fff0c4;
  border-color: #f3ce77;
}

.market-order-state-pill.is-new::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f7ad08;
}

.market-order-state-pill.is-prepared {
  border: 1px solid #bbd8ff;
  color: #075dc3;
  background: #e8f3ff;
}

.market-order-state-pill.is-prepared .market-order-action-icon {
  border-radius: 50%;
  padding: 2px;
  color: #fff;
  background: #1374dd;
  stroke-width: 2.8;
}

.market-order-state-pill.is-received {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
}

.market-order-more {
  position: relative;
  justify-self: end;
}

.market-order-more-trigger {
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  padding: 4px 8px;
  color: var(--primary-strong);
  background: var(--surface);
  list-style: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.is-admin-order-card .market-order-more-trigger {
  min-width: 34px;
  min-height: 34px;
  border-radius: 11px;
}

.market-order-more-trigger::-webkit-details-marker {
  display: none;
}

.market-order-more-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 4;
  display: grid;
  gap: 6px;
  width: max-content;
  min-width: 150px;
  max-width: min(260px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.market-order-more-list .mini-button {
  width: 100%;
  justify-content: flex-start;
  white-space: normal;
}

.market-order-card-title {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 8px;
  max-width: 100%;
  min-width: 0;
}

.market-order-card-title > strong {
  flex: 1 1 150px;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.market-order-card-title > small,
.market-order-card-title > [data-market-order-invoice] {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
}

.market-order-card-head > .pill {
  max-width: 100%;
  white-space: nowrap;
}

.market-order-card-title strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.market-order-card-title small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.market-order-card-items {
  margin: 0;
  display: grid;
  gap: 7px;
}

.is-admin-order-card .market-order-card-items {
  gap: 14px;
}

.is-admin-order-card .market-order-item {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main price"
    "note note";
  align-items: start;
  gap: 5px 8px;
}

.is-admin-order-card .market-order-item-name {
  color: var(--ink);
  font-size: 0.94rem;
}

.is-admin-order-card .market-order-item-quantity {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.is-admin-order-card .market-order-item-note {
  border: 0;
  color: #8c4a05;
  background: #ffe9cd;
}

.is-admin-order-card .market-order-item-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  align-self: start;
  padding: 0;
  font-size: 0.81rem;
}

.is-admin-order-card .market-order-item-price strong {
  font: inherit;
  color: var(--ink);
}

.is-admin-order-card .market-order-item-price small,
.is-admin-order-card .market-order-item-price > span {
  color: var(--muted);
  font: inherit;
  font-weight: 650;
}

.market-order-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main price"
    "note note";
  gap: 3px 8px;
  align-items: start;
  min-width: 0;
}

.market-order-item-main {
  grid-area: main;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.market-order-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  min-width: 0;
}

.market-order-item-main.is-employee-pick {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
}

.market-order-item-main.is-employee-pick .market-order-item-title {
  min-width: 0;
}

.market-order-item-name {
  color: color-mix(in srgb, var(--primary-strong) 86%, #07130b);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.employee-pick-item {
  width: fit-content;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.employee-pick-item .market-order-item-pot {
  margin-left: 7px;
  color: inherit;
}

.employee-pick-item.is-unprepared {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  color: color-mix(in srgb, var(--danger) 88%, #5b1010);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

.employee-pick-item.is-prepared {
  border-color: color-mix(in srgb, var(--primary-strong) 42%, var(--line));
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 15%, var(--surface));
}

.employee-pick-item:hover:not(:disabled),
.employee-pick-item:focus-visible {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.employee-pick-item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 22%, transparent);
  outline-offset: 2px;
}

.employee-pick-item:disabled {
  cursor: progress;
  opacity: 0.72;
}

.table-cell-plant .employee-pick-item {
  width: 100%;
}

.market-order-item-pot {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--primary-strong) 72%, var(--muted));
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.market-order-item-quantity {
  color: color-mix(in srgb, var(--secondary) 72%, #446023);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.employee-pick-quantity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: max-content;
  font-size: 0.9rem;
  line-height: 1.2;
}

.employee-pick-quantity.is-unprepared {
  color: color-mix(in srgb, var(--danger) 88%, #5b1010);
}

.employee-pick-quantity.is-prepared {
  color: var(--primary-strong);
}

.employee-pick-quantity strong {
  font: inherit;
  font-weight: 900;
}

.employee-pick-quantity small {
  color: inherit;
  font-size: 0.76rem;
  font-weight: 850;
}

.market-order-item-price {
  grid-area: price;
  justify-self: end;
  padding-top: 1px;
  color: color-mix(in srgb, var(--primary-strong) 82%, #07130b);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.market-order-item-note {
  grid-area: note;
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-warning) 42%, var(--line));
  border-radius: 999px;
  padding: 3px 8px;
  color: color-mix(in srgb, var(--color-warning) 82%, #5a3a00);
  background: color-mix(in srgb, var(--color-warning) 14%, var(--surface));
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.market-order-card-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "payment total"
    "ready delete";
  align-items: center;
  gap: 7px 10px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  overflow: hidden;
}

.market-order-card-bottom.is-admin-flow {
  grid-template-areas:
    "payment total"
    "ready ready";
  overflow: visible;
  gap: 14px 10px;
  padding-top: 16px;
  border-top-color: color-mix(in srgb, var(--primary) 14%, var(--line));
}

.market-order-card-bottom.is-admin-flow .market-order-card-main-action {
  padding-top: 4px;
}

.market-order-card-bottom.is-admin-flow .market-order-edit-button,
.market-order-card-bottom.is-admin-flow .market-order-invoice-button,
.market-order-card-bottom.is-admin-flow .market-order-invoiced-button {
  min-height: 38px;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  color: var(--primary-strong);
  background: var(--surface);
}

.market-order-card-bottom.is-admin-flow .market-order-edit-button:disabled {
  border-color: color-mix(in srgb, var(--muted) 12%, var(--line));
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 7%, var(--surface));
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
}

.market-order-card-bottom.is-admin-flow .mini-button {
  gap: 7px;
  margin: 0;
  border-radius: 12px;
  padding: 10px 9px;
  font-size: 0.78rem;
  font-weight: 850;
}

.market-order-card-bottom.is-admin-flow .market-order-next-action {
  flex: 1 1 110px;
  justify-content: center;
  min-width: 110px;
  min-height: 38px;
  margin-left: auto;
  border-color: color-mix(in srgb, var(--primary-strong) 78%, #ffffff);
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-strong), color-mix(in srgb, var(--primary-strong) 72%, #0f8c46));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary-strong) 22%, transparent);
  font-weight: 900;
}

.market-order-card-bottom.is-admin-flow .market-order-payment {
  align-items: center;
  font-size: 0.8rem;
}

.market-order-card-bottom.is-admin-flow .market-order-payment small {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.market-order-card-bottom.is-admin-flow .market-order-payment small::after {
  content: ":";
}

.market-order-card-bottom.is-admin-flow .market-order-total {
  font-size: 1.22rem;
}

.market-order-card-main-action {
  grid-area: ready;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.market-order-card-main-action:empty {
  display: none;
}

.market-order-payment {
  grid-area: payment;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.market-order-payment small {
  color: color-mix(in srgb, var(--muted) 76%, #ffffff);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.market-order-card-delete-action {
  grid-area: delete;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.market-order-card-delete-action .muted-cell {
  font-size: 0.72rem;
  white-space: nowrap;
}

.market-order-prepared-button {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  color: var(--primary-strong);
  background: var(--selection-strong);
}

.market-order-edit-button {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
  color: var(--primary-strong);
  background: rgba(255, 255, 255, 0.82);
}

.market-order-complete-button {
  min-width: 132px;
  border-color: color-mix(in srgb, var(--primary-strong) 78%, #ffffff);
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-strong), color-mix(in srgb, var(--primary-strong) 72%, #0f8c46));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary-strong) 22%, transparent);
  font-weight: 900;
}

.market-order-card-main-action .market-order-edit-button,
.market-order-card-main-action .market-order-prepared-button,
.market-order-card-main-action .market-order-complete-button {
  white-space: nowrap;
}

.market-order-prepared-button:hover:not(:disabled) {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}

.market-order-edit-button:hover:not(:disabled) {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}

.market-order-complete-button:hover:not(:disabled) {
  color: #ffffff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-strong) 86%, #0f8c46), var(--primary-strong));
  filter: brightness(1.04);
}

.market-order-edit-button:disabled,
.market-order-prepared-button:disabled,
.market-order-complete-button:disabled {
  cursor: progress;
  opacity: 0.82;
}

.market-order-prepared-button.is-cancel {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.market-order-prepared-button.is-cancel:hover:not(:disabled) {
  color: #ffffff;
  background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 70%, #111827));
}

.market-order-total {
  grid-area: total;
  justify-self: end;
  color: var(--primary-strong);
  font-size: 0.96rem;
  white-space: nowrap;
}

@media (min-width: 1480px) {
  .market-order-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 420px));
  }
}

@media (max-width: 980px) {
  .market-source-info,
  .market-admin-top-grid,
  .market-admin-bottom-grid,
  .market-notification-page,
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .market-admin-top-grid {
    gap: 14px;
  }

  .market-editor-card .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-editor-card .form-grid > .span-2,
  .market-editor-card .field.span-2,
  .market-editor-card .market-product-name-field,
  .market-editor-card .market-product-source-picker,
  .market-editor-card .market-product-date-field,
  .market-editor-card .market-product-media-row {
    grid-column: 1 / -1;
  }

  .market-source-picker {
    grid-template-columns: 1fr;
  }

  .market-product-media-row {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }

  .market-product-row {
    grid-template-columns: 40px minmax(0, 1fr) minmax(104px, auto);
  }

  .market-product-row:not(.is-inline-editing) .action-cell {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  .market-product-row.is-inline-editing {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .market-product-row.is-inline-editing .market-product-inline-summary,
  .market-product-row.is-inline-editing .market-product-inline-grid {
    grid-column: 2 / -1;
  }

  .market-product-row.is-inline-editing .market-product-inline-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  .market-product-inline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .market-product-inline-field.is-wide {
    grid-column: span 2;
  }

  .market-product-price {
    justify-items: end;
    text-align: right;
  }

  .shop-side {
    position: static;
  }

  .shop-public-header-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .shop-public-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .shop-weekly-delivery-pill {
    min-width: min(100%, 220px);
  }

  .market-catalog-notification-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .market-catalog-notification-button {
    width: 100%;
  }

  .shop-catalog-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .shop-catalog-search {
    flex-basis: 100%;
  }

  .shop-catalog-toolbar .pill {
    margin-left: 0;
  }

  .market-order-search-actions {
    flex: 1 1 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .market-order-day-head.is-market-inbox-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }

  .market-order-day-actions.is-market-inbox-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "count preparation"
      "invoice more";
    align-items: center;
    margin: 0;
  }

  .market-order-day-actions.is-market-inbox-actions > .pill { grid-area: count; justify-self: start; }
  .market-order-day-actions.is-market-inbox-actions > .market-order-day-preparation { grid-area: preparation; }
  .market-order-day-actions.is-market-inbox-actions > .market-order-day-new-invoice { grid-area: invoice; }
  .market-order-day-actions.is-market-inbox-actions > .market-order-day-more { grid-area: more; }
  .market-order-day-more-trigger { width: 100%; }

  .is-delivery-inbox-head .market-order-day-actions > .market-order-day-more {
    grid-area: auto;
    grid-column: 1 / -1;
  }

  .market-admin-top-grid {
    grid-template-columns: 1fr;
  }

  .shop-tabs {
    margin-bottom: 12px;
  }

  .shop-invoice-meta {
    grid-template-columns: 1fr;
  }

  .shop-invoice-open {
    width: 100%;
  }

  .market-order-day-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .market-order-day-actions {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .order-inbox-senders-editor,
  .order-inbox-sender-add-row {
    grid-template-columns: 1fr;
  }

  .order-inbox-sender-save {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .market-order-card.is-admin-order-card {
    gap: 14px;
    padding: 15px;
  }

  .is-admin-order-card .market-order-item-name {
    font-size: 0.86rem;
  }

  .is-admin-order-card .market-order-item-price {
    gap: 4px;
    font-size: 0.74rem;
  }

  .market-order-card-bottom:not(.is-admin-flow) .market-order-card-main-action .market-order-complete-button {
    flex: 0 1 calc(50% - 3px);
    justify-content: center;
    min-width: 144px;
    min-height: 36px;
    margin-top: 4px;
    padding: 7px 12px;
    font-size: 0.86rem;
  }

  .market-order-card-bottom.is-admin-flow .market-order-next-action {
    flex-basis: 100%;
    margin-left: 0;
  }

  .market-product-row,
  .market-product-row.is-inline-editing {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }

  .market-product-thumb {
    width: 38px;
    height: 38px;
  }

  .market-product-main strong {
    white-space: normal;
  }

  .market-product-meta,
  .market-product-availability {
    white-space: normal;
  }

  .market-product-source-summary {
    flex-wrap: wrap;
  }

  .market-product-price {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .market-product-row .action-cell,
  .market-product-row.is-inline-editing .market-product-inline-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .market-product-row:not(.is-inline-editing) .action-cell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .market-product-row:not(.is-inline-editing) .market-product-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  }

  .market-product-row.is-archived .market-product-actions {
    display: flex;
    justify-content: flex-end;
  }

  .market-product-row:not(.is-inline-editing) .action-cell > * {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    margin: 0;
    border-radius: 12px;
    padding: 0 8px;
    justify-content: center;
    text-align: center;
  }

  .market-product-row:not(.is-inline-editing) .market-product-actions > .market-product-more {
    width: 36px;
    padding: 0;
    justify-self: end;
  }

  .market-product-row.is-inline-editing .market-product-inline-summary,
  .market-product-row.is-inline-editing .market-product-inline-grid {
    grid-column: 1 / -1;
  }

  .market-product-inline-grid {
    grid-template-columns: 1fr;
  }

  .market-product-inline-field.is-wide {
    grid-column: 1 / -1;
  }

  .market-editor-card .form-grid,
  .market-source-picker,
  .market-product-media-row {
    grid-template-columns: 1fr;
  }
}

.order-inbox-row {
  cursor: pointer;
}

.order-inbox-row.is-selected {
  outline: 1px solid var(--primary);
  outline-offset: -2px;
  background: var(--selection-strong);
}

.order-inbox-row.is-muted {
  color: var(--muted);
  background: rgba(104, 116, 135, 0.04);
}

.muted-pill {
  background: rgba(104, 116, 135, 0.12);
  color: var(--muted);
}

.order-inbox-meta {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.86rem;
}

.order-inbox-meta strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.order-inbox-body-preview {
  min-height: 180px;
  max-height: 250px;
  margin-bottom: 14px;
}

.order-inbox-import-preview {
  display: grid;
  gap: 10px;
}

.compact-head {
  margin-bottom: 0;
}

.billing-upload-panel {
  display: grid;
  gap: 18px;
}

.billing-upload-result {
  border: 1px solid rgba(47, 91, 64, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  padding: 16px;
}

.compact-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.compact-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(47, 91, 64, 0.12);
  border-radius: 14px;
  padding: 9px 12px;
  background: rgba(245, 250, 240, 0.72);
}

.compact-list small {
  color: var(--muted);
}

.warning-row {
  background: rgba(217, 119, 6, 0.09);
}

.email-html-preview {
  min-height: 120px;
  max-height: 260px;
  overflow: auto;
  margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: var(--layout-input-radius);
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--leaf) 8%, transparent), transparent 44%),
    #ffffff;
}

.email-preview-text {
  width: 100%;
  min-height: 260px;
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  padding: 12px;
  color: var(--ink);
  background: #ffffff;
  font: 0.88rem/1.5 "Cascadia Code", "Consolas", monospace;
  resize: vertical;
}

.email-send-actions {
  align-items: center;
  margin-top: 12px;
}

.email-summary-grid {
  margin-bottom: 12px;
}

.email-summary-grid span:last-child {
  grid-column: span 1;
}

.design-editor-page {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1.18fr) minmax(320px, 0.9fr);
  gap: 16px;
  padding: 4px;
}

.design-editor-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: var(--layout-card-padding);
  border: 1px solid var(--line);
  border-radius: var(--layout-card-radius);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 16px calc(var(--layout-shadow-strength) + 28px) rgba(21, 34, 29, 0.1);
}

.design-editor-sidebar-panel {
  position: sticky;
  top: 14px;
}

.design-editor-panel-head,
.design-preview-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.design-editor-panel-head h3 {
  margin: 0;
  font-size: var(--font-section-title-size);
}

.design-theme-list {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
  padding-right: 3px;
}

.design-theme-row {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--layout-button-radius);
  padding: 10px 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  text-align: left;
  cursor: pointer;
}

.design-theme-row.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--color-selected-row) 42%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.design-theme-row span {
  font-weight: var(--font-font-weight-bold);
}

.design-theme-row small,
.design-profile-form small,
.design-editor-section p,
.design-preview-card-head span,
.design-preview-header small {
  color: var(--muted);
}

.design-profile-form,
.design-editor-section {
  display: grid;
  gap: 12px;
}

.design-editor-section {
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.design-editor-section h4 {
  margin: 0;
  font-size: 1rem;
}

.design-editor-section p {
  margin: 4px 0 0;
  line-height: 1.45;
}

.design-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.design-field {
  display: grid;
  gap: 6px;
}

.design-field span,
.design-check-row span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.design-field input {
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: var(--layout-input-radius);
  outline: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--color-input-background) 94%, transparent);
  font-size: var(--font-input-size);
}

.design-field input:focus {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.design-color-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
}

.design-color-row input[type="color"] {
  min-width: 48px;
  padding: 4px;
  cursor: pointer;
}

.design-check-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.design-check-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

.design-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.design-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius: var(--layout-button-radius);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.design-preview-panel {
  align-content: start;
}

.design-preview-shell {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--layout-card-radius) - 6px);
  background: var(--bg);
}

.design-preview-sidebar {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  color: var(--color-sidebar-text);
  background: var(--color-sidebar);
}

.design-preview-sidebar strong {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.design-preview-sidebar span {
  border-radius: var(--layout-button-radius);
  padding: 8px 9px;
  font-size: 0.76rem;
}

.design-preview-sidebar span.is-active {
  color: var(--color-button-text);
  background: var(--primary);
}

.design-preview-main {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.design-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--layout-header-height);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: calc(var(--layout-card-radius) - 10px);
  background: var(--color-header);
}

.design-preview-header h3 {
  margin: 2px 0 0;
  font-size: var(--font-section-title-size);
}

.design-preview-header button {
  min-height: var(--layout-input-height);
  border: 0;
  border-radius: var(--layout-button-radius);
  padding: 8px 11px;
  color: var(--color-button-text);
  background: var(--primary);
  font-size: var(--font-button-size);
  font-weight: var(--font-font-weight-bold);
}

.design-preview-card {
  display: grid;
  gap: 12px;
  padding: var(--layout-card-padding);
  border: 1px solid var(--line);
  border-radius: calc(var(--layout-card-radius) - 8px);
  background: var(--surface);
}

.design-preview-input {
  min-height: var(--layout-input-height);
  border: 1px solid var(--line);
  border-radius: var(--layout-input-radius);
  padding: 8px 10px;
  color: var(--ink);
  background: var(--color-input-background);
}

.design-preview-table {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--layout-table-radius);
}

.design-preview-table th,
.design-preview-table td {
  padding: 9px 10px;
  font-size: var(--font-table-size);
}

.design-preview-table tbody tr:nth-child(even) td {
  background: var(--color-table-row-alt);
}

.design-preview-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--color-button-text);
  background: var(--color-success);
  font-size: 0.72rem;
  font-weight: var(--font-font-weight-bold);
}

.has-custom-button-design {
  border-color: var(--button-custom-border, var(--line)) !important;
  color: var(--button-custom-text, var(--color-button-text)) !important;
  background: var(--button-custom-bg, var(--primary)) !important;
}

.has-custom-button-design:hover,
.has-custom-button-design:focus-visible {
  border-color: var(--button-custom-hover-border, var(--button-custom-border, var(--line))) !important;
  color: var(--button-custom-hover-text, var(--button-custom-text, var(--color-button-text))) !important;
  background: var(--button-custom-hover-bg, var(--button-custom-bg, var(--primary-strong))) !important;
  outline: 2px solid var(--button-custom-hover-border, var(--button-custom-border, var(--primary))) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

body.button-design-mode .button-design-editable {
  cursor: crosshair !important;
}

body.button-design-mode .button-design-editable:hover {
  outline: 2px solid var(--button-custom-hover-border, var(--button-custom-border, var(--primary))) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 14%, transparent) !important;
}

#designButtonModeButton.is-active {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--line));
  color: var(--color-button-text);
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
}

.button-design-help {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.button-design-popover {
  position: absolute;
  z-index: 9999;
  display: grid;
  gap: 14px;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 18px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 9rem),
    var(--surface);
  box-shadow: 0 22px 65px rgba(15, 23, 42, 0.2);
}

.button-design-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.button-design-popover-head strong,
.button-design-popover-head small {
  display: block;
}

.button-design-popover-head small {
  max-width: 230px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button-design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.button-design-name-field {
  display: grid;
  gap: 6px;
}

.button-design-name-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.button-design-name-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--color-input-background);
}

.button-design-name-field input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.button-design-name-field small {
  color: var(--muted);
  line-height: 1.35;
}

.button-design-field {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "swatch text";
  gap: 6px;
}

.button-design-field span {
  grid-area: label;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.button-design-field input[type="color"] {
  grid-area: swatch;
  width: 42px;
  min-width: 42px;
  height: 38px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.button-design-field input:not([type="color"]) {
  grid-area: text;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--color-input-background);
}

.button-design-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: minmax(74px, var(--layout-sidebar-width)) minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
    gap: 0;
  }

  .sidebar {
    position: sticky;
    top: 8px;
    height: calc(100vh - 16px);
    padding: 10px;
  }

  .nav {
    grid-template-columns: 1fr;
  }

  .brand {
    align-items: center;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .topbar,
  .hero-card,
  .subnav-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .orders-subnav-layout.market-subnav-layout {
    align-items: stretch;
    flex-direction: column;
  }

  .market-subnav-layout .orders-subnav-buttons {
    width: 100%;
  }

  .market-subnav-layout .orders-subnav-normal {
    justify-content: flex-start;
    margin-left: 0;
    min-width: 0;
  }

  .stat-grid,
  .panel-grid {
    grid-template-columns: 1fr;
  }

  .form-grid,
  .order-live-grid,
  .email-page,
  .email-template-page,
  .email-template-selector-grid,
  .order-inbox-page,
  .design-editor-page {
    grid-template-columns: 1fr;
  }

  .partner-import-panel {
    grid-template-columns: 1fr;
  }

  .partner-import-panel .ghost-button {
    justify-self: start;
  }

  .partner-import-suggestion {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .design-editor-sidebar-panel {
    position: static;
  }

  .field.span-2 {
    grid-column: span 1;
  }
}

.item-editor-card {
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
}

.item-week-toggle {
  justify-content: center;
  min-width: 92px;
  text-align: center;
}

.item-week-toggle.is-active {
  border-color: color-mix(in srgb, var(--selection-border) 45%, var(--line));
  color: var(--selection-text);
  background: var(--selection-soft);
}

.data-row.has-week-split-open td {
  border-bottom-color: transparent;
}

.item-week-split-row > .item-week-split-cell {
  padding: 0 !important;
  border-top: 0;
  background: color-mix(in srgb, var(--surface-strong) 72%, var(--surface));
}

.item-week-split-editor {
  padding: 14px 16px 16px;
}

.item-week-split-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.item-week-split-total {
  flex: 0 0 auto;
}

.item-week-split-total.is-complete {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 8%, var(--surface));
}

.item-week-split-total.is-over {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.item-week-split-list {
  display: grid;
  gap: 8px;
}

.item-week-split-entry {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(150px, 1fr) 40px;
  align-items: end;
  gap: 10px;
}

.item-week-split-remove {
  justify-content: center;
  width: 40px;
  min-width: 40px;
  min-height: var(--layout-input-height);
  margin: 0;
  padding: 0;
  font-size: 1.15rem;
}

.item-week-split-actions {
  align-items: center;
}

.item-week-split-message {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.item-week-split-message.is-complete {
  color: var(--color-success);
}

@media (max-width: 980px) {
  .mobile-card-table .item-week-split-row {
    display: block;
    width: 100%;
    margin-top: -10px;
    padding: 0;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: none;
  }

  .mobile-card-table .item-week-split-row > .item-week-split-cell {
    display: block;
    width: 100%;
    padding: 0 !important;
  }

  .mobile-card-table .item-week-split-row > .item-week-split-cell::before {
    display: none;
  }
}

@media (max-width: 680px) {
  .item-week-split-editor {
    padding: 12px;
  }

  .item-week-split-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .item-week-split-total {
    align-self: flex-start;
  }

  .item-week-split-entry {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr) 44px;
    gap: 8px;
  }

  .item-week-split-remove {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .item-week-split-actions .primary-button,
  .item-week-split-actions .ghost-button {
    flex: 1 1 150px;
  }
}

.item-editor-card.is-error-flash {
  animation: item-error-flash 1.05s ease;
}

.settings-editor-card.is-error-flash,
.settings-inline-editor.is-error-flash {
  animation: item-error-flash 1.05s ease;
}

@keyframes item-error-flash {
  0%,
  100% {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
    box-shadow: 0 16px calc(var(--layout-shadow-strength) + 28px) rgba(21, 34, 29, 0.1);
  }
  18%,
  62% {
    border-color: color-mix(in srgb, var(--danger) 68%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 13%, transparent), 0 18px 42px rgba(99, 30, 30, 0.11);
  }
}

.item-error-dialog {
  position: fixed;
  right: 22px;
  top: 82px;
  z-index: 10000;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--line));
  border-radius: 18px;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--danger) 8%, transparent), transparent 9rem),
    var(--surface);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.13);
}

.item-error-dialog-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px;
}

.item-error-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  font-weight: 900;
}

.item-error-code {
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.item-error-dialog strong {
  display: block;
  margin-top: 2px;
}

.item-error-dialog p {
  margin: 0;
  line-height: 1.45;
}

.item-error-dialog ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.item-form .select-combo-source {
  display: none;
}

.item-live-grid {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.danger-outline-button {
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.danger-outline-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 13%, transparent);
}

.danger-outline-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.data-row[data-item-row-id] {
  cursor: pointer;
}

.item-status-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

.item-status-stack small {
  color: var(--danger);
  font-size: 0.74rem;
  font-weight: 800;
}

.item-partner-color-row {
  --item-partner-row-color: var(--surface);
  --item-partner-row-border: var(--primary);
}

.item-partner-color-green { --item-partner-row-color: #d9efdc; --item-partner-row-border: #2f7d32; }
.item-partner-color-blue { --item-partner-row-color: #d9eafa; --item-partner-row-border: #2878b5; }
.item-partner-color-yellow { --item-partner-row-color: #fff0b8; --item-partner-row-border: #c58a00; }
.item-partner-color-pink { --item-partner-row-color: #f8dce8; --item-partner-row-border: #bd4f7c; }
.item-partner-color-purple { --item-partner-row-color: #eadff7; --item-partner-row-border: #7b52a6; }
.item-partner-color-gray { --item-partner-row-color: #e3e7eb; --item-partner-row-border: #66717d; }

.item-partner-color-picker {
  display: flex;
  flex-wrap: wrap;
  min-height: var(--control-height);
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
}

.item-partner-color-swatch {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 50%;
  background: var(--item-partner-swatch, var(--surface));
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}

.item-partner-color-swatch:hover,
.item-partner-color-swatch.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.item-partner-color-none {
  color: var(--muted);
  background: var(--surface);
  font-size: 1rem;
  line-height: 1;
}

.item-partner-color-swatch-green { --item-partner-swatch: #90c998; }
.item-partner-color-swatch-blue { --item-partner-swatch: #8ebce3; }
.item-partner-color-swatch-yellow { --item-partner-swatch: #f2cc5f; }
.item-partner-color-swatch-pink { --item-partner-swatch: #e9a4c1; }
.item-partner-color-swatch-purple { --item-partner-swatch: #b99ad7; }
.item-partner-color-swatch-gray { --item-partner-swatch: #aeb7c0; }

.data-row.item-partner-color-row td {
  background: color-mix(in srgb, var(--item-partner-row-color) 58%, var(--surface));
}

.data-row.item-partner-color-row td:first-child {
  box-shadow: inset 4px 0 0 var(--item-partner-row-border);
}

.data-row.item-partner-color-row:hover td {
  background: color-mix(in srgb, var(--item-partner-row-color) 72%, var(--surface));
}

.data-row.is-selected td {
  background: color-mix(in srgb, var(--color-selected-row) 44%, var(--surface));
  box-shadow: inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary);
}

.data-row.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--primary), inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary);
}

.data-row.is-selected td:last-child {
  box-shadow: inset -2px 0 0 var(--primary), inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary);
}

@media (max-width: 980px) {
  .item-live-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .billing-workspace,
  .accounting-settings-workspace {
    grid-template-columns: 1fr;
  }

  .billing-summary-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

/* Desktop and touch layouts share the same menu controls. */
.sidebar-toggle-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.sidebar-toggle-button span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.sidebar-toggle-button.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sidebar-toggle-button.is-active span:nth-child(2) {
  opacity: 0;
}

.sidebar-toggle-button.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.sidebar-collapse-button.sidebar-toggle-button {
  top: 14px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) !important;
  gap: 0 !important;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  pointer-events: none;
}

.app-shell.sidebar-collapsed .sidebar::before {
  display: none !important;
}

.app-shell.sidebar-collapsed .sidebar > :not(.sidebar-collapse-button) {
  display: none !important;
}

.app-shell.sidebar-collapsed .sidebar-collapse-button {
  display: none !important;
}

/* Split responsive layer: desktop keeps the sidebar workspace, phones get an off-canvas app view. */
.mobile-nav-button {
  position: fixed;
  top: 24px;
  left: 10px;
  z-index: 105;
  display: flex;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--primary-strong);
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell:not(.sidebar-collapsed) > .mobile-nav-button {
    display: none;
  }

  .app-shell.mobile-nav-open::before {
    display: none;
  }

  .app-shell.mobile-nav-open .sidebar {
    transform: none;
  }
}

.app-shell.sidebar-drawer-mode {
  --sidebar-drawer-width: min(86vw, 320px);
  display: block !important;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 !important;
  background: var(--bg);
}

.app-shell.sidebar-drawer-mode[hidden] {
  display: none !important;
}

.app-shell.sidebar-drawer-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-sidebar) 54%, transparent);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.app-shell.sidebar-drawer-mode.mobile-nav-open::before {
  pointer-events: auto;
  opacity: 1;
}

.app-shell.sidebar-drawer-mode > .mobile-nav-button {
  display: flex !important;
}

.app-shell.sidebar-drawer-mode.mobile-nav-open > .mobile-nav-button,
.app-shell.sidebar-drawer-mode.sidebar-docked-open > .mobile-nav-button {
  display: none !important;
}

.app-shell.sidebar-drawer-mode .content {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: margin-left 0.2s ease, width 0.2s ease;
}

.app-shell.sidebar-drawer-mode .topbar {
  padding-left: 76px;
  transition: padding-left 0.2s ease;
}

.app-shell.sidebar-drawer-mode.sidebar-docked-open .content {
  width: calc(100% - var(--sidebar-drawer-width));
  margin-left: var(--sidebar-drawer-width);
}

.app-shell.sidebar-drawer-mode.sidebar-docked-open .topbar {
  padding-left: 26px;
}

.app-shell.sidebar-drawer-mode .sidebar,
.app-shell.sidebar-drawer-mode.sidebar-collapsed .sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 120;
  width: var(--sidebar-drawer-width) !important;
  min-width: 0 !important;
  max-width: var(--sidebar-drawer-width) !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 18px 14px 22px !important;
  border: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  color: var(--color-sidebar-text);
  background:
    radial-gradient(circle at 24% 88%, color-mix(in srgb, var(--leaf) 22%, transparent), transparent 13rem),
    radial-gradient(circle at 8% 108%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 15rem),
    linear-gradient(165deg, var(--color-sidebar) 0%, color-mix(in srgb, var(--color-sidebar) 82%, #000000) 58%, color-mix(in srgb, var(--color-sidebar) 62%, #000000) 100%) !important;
  box-shadow: 22px 0 60px color-mix(in srgb, var(--color-sidebar) 42%, transparent) !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  pointer-events: none !important;
  visibility: hidden;
  transform: translate3d(calc(-100% - 24px), 0, 0) !important;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.app-shell.sidebar-drawer-mode.mobile-nav-open .sidebar,
.app-shell.sidebar-drawer-mode.sidebar-docked-open .sidebar {
  pointer-events: auto !important;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 0.2s ease, visibility 0s linear 0s;
}

.app-shell.sidebar-drawer-mode .sidebar::before {
  display: none !important;
}

.app-shell.sidebar-drawer-mode .sidebar > :not(.sidebar-collapse-button),
.app-shell.sidebar-drawer-mode.sidebar-collapsed .sidebar > :not(.sidebar-collapse-button) {
  display: revert !important;
}

.app-shell.sidebar-drawer-mode .sidebar .brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-right: 46px;
}

.app-shell.sidebar-drawer-mode .sidebar .nav {
  display: grid !important;
  align-content: start;
  grid-auto-rows: max-content;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 0;
  margin-right: -4px;
  padding-right: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.app-shell.sidebar-drawer-mode .sidebar-collapse-button,
.app-shell.sidebar-drawer-mode.sidebar-collapsed .sidebar-collapse-button {
  position: absolute !important;
  top: 14px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 2;
  display: none !important;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  pointer-events: auto !important;
}

.app-shell.sidebar-drawer-mode.mobile-nav-open .sidebar-collapse-button,
.app-shell.sidebar-drawer-mode.sidebar-docked-open .sidebar-collapse-button {
  display: flex !important;
}

body.shop-public-mode .app-shell.sidebar-drawer-mode > .mobile-nav-button,
body.shop-public-mode .app-shell.sidebar-drawer-mode > .sidebar,
body.shop-public-mode .app-shell.sidebar-drawer-mode::before {
  display: none !important;
}

body.shop-public-mode .app-shell.sidebar-drawer-mode > .content {
  width: 100% !important;
  margin-left: 0 !important;
}

.app-shell.sidebar-drawer-mode > .sidebar .brand-mark {
  width: 64px !important;
  height: 64px !important;
  border-radius: 14px;
}

.app-shell.sidebar-drawer-mode .brand h1 {
  font-size: 1.08rem;
}

.app-shell.sidebar-drawer-mode .brand .eyebrow {
  max-width: none;
  font-size: 0.62rem;
}

.app-shell.sidebar-drawer-mode .nav-group {
  display: grid !important;
  align-self: start;
  align-content: start;
  grid-auto-rows: max-content;
  flex: 0 0 auto !important;
  gap: 5px;
  height: auto !important;
  min-height: 0 !important;
}

.app-shell.sidebar-drawer-mode .nav-group-items {
  display: grid;
  grid-auto-rows: max-content;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

.app-shell.sidebar-drawer-mode .nav-group.is-collapsed .nav-group-items {
  display: none !important;
}

.app-shell.sidebar-drawer-mode .nav-group-toggle {
  min-height: 32px;
  margin-top: 4px;
  padding: 5px 6px;
}

.app-shell.sidebar-drawer-mode .nav-item {
  flex: 0 0 auto !important;
  min-height: 44px;
  height: auto !important;
  border-radius: 12px;
  padding: 9px 10px;
}

.app-shell.sidebar-drawer-mode .nav-icon {
  flex: 0 0 20px;
}

@media (max-width: 1100px), (any-pointer: coarse) {
  :root {
    --layout-card-radius: 14px;
    --layout-table-radius: 12px;
    --layout-input-height: 44px;
    --layout-card-padding: 14px;
  }

  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body {
    background: var(--bg);
  }

  body.mobile-nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .app-shell {
    display: block !important;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 !important;
    background: var(--bg);
  }

  .app-shell[hidden] {
    display: none !important;
  }

  .app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 110;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-sidebar) 54%, transparent);
    opacity: 0;
    transition: opacity 0.18s ease;
  }

  .app-shell.mobile-nav-open::before {
    pointer-events: auto;
    opacity: 1;
    touch-action: none;
  }

  .content {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 12px 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow-x: clip;
  }

  .mobile-nav-button {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: max(10px, env(safe-area-inset-left));
    z-index: 105;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--primary-strong);
    background: var(--surface);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transform: none;
    touch-action: manipulation;
  }

  .app-shell:not(.sidebar-collapsed) > .mobile-nav-button {
    display: flex;
  }

  .app-shell.mobile-nav-open .mobile-nav-button {
    display: none;
  }

  .mobile-nav-button span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.16s ease, opacity 0.16s ease;
  }

  .mobile-nav-button.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-nav-button.is-active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav-button.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center !important;
    gap: 10px;
    min-height: 0;
    margin: 0 -12px 12px !important;
    padding: 10px 12px 12px !important;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(12px);
  }

  .topbar-left {
    grid-column: 2;
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .global-search {
    order: 1;
    width: 100% !important;
    min-height: 40px;
    padding: 0 10px 0 12px;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px 1px 4px;
    scrollbar-width: none;
  }

  .topbar-actions::-webkit-scrollbar {
    display: none;
  }

  .topbar-actions > * {
    flex: 0 0 auto;
  }

  .topbar-actions .profile-menu-wrap {
    display: block;
    order: -10;
  }

  #logoutButton {
    display: none !important;
  }

  .topbar-actions .profile-chip {
    display: flex;
    max-width: min(260px, calc(100vw - 24px));
    min-height: 40px;
    padding: 4px 11px 4px 5px;
  }

  .topbar-actions .profile-chip > strong {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  .topbar-actions .profile-chip span,
  .topbar-actions .profile-chip small {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions .primary-button,
  .topbar-actions .ghost-button,
  .year-picker,
  .topbar-icon-button {
    min-height: 40px;
    white-space: nowrap;
  }

  .profile-menu {
    position: fixed;
    right: 12px;
    top: 116px;
    z-index: 115;
    width: min(280px, calc(100vw - 24px));
  }

  .sidebar,
  .app-shell.sidebar-collapsed .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 120;
    width: min(86vw, 320px) !important;
    min-width: 0 !important;
    max-width: min(86vw, 320px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 18px 14px 22px !important;
    border: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    background:
      radial-gradient(circle at 24% 88%, color-mix(in srgb, var(--leaf) 22%, transparent), transparent 13rem),
      radial-gradient(circle at 8% 108%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 15rem),
      linear-gradient(165deg, var(--color-sidebar) 0%, color-mix(in srgb, var(--color-sidebar) 82%, #000000) 58%, color-mix(in srgb, var(--color-sidebar) 62%, #000000) 100%) !important;
    box-shadow: 22px 0 60px color-mix(in srgb, var(--color-sidebar) 42%, transparent) !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: none !important;
    visibility: hidden;
    transform: translate3d(calc(-100% - 24px), 0, 0) !important;
    transition: transform 0.2s ease;
  }

  .app-shell.mobile-nav-open .sidebar {
    pointer-events: auto !important;
    visibility: visible;
    transform: translate3d(0, 0, 0) !important;
  }

  .sidebar::before {
    display: none !important;
  }

  .app-shell.sidebar-collapsed .sidebar > :not(.sidebar-collapse-button) {
    display: revert !important;
  }

  .app-shell.sidebar-collapsed .sidebar .brand {
    display: flex !important;
  }

  .app-shell.sidebar-collapsed .sidebar .nav {
    display: grid !important;
    align-content: start;
    grid-auto-rows: max-content;
  }

  .sidebar-collapse-button,
  .app-shell.sidebar-collapsed .sidebar-collapse-button {
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    pointer-events: auto !important;
  }

  .app-shell.mobile-nav-open .sidebar-collapse-button {
    display: flex !important;
  }

  .brand {
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-right: 46px;
  }

  .sidebar .brand-mark {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px;
  }

  .brand h1 {
    font-size: 1.08rem;
  }

  .brand .eyebrow {
    max-width: none;
    font-size: 0.62rem;
  }

  .nav {
    align-content: start;
    grid-auto-rows: max-content;
    flex: 1 1 auto;
    gap: 8px;
    min-height: 0;
    margin-right: -4px;
    padding-right: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-group {
    align-self: start;
    gap: 5px;
  }

  .nav-group.is-collapsed .nav-group-items {
    display: none !important;
  }

  .nav-group-toggle {
    min-height: 32px;
    margin-top: 4px;
    padding: 5px 6px;
  }

  .nav-item {
    min-height: 44px;
    border-radius: 12px;
    padding: 9px 10px;
  }

  .nav-icon {
    flex: 0 0 20px;
  }

  .stat-grid,
  .panel-grid,
  #tableView.is-items-view.is-visible,
  .form-grid,
  .management-form-grid,
  .order-live-grid,
  .billing-workspace,
  .email-page,
  .email-template-page,
  .email-template-selector-grid,
  .order-inbox-page,
  .design-editor-page,
  .market-admin-page,
  .market-admin-top-grid,
  .market-admin-bottom-grid,
  .shop-layout,
  .occupancy-workspace,
  .occupancy-map-workspace {
    grid-template-columns: 1fr !important;
  }

  .span-2,
  .field.span-2,
  .auth-form-grid .span-2,
  .market-editor-card .form-grid > .span-2,
  .market-editor-card .field.span-2 {
    grid-column: 1 / -1 !important;
  }

  .stat-grid {
    gap: 10px;
    margin-bottom: 12px;
  }

  .stat-card {
    min-height: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 14px;
  }

  .stat-card::before {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
  }

  .stat-card strong {
    font-size: 1.55rem;
  }

  .panel,
  .hero-card,
  .subnav-card,
  .action-card,
  .billing-editor-card,
  .billing-items-card,
  .billing-documents-panel,
  .email-card,
  .market-card,
  .market-catalog-card {
    border-radius: 14px !important;
    padding: 14px;
  }

  .panel-head,
  .billing-card-head,
  .shop-public-header,
  .market-order-day-head,
  .occupancy-page-toolbar,
  .occupancy-toolbar,
  .occupancy-map-actions,
  .profile-settings-head,
  .profile-settings-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .user-manual-shell {
    grid-template-columns: 1fr;
  }

  .user-manual-toc {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    max-height: none;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .user-manual-toc::-webkit-scrollbar {
    display: none;
  }

  .user-manual-toc a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .panel-head {
    margin-bottom: 12px;
  }

  .order-entry-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .order-entry-toggle {
    margin-left: auto;
  }

  .bar-row {
    grid-template-columns: 58px minmax(0, 1fr) 52px;
    gap: 8px;
    font-size: 0.82rem;
  }

  .status-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .subnav-panel,
  .table-toolbar,
  .billing-tabs,
  .email-tabs,
  .occupancy-tabs,
  .tab-selector,
  .todo-tabbar,
  .foil-control-tabbar,
  .plc-foil-tabbar,
  .settings-tab-list,
  .shop-public-actions,
  .market-order-search-row,
  .occupancy-map-action-buttons,
  .occupancy-site-switch {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .orders-subnav-card {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .orders-subnav-head,
  .orders-subnav-layout {
    min-width: 0;
    max-width: 100%;
  }

  .orders-subnav-layout {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .orders-subnav-layout::-webkit-scrollbar {
    display: none;
  }

  .orders-subnav-buttons {
    flex: 0 0 max-content;
    width: max-content !important;
    max-width: none;
    overflow: visible;
  }

  .orders-subnav-normal {
    flex: 0 0 max-content;
    justify-content: flex-start;
    margin-left: 0;
    min-width: max-content;
  }

  .subnav-panel::-webkit-scrollbar,
  .table-toolbar::-webkit-scrollbar,
  .billing-tabs::-webkit-scrollbar,
  .email-tabs::-webkit-scrollbar,
  .occupancy-tabs::-webkit-scrollbar,
  .tab-selector::-webkit-scrollbar,
  .todo-tabbar::-webkit-scrollbar,
  .foil-control-tabbar::-webkit-scrollbar,
  .plc-foil-tabbar::-webkit-scrollbar,
  .settings-tab-list::-webkit-scrollbar,
  .shop-public-actions::-webkit-scrollbar,
  .market-order-search-row::-webkit-scrollbar,
  .occupancy-map-action-buttons::-webkit-scrollbar,
  .occupancy-site-switch::-webkit-scrollbar {
    display: none;
  }

  .subnav-panel > *,
  .table-toolbar > *,
  .billing-tabs > *,
  .email-tabs > *,
  .occupancy-tabs > *,
  .tab-selector > *,
  .todo-tabbar > *,
  .foil-control-tabbar > *,
  .plc-foil-tabbar > *,
  .settings-tab-list > *,
  .shop-public-actions > *,
  .occupancy-map-action-buttons > *,
  .occupancy-site-switch > * {
    flex: 0 0 auto;
  }

  .table-toolbar {
    align-items: stretch;
    margin-bottom: 10px;
    padding-bottom: 2px;
  }

  .table-search-field,
  .table-toolbar .settings-search-input,
  .table-toolbar .settings-filter-field,
  .occupancy-filter {
    width: min(280px, 78vw);
    min-width: min(280px, 78vw);
  }

  .table-panel,
  #tableView.is-items-view .table-panel,
  #tableView.is-page-scroll-view .table-panel {
    min-height: 0;
  }

  .table-wrap,
  .table-panel > .table-wrap,
  #tableView.is-page-scroll-view .table-panel > .table-wrap {
    max-width: 100%;
    max-height: none;
    overflow: auto;
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
    overscroll-behavior-x: contain;
  }

  table {
    min-width: 720px;
  }

  .mobile-card-table {
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 10px;
    touch-action: pan-y;
  }

  .table-wrap:has(.mobile-card-table),
  .todo-table-wrap {
    overflow: visible;
    overscroll-behavior: auto;
    touch-action: pan-y;
  }

  .mobile-card-table thead {
    display: none;
  }

  .mobile-card-table,
  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td {
    display: block;
    width: 100%;
  }

  .mobile-card-table tbody {
    display: grid;
    gap: 10px;
  }

  .mobile-card-table tr {
    overflow: hidden;
    border: 1px solid #e4e8df;
    border-radius: 14px;
    padding: 10px 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    touch-action: pan-y;
  }

  .mobile-card-table td {
    display: grid;
    grid-template-columns: minmax(98px, 38%) minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: 8px 0;
    border: 0;
    color: var(--ink);
    background: transparent !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    touch-action: pan-y;
  }

  .mobile-card-table td:empty {
    display: none;
  }

  .mobile-card-table td::before {
    content: attr(data-label);
    min-width: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-card-table .data-row.is-selected td,
  .mobile-card-table .data-row.is-selected td:first-child,
  .mobile-card-table .data-row.is-selected td:last-child {
    box-shadow: none;
  }

  .mobile-card-table .data-row.is-selected {
    border-color: color-mix(in srgb, var(--selection-border) 68%, var(--line));
    box-shadow: 0 0 0 2px var(--focus-ring), 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  @media (min-width: 600px) {
    .mobile-card-table tr {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      column-gap: 22px;
      align-items: center;
    }

    .mobile-card-table td {
      width: auto;
    }

    .mobile-card-table td.action-cell {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      min-width: 0;
      white-space: normal;
    }

    .mobile-card-table td.action-cell::before {
      flex: 0 0 auto;
      margin-right: 4px;
    }

    .mobile-card-table td.action-cell .mini-button {
      flex: 0 0 auto;
      min-height: 32px;
      margin: 0;
      padding: 6px 11px;
    }
  }

  .order-collapse-button,
  .settings-collapse-button {
    min-width: 36px;
    min-height: 36px;
  }

  input,
  select,
  textarea,
  .shop-date-button,
  .select-combo input {
    min-height: 44px;
    font-size: 16px;
  }

  textarea {
    max-width: 100%;
  }

  .primary-button,
  .ghost-button,
  .danger-outline-button {
    min-height: 42px;
  }

  .profile-settings-backdrop,
  .market-invite-backdrop {
    align-items: stretch;
    padding: 10px;
  }

  .profile-settings-dialog,
  .market-invite-dialog {
    width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
    padding: 16px;
  }

  .item-error-dialog {
    right: 10px;
    left: 10px;
    top: 84px;
    width: auto;
  }

  .occupancy-map-world-shell {
    min-height: 360px;
    max-height: 62vh;
    max-height: 62dvh;
    overflow: auto;
  }

  .occupancy-map-actions,
  .occupancy-map-action-buttons {
    align-items: stretch;
  }

  .occupancy-map-action-buttons button {
    min-width: 42px;
  }

  .occupancy-detail-card {
    position: static;
    max-height: none;
  }

  .billing-summary-grid,
  .occupancy-detail-stats,
  .occupancy-fit-list,
  .email-summary-grid,
  .item-live-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .email-rich-toolbar,
  .email-variable-row,
  .email-action-row,
  .billing-actions,
  .management-actions,
  .design-editor-actions,
  .button-design-actions {
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .email-rich-toolbar > *,
  .email-variable-row > *,
  .email-action-row > *,
  .billing-actions > *,
  .management-actions > *,
  .design-editor-actions > *,
  .button-design-actions > * {
    flex: 0 0 auto;
  }

  .design-preview-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .design-preview-sidebar {
    display: flex;
    overflow-x: auto;
  }

  .design-preview-sidebar strong {
    flex: 0 0 auto;
  }

  .email-action-row,
  .billing-actions,
  .management-actions,
  .design-editor-actions,
  .button-design-actions,
  .shop-public-actions,
  .occupancy-map-action-buttons,
  .market-order-search-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .email-action-row > *,
  .billing-actions > *,
  .management-actions > *,
  .design-editor-actions > *,
  .button-design-actions > *,
  .shop-public-actions > *,
  .occupancy-map-action-buttons > *,
  .market-order-search-row > * {
    flex: 0 1 auto;
    max-width: 100%;
  }

  .table-toolbar {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .table-toolbar > .table-search-field,
  .table-toolbar > .settings-search-input,
  .table-toolbar > .settings-filter-field {
    flex: 1 1 220px;
    width: auto;
    min-width: min(220px, 100%);
    max-width: 100%;
  }
}

@media (max-width: 699px) {
  .content {
    padding: 0 10px 20px !important;
  }

  #tableView.is-accounting-view #subNavPanel .subnav-card,
  #tableView.is-employee-hours-view #subNavPanel .subnav-card {
    padding: 0;
  }

  .topbar {
    grid-template-columns: 40px minmax(0, 1fr);
    margin-right: -10px !important;
    margin-left: -10px !important;
    padding: 9px 10px 10px !important;
  }

  .mobile-nav-button {
    width: 40px;
    height: 40px;
  }

  .global-search input::placeholder {
    color: transparent;
  }

  #appFullscreenButton {
    display: none !important;
  }

  #autoAllocateButton {
    padding-inline: 12px;
    font-size: 0.8rem;
  }

  .profile-settings-head {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .profile-settings-head > div {
    min-width: 0;
  }

  .profile-settings-head > .topbar-icon-button {
    flex: 0 0 auto;
  }

  .profile-settings-actions {
    align-items: stretch;
    width: 100%;
  }

  .profile-settings-actions > button {
    width: 100%;
  }

  .stat-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .mobile-card-table td {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .billing-summary-grid,
  .occupancy-detail-stats,
  .occupancy-fit-list,
  .email-summary-grid,
  .item-live-grid {
    grid-template-columns: 1fr !important;
  }

  .auth-shell {
    padding: 12px;
  }

  .auth-panel {
    padding: 18px;
  }

  .table-toolbar {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .table-search-field,
  .table-toolbar .settings-search-input,
  .table-toolbar .settings-filter-field,
  .occupancy-filter {
    width: 100%;
    min-width: 0;
  }

  .settings-complex-form > section,
  .settings-sort-list,
  .settings-sort-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .settings-section-row-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .sidebar-add-menu-row {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  .settings-sort-row {
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 10px;
  }

  .settings-sort-row > .drag-handle {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: center;
  }

  .settings-sort-row > input:not([type="color"]),
  .settings-sort-row > select,
  .settings-sort-row > .select-combo,
  .settings-sort-row > .inline-check,
  .settings-sort-row > button,
  .settings-sort-row > input[type="color"] {
    grid-column: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .settings-sort-row > .inline-check {
    grid-template-columns: 22px minmax(0, 1fr);
    justify-self: stretch;
    white-space: normal;
  }

  .settings-sort-row > button {
    justify-self: start;
    width: auto;
  }

  .settings-sort-row > input[type="color"] {
    min-height: 42px;
  }

  .occupancy-table th.occupancy-list-number-column {
    padding-inline: 3px;
    font-size: 0.65rem;
  }
}

@media (min-width: 700px) and (max-width: 1100px), (any-pointer: coarse) and (min-width: 700px) {
  .topbar {
    grid-template-columns: 40px minmax(180px, 1fr) auto !important;
    gap: 10px;
    padding: 9px 12px 10px !important;
  }

  .topbar-left {
    grid-column: 2;
    width: clamp(190px, 28vw, 320px);
    justify-self: start;
  }

  .global-search {
    width: 100% !important;
    min-height: 38px;
  }

  .global-search input::placeholder {
    color: var(--muted);
  }

  .topbar-actions {
    grid-column: 3;
    justify-content: flex-end !important;
    width: auto;
    max-width: none;
    gap: 6px;
    overflow: visible;
    padding: 0;
  }

  .topbar-actions .profile-chip {
    max-width: 180px;
    min-height: 38px;
  }

  .topbar-actions .profile-chip span,
  .topbar-actions .profile-chip small {
    max-width: 116px;
  }

  .topbar-actions .primary-button,
  .topbar-actions .ghost-button,
  .year-picker,
  .topbar-icon-button {
    min-height: 38px;
  }

  .topbar-actions .ghost-button {
    padding: 9px 12px;
  }

  .year-picker {
    gap: 5px;
    padding: 7px 8px;
  }

  .profile-menu {
    top: 64px;
  }

  #autoAllocateButton {
    padding-inline: 11px;
    font-size: 0.8rem;
  }

  .stat-grid,
  .form-grid,
  .management-form-grid,
  .order-live-grid,
  .plant-protection-equipment-grid,
  .plant-protection-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .span-2,
  .field.span-2,
  .plant-protection-form-grid > .span-2 {
    grid-column: 1 / -1 !important;
  }

  .user-manual-shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .user-manual-toc {
    position: sticky;
    display: grid;
    max-height: calc(100dvh - 150px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .user-manual-toc a {
    white-space: normal;
  }

  .management-user-details .management-form-grid,
  .management-card[data-management-user] .management-form-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  }

  .management-user-details .management-permission-grid,
  .management-card[data-management-user] .management-permission-grid {
    justify-content: flex-start;
    gap: 8px 18px;
  }

  .management-user-details .management-permission-grid .inline-check.compact,
  .management-card[data-management-user] .management-permission-grid .inline-check.compact {
    flex: 0 1 180px;
    width: auto;
  }
}

@media (min-width: 700px) and (max-width: 840px) {
  .topbar-actions .profile-chip {
    width: 40px;
    padding: 3px;
  }

  .topbar-actions .profile-chip span {
    display: none;
  }
}

/* Mobile width containment: prevent cards and topbar controls from creating page-level horizontal scroll. */
@media (max-width: 720px) {
  html,
  body,
  .app-shell,
  .content,
  #tableView,
  #actionPanel,
  .table-panel,
  .panel,
  .action-card,
  .todo-editor-card,
  .todo-list-card,
  .note-editor-card,
  .note-list-card {
    max-width: 100%;
    min-width: 0;
  }

  .content {
    overflow-x: clip;
  }

  .market-order-date-list,
  .market-order-day-group,
  .market-order-card-grid,
  .market-order-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .market-order-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-order-item-note {
    justify-self: start;
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .topbar,
  .topbar-left,
  .global-search,
  .global-search input {
    max-width: 100%;
    min-width: 0;
  }

  .topbar {
    max-width: none;
  }

  .todo-page,
  .note-page {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
  }

  .todo-form-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .employee-hours-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-profile-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-hours-week-head,
  .employee-hours-week-nav,
  .employee-hours-report-head,
  .employee-hours-report-filters {
    justify-content: center;
  }

  .employee-hours-report-filters {
    width: 100%;
  }

  .employee-hours-report-filters .field {
    flex: 1 1 140px;
    min-width: 0;
  }

  .todo-form,
  .employee-hours-form,
  .note-form,
  .todo-form .field,
  .employee-hours-form .field,
  .note-form .field,
  .todo-form input,
  .employee-hours-form input,
  .note-form input,
  .todo-form select,
  .note-form select,
  .todo-form textarea,
  .note-form textarea,
  .todo-form .select-combo,
  .note-form .select-combo,
  .todo-form .combo-box,
  .note-form .combo-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #tableView.is-todos-view table,
  .todo-row td:first-child,
  .todo-actions,
  .note-actions {
    min-width: 0;
  }
}

@media (any-pointer: coarse) and (max-width: 720px) {
  #tableView.is-todos-view .table-panel,
  #tableView.is-notes-view .table-panel {
    padding-inline: 0;
    background: transparent;
  }

  #tableView.is-todos-view .full-panel-cell,
  #tableView.is-notes-view .full-panel-cell,
  #tableView.is-todos-view .todo-page,
  #tableView.is-notes-view .note-page {
    padding-inline: 0;
  }

  #tableView.is-todos-view .todo-list-card,
  #tableView.is-notes-view .note-list-card {
    padding: 12px 4px 14px;
    border-radius: 14px;
    box-shadow: none;
  }

  #tableView.is-todos-view .todo-list-card > .panel-head,
  #tableView.is-notes-view .note-list-card > .panel-head {
    padding-inline: 6px;
    margin-bottom: 10px;
  }

  #tableView.is-todos-view .mobile-card-table tbody {
    gap: 8px;
  }

  #tableView.is-todos-view .mobile-card-table tr {
    padding: 9px 9px;
    border-radius: 12px;
  }

  #tableView.is-todos-view .mobile-card-table td {
    padding: 6px 0;
  }

  #tableView.is-todos-view .mobile-card-table td.action-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding-top: 8px;
  }

  #tableView.is-todos-view .mobile-card-table td.action-cell::before {
    flex: 1 0 100%;
  }

  #tableView.is-todos-view .todo-actions .mini-button,
  #tableView.is-notes-view .note-actions .mini-button {
    flex: 1 1 calc((100% - 14px) / 3);
    justify-content: center;
    min-width: 76px;
    min-height: 38px;
    margin: 0;
    padding: 7px 8px;
  }
}

@media (max-width: 699px) {
  .topbar {
    overflow: hidden;
  }

  .topbar-actions {
    display: grid !important;
    grid-template-columns: minmax(124px, 1fr) minmax(92px, 100px) 40px 40px;
    align-items: stretch;
    gap: 8px;
    overflow: visible !important;
    min-width: 0;
    padding: 0;
  }

  .topbar-actions > * {
    min-width: 0;
    max-width: 100%;
  }

  .topbar-actions .profile-menu-wrap {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
  }

  .topbar-actions .profile-chip {
    width: 100%;
    max-width: 100% !important;
  }

  .topbar-actions .profile-chip span,
  .topbar-actions .profile-chip small {
    max-width: none;
  }

  .year-picker {
    grid-column: 2;
    grid-row: 1;
    width: 100px !important;
    min-width: 0 !important;
    max-width: 100px;
    justify-content: space-between;
  }

  .year-picker .select-combo,
  .year-picker .combo-box {
    flex: 1 1 auto;
    width: auto;
    min-width: 0 !important;
  }

  .topbar-actions .topbar-icon-button {
    width: 40px;
  }

  .topbar-actions #notificationButton {
    grid-column: 3;
    grid-row: 1;
  }

  .topbar-actions #undoButton {
    grid-column: 4;
    grid-row: 1;
  }

  .topbar-actions #autoAllocateButton,
  .topbar-actions .install-app-button:not([hidden]) {
    grid-column: 1 / -1;
    width: 100%;
  }

  .notification-panel {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px);
    padding: 12px;
  }

  .notification-push-card,
  .notification-item {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-item-actions {
    justify-content: flex-start;
  }

  .todo-stats {
    justify-content: flex-start;
  }

  .todo-actions {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 1100px), (any-pointer: coarse) {
  .app-shell.mobile-nav-open > .sidebar {
    left: 0 !important;
    right: auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
    translate: 0 0 !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Keep repeated menu/submenu labels out of the working surface. */
#tableTitle {
  display: none !important;
}

.table-panel > .panel-head {
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  min-height: 0;
  margin-bottom: 12px;
}

.table-panel > .panel-head #tableCount {
  margin-left: auto;
}

.table-panel > .panel-head #tableCount:empty {
  display: none;
}

#tableView.is-market-debts-view .table-panel > .panel-head {
  display: none;
}

#tableView.is-weekly-view .table-toolbar {
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
}

.weekly-current-week-heading {
  display: grid;
  justify-items: center;
  gap: 3px;
  color: var(--muted);
  text-align: center;
}

.weekly-current-week-heading span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weekly-current-week-heading strong {
  color: var(--ink);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
}

.weekly-placement-list {
  display: grid;
  gap: 7px;
  min-width: min(430px, 55vw);
}

.weekly-placement-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.weekly-placement-row span {
  color: var(--muted);
  white-space: nowrap;
}

.weekly-placement-row b {
  color: var(--primary-strong);
  white-space: nowrap;
}

.weekly-placement-missing {
  color: var(--color-danger);
  font-weight: 700;
}

@media (max-width: 720px) {
  .weekly-placement-list {
    min-width: 0;
  }

  .weekly-placement-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }

  .weekly-placement-row span {
    grid-column: 1 / -1;
  }
}

.content .panel-head .eyebrow,
.content .billing-card-head .eyebrow,
.content .design-editor-panel-head .eyebrow,
.content .market-order-day-head .eyebrow,
.content .management-page-head .eyebrow,
.content .profile-settings-head .eyebrow,
.content .order-inbox-sender-panel-head .eyebrow {
  display: none !important;
}

#tableView.is-foil-control-view .table-panel > .panel-head {
  display: none;
}

#tableView.is-plc-view .table-panel > .panel-head {
  display: none;
}

#tableView.is-plant-protection-view .table-panel > .panel-head {
  display: none;
}

.plant-protection-workspace {
  display: grid;
  gap: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  overflow: hidden;
}

.plant-protection-source-note,
.plant-protection-section-head,
.plant-protection-product-heading,
.plant-protection-calibration,
.plant-protection-search-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plant-protection-source-note {
  padding: 12px 18px;
  color: var(--muted);
  background: var(--selection-soft);
  font-size: 0.86rem;
}

.plant-protection-source-note strong {
  margin-right: 6px;
  color: var(--primary-strong);
}

.plant-protection-source-note a,
.plant-protection-product-info a {
  color: var(--primary);
  font-weight: 900;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.plant-protection-section {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-top: 1px solid var(--line);
}

.plant-protection-section-head > div {
  display: grid;
  gap: 3px;
}

.plant-protection-section-head span {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plant-protection-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.08rem;
  letter-spacing: 0;
}

.plant-protection-section-head small {
  max-width: 430px;
  color: var(--muted);
  text-align: right;
  font-weight: 700;
}

.plant-protection-equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.plant-protection-equipment-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--layout-input-radius);
  color: var(--ink);
  background: var(--surface);
}

.plant-protection-equipment {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.plant-protection-equipment strong {
  font-size: 0.94rem;
}

.plant-protection-equipment span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.plant-protection-equipment-card:hover,
.plant-protection-equipment-card.is-active,
.plant-protection-equipment-card.is-params-open {
  border-color: var(--selection-border);
  background: var(--selection-soft);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.plant-protection-equipment-params {
  justify-self: start;
}

.plant-protection-calibration {
  justify-content: flex-start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: var(--layout-input-radius);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.plant-protection-calibration .field {
  flex: 0 1 230px;
}

.plant-protection-calibration .plant-protection-equipment-name-field {
  flex-basis: 280px;
}

.plant-protection-calibration .ghost-button,
.plant-protection-search-form .ghost-button {
  align-self: end;
  flex: 0 0 auto;
}

.plant-protection-auto-save-status {
  align-self: end;
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-input-height);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--layout-input-radius);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.plant-protection-auto-save-status.is-saving {
  border-color: var(--selection-border);
  color: var(--primary-strong);
}

.plant-protection-auto-save-status.is-saved {
  color: var(--primary);
}

.plant-protection-auto-save-status.is-error {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.plant-protection-calibration input,
.plant-protection-search-form .field input {
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  outline: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--color-input-background);
  font-size: var(--font-input-size);
}

.plant-protection-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.plant-protection-form-grid > .span-2 {
  grid-column: span 2;
}

.plant-protection-form-grid .field > input,
.plant-protection-form-grid .field > select,
.plant-protection-form-grid .field > textarea {
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  outline: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--color-input-background) 92%, transparent);
  font-size: var(--font-input-size);
}

.plant-protection-form-grid .field > textarea {
  min-height: 86px;
  resize: vertical;
}

.plant-protection-form-grid .field > input:focus,
.plant-protection-form-grid .field > select:focus,
.plant-protection-form-grid .field > textarea:focus {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.plant-protection-product-info {
  display: grid;
  gap: 10px;
  padding: 15px;
  border-left: 4px solid var(--selection-border);
  background: color-mix(in srgb, var(--selection-soft) 58%, var(--surface));
}

.plant-protection-product-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.plant-protection-product-heading strong {
  color: var(--ink);
}

.plant-protection-product-heading > div > span,
.plant-protection-product-info p {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.plant-protection-product-info p {
  margin: 0;
}

.plant-protection-source-links,
.plant-protection-pests,
.plant-protection-recipe-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
}

.plant-protection-source-links {
  justify-content: flex-start;
}

.plant-protection-dose-databases {
  display: grid;
  gap: 9px;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line));
}

.plant-protection-dose-databases > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.plant-protection-dose-databases > div:first-child strong {
  color: var(--ink);
}

.plant-protection-dose-databases > div:first-child small,
.plant-protection-dose-databases > p {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.plant-protection-dose-databases > p {
  margin: 0;
}

.plant-protection-dose-database-links {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.plant-protection-dose-database-links a {
  display: grid;
  gap: 1px;
  min-width: 145px;
  padding: 6px 0;
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  color: var(--ink);
  text-decoration: none;
}

.plant-protection-dose-database-links a:hover,
.plant-protection-dose-database-links a.is-primary {
  border-bottom-color: var(--selection-border);
  color: var(--primary-strong);
}

.plant-protection-dose-database-links span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.plant-protection-pests {
  color: var(--muted);
  font-size: 0.8rem;
}

.plant-protection-pests > strong {
  color: var(--ink);
}

.plant-protection-pests > span {
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  font-weight: 800;
}

.plant-protection-pests > em {
  font-style: normal;
  font-weight: 800;
}

.plant-protection-pests > small {
  flex: 1 0 100%;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.plant-protection-product-info > .danger-button {
  justify-self: start;
}

.plant-protection-dose-editor {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(130px, 180px) auto;
  align-items: end;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line));
}

.plant-protection-dose-editor .ghost-button {
  align-self: end;
}

.plant-protection-dose-editor .field small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.plant-protection-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.2;
}

.plant-protection-status.is-approved {
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--line));
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 9%, var(--surface));
}

.plant-protection-status.is-warning {
  border-color: color-mix(in srgb, #b7791f 34%, var(--line));
  color: #8a560d;
  background: color-mix(in srgb, #f6c453 14%, var(--surface));
}

.plant-protection-status.is-blocked {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.plant-protection-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.plant-protection-facts div {
  display: grid;
  gap: 2px;
}

.plant-protection-facts dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.plant-protection-facts dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
}

.plant-protection-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.plant-protection-confirmation input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--primary);
}

.plant-protection-block-message,
.plant-protection-rate-warning,
.plant-protection-load-error {
  border-left: 4px solid var(--danger);
  padding: 10px 12px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  font-size: 0.84rem;
  font-weight: 800;
}

.plant-protection-block-message.is-warning,
.plant-protection-rate-warning {
  border-left-color: #b7791f;
  color: #75480a;
  background: color-mix(in srgb, #f6c453 12%, var(--surface));
}

.plant-protection-section > .primary-button {
  justify-self: start;
}

.plant-protection-section > .primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.plant-protection-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.plant-protection-results > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--layout-input-radius);
  background: var(--surface);
}

.plant-protection-results span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.plant-protection-results strong {
  color: var(--primary-strong);
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

.plant-protection-mixer-note {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: var(--layout-input-radius);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.plant-protection-mixer-note strong {
  color: var(--primary-strong);
}

.plant-protection-mixer-note span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.plant-protection-mix-plan {
  display: grid;
  gap: 0;
}

.plant-protection-mix-plan-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plant-protection-area-field {
  width: min(100%, 260px);
}

.plant-protection-recipe-list {
  display: grid;
  gap: 12px;
}

.plant-protection-recipe-item {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--layout-input-radius);
  background: var(--surface);
}

.plant-protection-recipe-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.plant-protection-recipe-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.plant-protection-recipe-head > div > span,
.plant-protection-recipe-head small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.plant-protection-recipe-head strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.plant-protection-recipe-fields {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(130px, 1fr) minmax(130px, 1fr);
  gap: 10px;
}

.plant-protection-recipe-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.plant-protection-recipe-meta span {
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.plant-protection-recipe-warning {
  border-left: 4px solid var(--danger);
  padding: 8px 10px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  font-size: 0.8rem;
  font-weight: 900;
}

.plant-protection-recipe-empty,
.plant-protection-compatibility-empty {
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: var(--layout-input-radius);
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.plant-protection-compatibility {
  display: grid;
  gap: 9px;
}

.plant-protection-compatibility > strong {
  color: var(--ink);
}

.plant-protection-compatibility-list {
  display: grid;
  gap: 7px;
}

.plant-protection-compatibility-list > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-left: 4px solid var(--color-warning);
  color: #75480a;
  background: color-mix(in srgb, var(--color-warning) 9%, var(--surface));
}

.plant-protection-compatibility-list > div.is-incompatible {
  border-left-color: var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.plant-protection-compatibility-list span {
  font-size: 0.8rem;
  font-weight: 800;
}

.plant-protection-mix-results {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.plant-protection-mix-results > div {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--layout-input-radius);
  background: var(--surface);
}

.plant-protection-mix-results span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.plant-protection-products-modebar {
  justify-content: flex-start;
  gap: 8px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.plant-protection-products-modebar .subnav-button {
  min-height: 34px;
}

.plant-protection-products-settings {
  display: grid;
  gap: 16px;
}

.plant-protection-settings-block {
  display: grid;
  gap: 13px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.plant-protection-settings-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.plant-protection-product-filter {
  width: min(100%, 620px);
}

.plant-protection-official-search-field {
  flex: 1 1 360px;
  width: auto;
}

.plant-protection-product-list {
  display: grid;
  gap: 6px;
}

.plant-protection-product-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.plant-protection-product-card.is-open {
  border-color: color-mix(in srgb, var(--selection-border) 46%, var(--line));
  background: color-mix(in srgb, var(--selection-border) 5%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--selection-ring);
}

.plant-protection-product-row {
  display: grid;
  grid-template-columns: 30px minmax(170px, 1.45fr) minmax(104px, 0.7fr) minmax(108px, 0.7fr) minmax(135px, 0.95fr) minmax(150px, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  min-width: 0;
}

.plant-protection-product-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.plant-protection-product-main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plant-protection-product-main span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plant-protection-product-cell {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.plant-protection-product-cell small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.plant-protection-product-cell strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plant-protection-product-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--selection-border) 26%, var(--line));
  border-radius: 9px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--selection-border) 6%, var(--surface));
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.plant-protection-product-toggle:hover,
.plant-protection-product-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  background: color-mix(in srgb, var(--selection-border) 12%, var(--surface));
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: 0;
}

.plant-protection-product-editor {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-top: 8px;
}

.plant-protection-product-editor > .span-2 {
  grid-column: span 2;
}

.plant-protection-product-editor input,
.plant-protection-product-editor select,
.plant-protection-product-editor textarea {
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  outline: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--color-input-background);
  font-size: var(--font-input-size);
}

.plant-protection-product-editor textarea {
  min-height: 86px;
  resize: vertical;
}

.plant-protection-product-editor input:focus,
.plant-protection-product-editor select:focus,
.plant-protection-product-editor textarea:focus {
  border-color: var(--selection-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.plant-protection-product-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.plant-protection-log-from-calculation {
  display: grid;
  gap: 14px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: var(--layout-input-radius);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.plant-protection-log-heading,
.plant-protection-log-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.plant-protection-log-heading > div,
.plant-protection-log-card-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.plant-protection-log-heading strong,
.plant-protection-log-card-head strong,
.plant-protection-log-subhead {
  color: var(--ink);
  font-weight: 900;
}

.plant-protection-log-heading span,
.plant-protection-log-card-head span,
.plant-protection-log-card-head small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.plant-protection-log-from-calculation > .primary-button {
  justify-self: start;
}

.plant-protection-log-subhead {
  padding-top: 4px;
  font-size: 0.9rem;
}

.plant-protection-manual-products,
.plant-protection-log-list {
  display: grid;
  gap: 12px;
}

.plant-protection-manual-product,
.plant-protection-log-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--layout-input-radius);
  background: var(--surface);
}

.plant-protection-manual-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.plant-protection-add-manual-product {
  justify-self: start;
}

.plant-protection-log-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.plant-protection-log-facts div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--layout-input-radius);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.plant-protection-log-facts dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.plant-protection-log-facts dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.plant-protection-log-products,
.plant-protection-log-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.45;
}

.plant-protection-log-products {
  color: var(--primary-strong);
}

.plant-protection-result-empty,
.plant-protection-log-empty {
  display: grid;
  min-height: 160px;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.plant-protection-search-form {
  justify-content: flex-start;
}

.plant-protection-search-form .field {
  flex: 1 1 360px;
}

.plant-protection-search-results {
  display: grid;
  border-top: 1px solid var(--line);
}

.plant-protection-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: default;
}

.plant-protection-search-result:hover {
  background: var(--selection-soft);
}

.plant-protection-search-result > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.plant-protection-search-result small {
  color: var(--muted);
}

.plant-protection-legal-note {
  margin: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

@media (max-width: 1050px) {
  .plant-protection-equipment-grid,
  .plant-protection-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plant-protection-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plant-protection-recipe-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plant-protection-dose-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plant-protection-dose-editor .ghost-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .plant-protection-recipe-fields .field:first-child {
    grid-column: 1 / -1;
  }

  .plant-protection-mix-results > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plant-protection-product-row {
    grid-template-columns: 30px minmax(160px, 1.3fr) minmax(100px, 0.7fr) minmax(108px, 0.7fr);
  }

  .plant-protection-product-cell.is-purpose,
  .plant-protection-product-cell.is-pests {
    grid-column: span 2;
  }

  .plant-protection-manual-product-grid,
  .plant-protection-log-facts,
  .plant-protection-product-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plant-protection-product-editor > .span-2 {
    grid-column: span 2;
  }
}

@media (max-width: 699px) {
  .plant-protection-workspace {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .plant-protection-source-note,
  .plant-protection-section-head,
  .plant-protection-product-heading,
  .plant-protection-calibration,
  .plant-protection-search-form,
  .plant-protection-search-result {
    align-items: stretch;
    flex-direction: column;
  }

  .plant-protection-section-head small {
    max-width: none;
    text-align: left;
  }

  .plant-protection-section {
    padding: 17px 14px;
  }

  .plant-protection-products-modebar {
    width: 100%;
  }

  .plant-protection-products-modebar .subnav-button {
    flex: 1 1 0;
    justify-content: center;
  }

  .plant-protection-equipment-grid,
  .plant-protection-form-grid,
  .plant-protection-results,
  .plant-protection-facts {
    grid-template-columns: 1fr;
  }

  .plant-protection-form-grid > .span-2 {
    grid-column: auto;
  }

  .plant-protection-calibration .field,
  .plant-protection-search-form .field,
  .plant-protection-search-form .table-search-field {
    flex-basis: auto;
    width: 100%;
  }

  .plant-protection-calibration .ghost-button,
  .plant-protection-auto-save-status,
  .plant-protection-search-form .ghost-button,
  .plant-protection-section > .primary-button {
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
  }

  .plant-protection-search-result .plant-protection-status {
    align-self: flex-start;
  }

  .plant-protection-recipe-head,
  .plant-protection-recipe-fields,
  .plant-protection-dose-editor,
  .plant-protection-mix-results > div,
  .plant-protection-manual-product-grid,
  .plant-protection-log-facts,
  .plant-protection-product-editor {
    grid-template-columns: 1fr;
  }

  .plant-protection-log-heading,
  .plant-protection-log-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .plant-protection-product-card {
    padding: 9px;
  }

  .plant-protection-product-row {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px 9px;
  }

  .plant-protection-product-main {
    min-width: 0;
  }

  .plant-protection-product-row > .plant-protection-status,
  .plant-protection-product-cell {
    grid-column: 2;
  }

  .plant-protection-product-row > .plant-protection-status {
    justify-self: start;
  }

  .plant-protection-product-editor > .span-2 {
    grid-column: auto;
  }

  .plant-protection-dose-editor .ghost-button {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }

  .plant-protection-recipe-fields .field:first-child {
    grid-column: auto;
  }

  .plant-protection-recipe-head .plant-protection-status,
  .plant-protection-recipe-head .danger-button {
    justify-self: start;
  }

  .plant-protection-log-from-calculation > .primary-button,
  .plant-protection-add-manual-product {
    justify-self: stretch;
    width: 100%;
  }

  .plant-protection-product-actions > button,
  .plant-protection-product-actions > .mini-button {
    width: 100%;
  }

  .plant-protection-area-field {
    width: 100%;
  }

  .plant-protection-dose-database-links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .plant-protection-dose-database-links a {
    min-width: 0;
  }
}

#tableView.is-management-view .table-panel > .panel-head {
  display: none;
}

#tableView.is-foil-control-view .table-panel,
#tableView.is-plc-view .table-panel {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#tableView.is-management-view .table-panel {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#tableView.is-plant-protection-view .table-panel {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#tableView.is-foil-control-view .table-wrap,
#tableView.is-plc-view .table-wrap {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-gutter: auto;
}

#tableView.is-management-view .table-wrap {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-gutter: auto;
}

#tableView.is-plant-protection-view .table-wrap {
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-gutter: auto;
}

#tableView.is-plant-protection-view .full-panel-cell {
  padding: 0;
}

#tableView.is-foil-control-view table,
#tableView.is-foil-control-view tbody,
#tableView.is-foil-control-view tr,
#tableView.is-foil-control-view td {
  display: block;
  min-width: 0;
  width: 100%;
}

#tableView.is-plc-view table,
#tableView.is-plc-view tbody,
#tableView.is-plc-view tr,
#tableView.is-plc-view td {
  display: block;
  min-width: 0;
  width: 100%;
}

#tableView.is-management-view table,
#tableView.is-management-view tbody,
#tableView.is-management-view tr,
#tableView.is-management-view td {
  display: block;
  min-width: 0;
  width: 100%;
}

#tableView.is-management-view .management-invite-table {
  display: table;
  width: 100%;
}

#tableView.is-management-view .management-invite-table thead {
  display: table-header-group;
}

#tableView.is-management-view .management-invite-table tbody {
  display: table-row-group;
}

#tableView.is-management-view .management-invite-table tr {
  display: table-row;
  width: auto;
}

#tableView.is-management-view .management-invite-table th,
#tableView.is-management-view .management-invite-table td {
  display: table-cell;
  width: auto;
  min-width: 0;
}

.foil-control-shell {
  display: grid;
  gap: 18px;
  width: 100%;
}

.foil-control-head {
  order: 1;
}

.foil-control-storm-panel {
  order: 1;
}

.foil-control-nav-row {
  order: 2;
}

.foil-control-commandbar {
  order: 3;
}

.foil-control-layout {
  order: 4;
}

.foil-control-log-panel {
  order: 5;
}

.foil-control-overview-panel {
  order: 3;
  display: none;
}

.foil-control-head,
.foil-control-tabbar,
.foil-control-commandbar,
.foil-control-connection-panel,
.foil-control-storm-panel,
.foil-control-target-panel,
.foil-control-overview-panel,
.foil-control-mode-notice,
.foil-control-manual-panel,
.foil-control-param-group,
.foil-control-device-panel,
.foil-control-log-panel {
  border: 1px solid #e6e9e2;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.foil-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 82px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 2% 0%, color-mix(in srgb, var(--leaf) 15%, transparent), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 247, 0.98));
}

.foil-control-head strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.foil-control-head span,
.foil-control-section-head span,
.foil-control-target-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.foil-control-connection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid #dce8d7;
  border-radius: 999px;
  color: var(--primary-strong);
  background: #f4f8f1;
  font-size: 13px;
  font-weight: 800;
}

.foil-control-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.foil-control-nav-row .foil-control-tabbar {
  order: 0;
}

.foil-control-nav-row .foil-control-connection {
  order: 1;
  margin-left: auto;
  white-space: nowrap;
}

.foil-control-data-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 12px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  font-size: 12px;
  font-weight: 800;
}

.foil-control-data-loading.is-error {
  border-color: color-mix(in srgb, #dc2626 28%, var(--line));
  color: #b91c1c;
  background: color-mix(in srgb, #dc2626 6%, var(--surface));
}

.foil-control-inline-loading-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: foil-control-spin 800ms linear infinite;
}

.foil-control-tabbar {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 4px;
  padding: 5px;
  background: #f8fbf5;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}

.foil-control-tabbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.foil-control-tabbar button:hover,
.foil-control-tabbar button:focus-visible {
  color: var(--primary-strong);
  background: var(--selection-soft);
  outline: 0;
}

.foil-control-tabbar button.is-active {
  color: #ffffff;
  background: var(--primary);
  box-shadow: var(--active-shadow);
}

.foil-control-tabbar .foil-control-icon {
  width: 17px;
  height: 17px;
  color: currentColor;
}

.foil-control-commandbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
}

.foil-control-field {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.foil-control-field > span,
.foil-control-switch span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-field input,
.foil-control-field select,
.foil-control-param-control input,
.foil-control-param-control select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #e1e5dd;
  border-radius: 12px;
  background: #fbfcfa;
  color: #0f172a;
  font: inherit;
  font-weight: 700;
  padding: 8px 10px;
}

.foil-control-field input:focus,
.foil-control-field select:focus,
.foil-control-param-control input:focus,
.foil-control-param-control select:focus {
  outline: 0;
  border-color: var(--selection-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.foil-control-param-control input.is-mixed-value {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--primary-strong);
  font-weight: 900;
}

.foil-control-param-control input.is-mixed-value.is-editing-mixed-value {
  border-color: var(--selection-border);
  background: #fbfcfa;
  color: #0f172a;
}

.foil-control-switch,
.foil-control-custom-targets label,
.foil-control-automation-targets label {
  border: 1px solid #dce8d7;
  background: #f8fbf5;
}

.foil-control-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 12px;
}

.foil-control-switch input,
.foil-control-custom-targets input,
.foil-control-automation-targets input {
  width: 18px;
  height: 18px;
  accent-color: #0f766e;
}

.foil-control-refresh-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.foil-control-refresh-button .foil-control-icon {
  width: 17px;
  height: 17px;
}

.foil-control-refresh-note {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-storm-panel {
  overflow: hidden;
}

.foil-control-storm-panel header {
  display: block;
  padding: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fbf5;
}

.foil-control-storm-panel-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.foil-control-storm-panel-toggle:hover h4,
.foil-control-storm-panel-toggle:focus-visible h4 {
  color: var(--primary-strong);
}

.foil-control-storm-panel-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: -4px;
  border-radius: 15px;
}

.foil-control-storm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.foil-control-storm-title > span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-storm-panel header h4 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--primary);
  font-size: 18px;
  line-height: 1.2;
}

.foil-control-storm-panel header .foil-control-icon {
  width: 22px;
  height: 22px;
}

.foil-control-storm-panel header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.foil-control-storm-panel.is-collapsed header {
  border-bottom-color: transparent;
}

.foil-control-storm-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #bbdfae;
  border-radius: 999px;
  color: var(--primary-strong);
  background: #f0f8ec;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.foil-control-storm-badge.is-warning {
  border-color: #f5d39b;
  color: #a16207;
  background: #fffbeb;
}

.foil-control-storm-badge.is-critical {
  border-color: rgba(185, 56, 47, 0.24);
  color: var(--danger);
  background: rgba(185, 56, 47, 0.08);
}

.foil-control-storm-body {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.foil-control-storm-summary {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #edf0eb;
  border-radius: 12px;
  background: #ffffff;
}

.foil-control-storm-summary strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.foil-control-storm-summary p,
.foil-control-storm-provider p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.foil-control-storm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.foil-control-storm-toggle-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #dce8d7;
  border-radius: 999px;
  color: var(--primary-strong);
  background: #f8fbf5;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.foil-control-storm-toggle-action:hover,
.foil-control-storm-toggle-action:focus-within {
  border-color: var(--selection-border);
  background: var(--selection-soft);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.foil-control-storm-toggle-action.is-active {
  border-color: color-mix(in srgb, var(--primary) 40%, #dce8d7);
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
}

.foil-control-storm-toggle-action input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
}

.foil-control-storm-toggle-action .foil-control-icon {
  width: 18px;
  height: 18px;
}

.foil-control-storm-providers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.foil-control-storm-provider {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #edf0eb;
  border-radius: 12px;
  background: #ffffff;
}

.foil-control-storm-provider.is-muted {
  background: #f8faf7;
}

.foil-control-storm-provider > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.foil-control-storm-provider strong,
.foil-control-storm-provider a,
.foil-control-storm-provider span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-storm-provider strong,
.foil-control-storm-provider a {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.foil-control-storm-provider span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.foil-control-storm-provider-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.foil-control-storm-provider-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--primary-strong);
  background: var(--selection-soft);
}

.foil-control-storm-settings {
  border: 1px solid #edf0eb;
  border-radius: 12px;
  background: #ffffff;
}

.foil-control-storm-settings summary {
  padding: 12px 14px;
  color: var(--primary-strong);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.foil-control-storm-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 0 12px 12px;
}

.foil-control-storm-form .foil-control-switch,
.foil-control-storm-form .primary-button {
  align-self: end;
}

.foil-control-field input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #e1e5dd;
  border-radius: 12px;
  background: #fbfcfa;
  color: #0f172a;
  font: inherit;
  font-weight: 700;
  padding: 8px 10px;
}

.foil-control-field input:focus {
  outline: 0;
  border-color: var(--selection-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.foil-control-connection-panel {
  overflow: hidden;
}

.foil-control-settings-view {
  order: 3;
  display: grid;
  gap: 12px;
}

.foil-control-connection-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fbf5;
}

.foil-control-connection-panel header h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.foil-control-connection-panel header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-connection-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #f3c5a5;
  border-radius: 999px;
  color: #b45309;
  background: #fff7ed;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.foil-control-connection-badge.is-ready {
  border-color: #bbdfae;
  color: #2f7d32;
  background: #f0f8ec;
}

.foil-control-overview-panel {
  overflow: hidden;
}

.foil-control-overview-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fbf5;
}

.foil-control-overview-panel h4 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--primary);
  font-size: 18px;
  line-height: 1.2;
}

.foil-control-overview-panel header .foil-control-icon {
  width: 22px;
  height: 22px;
}

.foil-control-overview-panel header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.foil-control-overview-table {
  display: grid;
  min-width: 0;
}

.foil-control-overview-head,
.foil-control-overview-row {
  display: grid;
  grid-template-columns: 34px minmax(150px, 1.35fr) minmax(92px, 0.8fr) minmax(92px, 0.8fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 16px;
}

.foil-control-overview-head {
  min-height: 42px;
  color: #64748b;
  background: #ffffff;
  border-bottom: 1px solid #edf0eb;
  font-size: 13px;
  font-weight: 900;
}

.foil-control-overview-row {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid #edf0eb;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.foil-control-overview-row:last-child {
  border-bottom: 0;
}

.foil-control-overview-row:hover,
.foil-control-overview-row:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--selection-bg) 28%, var(--surface));
}

.foil-control-overview-row.is-selected,
.foil-control-overview-row.is-viewing {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 82%, var(--selection-soft));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--selection-border) 42%, transparent);
}

.foil-control-overview-row.is-targeted:not(.is-selected):not(.is-viewing) {
  background: color-mix(in srgb, var(--selection-soft) 62%, #ffffff);
}

.foil-control-overview-target-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.foil-control-overview-target-toggle:hover,
.foil-control-overview-target-toggle:focus-visible {
  outline: 0;
  border-color: var(--selection-border);
  background: var(--selection-soft);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.foil-control-overview-target-toggle.is-targeted {
  border-color: var(--selection-border);
  background: var(--primary);
  box-shadow: 0 8px 18px var(--selection-ring);
}

.foil-control-overview-target-toggle.is-targeted:hover,
.foil-control-overview-target-toggle.is-targeted:focus-visible {
  background: var(--primary-strong);
}

.foil-control-overview-target-toggle .foil-control-status-dot {
  width: 11px;
  height: 11px;
}

.foil-control-overview-target-toggle.is-targeted .foil-control-status-dot {
  opacity: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.72);
}

.foil-control-overview-target-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 14px;
  background: #ffffff;
  clip-path: polygon(0 56%, 18% 38%, 36% 68%, 88% 0, 100% 11%, 39% 94%);
  content: "";
  opacity: 0;
  transform: translate(-50%, -52%) rotate(-8deg);
  transform-origin: 50% 55%;
}

.foil-control-overview-target-toggle.is-targeted::after {
  opacity: 1;
}

.foil-control-overview-name {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.foil-control-overview-name .foil-control-icon {
  width: 21px;
  height: 21px;
}

.foil-control-overview-name strong,
.foil-control-overview-name small {
  display: block;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-overview-name strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.foil-control-overview-name small {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-overview-state,
.foil-control-overview-temp {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}

.foil-control-overview-temp {
  text-align: right;
}

.foil-control-heating-state {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  max-width: 100%;
  white-space: nowrap;
}

.foil-control-heating-state .foil-control-icon {
  width: 14px;
  height: 14px;
}

.foil-control-heating-state .foil-control-icon.is-snowflake {
  color: #38bdf8;
}

.foil-control-heating-state .foil-control-icon.is-flame {
  color: #f97316;
}

.foil-control-heating-state.is-idle > span {
  color: #0284c7;
}

.foil-control-heating-state.is-heating > span {
  color: #dc2626;
}

.foil-control-connection-form {
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) minmax(190px, 1fr) minmax(170px, 0.8fr) auto auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
}

.foil-control-connection-form label:not(.foil-control-switch) {
  display: grid;
  gap: 6px;
}

.foil-control-connection-form label > span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-connection-form input[type="text"],
.foil-control-connection-form input:not([type]),
.foil-control-connection-form input[readonly],
.foil-control-connection-form input[type="url"],
.foil-control-connection-form input[type="email"],
.foil-control-connection-form input[type="password"] {
  width: 100%;
  min-height: 40px;
  border: 1px solid #e1e5dd;
  border-radius: 12px;
  background: #fbfcfa;
  color: #0f172a;
  font: inherit;
  font-weight: 700;
  padding: 8px 10px;
}

.foil-control-connection-form input:focus {
  outline: 0;
  border-color: var(--selection-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.foil-control-connection-form .primary-button {
  align-self: end;
  justify-content: center;
  min-height: 40px;
  min-width: 220px;
  white-space: nowrap;
}

.foil-control-connection-form .ghost-button {
  align-self: end;
  justify-content: center;
  min-height: 40px;
  white-space: nowrap;
}

.foil-control-token-box {
  display: grid;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 12px;
  background: var(--selection-soft);
  color: var(--ink);
}

.foil-control-token-box strong,
.foil-control-token-box small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.foil-control-token-box code {
  overflow-wrap: anywhere;
  border-radius: 10px;
  background: var(--surface);
  color: var(--primary);
  padding: 10px 12px;
  font-weight: 900;
}

.foil-control-gateway-status-grid {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.foil-control-gateway-device-table {
  margin: 0 12px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: 12px;
  overflow: hidden;
}

.foil-control-gateway-panel-map {
  margin: 0 12px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-strong));
  overflow: hidden;
}

.foil-control-gateway-panel-map summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.foil-control-gateway-panel-map summary::-webkit-details-marker {
  display: none;
}

.foil-control-gateway-panel-map summary > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.foil-control-gateway-panel-map summary strong {
  font-size: 13px;
  font-weight: 900;
}

.foil-control-gateway-panel-map summary small,
.foil-control-gateway-page-item small,
.foil-control-gateway-page-item > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-gateway-panel-map summary .foil-control-icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
  transition: transform 160ms ease;
}

.foil-control-gateway-panel-map[open] summary .foil-control-icon {
  transform: rotate(180deg);
}

.foil-control-gateway-page-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}

.foil-control-gateway-page-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: 10px;
  background: var(--surface);
}

.foil-control-gateway-page-item strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plc-shell {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.plc-head,
.plc-panel,
.plc-status-strip {
  border: 1px solid #e6e9e2;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.plc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 94px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 251, 0.98));
}

.plc-head > div:first-child,
.plc-panel header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.plc-head span,
.plc-panel header span,
.plc-status-strip span,
.plc-mini-metric span,
.plc-device-name small,
.plc-page-item small,
.plc-panel-field small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.plc-head strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}

.plc-head p {
  max-width: 760px;
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.plc-head-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.plc-status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  overflow: hidden;
}

.plc-status-strip > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid #edf1eb;
  border-bottom: 1px solid #edf1eb;
}

.plc-status-strip > div.is-warning {
  background: color-mix(in srgb, var(--color-warning) 10%, #ffffff);
}

.plc-status-strip strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plc-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

.plc-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plc-panel h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.plc-panel h4 .foil-control-icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.plc-metric-grid,
.plc-map-summary,
.plc-foil-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.plc-mini-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, #ffffff);
}

.plc-mini-metric .foil-control-icon {
  grid-row: span 2;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.plc-mini-metric strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plc-foil-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.plc-foil-tabbar {
  justify-self: stretch;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.plc-foil-tabbar::-webkit-scrollbar {
  display: none;
}

.plc-foil-tabbar button {
  flex: 1 1 0;
  min-width: 150px;
}

.plc-foil-tabbar button small {
  color: currentColor;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.72;
}

.plc-shell > .plc-nav-row {
  order: 1;
}

.plc-shell > .plc-commandbar {
  order: 2;
}

.plc-shell > .plc-control-view,
.plc-shell > .plc-settings-view {
  display: grid;
  gap: 12px;
  min-width: 0;
  order: 3;
}

.plc-control-placeholder {
  margin: 0;
}

.plc-foil-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 12px;
  background: #ffffff;
}

.plc-foil-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.plc-foil-card header div {
  display: grid;
  gap: 2px;
}

.plc-foil-card header span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 950;
}

.plc-foil-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.plc-foil-card header > strong {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--selection-soft);
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 900;
}

.plc-old-back-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 12px;
  background: #ffffff;
}

.plc-old-back-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.plc-old-back-panel > header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.plc-old-back-panel > header span:not(.foil-control-connection-badge) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.plc-old-back-layout {
  align-items: start;
}

.plc-old-back-panel .foil-control-device-panel,
.plc-old-back-panel .foil-control-target-panel,
.plc-old-back-panel .foil-control-param-group {
  box-shadow: none;
}

.plc-panel > .plc-foil-card,
.plc-panel > .plc-old-back-panel,
.plc-control-view > .plc-foil-card,
.plc-control-view > .plc-old-back-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.plc-panel > .plc-foil-card,
.plc-control-view > .plc-foil-card {
  gap: 10px;
}

.plc-panel > .plc-foil-card .plc-foil-identification {
  border: 0;
  border-radius: 8px;
}

.plc-panel > .plc-foil-card .plc-device-list {
  gap: 0;
  border-top: 1px solid #edf0eb;
}

.plc-panel > .plc-foil-card .plc-device-row {
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid #edf0eb;
  border-radius: 0;
  background: transparent;
}

.plc-old-back-panel {
  gap: 14px;
}

.plc-old-back-panel > header {
  padding-top: 2px;
}

.plc-old-back-panel .foil-control-connection-badge {
  align-self: flex-start;
  width: auto;
}

.plc-old-back-panel .foil-control-device-panel,
.plc-old-back-panel .foil-control-target-panel,
.plc-old-back-panel .foil-control-param-group {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.plc-old-back-panel .foil-control-device-panel {
  padding: 0;
}

.plc-old-back-panel .foil-control-device-list {
  gap: 0;
  border-top: 1px solid #edf0eb;
}

.plc-old-back-panel .foil-control-device-button {
  min-height: 64px;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid #edf0eb;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.plc-old-back-panel .foil-control-device-button:hover,
.plc-old-back-panel .foil-control-device-button:focus-visible,
.plc-old-back-panel .foil-control-device-button.is-selected,
.plc-old-back-panel .foil-control-device-button.is-viewing {
  outline: 0;
  background: color-mix(in srgb, var(--selection-soft) 50%, transparent);
  box-shadow: inset 3px 0 0 var(--selection-border);
  transform: none;
}

.plc-old-back-panel .foil-control-device-button.is-selected,
.plc-old-back-panel .foil-control-device-button.is-viewing {
  padding-left: 10px;
}

.plc-old-back-panel .foil-control-target-panel {
  padding: 12px 0;
  border-top: 1px solid #edf0eb;
  border-bottom: 1px solid #edf0eb;
  background: color-mix(in srgb, var(--selection-soft) 36%, transparent);
}

.plc-old-back-panel .foil-control-param-grid {
  gap: 0;
}

.plc-old-back-panel .foil-control-param-group {
  padding: 14px 0 0;
  border-top: 1px solid #edf0eb;
}

.plc-old-back-panel .foil-control-param-group header {
  padding: 0 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.plc-old-back-panel .foil-control-param-list {
  border-top: 1px solid #edf0eb;
}

.plc-old-back-panel .foil-control-param-row {
  padding: 11px 0;
}

.plc-old-back-vent-button {
  min-height: 64px;
}

.plc-setting-control {
  grid-template-columns: minmax(0, 1fr);
}

.plc-setting-control .foil-control-input-with-unit {
  min-width: 0;
}

.plc-setting-control .foil-control-input-with-unit input {
  width: 100%;
}

.plc-foil-identification {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--selection-soft) 58%, #ffffff);
}

.plc-foil-identification strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.plc-foil-identification div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plc-foil-identification span {
  min-width: 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 900;
}

.plc-device-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.plc-device-row {
  display: grid;
  grid-template-columns: 12px minmax(150px, 1fr) minmax(80px, 0.6fr) minmax(70px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #edf1eb;
  border-radius: 10px;
  background: #fbfcfa;
}

.plc-device-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.plc-device-name .foil-control-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.plc-device-name span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.plc-device-name strong,
.plc-device-row > span:not(.plc-device-name),
.plc-device-row b {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plc-device-row > span:not(.plc-device-name) {
  color: #475569;
  font-weight: 800;
}

.plc-empty-note,
.plc-write-note {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--color-warning) 24%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-warning) 9%, #ffffff);
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.plc-write-note .foil-control-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.plc-device-table {
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: 12px;
  overflow: hidden;
}

.plc-device-table .foil-control-overview-head,
.plc-device-table .foil-control-overview-row {
  grid-template-columns: 20px minmax(180px, 1.4fr) minmax(70px, 0.4fr) minmax(110px, 0.8fr) minmax(80px, 0.45fr);
}

.plc-category-list {
  display: grid;
  gap: 10px;
}

.plc-category {
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, #ffffff);
  overflow: hidden;
}

.plc-category summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.plc-category summary::-webkit-details-marker {
  display: none;
}

.plc-category summary > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.plc-category summary strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.plc-category summary .foil-control-icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
  transition: transform 160ms ease;
}

.plc-category[open] summary .foil-control-icon {
  transform: rotate(180deg);
}

.plc-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 0 10px 10px;
}

.plc-page-item {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #edf1eb;
  border-radius: 12px;
  background: #ffffff;
}

.plc-page-item header {
  display: grid;
  gap: 3px;
}

.plc-page-item header > span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
}

.plc-page-item strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plc-page-counts,
.plc-page-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.plc-page-counts span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f4f8f1;
  color: var(--primary-strong);
  font-size: 11px;
  font-weight: 900;
}

.plc-panel-field {
  display: grid;
  gap: 2px;
  max-width: 100%;
  min-width: min(100%, 170px);
  padding: 7px 8px;
  border: 1px solid #edf1eb;
  border-radius: 10px;
  background: #fbfcfa;
}

.plc-panel-field b {
  color: var(--primary);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.plc-panel-field span {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plc-panel-field.is-editable {
  border-color: color-mix(in srgb, var(--color-warning) 24%, var(--line));
  background: color-mix(in srgb, var(--color-warning) 8%, #ffffff);
}

.plc-panel-field.is-measured {
  border-color: color-mix(in srgb, var(--color-info) 20%, var(--line));
  background: color-mix(in srgb, var(--color-info) 7%, #ffffff);
}

.plc-panel-field.is-navigation {
  border-color: color-mix(in srgb, var(--leaf) 18%, var(--line));
}

.plc-panel .plc-category-list {
  gap: 0;
}

.plc-panel .plc-category {
  border: 0;
  border-top: 1px solid #edf0eb;
  border-radius: 0;
  background: transparent;
}

.plc-panel .plc-category:first-child {
  border-top: 0;
}

.plc-panel .plc-category summary {
  padding: 12px 0;
}

.plc-panel .plc-category[open] summary {
  border-bottom: 1px solid #edf0eb;
}

.plc-panel .plc-page-grid {
  gap: 0 16px;
  padding: 8px 0 12px;
}

.plc-panel .plc-page-item {
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid #edf0eb;
  border-radius: 0;
  background: transparent;
}

.plc-panel .plc-panel-field {
  border: 0;
  border-radius: 8px;
}

.plc-gateway-panel .foil-control-token-box {
  margin: 0;
}

.mail-admin-shell {
  display: grid;
  gap: 12px;
  width: 100%;
}

.mail-admin-commandbar {
  display: grid;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #dfe7d6;
  border-radius: 8px;
  background: #f8fbf5;
}

.mail-admin-commandbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.mail-admin-server-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mail-admin-server-summary > strong {
  color: var(--ink);
  font-size: 16px;
}

.mail-admin-server-summary > span,
.mail-admin-list-row small,
.mail-admin-empty {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.mail-admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.mail-admin-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid #edf0eb;
  background: #ffffff;
}

.mail-admin-feature-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid #dbe5d2;
  border-radius: 999px;
  padding: 5px 9px;
  color: #64748b;
  background: #f8fbf5;
  font-size: 12px;
  font-weight: 900;
}

.mail-admin-feature-list span.is-active {
  color: #31513e;
  border-color: #bbdfae;
  background: #f0f8ec;
}

.mail-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mail-admin-work-grid {
  display: grid;
  gap: 12px;
  align-items: start;
}

.mail-admin-panel {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e6e9e2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.mail-admin-panel .nav-icon {
  width: 22px;
  height: 22px;
}

.mail-admin-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fbf5;
}

.mail-admin-panel > header h4 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  color: var(--primary);
  font-size: 18px;
  line-height: 1.2;
}

.mail-admin-panel > header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.mail-admin-settings,
.mail-admin-list {
  display: grid;
  min-width: 0;
}

.mail-admin-setting-row,
.mail-admin-list-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 14px;
  border-bottom: 1px solid #edf0eb;
  background: #ffffff;
}

.mail-admin-account-row {
  grid-template-columns: minmax(210px, 0.8fr) minmax(260px, 1fr) minmax(210px, 0.7fr);
  align-items: start;
}

.mail-admin-account-card {
  grid-template-columns: minmax(220px, 0.78fr) minmax(230px, 0.9fr) minmax(280px, 1.2fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
}

.mail-admin-setting-row:last-child,
.mail-admin-list-row:last-child {
  border-bottom: 0;
}

.mail-admin-setting-row span,
.mail-admin-list-row > span {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.mail-admin-setting-row strong,
.mail-admin-list-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 13px;
}

.mail-admin-list-row > span {
  display: grid;
  gap: 2px;
}

.mail-admin-account-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.mail-admin-account-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.mail-admin-account-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mail-admin-account-title .foil-control-connection-badge {
  flex: 0 0 auto;
}

.mail-admin-account-summary small {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.mail-admin-quota-bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf4e8;
}

.mail-admin-quota-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #6aa84f);
}

.mail-admin-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px 14px;
  border-bottom: 1px solid #edf0eb;
  background: #fbfdf8;
}

.mail-admin-form .field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mail-admin-form .field span,
.mail-admin-account-settings-grid .field span,
.mail-admin-password-field span,
.mail-admin-choice-list legend {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.mail-admin-form input,
.mail-admin-row-actions input,
.mail-admin-account-settings-grid input,
.mail-admin-account-settings-grid select,
.mail-admin-account-settings-grid textarea,
.mail-admin-password-field input {
  min-width: 0;
  width: 100%;
  border: 1px solid #dbe5d2;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-weight: 700;
  padding: 9px 10px;
}

.mail-admin-account-settings-grid textarea {
  resize: vertical;
  line-height: 1.45;
}

.mail-admin-form input:focus,
.mail-admin-row-actions input:focus,
.mail-admin-account-settings-grid input:focus,
.mail-admin-account-settings-grid select:focus,
.mail-admin-account-settings-grid textarea:focus,
.mail-admin-password-field input:focus {
  outline: 0;
  border-color: var(--selection-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.mail-admin-row-actions {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.mail-admin-quota-actions {
  grid-template-columns: minmax(120px, 1fr) auto;
}

.mail-admin-choice-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.mail-admin-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
  border: 1px solid #dbe5d2;
  border-radius: 8px;
  padding: 9px 10px;
  color: #31513e;
  background: #f8fbf5;
  cursor: pointer;
}

.mail-admin-choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 40%, #dbe5d2);
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
}

.mail-admin-choice input,
.mail-admin-switch input {
  accent-color: var(--primary);
}

.mail-admin-choice span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mail-admin-choice strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
}

.mail-admin-choice small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.mail-admin-account-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.mail-admin-account-settings-grid .field,
.mail-admin-password-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mail-admin-account-settings-grid .span-2 {
  grid-column: 1 / -1;
}

.mail-admin-switch {
  display: inline-grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #31513e;
  font-size: 13px;
  font-weight: 900;
}

.mail-admin-account-footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding-top: 2px;
}

.mail-admin-password-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #bbdfae;
  border-radius: 8px;
  background: #f0f8ec;
}

.mail-admin-password-panel > div {
  display: grid;
  gap: 2px;
}

.mail-admin-password-panel strong {
  color: var(--primary);
}

.mail-admin-password-panel span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.mail-admin-password-panel code {
  min-width: 0;
  overflow-wrap: anywhere;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 900;
  padding: 8px 10px;
}

.mail-admin-port-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf0eb;
  background: #ffffff;
}

.mail-admin-port-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #dbe5d2;
  border-radius: 999px;
  color: #31513e;
  background: #f8fbf5;
  font-size: 12px;
  font-weight: 900;
}

.mail-admin-log {
  max-height: 360px;
  margin: 0;
  overflow: auto;
  padding: 12px 14px;
  background: #111827;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.mail-admin-empty {
  padding: 12px 14px;
  background: #ffffff;
}

.webmail-page-panel {
  min-height: min(760px, calc(100vh - 148px));
}

.webmail-shell {
  position: relative;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: min(680px, calc(100vh - 230px));
}

.webmail-sidebar,
.webmail-main,
.webmail-reader,
.webmail-compose-dialog {
  min-width: 0;
  border: 1px solid #e6e9e2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.webmail-sidebar {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  background: #f8fbf5;
}

.webmail-compose-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
}

.webmail-compose-button .nav-icon,
.webmail-folder-button .nav-icon,
.webmail-attachment-chip .nav-icon,
.webmail-message-attachment .nav-icon,
.webmail-reader.is-empty .nav-icon {
  width: 18px;
  height: 18px;
}

.webmail-account-field,
.webmail-compose-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.webmail-account-field span,
.webmail-compose-field span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.webmail-account-field select,
.webmail-compose-field input,
.webmail-compose-body {
  min-width: 0;
  width: 100%;
  border: 1px solid #dbe5d2;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-weight: 700;
  padding: 9px 10px;
}

.webmail-compose-body {
  min-height: 250px;
  resize: vertical;
  line-height: 1.5;
}

.webmail-account-field select:focus,
.webmail-compose-field input:focus,
.webmail-compose-body:focus {
  outline: 0;
  border-color: var(--selection-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.webmail-folder-list {
  display: grid;
  gap: 6px;
}

.webmail-folder-button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  color: #31513e;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.webmail-folder-button:hover,
.webmail-folder-button.is-active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 34%, #dbe5d2);
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: var(--active-shadow);
}

.webmail-folder-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webmail-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.webmail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fbf5;
}

.webmail-toolbar-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.webmail-toolbar-actions,
.webmail-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.webmail-page-size-field {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.webmail-page-size-field select {
  min-width: 72px;
  height: 38px;
  border: 1px solid #dbe5d2;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-weight: 800;
  padding: 0 28px 0 10px;
}

.webmail-page-size-field select:focus {
  outline: 0;
  border-color: var(--selection-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.webmail-toolbar strong {
  min-width: 0;
  color: var(--ink);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.webmail-toolbar span {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.webmail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.35fr);
  min-height: 0;
}

.webmail-list {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid #e2e8f0;
  background: #ffffff;
}

.webmail-message-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  width: 100%;
  min-height: 86px;
  border: 0;
  border-bottom: 1px solid #edf0eb;
  padding: 12px 14px;
  color: #0f172a;
  background: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.webmail-message-row:hover,
.webmail-message-row.is-active {
  background: color-mix(in srgb, var(--primary) 7%, #ffffff);
}

.webmail-message-row.is-active {
  box-shadow: inset 4px 0 0 var(--primary);
}

.webmail-message-row.is-unread strong,
.webmail-message-row.is-unread .webmail-message-sender {
  font-weight: 950;
}

.webmail-message-sender,
.webmail-message-date,
.webmail-message-preview {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.webmail-message-sender,
.webmail-message-preview,
.webmail-message-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webmail-message-row strong {
  grid-column: 1 / -1;
  color: #0f172a;
  font-size: 14px;
}

.webmail-message-preview {
  grid-column: 1 / -1;
  padding-right: 28px;
}

.webmail-message-date {
  justify-self: end;
  white-space: nowrap;
}

.webmail-message-attachment {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-grid;
  place-items: center;
  color: #64748b;
}

.webmail-reader {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.webmail-reader.is-empty {
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #64748b;
  text-align: center;
}

.webmail-reader.is-empty .nav-icon {
  color: var(--primary);
}

.webmail-reader-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}

.webmail-reader-head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 21px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.webmail-reader-head span {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.webmail-meta {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 18px;
}

.webmail-meta div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.webmail-meta dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.webmail-meta dd {
  min-width: 0;
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.webmail-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px;
}

.webmail-attachment-chip {
  display: inline-grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  border: 1px solid #dbe5d2;
  border-radius: 8px;
  padding: 7px 9px;
  color: #31513e;
  background: #f8fbf5;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.webmail-attachment-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, #dbe5d2);
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 7%, #ffffff);
}

.webmail-attachment-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webmail-attachment-chip small {
  color: #64748b;
  font-weight: 900;
}

.webmail-body {
  margin: 0 18px 18px;
  border-top: 1px solid #edf0eb;
  padding-top: 16px;
  color: #17211d;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.webmail-empty {
  padding: 18px;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

.webmail-compose-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  justify-items: end;
  padding: 20px;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(2px);
}

.webmail-compose-dialog {
  display: grid;
  gap: 10px;
  width: min(620px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 0 14px 14px;
}

.webmail-compose-dialog header,
.webmail-compose-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.webmail-compose-dialog header {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -14px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 8px 8px 0 0;
  background: #f8fbf5;
}

.webmail-compose-dialog header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.webmail-compose-dialog header strong {
  color: #0f172a;
  font-size: 16px;
}

.webmail-compose-dialog header span {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.webmail-compose-dialog footer {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.foil-control-log-panel {
  overflow: hidden;
  background: #ffffff;
}

.foil-control-editor > .foil-control-log-panel {
  order: 0;
}

.foil-control-log-panel.is-portal-placement header {
  display: block;
}

.foil-control-log-panel.is-portal-placement .foil-control-log-body {
  padding: 10px 12px 12px;
}

.foil-control-log-panel header {
  display: block;
  padding: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fbf5;
}

.foil-control-log-panel-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.foil-control-log-panel-toggle:hover h4,
.foil-control-log-panel-toggle:focus-visible h4 {
  color: var(--primary);
}

.foil-control-log-panel-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: -4px;
  border-radius: 15px;
}

.foil-control-log-panel header h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.foil-control-log-panel header .foil-control-icon {
  width: 18px;
  height: 18px;
}

.foil-control-log-panel header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-log-refresh-label {
  white-space: nowrap;
}

.foil-control-log-panel.is-collapsed header {
  border-bottom-color: transparent;
}

.foil-control-log-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
}

.foil-control-log-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(150px, 220px) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.foil-control-log-toolbar .foil-control-field {
  min-width: 0;
}

.foil-control-log-note {
  align-self: end;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-log-chart-wrap {
  overflow-x: auto;
  min-width: 0;
  border: 1px solid #edf0eb;
  border-radius: 12px;
  background: #ffffff;
}

.foil-control-log-chart-row {
  display: grid;
  grid-template-columns: auto minmax(560px, 1fr);
  align-items: stretch;
  min-width: 760px;
}

.foil-control-log-y-axes {
  display: flex;
  align-items: stretch;
  min-height: 270px;
  border-right: 1px solid #cfd8cc;
  background:
    linear-gradient(90deg, rgba(248, 250, 247, 0.96), #ffffff);
}

.foil-control-log-axis {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
  box-sizing: border-box;
  width: 48px;
  min-height: 270px;
  padding: 20px 5px 38px 4px;
  border-left: 1px solid #dde4d8;
  color: #64748b;
}

.foil-control-log-axis:first-child {
  border-left: 0;
}

.foil-control-log-axis span {
  position: relative;
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

.foil-control-log-axis span::after {
  position: absolute;
  top: 50%;
  right: -5px;
  width: 4px;
  height: 1px;
  background: #cbd5c4;
  content: "";
}

.foil-control-log-plot {
  position: relative;
  min-width: 560px;
  min-height: 270px;
}

.foil-control-log-empty {
  position: absolute;
  left: 42px;
  right: 22px;
  top: 20px;
  bottom: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

.foil-control-log-chart {
  display: block;
  min-width: 560px;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: crosshair;
}

.foil-control-log-chart-bg {
  fill: #ffffff;
  stroke: #d9e1d3;
}

.foil-control-log-grid-line {
  stroke: #d8ded2;
  stroke-width: 1;
}

.foil-control-log-series {
  fill: none;
  stroke: var(--series-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
}

.foil-control-log-x-label {
  fill: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.foil-control-log-cursor {
  position: absolute;
  top: 20px;
  bottom: 38px;
  width: 1px;
  background: rgba(127, 29, 29, 0.78);
  pointer-events: none;
  transform: translateX(-0.5px);
}

.foil-control-log-tooltip {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 7px;
  width: 250px;
  max-width: calc(100% - 20px);
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(31, 41, 55, 0.88);
  color: #f8fafc;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24);
  pointer-events: none;
}

.foil-control-log-tooltip[hidden],
.foil-control-log-cursor[hidden] {
  display: none;
}

.foil-control-log-tooltip strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.25;
}

.foil-control-log-tooltip span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: #dbe4ef;
  font-size: 13px;
  font-weight: 800;
}

.foil-control-log-tooltip i {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: var(--series-color);
}

.foil-control-log-tooltip em {
  overflow: hidden;
  color: #cbd5e1;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-log-tooltip b {
  color: #ffffff;
  font-weight: 900;
  white-space: nowrap;
}

.foil-control-log-chart-footer {
  display: grid;
  grid-template-columns: minmax(190px, 0.42fr) minmax(300px, 0.58fr);
  gap: 14px;
  align-items: start;
  padding: 0 10px 2px;
}

.foil-control-log-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.foil-control-log-legend button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  min-width: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.foil-control-log-legend button.is-hidden {
  color: #94a3b8;
  text-decoration: line-through;
}

.foil-control-log-legend button:hover,
.foil-control-log-legend button:focus-visible {
  color: var(--primary);
}

.foil-control-log-legend button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 38%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

.foil-control-log-legend i {
  display: inline-block;
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: var(--series-color);
}

.foil-control-log-legend button.is-hidden i {
  opacity: 0.45;
}

.foil-control-log-stats {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  justify-content: end;
}

.foil-control-log-stats-head,
.foil-control-log-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(68px, auto));
  gap: 10px;
  align-items: center;
  justify-content: end;
}

.foil-control-log-stats-head {
  color: #e26d2f;
  font-size: 12px;
  font-weight: 900;
  text-transform: lowercase;
}

.foil-control-log-stats-row {
  min-height: 34px;
  color: #0f172a;
  font-size: 13px;
}

.foil-control-log-stats-row.is-hidden {
  color: #94a3b8;
}

.foil-control-log-stats-row b {
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.foil-control-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.foil-control-device-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.foil-control-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.foil-control-section-head h4,
.foil-control-param-group h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.foil-control-param-group h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.foil-control-param-group h4 .foil-control-icon {
  width: 18px;
  height: 18px;
}

.foil-control-device-list {
  display: grid;
  gap: 8px;
}

.foil-control-device-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 10px;
  border: 1px solid #edf0eb;
  border-radius: 12px;
  background: #fbfcfa;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.foil-control-device-button:hover,
.foil-control-device-button.is-selected,
.foil-control-device-button.is-viewing {
  border-color: var(--selection-border);
  background: color-mix(in srgb, var(--surface) 76%, var(--selection-soft));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--selection-ring) 48%, transparent);
}

.foil-control-device-button.is-targeted:not(.is-selected):not(.is-viewing) {
  border-color: color-mix(in srgb, var(--selection-border) 68%, #edf0eb);
  background: color-mix(in srgb, var(--selection-soft) 58%, #fbfcfa);
}

.foil-control-device-button.is-selected,
.foil-control-device-button.is-viewing {
  transform: translateY(-1px);
}

.foil-control-device-main {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.foil-control-device-target-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.foil-control-device-target-toggle:hover,
.foil-control-device-target-toggle:focus-visible {
  border-color: var(--selection-border);
  background: var(--selection-soft);
  outline: 0;
}

.foil-control-device-target-toggle.is-targeted {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--selection-ring);
}

.foil-control-device-target-toggle.is-targeted .foil-control-status-dot {
  opacity: 0;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24);
}

.foil-control-device-target-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 15px;
  background: #ffffff;
  clip-path: polygon(0 56%, 18% 38%, 36% 68%, 88% 0, 100% 11%, 39% 94%);
  content: "";
  opacity: 0;
  transform: translate(-50%, -52%) rotate(-8deg);
  transform-origin: 50% 55%;
}

.foil-control-device-target-toggle.is-targeted::after {
  opacity: 1;
}

.foil-control-device-main strong,
.foil-control-device-main em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-device-main strong {
  color: var(--ink);
  font-size: 13px;
  font-style: normal;
  line-height: 1.2;
}

.foil-control-device-main em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.foil-control-device-value {
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  min-width: 64px;
  max-width: 118px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

.foil-control-device-value span,
.foil-control-device-value small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-device-value small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.foil-control-device-value .foil-control-heating-state,
.foil-control-device-value .foil-control-heating-state span {
  display: inline-flex;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.foil-control-status-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.foil-control-status-dot.is-partial {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

.foil-control-status-dot.is-closed {
  background: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.16);
}

.foil-control-status-dot.is-pending {
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.foil-control-icon {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  color: #2f7d32;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.foil-control-icon.is-arrow-left,
.foil-control-icon.is-arrow-right,
.foil-control-icon.is-vent-left,
.foil-control-icon.is-vent-right,
.foil-control-icon.is-vent,
.foil-control-icon.is-percent {
  color: #2f7d32;
}

.foil-control-icon.is-umbrella {
  color: #2563eb;
}

.foil-control-icon.is-thermometer {
  color: #dc2626;
}

.foil-control-icon.is-wind {
  color: #0891b2;
}

.foil-control-icon.is-night {
  color: #475569;
}

.foil-control-icon.is-safety {
  color: #d97706;
}

.foil-control-editor {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.foil-control-target-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(248, 251, 245, 0.98), rgba(255, 255, 255, 0.98));
}

.foil-control-target-panel strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
}

.foil-control-target-panel p {
  overflow: hidden;
  max-width: 62%;
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-mode-notice {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-color: #fed7aa;
  background: #fff7ed;
  color: #7c2d12;
}

.foil-control-mode-notice strong {
  color: #7c2d12;
  font-size: 14px;
  font-weight: 900;
}

.foil-control-mode-notice span {
  color: #9a3412;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.foil-control-manual-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 10%, transparent), transparent 36%),
    #ffffff;
}

.foil-control-manual-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.foil-control-manual-panel h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.foil-control-manual-panel header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.foil-control-manual-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
}

.foil-control-manual-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  border: 1px solid #cfe3c7;
  border-radius: 14px;
  background: #f8fbf5;
  color: #14532d;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: 0.16s ease;
}

.foil-control-manual-button:hover,
.foil-control-manual-button:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--selection-border) 42%, var(--line));
  background: var(--selection-soft);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.foil-control-manual-button.is-active {
  border-color: var(--selection-border);
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--active-shadow);
}

.foil-control-manual-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.foil-control-manual-button .foil-control-icon {
  width: 19px;
  height: 19px;
}

.foil-control-manual-panel p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.foil-control-custom-targets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.foil-control-custom-targets label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.foil-control-param-grid {
  display: grid;
  gap: 12px;
}

.foil-control-param-group {
  overflow: visible;
}

.foil-control-param-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 15px 15px 0 0;
  background: #f8fbf5;
}

.foil-control-param-group header .foil-control-param-count {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-param-group-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.foil-control-param-group-toggle:hover h4,
.foil-control-param-group-toggle:focus-visible h4 {
  color: var(--primary);
}

.foil-control-param-group-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: 4px;
  border-radius: 10px;
}

.foil-control-disclosure-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, #dce8d7);
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, #ffffff 92%);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
  flex: 0 0 auto;
}

.foil-control-param-group-caret,
.foil-control-log-panel-caret,
.foil-control-storm-panel-caret {
  justify-self: end;
}

.foil-control-disclosure-button .foil-control-icon {
  width: 18px;
  height: 18px;
  transition: transform 160ms ease;
}

.foil-control-param-group.is-collapsed header {
  border-bottom-color: transparent;
  border-radius: 15px;
}

.foil-control-param-group.is-collapsed .foil-control-param-group-caret .foil-control-icon,
.foil-control-log-panel.is-collapsed .foil-control-log-panel-caret .foil-control-icon,
.foil-control-storm-panel.is-collapsed .foil-control-storm-panel-caret .foil-control-icon {
  transform: rotate(-90deg);
}

.foil-control-param-list {
  display: grid;
}

.foil-control-automation-view {
  order: 3;
  display: grid;
  gap: 12px;
}

.foil-control-automation-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}

.foil-control-automation-target-field,
.foil-control-automation-condition-field,
.foil-control-automation-recovery-field,
.foil-control-automation-scheduled-restore-field,
.foil-control-automation-solar-field,
.foil-control-automation-action-list,
.foil-control-automation-actions {
  grid-column: 1 / -1;
}

.foil-control-automation-target-field,
.foil-control-automation-condition-field,
.foil-control-automation-recovery-field,
.foil-control-automation-scheduled-restore-field,
.foil-control-automation-solar-field {
  display: grid;
  gap: 8px;
}

.foil-control-automation-target-field > span,
.foil-control-automation-condition-field > span,
.foil-control-automation-recovery-field > span,
.foil-control-automation-scheduled-restore-field > span,
.foil-control-automation-solar-field > span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-automation-condition-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr);
  gap: 10px;
}

.foil-control-automation-condition-grid.has-condition {
  grid-template-columns: minmax(210px, 1fr) minmax(150px, 0.62fr) minmax(170px, 0.7fr);
}

.foil-control-automation-recovery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.foil-control-automation-recovery-toggle {
  justify-self: start;
  max-width: 100%;
}

.foil-control-automation-scheduled-restore-field {
  align-items: start;
  padding-top: 2px;
}

.foil-control-automation-scheduled-restore-toggle {
  justify-self: start;
  max-width: 100%;
}

.foil-control-automation-scheduled-restore-time {
  width: min(100%, 260px);
}

.foil-control-automation-scheduled-restore-field > small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.foil-control-automation-solar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.foil-control-automation-solar-restore {
  justify-self: start;
  max-width: 100%;
}

.foil-control-automation-action-list {
  display: grid;
  gap: 10px;
}

.foil-control-automation-action-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.foil-control-automation-action-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.foil-control-automation-action-card > header strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.foil-control-automation-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.foil-control-automation-action-list > #foilAutomationActionAdd {
  justify-self: center;
}

.foil-control-automation-targets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.foil-control-automation-targets label {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #0f172a;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.foil-control-automation-targets label.is-selected {
  border-color: var(--selection-border);
  background: var(--selection-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

.foil-control-automation-targets label.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.foil-control-automation-targets .foil-control-icon {
  width: 19px;
  height: 19px;
}

.foil-control-automation-targets label > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.foil-control-automation-targets strong,
.foil-control-automation-targets small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-automation-targets strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.foil-control-automation-targets small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.foil-control-automation-actions,
.foil-control-automation-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.foil-control-automation-value-control {
  display: block;
  min-width: 0;
}

.foil-control-automation-value-control .foil-control-switch {
  width: 100%;
}

.foil-control-input-with-unit {
  position: relative;
  display: block;
  width: 100%;
}

.foil-control-input-with-unit.has-unit input,
.foil-control-input-with-unit.has-unit select {
  padding-right: 72px;
}

.foil-control-automation-inline-unit {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
}

.foil-control-automation-list,
.foil-control-automation-history {
  display: grid;
}

.foil-control-automation-row {
  display: grid;
  grid-template-columns: 88px minmax(190px, 1fr) minmax(180px, 0.72fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf0eb;
}

.foil-control-automation-row:last-child,
.foil-control-automation-history-row:last-child {
  border-bottom: 0;
}

.foil-control-automation-row.is-disabled {
  background: color-mix(in srgb, var(--surface-muted) 54%, #ffffff);
  opacity: 0.78;
}

.foil-control-automation-time,
.foil-control-automation-main,
.foil-control-automation-change {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.foil-control-automation-time strong {
  color: var(--primary-strong);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.foil-control-automation-time span,
.foil-control-automation-main span,
.foil-control-automation-change span {
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-automation-main strong,
.foil-control-automation-change strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-automation-row-actions {
  justify-content: flex-end;
}

.foil-control-automation-history-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.42fr) minmax(160px, 0.5fr) minmax(220px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border-bottom: 1px solid #edf0eb;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.foil-control-automation-history-row strong {
  color: var(--ink);
  font-weight: 900;
}

.foil-control-automation-history-row.is-error {
  background: color-mix(in srgb, #ef4444 7%, #ffffff);
}

.foil-control-automation-history-row.is-error strong {
  color: #991b1b;
}

.foil-control-empty-note {
  padding: 14px 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.foil-control-param-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf0eb;
}

.foil-control-param-row:last-child {
  border-bottom: 0;
}

.foil-control-param-row.has-mixed-value {
  background: color-mix(in srgb, var(--selection-soft) 32%, transparent);
}

.foil-control-param-label {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.foil-control-param-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.foil-control-param-label strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.foil-control-param-label small {
  overflow: hidden;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foil-control-mixed-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, #ffffff);
  color: var(--primary-strong) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 900;
  line-height: 1.1;
}

.foil-control-param-note {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--color-warning) 36%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-warning) 10%, #ffffff);
  color: #92400e !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 900;
  line-height: 1.1;
}

.foil-control-param-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--selection-border) 42%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
  color: var(--primary-strong);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.foil-control-param-lock:hover {
  border-color: var(--selection-border);
  background: color-mix(in srgb, var(--primary) 14%, #ffffff);
  transform: translateY(-1px);
}

.foil-control-param-lock.is-unlocked {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--button-text);
}

.foil-control-param-lock .foil-control-icon {
  width: 15px;
  height: 15px;
}

.foil-control-param-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.foil-control-param-control > span {
  min-width: 32px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.foil-control-param-control > .foil-control-toggle-number {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.foil-control-param-control > .foil-control-time-field,
.foil-control-param-control > .foil-control-time-wheel {
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.foil-control-param-control input:disabled,
.foil-control-param-control select:disabled,
.foil-control-time-trigger:disabled {
  opacity: 0.68;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--surface-muted) 78%, #ffffff);
  color: #64748b;
}

.foil-control-toggle-number {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.foil-control-toggle-number input[type="number"]:disabled {
  color: #94a3b8;
  background: #f1f5f9;
}

.foil-control-inline-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  cursor: pointer;
}

.foil-control-inline-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.foil-control-inline-toggle > span {
  position: relative;
  display: block;
  width: 42px;
  height: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #e2e8f0;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.foil-control-inline-toggle > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.24);
  content: "";
  transition: transform 140ms ease;
}

.foil-control-inline-toggle input:checked + span {
  border-color: var(--selection-border);
  background: var(--primary);
}

.foil-control-inline-toggle input:checked + span::after {
  transform: translateX(18px);
}

.foil-control-time-field {
  position: relative;
  display: block;
  width: 100%;
}

.foil-control-time-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #e1e5dd;
  border-radius: 12px;
  background: #fbfcfa;
  color: #0f172a;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.foil-control-time-trigger:hover,
.foil-control-time-trigger:focus-visible,
.foil-control-time-field.is-open .foil-control-time-trigger {
  border-color: var(--selection-border);
  background: var(--selection-soft);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: 0;
}

.foil-control-time-trigger .foil-control-icon {
  width: 17px;
  height: 17px;
  color: var(--primary);
}

.foil-control-time-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  display: grid;
  gap: 6px;
  width: min(220px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 7px;
  border: 1px solid #dfe7d8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
}

.foil-control-time-done {
  justify-self: end;
  min-height: 30px;
  padding: 6px 11px;
  font-size: 12px;
}

.foil-control-time-wheel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 96px;
  padding: 6px;
  border: 1px solid #dfe7d8;
  border-radius: 12px;
  background:
    linear-gradient(to bottom, transparent 0 32%, color-mix(in srgb, var(--primary) 8%, transparent) 32% 68%, transparent 68% 100%),
    #fbfcfa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.foil-control-time-wheel::before,
.foil-control-time-wheel::after {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  content: "";
  pointer-events: none;
}

.foil-control-time-wheel::before {
  top: 34px;
}

.foil-control-time-wheel::after {
  bottom: 34px;
}

.foil-control-time-wheel-column {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  height: 84px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 0;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
}

.foil-control-time-wheel-column::-webkit-scrollbar {
  display: none;
}

.foil-control-time-wheel-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  opacity: 0.58;
  scroll-snap-align: center;
  transition: color 140ms ease, font-size 140ms ease, opacity 140ms ease;
}

.foil-control-time-wheel-option:hover,
.foil-control-time-wheel-option:focus-visible {
  color: var(--primary);
  outline: 0;
}

.foil-control-time-wheel-option.is-selected {
  color: var(--primary-strong);
  font-size: 19px;
  opacity: 1;
}

.foil-control-time-wheel-separator {
  position: relative;
  z-index: 1;
  min-width: auto;
  color: var(--primary);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.foil-control-param-control input[type="checkbox"] {
  justify-self: start;
  width: 20px;
  height: 20px;
  min-height: 20px;
  accent-color: #0f766e;
}

.foil-control-loading-panel,
.view-loading-panel {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 280px;
  border: 1px solid #e6e9e2;
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--leaf) 12%, transparent), transparent 16rem),
    rgba(255, 255, 255, 0.96);
  color: var(--primary-strong);
}

.foil-control-loading-panel strong,
.view-loading-panel strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.foil-control-loading-spinner,
.view-loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid color-mix(in srgb, var(--primary) 18%, #ffffff);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: foil-control-spin 800ms linear infinite;
}

.item-loading-panel {
  min-height: 220px;
}

@keyframes foil-control-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 980px) {
  .foil-control-connection-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foil-control-storm-providers,
  .foil-control-storm-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foil-control-automation-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foil-control-automation-solar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foil-control-automation-condition-grid.has-condition {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foil-control-automation-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foil-control-automation-recovery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foil-control-automation-row {
    grid-template-columns: 82px minmax(170px, 1fr) minmax(150px, 0.72fr);
  }

  .foil-control-automation-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .foil-control-layout {
    grid-template-columns: 1fr;
  }

  .plc-foil-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .plc-device-table .foil-control-overview-head,
  .plc-device-table .foil-control-overview-row {
    grid-template-columns: 20px minmax(170px, 1fr) minmax(64px, 0.35fr) minmax(100px, 0.7fr) minmax(76px, 0.42fr);
  }

  .foil-control-device-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .foil-control-log-body {
    grid-template-columns: 1fr;
  }

  .foil-control-log-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foil-control-log-note {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .foil-control-log-legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .foil-control-log-chart-footer {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

@media (max-width: 680px) {
  #tableView.is-foil-control-view,
  #tableView.is-plc-view,
  #tableView.is-foil-control-view .table-panel,
  #tableView.is-plc-view .table-panel,
  #tableView.is-foil-control-view .table-wrap,
  #tableView.is-plc-view .table-wrap,
  #tableView.is-foil-control-view .full-panel-cell {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  #tableView.is-plc-view .full-panel-cell {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  #tableView.is-foil-control-view .full-panel-cell,
  #tableView.is-plc-view .full-panel-cell {
    padding: 0;
  }

  .foil-control-shell,
  .plc-shell {
    gap: 12px;
  }

  .plc-head,
  .plc-panel header,
  .plc-old-back-panel > header,
  .plc-head-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .plc-head-actions > * {
    width: 100%;
  }

  .plc-status-strip,
  .plc-metric-grid,
  .plc-map-summary,
  .plc-foil-grid,
  .plc-foil-metrics,
  .plc-page-grid {
    grid-template-columns: 1fr;
  }

  .plc-device-row {
    grid-template-columns: 12px minmax(0, 1fr) auto;
  }

  .plc-device-row > span:not(.plc-device-name) {
    grid-column: 2 / -1;
  }

  .plc-device-row b {
    grid-column: 3;
    grid-row: 1;
  }

  .plc-device-table .foil-control-overview-head {
    display: none;
  }

  .plc-device-table .foil-control-overview-row {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 6px 8px;
  }

  .plc-device-table .foil-control-overview-row > span:nth-child(n+3) {
    grid-column: 2 / -1;
  }

  .foil-control-overview-panel {
    display: none;
  }

  .foil-control-storm-panel {
    order: 1;
  }

  .foil-control-nav-row {
    order: 2;
  }

  .foil-control-log-panel {
    order: 5;
  }

  .foil-control-commandbar {
    order: 3;
  }

  .foil-control-layout {
    order: 4;
    gap: 12px;
  }

  .foil-control-head,
  .foil-control-connection-panel header,
  .foil-control-target-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .foil-control-head,
  .foil-control-tabbar,
  .foil-control-commandbar,
  .foil-control-connection-panel,
  .foil-control-storm-panel,
  .foil-control-target-panel,
  .foil-control-overview-panel,
  .foil-control-param-group,
  .foil-control-device-panel,
  .foil-control-log-panel {
    border-radius: 12px;
    box-shadow: none;
  }

  .foil-control-head {
    min-height: 0;
    padding: 14px;
  }

  .foil-control-head strong {
    font-size: 19px;
  }

  .foil-control-commandbar {
    gap: 8px;
    padding: 10px;
  }

  .foil-control-overview-panel header {
    padding: 12px;
  }

  .foil-control-overview-panel h4 {
    font-size: 17px;
  }

  .foil-control-overview-head,
  .foil-control-overview-row {
    grid-template-columns: 32px minmax(88px, 1fr) minmax(66px, 0.72fr) minmax(70px, 0.78fr);
    gap: 8px;
    padding-inline: 12px;
  }

  .foil-control-overview-head {
    font-size: 12px;
  }

  .foil-control-overview-row {
    min-height: 56px;
  }

  .foil-control-overview-name {
    gap: 7px;
  }

  .foil-control-overview-name .foil-control-icon {
    width: 19px;
    height: 19px;
  }

  .foil-control-overview-name strong,
  .foil-control-overview-state,
  .foil-control-overview-temp {
    font-size: 13px;
  }

  .foil-control-overview-name small {
    font-size: 11px;
  }

  .foil-control-commandbar > *,
  .foil-control-tabbar,
  .foil-control-field {
    width: 100%;
    min-width: 0;
  }

  .foil-control-nav-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .foil-control-nav-row .foil-control-tabbar,
  .foil-control-nav-row .foil-control-connection {
    width: 100%;
  }

  .foil-control-nav-row .foil-control-connection {
    justify-content: center;
    margin-left: 0;
  }

  .foil-control-tabbar {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .foil-control-tabbar::-webkit-scrollbar {
    display: none;
  }

  .foil-control-tabbar button {
    flex: 1 1 0;
    min-width: max-content;
    padding-inline: 10px;
  }

  .foil-control-device-list,
  .foil-control-connection-form,
  .foil-control-storm-providers,
  .foil-control-storm-form,
  .foil-control-automation-solar-grid,
  .foil-control-automation-form,
  .foil-control-automation-condition-grid,
  .foil-control-automation-condition-grid.has-condition,
  .foil-control-automation-recovery-grid,
  .foil-control-automation-action-grid,
  .foil-control-automation-targets {
    grid-template-columns: 1fr;
  }

  .foil-control-connection-form .primary-button {
    width: 100%;
    min-width: 0;
  }

  .foil-control-automation-row,
  .foil-control-automation-history-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .foil-control-automation-row-actions,
  .foil-control-automation-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .foil-control-automation-row-actions > *,
  .foil-control-automation-actions > * {
    width: 100%;
  }

  .foil-control-automation-row-actions .foil-control-inline-toggle {
    width: 44px;
  }

  .foil-control-automation-time span,
  .foil-control-automation-main span,
  .foil-control-automation-change span,
  .foil-control-automation-main strong,
  .foil-control-automation-change strong {
    white-space: normal;
  }

  .foil-control-storm-panel-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
  }

  .foil-control-storm-title {
    flex-wrap: wrap;
    gap: 3px 8px;
  }

  .foil-control-storm-title > span {
    white-space: normal;
  }

  .foil-control-storm-panel-caret {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .foil-control-storm-badge {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .foil-control-storm-actions > * {
    width: 100%;
  }

  .foil-control-device-panel {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .foil-control-device-button {
    min-height: 60px;
    padding: 9px 10px;
    border-radius: 12px;
  }

  .foil-control-device-target-toggle {
    width: 34px;
    height: 34px;
  }

  .foil-control-target-panel p {
    max-width: 100%;
    text-align: left;
    white-space: normal;
  }

  .foil-control-param-row {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 12px;
  }

  .foil-control-param-group header {
    padding: 11px 12px;
  }

  .foil-control-param-group header .foil-control-param-count {
    display: none;
  }

  .foil-control-param-control {
    width: 100%;
    min-width: 0;
  }

  .foil-control-param-control input,
  .foil-control-param-control select,
  .foil-control-time-trigger {
    min-width: 0;
    font-size: 16px;
  }

  .foil-control-toggle-number {
    width: 100%;
  }

  .foil-control-log-panel-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .foil-control-log-refresh-label {
    display: none;
  }

  .foil-control-log-body {
    padding: 10px;
  }

  .foil-control-log-toolbar {
    grid-template-columns: 1fr;
  }

  .foil-control-log-chart {
    min-width: 520px;
  }

  .foil-control-log-chart-row {
    grid-template-columns: auto minmax(520px, 1fr);
    min-width: 710px;
  }

  .foil-control-log-axis {
    width: 44px;
    padding-left: 4px;
    font-size: 10px;
  }

  .foil-control-log-tooltip {
    width: 232px;
  }

  .foil-control-log-stats {
    overflow-x: auto;
  }

  .foil-control-log-stats-head,
  .foil-control-log-stats-row {
    min-width: 520px;
  }
}

@media (max-width: 430px) {
  #tableView.is-foil-control-view .table-panel,
  #tableView.is-plc-view .table-panel {
    margin-inline: 0;
  }

  .foil-control-shell {
    gap: 10px;
  }

  .foil-control-head,
  .foil-control-commandbar,
  .foil-control-target-panel,
  .foil-control-device-panel,
  .foil-control-log-panel,
  .foil-control-storm-panel,
  .foil-control-overview-panel,
  .foil-control-param-group {
    border-radius: 10px;
  }

  .foil-control-overview-head,
  .foil-control-overview-row {
    grid-template-columns: 30px minmax(76px, 1fr) minmax(58px, 0.7fr) minmax(66px, 0.78fr);
    gap: 7px;
    padding-inline: 10px;
  }

  .foil-control-overview-panel header span {
    display: none;
  }

  .foil-control-param-row {
    padding: 11px 10px;
  }

  .foil-control-param-label strong {
    font-size: 13px;
    line-height: 1.3;
  }
}

/* Tablet-specific Tételek workspace: compact form beside a desktop-style table. */
@media (min-width: 900px) and (max-width: 1400px),
       (min-width: 900px) and (any-pointer: coarse) {
  #tableView.is-items-view.is-visible {
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
    gap: 12px;
    align-items: start;
  }

  #tableView.is-items-view .action-panel {
    margin-bottom: 0 !important;
  }

  #tableView.is-items-view .item-editor-card {
    padding: 14px;
  }

  #tableView.is-items-view .item-form .form-grid,
  #tableView.is-items-view .item-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  #tableView.is-items-view .table-panel > .table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tableView.is-items-view .table-panel > .table-wrap > table {
    min-width: 1040px;
    font-size: 0.82rem;
  }

  #tableView.is-items-view .table-panel > .table-wrap > table th,
  #tableView.is-items-view .table-panel > .table-wrap > table td {
    white-space: nowrap;
  }

  #tableView.is-items-view .table-panel > .table-wrap > table th:nth-child(2),
  #tableView.is-items-view .table-panel > .table-wrap > table td:nth-child(2) {
    min-width: 150px;
    white-space: normal;
  }

  #tableView.is-items-view .table-panel > .table-wrap > table th:nth-child(7),
  #tableView.is-items-view .table-panel > .table-wrap > table td:nth-child(7),
  #tableView.is-items-view .table-panel > .table-wrap > table th:nth-child(8),
  #tableView.is-items-view .table-panel > .table-wrap > table td:nth-child(8) {
    min-width: 105px;
    white-space: normal;
  }

  #tableView.is-items-view .action-cell {
    min-width: 210px;
    white-space: normal;
  }

  #tableView.is-items-view .action-cell .mini-button {
    margin-bottom: 4px;
  }
}

body.billing-pdf-print-open {
  overflow: hidden;
}

.billing-pdf-print-panel {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(5px);
}

.billing-pdf-print-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(1120px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow: hidden;
}

.billing-pdf-print-dialog .billing-card-head {
  margin-bottom: 0;
}

.billing-pdf-print-status {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.billing-pdf-print-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.billing-pdf-print-body {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 16px;
  background: #fff;
}

.billing-pdf-page-preview {
  display: grid;
  gap: 14px;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background: color-mix(in srgb, var(--primary) 7%, #fff);
}

.billing-pdf-preview-page {
  display: grid;
  gap: 6px;
  max-width: 820px;
  margin: 0 auto;
}

.billing-pdf-preview-page img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.billing-pdf-preview-page figcaption {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.billing-pdf-open-link {
  text-decoration: none;
}

.billing-pdf-print-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: min(72vh, 740px);
  border: 0;
  background: #fff;
}

@media (max-width: 700px) {
  .billing-pdf-print-panel {
    padding: 0;
  }

  .billing-pdf-print-dialog.panel {
    width: 100%;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0 !important;
    padding: 12px;
  }

  .billing-pdf-print-actions {
    width: 100%;
    justify-content: stretch;
  }

  .billing-pdf-print-actions button {
    flex: 1 1 140px;
  }

  .billing-pdf-print-frame {
    min-height: 0;
  }
}

.delivery-workspace {
  display: grid;
  gap: 16px;
  width: 100%;
}

.delivery-card {
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--primary) 18%);
  border-radius: var(--layout-table-radius);
  background: var(--surface);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--primary) 8%, transparent);
  padding: 18px;
}

.delivery-start-card,
.delivery-next-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)) 0%, var(--surface) 62%),
    var(--surface);
}

.delivery-start-head,
.delivery-next-card,
.delivery-location-row,
.delivery-site-map-tools,
.delivery-inline-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.delivery-start-head,
.delivery-next-card {
  justify-content: space-between;
}

.delivery-start-head h3,
.delivery-next-card h3,
.delivery-card .billing-card-head h3 {
  margin: 0;
}

.delivery-start-form {
  margin-top: 14px;
}

.delivery-primary-action,
.delivery-nav-button {
  min-height: 54px;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
}

.delivery-nav-button {
  display: inline-flex;
  min-width: 190px;
  text-decoration: none;
}

.delivery-nav-button[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.delivery-location-row,
.delivery-site-map-tools {
  flex-wrap: wrap;
  margin-top: 12px;
}

.delivery-warning-box,
.delivery-map-fallback {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--color-warning) 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-warning) 9%, var(--surface));
  color: color-mix(in srgb, var(--color-warning) 72%, var(--ink));
  font-weight: 800;
  padding: 12px 14px;
}

.delivery-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.delivery-stat-grid .stat-card {
  min-height: 92px;
}

.delivery-stop-list {
  display: grid;
  gap: 10px;
}

.delivery-stop-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
  padding: 12px;
}

.delivery-stop-card.is-warning {
  border-color: color-mix(in srgb, var(--color-warning) 42%, var(--line));
  background: color-mix(in srgb, var(--color-warning) 7%, var(--surface));
}

.delivery-stop-card.is-delivered,
.delivery-stop-card.is-delivered_and_invoiced,
.delivery-stop-card.is-delivered-and-invoiced {
  border-color: color-mix(in srgb, var(--color-success) 34%, var(--line));
  background: color-mix(in srgb, var(--color-success) 8%, var(--surface));
}

.delivery-stop-order {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-button-text);
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  font-weight: 900;
}

.delivery-stop-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.delivery-stop-main strong,
.delivery-stop-main span,
.delivery-stop-main small {
  overflow-wrap: anywhere;
}

.delivery-stop-main small {
  color: var(--muted);
  font-weight: 700;
}

.delivery-warning-text {
  color: var(--color-warning) !important;
}

.delivery-stop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.delivery-next-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.delivery-next-main p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.delivery-next-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.delivery-next-meta span,
.delivery-history-row em {
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary-strong);
  font-weight: 900;
  padding: 5px 9px;
}

.delivery-next-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 220px;
}

.delivery-map {
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-strong);
}

.delivery-site-map {
  margin-top: 12px;
  min-height: 360px;
}

.delivery-map-number-icon {
  border: 0;
  background: transparent;
}

.delivery-map-number-icon span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: var(--primary);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24);
  font-weight: 900;
}

.delivery-map-number-icon.is-next span {
  background: var(--color-warning);
}

.delivery-map-number-icon.is-done span {
  background: var(--color-success);
}

.delivery-site-editor-card {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
}

.delivery-history-list {
  display: grid;
  gap: 8px;
}

.delivery-history-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 0.8fr 0.8fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
  text-align: left;
}

.delivery-history-row.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.delivery-unplanned-dialog {
  max-width: 720px;
}

.delivery-log-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.delivery-log-facts > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.delivery-log-facts small,
.delivery-log-facts span {
  color: var(--muted);
}

.delivery-log-facts strong,
.delivery-log-facts span {
  overflow-wrap: anywhere;
}

.delivery-log-table {
  min-width: 690px;
}

.delivery-log-card .order-form {
  margin-top: 16px;
}

.delivery-log-card .muted-inline {
  overflow-wrap: anywhere;
}

.delivery-log-adr {
  margin: 0 0 14px;
}

.delivery-start-toolbar-button {
  min-width: 130px;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .mail-admin-grid,
  .mail-admin-form,
  .mail-admin-list-row,
  .mail-admin-row-actions,
  .mail-admin-account-card,
  .mail-admin-account-settings-grid,
  .mail-admin-account-footer,
  .mail-admin-password-panel {
    grid-template-columns: 1fr;
  }

  .mail-admin-account-settings-grid .span-2 {
    grid-column: auto;
  }

  .mail-admin-commandbar-top {
    align-items: stretch;
    flex-direction: column;
  }

  .mail-admin-actions {
    justify-content: flex-start;
  }

  .mail-admin-account-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .mail-admin-account-footer .primary-button,
  .mail-admin-account-footer .ghost-button,
  .mail-admin-account-footer .danger-button {
    width: 100%;
  }

  .webmail-page-panel {
    min-height: 0;
  }

  .webmail-shell,
  .webmail-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .webmail-sidebar {
    align-content: stretch;
  }

  .webmail-folder-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .webmail-folder-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 132px;
  }

  .webmail-main {
    min-height: 0;
  }

  .webmail-layout {
    overflow: visible;
  }

  .webmail-list {
    max-height: 360px;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  .webmail-reader {
    min-height: 340px;
  }

  .webmail-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .webmail-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .webmail-page-size-field {
    min-width: 0;
  }

  .webmail-pagination {
    grid-column: 1 / -1;
  }

  .webmail-pagination .ghost-button {
    flex: 1 1 0;
  }

  .webmail-toolbar .ghost-button {
    width: 100%;
  }

  .webmail-compose-backdrop {
    align-items: end;
    justify-items: stretch;
    padding: 12px;
  }

  .webmail-compose-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
  }

  .delivery-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .delivery-next-card {
    display: grid;
    align-items: stretch;
  }

  .delivery-next-actions {
    min-width: 0;
  }

  .delivery-stop-card,
  .delivery-history-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .delivery-stop-actions,
  .delivery-history-row em {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .delivery-stop-actions .mini-button,
  .delivery-stop-actions a,
  .delivery-inline-actions .mini-button {
    flex: 1 1 140px;
    min-height: 44px;
  }

  .delivery-map {
    min-height: 340px;
  }
}

@media (max-width: 560px) {
  .delivery-log-facts {
    grid-template-columns: 1fr;
  }
  .delivery-card {
    padding: 14px;
  }

  .delivery-stat-grid {
    grid-template-columns: 1fr;
  }

  .delivery-start-head,
  .delivery-location-row,
  .delivery-site-map-tools,
  .delivery-inline-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .delivery-primary-action,
  .delivery-nav-button,
  .delivery-location-row .mini-button,
  .delivery-site-map-tools .mini-button {
    width: 100%;
  }
}

@media (min-width: 700px) and (max-width: 1100px), (min-width: 700px) and (any-pointer: coarse) {
  #tableView.is-market-view .market-admin-top-grid {
    grid-template-columns: 1fr !important;
  }

  #tableView.is-market-view .market-editor-card .market-product-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #tableView.is-market-view .market-editor-card .market-product-name-field,
  #tableView.is-market-view .market-editor-card .market-product-source-picker,
  #tableView.is-market-view .market-editor-card .market-product-date-field,
  #tableView.is-market-view .market-editor-card .market-product-media-row {
    grid-column: 1 / -1 !important;
  }

  #tableView.is-market-view .market-editor-card .market-source-picker {
    grid-template-columns: 1fr !important;
  }

  #tableView.is-market-view .market-editor-card .market-product-media-row {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
  }
}

@media (max-width: 680px), (max-width: 960px) and (any-pointer: coarse), (max-height: 560px) and (orientation: landscape) and (any-pointer: coarse) {
  .profile-settings-backdrop.market-order-dialog-backdrop {
    align-items: center;
    justify-items: center;
    padding: 12px;
  }

  .profile-settings-dialog.market-order-compact-dialog,
  .profile-settings-dialog.market-order-summary-dialog {
    align-content: start;
    align-self: center;
    grid-auto-rows: min-content;
    justify-self: center;
    width: min(430px, calc(100vw - 24px));
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    gap: 12px;
    padding: 14px;
  }

  .profile-settings-head.market-order-dialog-head {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .market-order-dialog-head h3 {
    font-size: 1.04rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .profile-settings-dialog.market-order-export-dialog {
    width: min(360px, calc(100vw - 24px));
    gap: 10px;
    padding: 14px;
  }

  .market-order-export-dialog .market-order-dialog-day-list {
    gap: 7px;
  }

  .market-order-export-dialog .market-order-dialog-day-button {
    align-items: center;
    min-height: 0;
    height: auto !important;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 12px;
  }

  .market-order-export-dialog .market-order-dialog-day-button span {
    font-size: 0.9rem;
    line-height: 1.14;
  }

  .market-order-export-dialog .market-order-dialog-day-button strong {
    font-size: 0.74rem;
  }
}

.shop-help-button {
  gap: 7px;
  border-color: color-mix(in srgb, var(--color-warning) 46%, var(--line));
  color: color-mix(in srgb, var(--color-warning) 82%, #5a3a00);
  background: linear-gradient(135deg, #fff7cf, #ffedaa);
  box-shadow: 0 8px 20px rgba(183, 121, 31, 0.12);
  font-weight: 900;
}

.shop-help-button:hover,
.shop-help-button:focus-visible {
  border-color: color-mix(in srgb, var(--color-warning) 70%, var(--line));
  color: #5a3a00;
  background: linear-gradient(135deg, #fff2b8, #ffe38a);
}

.shop-help-button > span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--color-warning);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
}

.shop-profile-button {
  gap: 8px;
  padding-left: 7px;
}

.shop-profile-initials {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--primary);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.profile-notification-option {
  align-items: center;
}

.shop-customer-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.shop-customer-toolbar::-webkit-scrollbar {
  display: none;
}

.shop-customer-toolbar .shop-profile-button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  padding: 6px 11px 6px 6px;
  white-space: nowrap;
}

.shop-customer-toolbar .shop-help-button {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 8px 10px;
  white-space: nowrap;
}

.shop-customer-toolbar .shop-mode-switch-button {
  flex: 0 0 auto;
  padding: 8px 10px;
  white-space: nowrap;
}

.shop-customer-toolbar .shop-profile-button,
.shop-customer-toolbar .shop-help-button,
.shop-customer-toolbar .shop-mode-switch-button {
  min-height: 40px;
  box-shadow: none !important;
  font-size: 0.88rem;
}

.shop-toolbar-logout {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  border-radius: 999px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

@media (max-width: 420px) {
  .shop-customer-toolbar {
    gap: 6px;
  }

  .shop-customer-toolbar .shop-profile-button {
    padding-right: 9px;
  }

  .shop-toolbar-logout {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

.shop-toolbar-logout:hover,
.shop-toolbar-logout:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: color-mix(in srgb, var(--danger) 13%, var(--surface));
  transform: translateY(-1px);
}

.shop-customer-toolbar .shop-profile-button:hover,
.shop-customer-toolbar .shop-profile-button:focus-visible,
.shop-customer-toolbar .shop-help-button:hover,
.shop-customer-toolbar .shop-help-button:focus-visible,
.shop-customer-toolbar .shop-mode-switch-button:hover,
.shop-customer-toolbar .shop-mode-switch-button:focus-visible {
  box-shadow: none !important;
}

.shop-toolbar-logout svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.customer-profile-dialog {
  width: min(650px, 100%);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 32px;
  padding: 0;
  background: color-mix(in srgb, var(--surface) 97%, #f3f8ef);
  overflow-x: hidden;
}

.customer-profile-dialog .profile-settings-head {
  padding: 22px 24px 20px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--leaf) 55%, transparent), transparent 16rem),
    linear-gradient(135deg, var(--primary), var(--primary-strong));
}

.customer-profile-dialog .profile-settings-head h3,
.customer-profile-dialog .profile-settings-head small {
  color: #ffffff;
}

.customer-profile-dialog .profile-settings-head .eyebrow {
  color: color-mix(in srgb, #ffffff 86%, var(--leaf));
}

.customer-profile-dialog .profile-settings-head .topbar-icon-button {
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.customer-profile-dialog .profile-settings-form {
  gap: 16px;
  padding: 20px 22px 22px;
}

.customer-profile-dialog .profile-password-card {
  border: 0;
  border-radius: 24px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--leaf) 11%, var(--surface)), var(--surface));
  box-shadow: none;
}

.customer-profile-dialog .management-form-grid {
  gap: 12px;
}

.customer-profile-dialog .profile-identity-grid {
  border-radius: 24px;
  padding: 16px;
  background: color-mix(in srgb, var(--leaf) 9%, var(--surface));
}

.customer-profile-dialog .field input {
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: var(--layout-input-radius);
  outline: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--color-input-background);
  box-shadow: none;
  font-size: var(--font-input-size);
}

.customer-profile-dialog .field input:focus {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.customer-profile-dialog .field input:disabled {
  opacity: 0.82;
  color: var(--text);
  background: color-mix(in srgb, var(--color-input-background) 84%, var(--leaf));
}

.customer-profile-dialog .profile-settings-actions {
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
}

.customer-profile-delivery-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--color-warning) 42%, var(--line));
  border-radius: 22px;
  padding: 13px 15px;
  color: var(--ink);
  background: linear-gradient(135deg, #fff9dc, #fff0b8);
  box-shadow: none;
  cursor: pointer;
  text-align: left;
}

.customer-profile-delivery-setting > span {
  display: grid;
  gap: 3px;
}

.customer-profile-delivery-setting small {
  color: #7a6020;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-profile-delivery-setting strong {
  color: var(--primary-strong);
  font-size: 0.96rem;
}

.customer-profile-delivery-setting em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--primary-strong);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.shop-catalog-deadline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: -2px 0 14px;
}

.shop-help-backdrop {
  z-index: 145;
}

.profile-settings-dialog.shop-help-dialog {
  grid-template-rows: auto minmax(0, 1fr);
  width: min(680px, calc(100vw - 32px));
  max-height: min(780px, calc(100dvh - 32px));
  overflow: hidden;
  padding: 20px;
}

.shop-help-head {
  flex-wrap: nowrap;
}

.shop-help-head .eyebrow {
  color: var(--color-warning);
}

.shop-help-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.shop-help-lead {
  margin: 0;
  border-left: 4px solid var(--color-warning);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  background: color-mix(in srgb, #fff0a8 52%, var(--surface));
  line-height: 1.5;
}

.shop-help-lead strong {
  display: inline;
  margin: 0;
}

.shop-help-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-help-steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.shop-help-steps li:first-child {
  padding-top: 0;
}

.shop-help-step-number {
  display: inline-grid;
  place-items: center;
  align-self: start;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--primary);
  font-weight: 950;
}

.shop-help-steps li > div {
  display: grid;
  gap: 3px;
  line-height: 1.45;
}

.shop-help-steps li > div > span,
.shop-help-important li {
  color: var(--muted);
}

.shop-help-important {
  display: grid;
  gap: 7px;
}

.shop-help-important > strong {
  color: var(--primary-strong);
}

.shop-help-important ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  line-height: 1.42;
}

.shop-help-android,
.shop-help-platform {
  border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  padding-top: 14px;
}

.shop-help-android > p,
.shop-help-android > small,
.shop-help-platform > p,
.shop-help-platform > small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.shop-help-android > small,
.shop-help-platform > small {
  font-weight: 800;
}

.shop-help-steps li > .shop-help-platform-step {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.shop-help-platform-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--primary-strong);
}

.shop-help-platform-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 680px), (max-width: 960px) and (any-pointer: coarse) {
  .shop-public-actions {
    flex-wrap: wrap;
  }

  .customer-profile-dialog {
    width: 100%;
    border-radius: 24px;
    padding: 0;
  }

  .customer-profile-dialog .profile-settings-head {
    align-items: center;
    flex-direction: row;
    padding: 18px;
  }

  .customer-profile-dialog .profile-settings-form {
    padding: 16px;
  }

  .customer-profile-dialog .management-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-catalog-deadline {
    width: 100%;
  }

  .shop-market-countdown-pill,
  .shop-market-closed-pill {
    width: 100%;
    min-width: 0;
  }

  .market-orders-panel {
    gap: 12px;
  }

  .market-order-item-price {
    justify-self: end;
    max-width: 100%;
    text-align: right;
    white-space: nowrap;
  }

  .market-order-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .market-order-card-title {
    flex: 1 1 220px;
    flex-wrap: wrap;
  }

  .profile-settings-backdrop.shop-help-backdrop {
    align-items: center;
    padding: 10px;
  }

  .profile-settings-dialog.shop-help-dialog {
    width: min(100%, 620px);
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
    padding: 16px;
  }

  .shop-help-body {
    gap: 13px;
  }

  .shop-help-lead {
    padding: 10px 12px;
  }

  .shop-help-steps li {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
  }

  .shop-help-step-number {
    width: 27px;
    height: 27px;
    font-size: 0.78rem;
  }

  .profile-settings-backdrop.shop-weekly-response-backdrop {
    align-items: center;
    padding: 14px;
  }

  .profile-settings-dialog.shop-weekly-response-dialog {
    width: min(100%, 430px);
    max-height: none;
    border-radius: 20px;
    padding: 20px;
  }

}

/* A másodlagos fülsor aktív eleme szándékosan halványabb, hogy a fölötte
   lévő fő fülsor vizuálisan mindig erősebb maradjon. */
.subtab-selector > button.is-active,
.subtab-selector > button.is-active:hover,
.subtab-selector > button.is-active:focus-visible,
.subtab-selector > .settings-tab-button.is-active,
.subtab-selector > .settings-tab-button.is-active:hover,
.subtab-selector > .settings-tab-button.is-active:focus-visible {
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent),
    0 6px 14px color-mix(in srgb, var(--primary) 10%, transparent);
}

.subtab-selector > .todo-tab-button.is-active strong,
.subtab-selector.shop-tabs > button.is-active span {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

/* Pénzügyek / Utalások */
.accounting-page .accounting-tabs > button.is-active,
.accounting-page .accounting-tabs > button.is-active:hover,
.accounting-page .accounting-tabs > .settings-tab-button.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border-color: transparent;
  box-shadow: var(--active-shadow);
}

.accounting-transfers button:focus-visible,
.accounting-transfers input:focus-visible,
.accounting-transfers select:focus-visible,
.accounting-transfers [data-select]:focus-visible {
  outline: 2px solid rgba(22, 137, 76, 0.35);
  outline-offset: 2px;
}

.accounting-transfer-filters {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #dce5de;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(20, 60, 35, 0.05);
}

.accounting-transfer-control {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #657487;
  font-size: 0.78rem;
  font-weight: 600;
}

.accounting-transfer-control select,
.accounting-transfer-control .settings-search-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid #dce5de;
  border-radius: 10px;
  padding: 0 12px;
  color: #142638;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
}

.accounting-transfer-desktop-month { flex: 0 1 185px; }
.accounting-transfer-search { flex: 1 1 190px; }
.accounting-transfer-status-filter { flex: 0 1 175px; }
.accounting-transfer-clear { min-height: 44px; margin-left: auto; white-space: nowrap; }
.accounting-transfer-mobile-top,
.accounting-transfer-mobile-filters,
.accounting-transfer-mobile-sort,
.accounting-transfer-cards { display: none; }

.accounting-transfer-sort { min-height: 44px; font-weight: 600; }
.accounting-transfer-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 44px; }

.accounting-transfer-table-wrap {
  width: 100%;
  border: 1px solid #dce5de;
  border-radius: 14px;
  background: #fff;
  overflow-x: auto;
}

.accounting-transfer-table { min-width: 1040px; }
.accounting-transfer-table th,
.accounting-transfer-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #e8eee9;
  text-align: left;
  vertical-align: middle;
}

.accounting-transfer-table th {
  padding-top: 6px;
  padding-bottom: 6px;
  background: #f9fbf9;
  color: #657487;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.accounting-transfer-table .accounting-transfer-amount { text-align: right; }
.accounting-transfer-table .accounting-transfer-row { cursor: pointer; }
.accounting-transfer-table .accounting-transfer-row:hover { background: #f9fbf9; }
.accounting-transfer-table .accounting-transfer-row.is-selected {
  background: #edf8f1;
  box-shadow: inset 3px 0 #16894c;
}
.accounting-transfer-issuer { display: flex; align-items: center; gap: 5px; }
.accounting-transfer-issuer strong { font-weight: 700; }
.accounting-transfer-expand,
.accounting-transfer-menu-cell > button,
.accounting-transfer-close,
.accounting-transfer-card-heading button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  min-width: 36px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: #0f7a42;
  background: transparent;
  font: inherit;
  font-size: 1.4rem;
  cursor: pointer;
}
.accounting-transfer-menu-cell { position: relative; }
.accounting-transfer-menu {
  position: absolute;
  z-index: 5;
  right: 0;
  width: 250px;
  max-width: calc(100vw - 32px);
  padding: 4px;
  border: 1px solid #dce5de;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(20, 60, 35, 0.05);
}
.accounting-transfer-menu button {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: #fff;
  text-align: left;
  padding: 8px;
  font: inherit;
  cursor: pointer;
}
.accounting-transfer-menu button:hover { background: var(--selection-soft); }
.accounting-transfer-table .accounting-transfer-menu { position: fixed; z-index: 131; }
.accounting-transfer-menu .accounting-transfer-menu-option { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px; cursor: pointer; font-weight: 600; }
.accounting-transfer-menu-option input { flex: 0 0 22px; }
.accounting-transfer-menu .accounting-transfer-menu-option:hover { background: var(--selection-soft); }
.accounting-transfer-bank,
.accounting-transfer-numbers { overflow-wrap: anywhere; font-size: 0.84rem; }
.accounting-transfer-pdf-links { display: flex; flex-wrap: wrap; gap: 8px; }
.accounting-transfer-pdf-links .ghost-button { min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
.accounting-transfer-card .accounting-transfer-pdf-links { margin-top: 8px; }
.accounting-transfer-copyable { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.accounting-transfer-copyable > span, .accounting-transfer-copyable > strong { min-width: 0; overflow-wrap: anywhere; }
.accounting-transfer-copy { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; flex-shrink: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.accounting-transfer-copy img { width: 1em; height: 1em; }
.accounting-transfer-copy:hover, .accounting-transfer-copy.is-copied { background: var(--pe-green-100, #DDF3E5); border-radius: 8px; }
.accounting-transfer-copy:focus-visible { outline: 2px solid rgba(22, 137, 76, 0.35); outline-offset: 2px; }
.accounting-transfer-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.79rem;
  font-weight: 600;
  white-space: nowrap;
}
.accounting-transfer-badge.is-transfer { background: #fff0d5; color: #b96400; }
.accounting-transfer-badge.is-missing { background: #fde2e2; color: #c62828; }
.accounting-transfer-badge.is-card { background: #ddeeff; color: #0874d1; }
.accounting-transfer-badge.is-paid { background: #dcf3e4; color: #13713b; }
.accounting-transfer-badge.is-neutral { background: #eef1f4; color: #5f6b78; }

.accounting-transfer-selected {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dce5de;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(20, 60, 35, 0.05);
}
.accounting-transfer-selected-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.accounting-transfer-selected-summary { display: none; }
.accounting-transfer-selected h2 { margin: 0 0 4px; font-size: 1.05rem; }
.accounting-transfer-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.accounting-transfer-facts > div { display: grid; align-content: start; gap: 4px; min-width: 0; }
.accounting-transfer-facts span:first-child { color: #657487; font-size: 0.75rem; }
.accounting-transfer-facts strong { overflow-wrap: anywhere; font-size: 0.88rem; }
.accounting-transfer-invoices h3 { margin: 0 0 8px; font-size: 0.94rem; }
.accounting-transfer-invoices .table-wrap { overflow-x: auto; }
.accounting-transfer-invoices .mini-table { width: 100%; min-width: 650px; }
.accounting-transfer-invoices .mini-table th { color: #657487; background: #f9fbf9; font-size: 0.72rem; }
.accounting-transfer-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.accounting-transfer-actions button { min-height: 48px; border-radius: 10px; font-weight: 700; }
.accounting-transfer-actions .accounting-transfer-settle { background: #0f7a42; color: #fff; }
.accounting-transfer-actions .accounting-transfer-settle:hover { background: #0b6b3a; }
.accounting-transfer-actions .accounting-transfer-settle:active { background: #075c32; }
.accounting-transfer-actions .accounting-transfer-settle:disabled { opacity: 0.5; cursor: not-allowed; }
.accounting-transfer-errors { margin: 0; padding: 0; border: 0; }
.accounting-transfer-errors summary { color: #c62828; font-weight: 700; }
.accounting-transfer-errors summary { list-style: none; }
.accounting-transfer-errors summary::-webkit-details-marker { display: none; }
.accounting-transfer-errors[open] { padding: 12px; border: 1px solid #e8eee9; border-radius: 10px; background: #fff; }
.accounting-transfer-message { padding: 10px 12px; border-radius: 8px; background: #eff8f2; color: #075c32; }
.accounting-transfer-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 38, 56, 0.35);
}
.profile-settings-dialog.accounting-transfer-dialog {
  width: min(430px, 100%);
  border: 1px solid #dce5de;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(20, 60, 35, 0.05);
}
.accounting-transfer-dialog h2 { margin: 0; font-size: 1.15rem; }
.accounting-transfer-dialog p { margin: 0; }
.accounting-transfer-dialog .field input {
  width: 100%;
  min-height: var(--layout-input-height);
  border: 1px solid rgba(23, 33, 29, 0.16);
  border-radius: var(--layout-input-radius);
  outline: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--color-input-background) 92%, transparent);
  font-size: var(--font-input-size);
}
.accounting-transfer-dialog .field input:focus {
  border-color: color-mix(in srgb, var(--selection-border) 56%, var(--line));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

@media (max-width: 767px) {
  .accounting-transfers { gap: 12px; }
  .accounting-transfer-filters { display: grid; gap: 10px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .accounting-transfer-mobile-top { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 44px); gap: 8px; }
  .accounting-transfer-mobile-top .accounting-transfer-control { min-width: 0; }
  .accounting-transfer-mobile-top button { min-height: 44px; border: 1px solid #dce5de; border-radius: 10px; background: #fff; color: #075c32; font-size: 1.35rem; }
  .accounting-transfer-filters > .accounting-transfer-control,
  .accounting-transfer-filters > .accounting-transfer-clear { display: none; }
  .accounting-transfer-mobile-sort.is-open { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .accounting-transfer-mobile-sort .accounting-transfer-sort { justify-content: space-between; padding: 8px 10px; border-radius: 8px; font-size: 0.9rem; }
  .accounting-transfer-mobile-sort .accounting-transfer-sort.is-active { background: var(--selection-soft); color: var(--primary-strong); }
  .accounting-transfer-mobile-filters.is-open { display: grid; gap: 10px; padding: 12px; border: 1px solid #dce5de; border-radius: 12px; background: #fff; }
  .accounting-transfer-table-wrap { display: none; }
  .accounting-transfer-cards { display: grid; gap: 8px; }
  .accounting-transfer-card { position: relative; min-width: 0; padding: 10px 12px; border: 1px solid #dce5de; border-radius: 12px; background: #fff; cursor: pointer; }
  .accounting-transfer-card.is-selected { border: 2px solid #16894c; background: #edf8f1; }
  .accounting-transfer-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .accounting-transfer-card-heading strong { min-width: 0; font-size: 0.97rem; overflow-wrap: anywhere; }
  .accounting-transfer-card-controls { display: flex; align-items: center; flex: 0 0 auto; }
  .accounting-transfer-card-controls button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--primary-strong); font-size: 1.35rem; }
  .accounting-transfer-card .accounting-transfer-menu { top: 50px; right: 10px; }
  .accounting-transfer-card-meta { color: #657487; font-size: 0.83rem; }
  .accounting-transfer-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
  .accounting-transfer-card-bottom strong { font-size: 1.05rem; text-align: right; white-space: nowrap; }
  .accounting-transfer-card .accounting-transfer-invoices { margin-top: 12px; }
  .accounting-transfer-selected { position: sticky; bottom: 8px; z-index: 20; max-height: min(60vh, 540px); overflow-y: auto; padding: 12px; gap: 10px; border-radius: 12px; }
  .accounting-transfer-selected-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .accounting-transfer-selected-summary strong { white-space: nowrap; font-size: 1.05rem; }
  .accounting-transfer-selected .accounting-transfer-facts,
  .accounting-transfer-selected .accounting-transfer-invoices { display: none; }
  .accounting-transfer-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-transfer-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .accounting-transfer-selected .accounting-transfer-actions { grid-template-columns: 1fr; }
  .accounting-transfer-actions button { min-width: 0; }
  .accounting-transfer-invoices .table-wrap { touch-action: pan-x pan-y; }
}

/* Keep settings additions after existing responsive/theme rules. */
.settings-matrix-wrap { overflow-x: auto; background: var(--surface); }
.settings-matrix-table { font-size: 12px; }
.settings-matrix-table th, .settings-matrix-table td { border-color: var(--line); background: var(--surface); }
.settings-matrix-table thead th { background: var(--color-table-header); color: var(--ink); }
.settings-matrix-table thead tr:nth-child(2) th { background: var(--surface-strong); }
.settings-matrix-table .settings-matrix-corner, .settings-matrix-table .settings-matrix-row-head { background: var(--surface-strong) !important; }
.settings-matrix-table tr[class*="is-tray-"] {
  --ink: #17211d;
  --muted: rgba(23, 33, 29, 0.68);
}
.settings-matrix-table tr[class*="is-tray-"] td,
.settings-matrix-table tr[class*="is-tray-"] .settings-matrix-row-head { background: var(--settings-matrix-row-color) !important; }
.settings-matrix-table .settings-matrix-input { background: var(--color-input-background); color: var(--ink); border-color: var(--line); font-size: 12px; }
.settings-matrix-table tr[class*="is-tray-"] .settings-matrix-input { background: rgba(255, 255, 255, 0.42); }
.settings-matrix-table .settings-matrix-input:focus { background: var(--color-input-background); }
.settings-matrix-table tr[class*="is-tray-"] .settings-matrix-input:focus { background: rgba(255, 255, 255, 0.92); }
.settings-matrix-table .settings-matrix-input.is-dirty { background: color-mix(in srgb, var(--color-warning) 12%, var(--surface)); }
.settings-matrix-table tr[class*="is-tray-"] .settings-matrix-input.is-dirty { background: rgba(255, 247, 232, 0.94); }
.settings-matrix-table .settings-matrix-cell.is-missing .settings-matrix-input { background: var(--surface-strong); color: var(--muted); }
.settings-matrix-table tr[class*="is-tray-"] .settings-matrix-cell.is-missing .settings-matrix-input { background: rgba(255, 255, 255, 0.22); }
.settings-matrix-derived { color: var(--muted); font-size: 11px; letter-spacing: normal; line-height: 1.2; }
.settings-template-switch { display: none; }
@media (max-width: 720px) {
  .settings-template-switch { display: flex; }
  .settings-email-template-shell .email-template-page { grid-template-columns: minmax(0, 1fr); }
  .settings-email-template-shell[data-template-mode="editor"] .email-template-preview-card,
  .settings-email-template-shell[data-template-mode="preview"] .email-template-editor-card { display: none; }
  .settings-matrix-table .settings-matrix-input { min-height: 40px; font-size: 14px; }
  .settings-matrix-greenhouse, .settings-matrix-side { font-size: 12px; }
  .settings-workspace-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
}

@media (max-width: 560px) {
  .settings-workspace-dialog .form-grid, .settings-company-workspace .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .settings-workspace-dialog .span-2 { grid-column: auto !important; }
}

/* Reserve the existing eye-button space in module-specific input styles too. */
body .integration-secret-field input:not([type="checkbox"]) {
  padding-right: 48px;
}