@import url('./erp-design-tokens.css?v=20260809plexcondensed1');

/**
 * HoreX ERP
 * Professional SaaS Design v2
 */

/* ==================== CSS VARIABLES ==================== */
:root {
  /* ===== Extended ERP semantic palette (erptokens2) — previously hardcoded hex, now tokenised =====
     Lives in ERP style.css (not design-tokens.css) so POS is untouched. */
  --color-warning-50: #fffbeb;
  --color-warning-200: #fde68a;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-danger-50: #fef2f2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-700: #047857;
  --color-success-800: #166534;
  --color-violet: #7c3aed;
  --erp-alert-danger: #ef4444;
  --erp-alert-warning: #f97316;

  /* Primary Colors */
  --primary: var(--color-primary-hover);
  --primary-hover: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --primary-300: var(--color-primary-300);   /* hover borders on pills/chips/pagination */
  --primary-500: var(--color-primary-hover);
  --primary-600: var(--color-primary-dark);
  --primary-700: var(--color-primary-dark);   /* gradient endpoint on active pills/buttons */

  /* Status Colors */
  --success: var(--color-success-strong);
  --warning: var(--color-warning-strong);
  --danger: var(--color-danger-dark);
  --info: var(--color-info-strong);

  /* Grays */
  --gray-50: var(--color-gray-50);
  --gray-100: var(--color-gray-100);
  --gray-200: var(--color-gray-200);
  --gray-300: var(--color-gray-300);
  --gray-400: var(--color-gray-400);
  --gray-500: var(--color-gray-500);
  --gray-600: var(--color-gray-600);
  --gray-700: var(--color-gray-700);
  --gray-800: var(--color-gray-800);
  --gray-900: var(--color-gray-900);

  /* Sidebar - light product navigation */
  --sidebar-bg: #fff;
  --sidebar-text: var(--color-gray-900);
  --sidebar-hover: var(--color-gray-100);
  --sidebar-active: var(--color-primary);

  /* Layout */
  --sidebar-width: 256px;
  --header-height: 64px;
  --erp-shell-gap: 12px;
  --erp-shell-radius: 24px;
  --erp-shell-overlap: 24px;
  --erp-shell-surface-bg: #f8fbff;
  --erp-shell-surface-image:
    radial-gradient(circle at 12% 6%, rgba(219, 234, 254, 0.34) 0, rgba(239, 246, 255, 0) 34%),
    linear-gradient(180deg, #fbfdff 0%, #ffffff 52%, #f8fbff 100%);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}

/* Corporate Tax workspace */
.corporate-tax-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.corporate-tax-page .erp-panel {
  padding: 0;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #0f172a);
  font-size: 15px;
}
.corporate-tax-page .erp-panel__header {
  margin-bottom: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-primary, #e2e8f0);
}
.corporate-tax-page .erp-panel__content { gap: 10px; padding: 12px 16px; }
.corporate-tax-page .erp-panel__content--flush { padding: 0; }
.corporate-tax-page .erp-panel__footer { padding: 12px 16px; }
.corporate-tax-page .erp-panel__title { color: var(--text-primary, #0f172a); font-size: 19px; }
.corporate-tax-page .erp-field-hint { color: #334155; font-size: 14px; line-height: 1.45; }
.corporate-tax-page .erp-field-label { color: var(--text-primary, #0f172a); }
.corporate-tax-page .erp-data-table:not(.erp-data-table--precision) th {
  padding: 12px 18px;
  color: var(--text-secondary-strong, #334155);
  font-size: 13px;
  font-weight: 600;
}
.corporate-tax-page .erp-data-table:not(.erp-data-table--precision) td {
  padding: 14px 18px;
  color: var(--text-primary, #0f172a);
  font-size: 15px;
  line-height: 1.45;
}

.corporate-tax-page .erp-data-table-wrap--precision {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  border-color: rgba(23, 23, 23, 0.12);
  overscroll-behavior: auto;
}

.corporate-tax-page .erp-data-table--precision th,
.corporate-tax-page .erp-data-table--precision td,
.corporate-tax-page .erp-data-table--precision .u-numeric-tabular {
  color: #262626;
  text-align: left !important;
}

.corporate-tax-page .erp-data-table--precision th,
.corporate-tax-page .erp-data-table--precision td {
  padding: 8px 16px;
}

.corporate-tax-page .erp-data-table--precision th .erp-data-table__th-content {
  justify-content: flex-start;
}

.corporate-tax-page .erp-data-table--precision strong {
  font-weight: 500;
}

.corporate-tax-page .erp-data-table--precision .erp-field-hint {
  margin-top: 1px;
  color: #8a94a6;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.corporate-tax-page .erp-data-table--precision .corporate-tax-table-row--with-meta td {
  height: 56px;
}

.corporate-tax-page .erp-data-table--precision .corporate-tax-report-row--total td,
.corporate-tax-page .erp-data-table--precision .corporate-tax-computation__row--total td,
.corporate-tax-page .erp-data-table--precision .corporate-tax-expense-group-row td,
.corporate-tax-page .erp-data-table--precision .corporate-tax-report-row--total strong,
.corporate-tax-page .erp-data-table--precision .corporate-tax-computation__row--total strong,
.corporate-tax-page .erp-data-table--precision .corporate-tax-expense-group-row strong {
  font-weight: 600;
}

.corporate-tax-page.is-refreshing {
  pointer-events: none;
}

.corporate-tax-page.is-refreshing::before {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--primary-500, #3b82f6), transparent);
  content: '';
  animation: corporate-tax-progress-loading 1s ease-in-out infinite;
}

@keyframes corporate-tax-progress-loading {
  from { transform: translateX(-50%); }
  to { transform: translateX(50%); }
}

.corporate-tax-page--loading {
  min-height: 520px;
}

.corporate-tax-skeleton {
  overflow: hidden;
  border: 1px solid var(--border-primary, #e2e8f0);
  border-radius: 12px;
  background: linear-gradient(100deg, #f8fafc 20%, #eef2f7 38%, #f8fafc 56%);
  background-size: 200% 100%;
  animation: corporate-tax-skeleton-loading 1.2s linear infinite;
}

.corporate-tax-skeleton--header { min-height: 148px; }
.corporate-tax-skeleton--panel { min-height: 260px; }

@keyframes corporate-tax-skeleton-loading {
  to { background-position-x: -200%; }
}

.corporate-tax-focus {
  width: min(100%, 860px);
  align-self: center;
}

.corporate-tax-page--filing {
  width: min(100%, 1280px);
  align-self: center;
}

.corporate-tax-onboarding {
  width: min(100%, 780px);
  align-self: center;
}

.corporate-tax-onboarding__content {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 28px;
}

.corporate-tax-onboarding__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-50, #eff6ff);
  color: var(--primary-600, #2563eb);
}

.corporate-tax-onboarding__icon svg { width: 23px; height: 23px; }
.corporate-tax-onboarding h2 { margin: 1px 0 7px; color: var(--text-primary, #0f172a); font-size: 18px; }
.corporate-tax-onboarding p { max-width: 620px; margin: 0; color: var(--text-secondary, #64748b); font-size: 13px; line-height: 1.6; }

.corporate-tax-onboarding__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.corporate-tax-onboarding__actions > span {
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
}

.corporate-tax-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.corporate-tax-report-source {
  display: flex;
  gap: 12px;
  align-items: center;
}

.corporate-tax-report-source > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.corporate-tax-report-source strong { color: var(--text-primary, #0f172a); font-size: 12px; }
.corporate-tax-report-source span { color: var(--text-secondary-strong, #475569); font-size: 11px; }
.corporate-tax-report-source .btn { flex: 0 0 auto; }

.corporate-tax-report-table td:first-child { color: var(--text-primary, #0f172a); }
.corporate-tax-report-table .corporate-tax-report-row--total td { color: var(--text-primary, #0f172a); font-weight: 700; }

.corporate-tax-report-row--action {
  transition: background-color 0.15s ease;
}

.corporate-tax-report-row--action:hover,
.corporate-tax-report-row--action:focus-visible {
  background: #f7f7f7;
  outline: none;
}

.corporate-tax-drill-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.corporate-tax-drill-value .erp-icon {
  color: #9ca3af;
  opacity: 1;
}

.corporate-tax-history { overflow: hidden; }


.corporate-tax-linked-trn {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--success-200, #a7f3d0);
  border-radius: 10px;
  background: var(--success-50, #ecfdf5);
}

.corporate-tax-linked-trn--missing {
  border-color: var(--warning-200, #fde68a);
  background: var(--warning-50, #fffbeb);
}

.corporate-tax-linked-trn > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.corporate-tax-linked-trn span,
.corporate-tax-linked-trn small {
  color: var(--text-secondary-strong, #334155);
  font-size: 11px;
}

.corporate-tax-linked-trn strong {
  overflow: hidden;
  color: var(--text-primary, #0f172a);
  font-size: 14px;
  text-overflow: ellipsis;
}

.corporate-tax-profile-section {
  margin-top: 22px;
}

.corporate-tax-profile-section h3 {
  margin: 0 0 10px;
  color: var(--text-primary, #0f172a);
  font-size: 13px;
}

.corporate-tax-optional {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border-primary, #e2e8f0);
}


.corporate-tax-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

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

.corporate-tax-form-grid--single {
  max-width: 420px;
  grid-template-columns: minmax(0, 1fr);
}

#salesVatRulesPanel .checkbox-wrapper {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  margin-bottom: 0;
}

#salesVatRulesPanel .checkbox-wrapper input[type="checkbox"] {
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
}

#salesVatRulesPanel .checkbox-wrapper input:focus-visible + .checkbox-box {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: 3px;
}

.corporate-tax-form-grid--source {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.corporate-tax-inline-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.corporate-tax-inline-summary > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border-primary, #e2e8f0);
  border-radius: 10px;
  background: var(--surface-secondary, #f8fafc);
}

.corporate-tax-inline-summary span { color: var(--text-secondary-strong, #475569); font-size: 10px; }
.corporate-tax-inline-summary strong { color: var(--text-primary, #0f172a); font-size: 15px; }

.corporate-tax-source-values {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border-primary, #e2e8f0);
  border-radius: 10px;
  background: var(--surface-secondary, #f8fafc);
}

.corporate-tax-source-values > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 13px;
  border-right: 1px solid var(--border-primary, #e2e8f0);
}

.corporate-tax-source-values > div:last-child { border-right: 0; }
.corporate-tax-source-values span { color: var(--text-primary, #0f172a); font-size: 10px; font-weight: 600; }
.corporate-tax-source-values strong { overflow: hidden; color: var(--text-primary, #0f172a); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.corporate-tax-source-advanced {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-primary, #e2e8f0);
}


.corporate-tax-reliefs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.corporate-tax-field--wide {
  grid-column: 1 / -1;
}

.corporate-tax-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-primary, #0f172a);
  font-size: 12px;
  font-weight: 600;
}

.corporate-tax-field .erp-control,
.corporate-tax-field .pure-dropdown-wrapper,
.corporate-tax-field .date-picker-wrapper {
  width: 100%;
}

.corporate-tax-readiness {
  display: grid;
  gap: 8px;
}

.corporate-tax-readiness__item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 10px;
  border: 1px solid var(--border-primary, #e2e8f0);
  border-radius: 9px;
  color: var(--text-secondary, #64748b);
  font-size: 12px;
}

.corporate-tax-readiness__item i {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--warning-600, #d97706);
}

.corporate-tax-readiness__item--ok i {
  color: var(--success-600, #059669);
}

.corporate-tax-computation {
  display: flex;
  flex-direction: column;
}

.corporate-tax-computation__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
  gap: 16px;
  align-items: center;
  min-height: 39px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-primary, #e2e8f0);
  color: var(--text-secondary-strong, #334155);
  font-size: 15px;
}

.corporate-tax-computation__row:last-child {
  border-bottom: 0;
}

.corporate-tax-computation__row--total {
  color: var(--text-primary, #0f172a);
  font-weight: 700;
}

.corporate-tax-computation__amount {
  direction: ltr;
  text-align: end;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[dir="rtl"] .corporate-tax-computation__amount {
  text-align: left;
}

.corporate-tax-source-alert {
  margin-bottom: 14px;
}

.corporate-tax-source-note {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.45;
}

.corporate-tax-compact-empty {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.corporate-tax-compact-empty > div {
  display: grid;
  gap: 3px;
}

.corporate-tax-compact-empty strong { color: var(--text-primary, #0f172a); font-size: 14px; }
.corporate-tax-compact-empty span { color: var(--text-secondary-strong, #475569); font-size: 13px; }

.corporate-tax-evidence-upload {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-primary, #e2e8f0);
}

.corporate-tax-list-row {
  cursor: pointer;
}

.corporate-tax-list-row:hover td {
  background: var(--surface-subtle, #f8fafc);
}

.corporate-tax-document-row,
.corporate-tax-timeline__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.corporate-tax-document-row:last-child,
.corporate-tax-timeline__item:last-child {
  border-bottom: 0;
}

.corporate-tax-document-row__copy,
.corporate-tax-timeline__copy {
  min-width: 0;
  flex: 1;
}

.corporate-tax-document-row__title,
.corporate-tax-timeline__title {
  overflow: hidden;
  color: var(--text-primary, #0f172a);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corporate-tax-document-row__meta,
.corporate-tax-timeline__meta {
  margin-top: 2px;
  color: var(--text-secondary-strong, #475569);
  font-size: 11px;
}

.corporate-tax-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.corporate-tax-form-actions {
  margin-top: 12px;
}

.corporate-tax-checkbox {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}

.corporate-tax-checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.corporate-tax-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .corporate-tax-form-grid--source { grid-template-columns: 1fr; }
  .corporate-tax-source-values { grid-template-columns: 1fr; }
  .corporate-tax-source-values > div { border-right: 0; border-bottom: 1px solid var(--border-primary, #e2e8f0); }
  .corporate-tax-source-values > div:last-child { border-bottom: 0; }
  .corporate-tax-evidence-upload { grid-template-columns: 1fr; align-items: stretch; }
}

@media (max-width: 600px) {
  .corporate-tax-onboarding__content {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .corporate-tax-linked-trn {
    align-items: stretch;
    flex-direction: column;
  }

  .corporate-tax-linked-trn .btn { width: 100%; justify-content: center; }

  .corporate-tax-report-source { align-items: stretch; flex-direction: column; }
  .corporate-tax-report-source .btn { width: 100%; justify-content: center; min-height: 44px; }
  .corporate-tax-page--profile .btn,
  .corporate-tax-page--profile .pure-dropdown-trigger,
  .corporate-tax-page--profile .date-picker-trigger,
  #salesVatRulesPanel .btn,
  #salesVatRulesPanel .pure-dropdown-trigger,
  #salesVatRulesPanel .date-picker-trigger,
  #salesVatRulesPanel .erp-control { min-height: 44px; }


  .corporate-tax-form-grid {
    grid-template-columns: 1fr;
  }

  .corporate-tax-inline-summary { grid-template-columns: 1fr; }

  .corporate-tax-reliefs { grid-template-columns: 1fr; }
  .corporate-tax-compact-empty { align-items: stretch; flex-direction: column; }

  .corporate-tax-field--wide {
    grid-column: auto;
  }

  .corporate-tax-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* The three workspace actions are navigational. Keep the filing path visible
     instead of putting it behind a horizontal header scroll at phone widths. */
  .corporate-tax-page > .erp-page-header .erp-page-header__controls {
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: 0;
    padding-right: 0;
    overflow-x: visible;
  }

  .corporate-tax-page > .erp-page-header .erp-page-header__controls .btn {
    flex: 1 1 148px;
    min-height: 44px;
    max-width: none;
    justify-content: center;
  }

  .corporate-tax-page > .erp-page-header .erp-page-header__controls .btn-gradient {
    flex-basis: 100%;
    width: 100% !important;
  }

  .corporate-tax-computation__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corporate-tax-page.is-refreshing::before,
  .corporate-tax-skeleton { animation: none; }
}

/* ==================== WAITER SERVICE QUESTIONS ==================== */
.waiter-prompts-page{display:grid;gap:20px}.waiter-prompts-card{background:var(--color-white,#fff);border:1px solid var(--color-gray-200,#e2e8f0);border-radius:16px;box-shadow:0 10px 30px rgba(15,23,42,.04);overflow:hidden}.waiter-prompts-card__head{padding:20px 22px;border-bottom:1px solid var(--color-gray-100,#f1f5f9);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.waiter-prompts-card__head h2,.waiter-prompt-new-question h3,.waiter-prompt-scope-grid h3{margin:0;color:#0f172a;font-size:17px}.waiter-prompts-card__head p,.waiter-prompt-new-question p,.waiter-prompt-scope-grid p{margin:5px 0 0;color:#64748b;font-size:12px}.waiter-prompts-list{display:grid}.waiter-prompt-flow{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 20px;border:0;border-bottom:1px solid #f1f5f9;background:#fff;color:#0f172a;text-align:left;cursor:pointer}.waiter-prompt-flow:last-child{border-bottom:0}.waiter-prompt-flow:not(:disabled):hover{background:#f8fafc}.waiter-prompt-flow:disabled{cursor:default}.waiter-prompt-flow__icon{width:42px;height:42px;border-radius:12px;background:#fff7ed;color:#ea580c;display:grid;place-items:center}.waiter-prompt-flow__icon svg{width:20px;height:20px}.waiter-prompt-flow__main,.waiter-prompt-flow__side{display:flex;flex-direction:column;gap:4px}.waiter-prompt-flow__main strong{font-size:14px}.waiter-prompt-flow small{color:#64748b;font-size:11px}.waiter-prompt-flow__side{align-items:flex-end}.waiter-prompt-status{display:inline-flex;padding:4px 8px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:10px;font-weight:700;text-transform:capitalize}.waiter-prompt-status.is-active{background:#dcfce7;color:#15803d}.waiter-prompts-empty{padding:44px 20px;text-align:center;color:#64748b}.waiter-prompts-empty>svg{width:32px;height:32px;color:#f97316}.waiter-prompts-empty h2{margin:12px 0 5px;color:#0f172a;font-size:18px}.waiter-prompt-results{display:grid}.waiter-prompt-result{border-bottom:1px solid #f1f5f9}.waiter-prompt-result:last-child{border-bottom:0}.waiter-prompt-result summary{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:18px;align-items:center;padding:15px 20px;cursor:pointer;list-style:none}.waiter-prompt-result summary::-webkit-details-marker{display:none}.waiter-prompt-result summary>span:not(.waiter-prompt-status){display:flex;flex-direction:column;gap:3px}.waiter-prompt-result summary strong{color:#0f172a;font-size:13px}.waiter-prompt-result summary small{color:#64748b;font-size:11px}.waiter-prompt-result__answers{padding:6px 20px 18px 56px;display:grid;gap:8px;background:#f8fafc}.waiter-prompt-result__answers>div{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px solid #e2e8f0;font-size:12px}.waiter-prompt-result__answers span{color:#475569}.waiter-prompt-result__answers strong{color:#0f172a;text-align:right}.waiter-prompt-builder{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:20px;align-items:start}.waiter-prompt-form-grid{padding:20px 22px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.waiter-prompt-form-grid__wide{grid-column:1/-1}.waiter-prompt-switches{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.waiter-prompt-switches label{display:flex;gap:10px;padding:12px;border:1px solid #e2e8f0;border-radius:12px;cursor:pointer}.waiter-prompt-switches input{width:18px;height:18px;accent-color:#2563eb}.waiter-prompt-switches span{display:flex;flex-direction:column;gap:3px}.waiter-prompt-switches strong{font-size:12px;color:#0f172a}.waiter-prompt-switches small{font-size:10px;color:#64748b}.waiter-prompt-scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 22px 22px}.waiter-prompt-scope-options{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.waiter-prompt-scope-option input{position:absolute;opacity:0}.waiter-prompt-scope-option span{display:inline-flex;padding:7px 10px;border:1px solid #e2e8f0;border-radius:999px;color:#475569;font-size:11px;cursor:pointer}.waiter-prompt-scope-option input:checked+span{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.waiter-prompt-scope-empty{color:#94a3b8;font-size:11px}.waiter-prompt-question-list{display:grid;max-height:540px;overflow:auto}.waiter-prompt-question{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid #f1f5f9}.waiter-prompt-question.is-selected{background:#fff7ed}.waiter-prompt-question>label:first-child{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.waiter-prompt-question>label:first-child input{margin-top:2px;accent-color:#f97316}.waiter-prompt-question>label:first-child span{display:flex;flex-direction:column;gap:3px}.waiter-prompt-question strong{font-size:12px;color:#0f172a}.waiter-prompt-question small{font-size:10px;color:#64748b;text-transform:capitalize}.waiter-prompt-question__controls{display:flex;align-items:center;gap:12px}.waiter-prompt-item-frequency{display:flex;align-items:center;gap:6px;color:#64748b;font-size:10px;white-space:nowrap}.waiter-prompt-item-frequency .form-control{width:168px;min-height:34px;padding:5px 28px 5px 8px;font-size:11px}.waiter-prompt-item-frequency select:disabled{opacity:.72;cursor:not-allowed}.waiter-prompt-item-required{font-size:10px;color:#64748b;white-space:nowrap}.waiter-prompt-item-required input{accent-color:#f97316}.waiter-prompt-new-question{padding:18px;border-top:1px solid #e2e8f0;background:#f8fafc}.waiter-prompt-new-question__grid{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:9px;margin-top:14px}.waiter-prompt-new-question__grid .btn{justify-content:center}.waiter-prompt-new-question__grid input:first-child{grid-column:1/-1}
@media(max-width:980px){.waiter-prompt-builder{grid-template-columns:1fr}.waiter-prompt-switches{grid-template-columns:1fr}.waiter-prompt-question-list{max-height:none}}@media(max-width:640px){.waiter-prompt-flow{grid-template-columns:38px minmax(0,1fr)}.waiter-prompt-flow__side{grid-column:2;align-items:flex-start;flex-direction:row;flex-wrap:wrap}.waiter-prompt-result summary{grid-template-columns:1fr}.waiter-prompt-result__answers{padding:8px 16px 16px}.waiter-prompt-result__answers>div{flex-direction:column;gap:4px}.waiter-prompt-result__answers strong{text-align:left}.waiter-prompt-form-grid,.waiter-prompt-scope-grid{grid-template-columns:1fr}.waiter-prompt-form-grid__wide{grid-column:auto}.waiter-prompt-scope-grid{padding-top:0}.waiter-prompt-question{grid-template-columns:1fr}.waiter-prompt-question__controls{justify-content:space-between;flex-wrap:wrap}.waiter-prompt-item-frequency .form-control{width:160px}.waiter-prompt-new-question__grid{grid-template-columns:1fr}.waiter-prompt-new-question__grid input:first-child{grid-column:auto}}

/* Marketing: phone-list audience import and saved snapshot audit */
.audience-phone-import__sources {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: var(--space-3, 12px);
    align-items: stretch;
}

.audience-phone-import__source {
    min-width: 0;
}

.audience-phone-import__or {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 11px;
    font-weight: 700;
}

.audience-phone-import__or span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: var(--gray-50);
}

.audience-phone-import__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.audience-phone-import__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.audience-phone-import__summary>div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--color-white);
}

.audience-phone-import__summary span {
    color: var(--gray-500);
    font-size: 12px;
    font-weight: 600;
}

.audience-phone-import__summary strong {
    color: var(--gray-900);
    font-size: 24px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.audience-phone-import__summary strong.is-success {
    color: var(--success);
}

.audience-phone-import__summary strong.is-warning {
    color: var(--warning);
}

.audience-phone-import__review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.audience-phone-import__review-head h4,
.audience-phone-import__review-head p {
    margin: 0;
}

.audience-phone-import__review-head h4 {
    color: var(--gray-900);
    font-size: 16px;
}

.audience-phone-import__review-head p {
    margin-top: 3px;
    color: var(--gray-500);
    font-size: 12px;
}

.audience-phone-import__filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.audience-phone-import__audit-table,
.audience-imported-snapshot__table {
    max-height: min(46vh, 480px);
    overflow: auto;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
}

.audience-phone-import__audit-table thead,
.audience-imported-snapshot__table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--gray-50);
}

.audience-phone-import__audit-table .btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.audience-phone-import__crm-choice {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--primary);
    border-radius: 12px;
    background: var(--color-white);
}

.audience-phone-import__crm-choice.is-disabled {
    border-color: var(--gray-200);
    color: var(--gray-500);
}

.audience-phone-import__crm-choice .checkbox-wrapper {
    align-items: flex-start;
    margin: 0;
}

.audience-phone-import__crm-choice strong,
.audience-phone-import__crm-choice small {
    display: block;
}

.audience-phone-import__crm-choice small {
    margin-top: 3px;
    color: var(--gray-500);
    font-size: 12px;
}

.audience-imported-snapshot {
    overflow: hidden;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--color-white);
}

.audience-imported-snapshot__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
}

.audience-imported-snapshot__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--gray-200);
}

.audience-imported-snapshot__stats>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px;
}

.audience-imported-snapshot__stats>div+div {
    border-left: 1px solid var(--gray-200);
}

.audience-imported-snapshot__stats strong {
    color: var(--gray-900);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.audience-imported-snapshot__stats span {
    color: var(--gray-500);
    font-size: 12px;
}

.audience-imported-snapshot__table {
    margin: 16px;
}

@media (max-width: 768px) {
    .audience-phone-import__sources {
        grid-template-columns: minmax(0, 1fr);
    }

    .audience-phone-import__or {
        min-height: 30px;
    }

    .audience-phone-import__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audience-phone-import__actions .btn {
        flex: 1 1 100%;
        min-height: 44px;
        justify-content: center;
    }

    .audience-phone-import__audit-table,
    .audience-imported-snapshot__table {
        max-height: 50vh;
    }
}

/* HXI Purchase Review: explainable pre-send exceptions, never a chat surface. */
.po-hxi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 62%, #ecfeff 100%);
}

.po-hxi-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    color: #4338ca;
    background: #fff;
    box-shadow: 0 8px 24px rgb(79 70 229 / 12%);
}

.po-hxi-card__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.po-hxi-card__copy strong { color: #312e81; }
.po-hxi-card__copy span { color: #475569; font-size: 13px; line-height: 1.45; }

.po-hxi-review { display: grid; gap: 16px; }

.po-hxi-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.po-hxi-summary > div {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--gray-50);
}

.po-hxi-summary small { color: var(--gray-500); font-size: 11px; }
.po-hxi-summary strong { color: var(--gray-900); font-size: 17px; }

.po-hxi-review__method {
    margin: 0;
    color: var(--gray-500);
    font-size: 12px;
    line-height: 1.5;
}

.po-hxi-exceptions { display: grid; gap: 10px; }

.po-hxi-exception {
    display: grid;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
}

.po-hxi-exception__head,
.po-hxi-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.po-hxi-exception__head > div:first-child { display: grid; gap: 7px; }
.po-hxi-signals { display: flex; flex-wrap: wrap; gap: 6px; }

.po-hxi-signal {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
}

.po-hxi-signal--saving { color: #047857; background: #d1fae5; }
.po-hxi-signal--risk { color: #b91c1c; background: #fee2e2; }
.po-hxi-signal--warning { color: #a16207; background: #fef3c7; }

.po-hxi-select {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #4338ca;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.po-hxi-quantity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
}

.po-hxi-quantity > span { display: grid; gap: 2px; font-size: 18px; font-weight: 700; }
.po-hxi-quantity small { color: var(--gray-500); font-size: 10px; font-weight: 500; }
.po-hxi-quantity > svg { width: 18px; color: var(--gray-400); }
.po-hxi-quantity__recommended { color: #4338ca; }

.po-hxi-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    color: var(--gray-500);
    font-size: 11px;
}

.po-hxi-facts b { color: var(--gray-700); }

.po-hxi-readiness,
.po-hxi-clear {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 10px;
    color: #475569;
    background: #f1f5f9;
    font-size: 12px;
}

.po-hxi-clear { justify-content: center; min-height: 82px; color: #047857; background: #ecfdf5; }
.po-hxi-actions { padding-top: 4px; justify-content: flex-end; flex-wrap: wrap; }

html.locale-ar .po-hxi-quantity > svg { transform: rotate(180deg); }

@media (max-width: 720px) {
    .po-hxi-card { align-items: flex-start; flex-wrap: wrap; }
    .po-hxi-card .btn { width: 100%; }
    .po-hxi-summary { grid-template-columns: minmax(0, 1fr); }
    .po-hxi-quantity { align-items: flex-start; gap: 8px; }
    .po-hxi-quantity > span { font-size: 15px; }
    .po-hxi-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .po-hxi-actions .btn { width: 100%; }
}

/* Marketing: reusable audience builder and Intelligence-only AI composer */
.audience-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 24px;
}

.audience-build-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.audience-build-status--warning { background: #fff7ed; color: #c2410c; }
.audience-build-status--error { background: #fef2f2; color: #dc2626; }
.audience-build-status--success { background: #ecfdf5; color: #047857; }

.audience-conditions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.audience-conditions-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.audience-conditions-build {
    min-height: 36px;
    padding: 8px 14px;
}

#audiencePreviewModal .audience-preview-modal {
    display: flex !important;
    flex-direction: column;
    width: min(95vw, 800px) !important;
    max-height: calc(100dvh - 64px);
    overflow: hidden !important;
}

#audiencePreviewModal .audience-preview-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow: auto !important;
}

#audiencePreviewModal .audience-preview-modal .modal-header,
#audiencePreviewModal .audience-preview-modal .modal-footer { flex: 0 0 auto; }
#audiencePreviewModal .audience-preview-table-scroll { max-width: 100%; overflow-x: auto; }
#audiencePreviewModal .audience-preview-table-scroll .data-table { min-width: 680px; }

.audience-ai-open { white-space: nowrap; }

.audience-ai-modal {
    display: flex !important;
    flex-direction: column;
    width: min(680px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 48px);
    overflow: hidden !important;
}

.audience-ai-modal .modal-header { align-items: flex-start; }

.audience-ai-modal__subtitle {
    max-width: 520px;
    margin: 5px 0 0;
    color: var(--gray-500);
    font-size: 13px;
    line-height: 1.45;
}

.audience-ai-modal__body {
    display: grid;
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
}

.audience-ai-modal__prompt {
    width: 100%;
    min-height: 142px;
    padding: 14px 16px;
    resize: vertical;
    font-size: 15px;
    line-height: 1.5;
}

.audience-ai-examples {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.audience-ai-examples button {
    padding: 7px 10px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: var(--gray-50);
    color: var(--gray-600);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.audience-ai-examples button:hover {
    border-color: #a5b4fc;
    background: #eef2ff;
    color: #4338ca;
}

.audience-ai-error[hidden] { display: none; }
.audience-ai-boundary { margin: 0; }
.audience-ai-modal__footer .btn { min-width: 112px; justify-content: center; }

.audience-ai-draft {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
}

.audience-ai-draft[hidden] { display: none; }

.audience-ai-draft__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    color: #4f46e5;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .1);
}

.audience-ai-draft__icon svg { width: 18px; height: 18px; }
.audience-ai-draft__copy { min-width: 0; }

.audience-ai-draft__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.audience-ai-draft__title strong { color: var(--gray-900); font-size: 14px; }

.audience-ai-draft__title span {
    padding: 3px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
}

.audience-ai-draft__copy p {
    margin: 5px 0 0;
    color: var(--gray-600);
    font-size: 12px;
    line-height: 1.45;
}

.audience-ai-draft__copy small {
    display: block;
    margin-top: 6px;
    color: var(--gray-500);
    font-size: 11px;
}

.audience-ai-draft__clarification {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #9a3412 !important;
}

.audience-ai-draft__clarification svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
.audience-ai-draft__actions { display: flex; gap: 8px; }

@media (max-width: 1024px) {
    .audience-editor-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    #audiencePreviewModal .audience-preview-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px);
    }

    .audience-ai-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px);
    }

    .audience-ai-draft { grid-template-columns: 38px minmax(0, 1fr); }
    .audience-ai-draft__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 640px) {
    .audience-conditions-actions { width: 100%; justify-content: stretch; }
    .audience-conditions-actions > * { flex: 1 1 auto; }
    .audience-conditions-actions .btn { justify-content: center; }
    .audience-conditions-build { justify-content: center; }
    .audience-ai-modal__footer .btn { flex: 1 1 0; }
}

/* ==================== GLOBAL INPUT STYLES ==================== */
/* Ensures text is always visible in all input fields */
input,
textarea,
select {
  color: var(--color-gray-900) !important;
  -webkit-text-fill-color: var(--color-gray-900) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-gray-400) !important;
  -webkit-text-fill-color: var(--color-gray-400) !important;
  opacity: 1;
}

/* ==================== CUSTOM CHECKBOXES (v3.1) ==================== */
.checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

#dispatchStationsGroup [data-station-branch][hidden] {
  display: none;
}

.checkbox-wrapper input[type="checkbox"] {
  display: none;
}

.checkbox-box,
.checkbox-custom {
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-gray-300);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: white;
  flex-shrink: 0;
}

.checkbox-box svg,
.checkbox-box i,
.checkbox-custom svg,
.checkbox-custom i {
  width: 14px;
  height: 14px;
  color: white;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}

.checkbox-wrapper:hover .checkbox-box,
.checkbox-wrapper:hover .checkbox-custom {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
}

.checkbox-wrapper input:checked+.checkbox-box,
.checkbox-wrapper input:checked+.checkbox-custom {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--primary-hover) 100%);
  border: none;
}

.checkbox-wrapper input:checked+.checkbox-box svg,
.checkbox-wrapper input:checked+.checkbox-box i,
.checkbox-wrapper input:checked+.checkbox-custom svg,
.checkbox-wrapper input:checked+.checkbox-custom i {
  opacity: 1;
  transform: scale(1);
}

.checkbox-wrapper.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.checkbox-wrapper.disabled .checkbox-box,
.checkbox-wrapper.disabled .checkbox-custom {
  background: var(--color-gray-100);
  border-color: var(--color-gray-200);
}

.checkbox-label {
  font-size: 14px;
  color: var(--color-gray-700);
}

.checkbox-wrapper.disabled .checkbox-label {
  color: var(--color-gray-400);
}

/* ==================== BUTTONS (v3.1) ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 37px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn svg,
.btn i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Primary Gradient Button */
.btn-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--primary-hover));
  color: white;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

.btn-gradient:hover {
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.4);
  transform: translateY(-1px);
}

.btn-gradient svg,
.btn-gradient i {
  color: white !important;
}

/* Success Gradient Button */
.btn-gradient-success {
  background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
  color: white;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-gradient-success svg,
.btn-gradient-success i {
  color: white !important;
}

/* Danger Gradient Button */
.btn-gradient-danger {
  background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
  color: white;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-gradient-danger svg,
.btn-gradient-danger i {
  color: white !important;
}

.btn:focus,
.btn-gradient:focus,
.btn-gradient-success:focus,
.btn-gradient-danger:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-ghost:focus {
  outline: none;
}

.btn:focus-visible,
.btn-gradient:focus-visible,
.btn-gradient-success:focus-visible,
.btn-gradient-danger:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.24), 0 4px 12px rgba(var(--color-primary-rgb), 0.22);
}

/* Secondary Button */
.btn-secondary {
  background: white;
  color: var(--color-gray-600);
  border: 1px solid var(--color-gray-200);
}

.btn-secondary:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

/* Legacy markup still uses Bootstrap's outline names. Keep those buttons on
   the same HoreX control contract instead of falling back to browser chrome. */
.btn-outline-secondary {
  background: #fff;
  color: var(--color-gray-600);
  border: 1px solid var(--color-gray-200);
  box-shadow: none;
}

.btn-outline-secondary:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-gray-800);
}

.btn-outline-danger {
  background: #fff;
  color: var(--erp-alert-danger);
  border: 1px solid var(--erp-alert-danger);
  box-shadow: none;
}

.btn-outline-danger:hover {
  background: #fff;
  border-color: var(--color-danger-dark);
  color: var(--color-danger-dark);
}

/* Small Button */
.btn-sm {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 10px;
}

/* Extra Small Button */
.btn-xs {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
}

/* ==================== APP LAUNCHER ==================== */
.app-launcher-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-primary-hover);
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.app-launcher-btn:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

.app-launcher-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}

/* Sidebar-specific launcher button styling */
.app-launcher-btn.sidebar-launcher {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.app-launcher-btn.sidebar-launcher:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.app-launcher-btn i,
.app-launcher-btn svg {
  width: 18px;
  height: 18px;
}

.app-launcher-dropdown {
  position: fixed;
  top: 72px;
  right: 24px;
  width: 380px;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--gray-200);
  padding: 16px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.app-launcher-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.app-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.app-launcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s ease;
}

.app-launcher-item:hover {
  background: var(--gray-50);
}

.app-launcher-item.active {
  background: var(--primary-light);
}

.app-launcher-item[data-product="copilot"].active {
  background: linear-gradient(145deg, #f9fdff 0%, #edf8ff 100%);
  box-shadow: inset 0 0 0 1px rgba(22, 140, 255, 0.12);
}

.app-launcher-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  margin-bottom: 6px;
}

.app-launcher-item[data-product="copilot"] .app-launcher-icon {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    0 7px 18px rgba(22, 140, 255, 0.24);
}

.app-launcher-icon i {
  width: 22px;
  height: 22px;
}

.app-launcher-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-700);
  text-align: center;
  line-height: 1.2;
}

.app-launcher-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

.app-launcher-show-all {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.app-launcher-show-all:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.app-launcher-show-all i {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .app-launcher-dropdown {
    top: 64px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .app-launcher-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .app-launcher-icon {
    width: 40px;
    height: 40px;
  }

  .app-launcher-icon i {
    width: 20px;
    height: 20px;
  }

  .app-launcher-label {
    font-size: 10px;
  }
}

/* ==================== UTILITY CLASSES ==================== */
/* Flex */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-1 { flex: 1; min-width: 0; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-items-end { align-items: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-inline-flex { display: inline-flex; }
.u-block { display: block; }
.u-inline-block { display: inline-block; }

/* Gap */
.u-gap-1 { gap: 4px; }
.u-gap-6px { gap: 6px; }
.u-gap-2 { gap: 8px; }
.u-gap-3 { gap: 12px; }
.u-gap-10 { gap: 10px; }
.u-gap-4 { gap: 16px; }
.u-gap-5 { gap: 20px; }
.u-gap-6 { gap: 24px; }
.u-gap-8 { gap: 32px; }

/* Spacing */
.u-m-0 { margin: 0; }
.u-mb-02 { margin-bottom: 2px; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-05 { margin-bottom: 4px; }
.u-mb-1 { margin-bottom: 6px; }
.u-mb-2 { margin-bottom: 8px; }
.u-mb-3 { margin-bottom: 12px; }
.u-mb-4 { margin-bottom: 16px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-5 { margin-bottom: 20px; }
.u-mb-6 { margin-bottom: 24px; }
.u-mr-1 { margin-right: 4px; }
.u-mt-0 { margin-top: 0; }
.u-mt-03 { margin-top: 3px; }
.u-mt-05 { margin-top: 2px; }
.u-mt-1 { margin-top: 4px; }
.u-mt-2 { margin-top: 8px; }
.u-mt-3 { margin-top: 12px; }
.u-mt-4 { margin-top: 16px; }
.u-mt-5 { margin-top: 20px; }
.u-mt-6 { margin-top: 24px; }
.u-mt-14 { margin-top: 14px; }
.u-p-0 { padding: 0; }
.u-p-2 { padding: 8px; }
.u-p-3 { padding: 12px; }
.u-p-4 { padding: 16px; }
.u-p-5 { padding: 20px; }
.u-p-6 { padding: 24px; }
.u-p-8 { padding: 32px; }
.u-p-12 { padding: 48px; }
.u-p-40 { padding: 40px; }
.u-py-1-px-2 { padding: 4px 8px; }
.u-py-2-px-3 { padding: 8px 12px; }
.u-py-2-px-10 { padding: 8px 10px; }
.u-py-2 { padding-top: 8px; padding-bottom: 8px; }
.u-py-3-px-4 { padding: 12px 16px; }
.u-py-6-px-10 { padding: 6px 10px; }
.u-py-6-px-12 { padding: 6px 12px; }
.u-py-6-px-14 { padding: 6px 14px; }
.u-py-10-px-12 { padding: 10px 12px; }
.u-py-10-px-14 { padding: 10px 14px; }
.u-py-10-px-0 { padding: 10px 0; }
.u-py-4-px-5 { padding: 16px 20px; }
.u-py-60-px-20 { padding: 60px 20px; }
.u-py-14-px-16 { padding: 14px 16px; }
.u-pt-3 { padding-top: 12px; }
.u-panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
}

/* Text */
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-text-left { text-align: left; }
.u-text-muted { color: var(--gray-500); }
.u-text-danger { color: var(--danger); }
.u-text-primary { color: var(--primary); }
.u-text-secondary { color: var(--text-secondary); }
.u-text-gray-500 { color: var(--gray-500); }
.u-text-gray-400 { color: var(--gray-400); }
.u-text-gray-600 { color: var(--gray-600); }
.u-text-gray-800 { color: var(--gray-800); }
.u-text-gray-900 { color: var(--gray-900); }
.u-text-slate-900 { color: var(--color-gray-900); }
.u-text-slate-800 { color: var(--color-gray-800); }
.u-text-slate-700 { color: var(--color-gray-700); }
.u-text-slate-600 { color: var(--color-gray-600); }
.u-text-slate-500 { color: var(--color-gray-500); }
.u-text-slate-400 { color: var(--color-gray-400); }
.u-text-slate-300 { color: var(--color-gray-300); }
.u-text-red-500 { color: var(--color-danger); }
.u-text-green-600 { color: var(--color-success-strong); }
.u-text-emerald-500 { color: var(--color-success); }
.u-text-red-600 { color: var(--color-danger-dark); }
.u-text-white-60 { color: rgba(255,255,255,0.6); }
.u-text-10 { font-size: 10px; }
.u-text-11 { font-size: 11px; }
.u-text-12 { font-size: 12px; }
.u-text-sm { font-size: 13px; }
.u-text-14 { font-size: 14px; }
.u-text-15 { font-size: 15px; }
.u-text-16 { font-size: 16px; }
.u-text-18 { font-size: 18px; }
.u-text-20 { font-size: 20px; }
.u-text-32 { font-size: 32px; }
.u-text-xs { font-size: 11px; }
.u-font-medium { font-weight: 500; }
.u-font-bold { font-weight: 600; }
.u-font-700 { font-weight: 700; }
.u-font-800 { font-weight: 800; }
.u-font-normal { font-weight: 400; }
.u-lh-15 { line-height: 1.5; }
.u-lh-145 { line-height: 1.45; }
.u-font-mono { font-family: monospace; }
.u-text-uppercase { text-transform: none; }
.u-text-capitalize { text-transform: capitalize; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-cursor-pointer { cursor: pointer; }
.u-cursor-grab { cursor: grab; }
.u-relative { position: relative; }
.u-overflow-x-auto { overflow-x: auto; }
.u-bg-gray-50 { background: var(--color-gray-50); }
.u-bg-card { background: var(--card-bg); }
.u-rounded-8 { border-radius: 8px; }
.u-rounded-12 { border-radius: 12px; }
.u-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-gray-700);
  font-size: 14px;
  font-weight: 500;
}
.u-field-label-strong {
  display: block;
  margin-bottom: 8px;
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
}
.u-field-note {
  display: block;
  margin-top: 4px;
  color: var(--gray-500);
  font-size: 11px;
}
.u-field-note-tight {
  margin-top: 2px;
  color: var(--gray-500);
  font-size: 12px;
}
.u-section-title-sm {
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 600;
}
.u-section-title-18 {
  margin: 0 0 8px;
  color: var(--color-gray-900);
  font-size: 18px;
  font-weight: 600;
}
.u-empty-note {
  padding: 20px;
  color: var(--color-gray-400);
  font-size: 13px;
  text-align: center;
}
.u-empty-state-pad {
  padding: 80px 20px;
}
.u-loading-pad {
  padding: 60px;
  text-align: center;
}
.u-panel-empty {
  padding: 60px 40px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}
.u-card-shell {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}
.u-table-full-collapse {
  width: 100%;
  border-collapse: collapse;
}
.u-table-header-cell {
  padding: 12px 16px;
  color: var(--color-gray-500);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  text-transform: none;
}
.u-icon-tile-40 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--gray-100);
  border-radius: 10px;
}
.u-progress-track-sm {
  height: 8px;
  overflow: hidden;
  background: var(--color-gray-100);
  border-radius: 4px;
}
.u-section-top-border {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}
.u-form-group-span-2 { grid-column: span 2; }
.u-panel-header-soft {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-gray-200);
}
.u-row-pad-border {
  padding: 8px;
  border-bottom: 1px solid var(--color-gray-200);
}
.u-py-2-border-bottom {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-gray-200);
}
.u-money-cell {
  font-weight: 600;
  text-align: right;
}
.u-money-cell-strong {
  color: var(--color-gray-900);
  font-weight: 700;
  text-align: right;
}
.u-muted-cell {
  color: var(--color-gray-500);
  font-size: 13px;
}
.u-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-gray-50);
}
.u-filter-button-compact {
  width: 100%;
  padding: 6px 10px;
  color: var(--color-gray-500);
  font-size: 12px;
  cursor: pointer;
  background: var(--color-gray-50);
  border: 0;
  border-radius: 4px;
}
.u-inline-input-compact {
  width: 100%;
  padding: 8px 10px;
  box-sizing: border-box;
  font-size: 13px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  outline: none;
}
.u-form-input-compact {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
}
.u-form-input-bordered {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
}
.u-form-input-lg {
  width: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
  font-size: 15px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  outline: none;
}
.u-sortable-card {
  padding: 12px;
  cursor: grab;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
}
.u-image-cover-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-danger-soft {
  color: var(--danger);
  background: var(--color-danger-50);
}
.u-accent-checkbox-blue {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-800);
}
.u-accent-checkbox-primary {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.u-empty-note-lg {
  padding: 48px;
  color: var(--color-gray-400);
  font-size: 14px;
  text-align: center;
}
.u-empty-note-sm {
  padding: 16px;
  color: var(--color-gray-400);
  font-size: 13px;
  text-align: center;
}
.u-empty-note-md {
  padding: 24px;
  color: var(--color-gray-400);
  text-align: center;
}
.u-empty-note-muted {
  padding: 40px;
  color: var(--color-gray-500);
  text-align: center;
}
.u-danger-icon-64 {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--color-danger), #f43f5e);
  border-radius: 16px;
}
.u-mini-metric-title {
  margin-bottom: 8px;
  color: var(--color-gray-800);
  font-size: 18px;
  font-weight: 600;
}
.u-money-nowrap {
  color: var(--color-gray-900);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.u-mini-stat-sub {
  color: var(--color-gray-500);
  font-size: 10px;
}
.u-subtitle-16 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.u-title-16 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.u-title-18 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.u-title-20-heavy {
  color: var(--color-gray-900);
  font-size: 20px;
  font-weight: 800;
}
.u-stat-number-24 {
  margin-top: 4px;
  color: var(--color-gray-900);
  font-size: 24px;
  font-weight: 800;
}
.u-stat-number-28 {
  font-size: 28px;
  font-weight: 700;
}
.u-stat-number-16 {
  margin-top: 2px;
  color: var(--color-gray-900);
  font-size: 16px;
  font-weight: 800;
}
.u-flex-col-gap-16 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.u-flex-col-start-gap-2 {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.u-wrap-row-gap-8 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.u-action-full {
  width: 100%;
  margin-bottom: 8px;
}
.u-justify-center-full {
  width: 100%;
  justify-content: center;
}
.u-list-action-row {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-gray-100);
}
.u-label-caps-muted {
  margin-bottom: 8px;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.u-label-caps-11 {
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.u-label-caps-10 {
  color: var(--color-gray-500);
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
}
.u-table-head-right {
  padding: 10px 8px;
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  text-transform: none;
}
.u-table-head-left {
  padding: 10px 8px;
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  text-transform: none;
}
.u-table-head-left-compact {
  padding: 10px 14px;
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}
.u-table-head-left-wide {
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
.u-table-cell-right-sm {
  padding: 6px 12px;
  font-size: 13px;
  text-align: right;
}
.u-table-cell-right-sm-strong {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}
.u-numeric-tabular {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: right;
}
.u-money-mono-strong {
  font-family: monospace;
  font-weight: 700;
  text-align: right;
}
.u-link-blue {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}
.u-inline-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.u-inline-icon-text-6 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.u-card-lite {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.u-soft-block {
  padding: 12px;
  margin-bottom: 12px;
  background: var(--color-gray-50);
  border-radius: 8px;
}
.u-mini-card {
  padding: 12px;
  text-align: center;
  background: var(--color-gray-50);
  border-radius: 10px;
}
.u-glass-card-sm {
  padding: 12px;
  text-align: center;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
}
.u-glass-icon-44 {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
}
.u-gradient-card-slate {
  padding: 20px;
  color: white;
  background: linear-gradient(135deg,var(--color-gray-600),var(--color-gray-800));
  border-radius: 16px;
}
.u-muted-input-shell {
  padding: 8px 10px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
}
.u-icon-tile-28 {
  width: 28px;
  height: 28px;
  background: var(--gray-100);
  border-radius: 6px;
}
.u-icon-circle-primary-40 {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  background: var(--primary-light);
  border-radius: 50%;
}
.u-detail-table-shell {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  border-collapse: collapse;
}
.u-empty-shell {
  padding: 60px 20px;
  text-align: center;
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
}
.u-status-section-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-gray-100);
}
.u-caption-12 {
  color: var(--color-gray-500);
  font-size: 12px;
  font-weight: 500;
}
.u-opacity-70 { opacity: 0.7; }
.u-opacity-80 { opacity: 0.8; }
.u-opacity-90 { opacity: 0.9; }
.u-border-top { border-top: 1px solid var(--color-gray-200); }
.u-divider-left-20 {
  height: 20px;
  border-left: 1px solid var(--color-gray-200);
}
.u-nowrap { white-space: nowrap; }
.u-shrink-0 { flex-shrink: 0; }
.u-grid-span-all { grid-column: 1 / -1; }
.u-bg-gray-100 { background: var(--gray-100); }

/* Width */
.u-w-full { width: 100%; }
.u-min-w-0 { min-width: 0; }
.u-min-w-140 { min-width: 140px; }
.u-min-w-150 { min-width: 150px; }
.u-min-w-160 { min-width: 160px; }
.u-min-w-180 { min-width: 180px; }
.u-min-w-200 { min-width: 200px; }
.u-min-w-220 { min-width: 220px; }
.u-w-100 { width: 100px; }
.u-w-110 { width: 110px; }
.u-w-90 { width: 90px; }
.u-w-80 { width: 80px; }
.u-w-70 { width: 70px; }
.u-w-64 { width: 64px; }
.u-w-44 { width: 44px; }
.u-w-32 { width: 32px; }
.u-w-28 { width: 28px; }
.u-w-18 { width: 18px; }
.u-w-16 { width: 16px; }
.u-w-14 { width: 14px; }
.u-h-18 { height: 18px; }
.u-h-16 { height: 16px; }
.u-h-14 { height: 14px; }
.u-text-24 { font-size: 24px; }
.u-max-h-250-scroll { max-height: 250px; overflow-y: auto; }
.u-max-w-500 { max-width: 500px; }
.u-max-w-640 { max-width: 640px; }
.u-flex-grow { flex: 1; }
.u-ml-2 { margin-left: 8px; }
.u-mx-4 { margin-right: 16px; margin-left: 16px; }

/* ==================== RESET & BASE ==================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  color: var(--gray-900);
  background: var(--erp-shell-surface-bg);
  background-image: var(--erp-shell-surface-image);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
}

/* ==================== FORM CONTROLS (v3.1) ==================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  width: 100%;
  min-height: 37px;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: var(--color-gray-900);
  box-sizing: border-box;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-gray-400);
}

/* Select arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* Small input variant — matches btn-sm / dropdown-sm height */
.input-sm {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 10px;
}

/* Invoice header grid — consistent field layout */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  align-items: start;
}

.info-grid label,
.info-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  color: var(--color-gray-500);
  margin-bottom: 6px;
}

.info-grid input,
.info-grid select,
.info-grid .pure-dropdown-trigger {
  height: 42px;
  padding: 8px 14px;
  font-size: 14px;
}

.info-grid .pure-dropdown-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* UOM dropdown in table-card — match inline-input height */
.table-card .pure-dropdown-sm .pure-dropdown-trigger {
  height: auto;
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid transparent;
  background: rgba(30, 41, 59, .001);
  transition: all 0.15s ease;
}

.table-card .pure-dropdown-sm .pure-dropdown-trigger:hover {
  background: var(--gray-50);
  border-color: var(--gray-200);
}

/* GLOBAL: Ensure dropdown menus are never clipped by parent containers */
.info-grid,
.invoice-card-v2,
.card-body,
.form-group,
.info-item,
.modal-body,
.modal,
.filter-row,
.filters-bar {
  overflow: visible !important;
}

/* Allow PureDropdown to overflow inside table cells (e.g. UOM select) */
td .pure-dropdown {
  position: static;
}

td .pure-dropdown .pure-dropdown-menu {
  position: fixed;
  min-width: 120px;
  width: auto;
  left: auto;
  right: auto;
}

.pure-dropdown,
.pure-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.native-select-source[data-upgraded="true"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
}

.native-select-dropdown.is-disabled .pure-dropdown-trigger {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-gray-50);
}

.pure-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 37px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--color-gray-900);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pure-dropdown-trigger:hover {
  border-color: var(--color-gray-300);
}

.pure-dropdown-trigger:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.pure-dropdown-trigger.open {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.pure-dropdown-trigger .dd-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pure-dropdown-trigger .dd-placeholder {
  color: var(--color-gray-400);
}

.pure-dropdown-trigger .dd-chevron {
  transition: transform 0.2s;
  color: var(--color-gray-400);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pure-dropdown-trigger.open .dd-chevron {
  transform: rotate(180deg);
}

.pure-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  max-height: 240px;
  overflow-y: auto;
  display: none;
}

.pure-dropdown-menu.open {
  display: block;
}

.pure-dropdown-menu.open-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.pure-dropdown-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s;
  color: var(--gray-900);
}

.pure-dropdown-item:first-child {
  border-radius: 9px 9px 0 0;
}

.pure-dropdown-item:last-child {
  border-radius: 0 0 9px 9px;
}

.pure-dropdown-item:hover {
  background: var(--color-gray-50);
}

.pure-dropdown-item.selected {
  background: var(--primary-light);
}

.pure-dropdown-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #fff;
}

.erp-action-menu {
  flex: 0 0 auto;
  width: auto;
}

.erp-action-menu__trigger.pure-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-600);
}

.erp-action-menu__trigger.pure-dropdown-trigger:hover,
.erp-action-menu__trigger.pure-dropdown-trigger.open {
  border: 0;
  background: var(--gray-50);
  box-shadow: none;
}

.erp-action-menu__menu.pure-dropdown-menu {
  min-width: 180px;
  padding: 4px;
}

.erp-action-menu__item.pure-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-900);
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.erp-action-menu__item.pure-dropdown-item.is-danger {
  color: var(--danger);
}

.pure-dropdown-autocomplete .pure-dropdown-trigger {
  cursor: text;
}

/* Higher specificity than the global input[type="text"] rule (0,1,1) — otherwise
   the inner input keeps its own border/padding/focus ring = double border. */
.pure-dropdown-trigger .pure-dropdown-autocomplete-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--gray-900);
  font: inherit;
  padding: 0;
}

.pure-dropdown-trigger .pure-dropdown-autocomplete-input:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

.pure-dropdown-autocomplete-input::placeholder {
  color: var(--color-gray-400);
}

.pure-dropdown-autocomplete-clear {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-gray-400);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}

.pure-dropdown-autocomplete-input:placeholder-shown + .pure-dropdown-autocomplete-clear {
  display: none;
}

.pure-dropdown-autocomplete-clear:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.pure-dropdown-autocomplete-action {
  color: var(--primary);
  font-weight: 500;
  border-top: 1px solid var(--gray-200);
}

.pure-dropdown-autocomplete-empty {
  color: var(--color-gray-400);
  font-style: italic;
  opacity: 1;
}

.pure-dropdown-item.pure-dropdown-item--heading {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: none;
  opacity: 1;
  cursor: default;
}

.erp-dropdown-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.erp-dropdown-option--child {
  padding-left: 14px;
}

.erp-dropdown-option__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--erp-dropdown-option-color, #ccc);
  flex-shrink: 0;
}

.erp-dropdown-option__dot--sm {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* Selected item checkbox - only shows for selected items */
.pure-dropdown-item .dd-check-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--primary-hover) 100%);
}

.pure-dropdown-item .dd-check-box svg,
.pure-dropdown-item .dd-check-box i {
  width: 12px;
  height: 12px;
  color: white;
}

.pure-dropdown-item.selected .dd-check-box {
  display: flex;
}

/* Searchable dropdown — search input */
.dd-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-gray-200);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.dd-search-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  font-size: 13px !important;
  width: 100% !important;
  background: transparent !important;
  color: var(--color-gray-900);
}

.dd-search-input::placeholder {
  color: var(--color-gray-400);
}

/* ==================== DESIGN SYSTEM SEARCH INPUT ==================== */
/* Usage: renderSearchInput() helper in app.js                          */
.ds-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ds-search-wrap .ds-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-gray-400);
  pointer-events: none;
  transition: color 0.15s ease;
}

.ds-search-wrap .ds-search-input {
  width: 100%;
  padding: 8px 32px 8px 34px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  font-size: 13px;
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  transition: all 0.15s ease;
  outline: none;
}

.ds-search-wrap .ds-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
  background: #fff;
}

.ds-search-wrap:focus-within .ds-search-icon {
  color: var(--color-primary);
}

.ds-search-wrap.ds-search-wrap--busy .ds-search-icon {
  color: var(--color-primary);
  animation: ds-search-pulse 0.8s ease-in-out infinite;
}

.ds-search-wrap.ds-search-wrap--busy .ds-search-input {
  background: #fff;
}

.ds-search-wrap .ds-search-input::placeholder {
  color: var(--color-gray-400);
}

.ds-search-wrap .ds-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--color-gray-400);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  transition: all 0.15s ease;
}

.ds-search-wrap .ds-search-clear:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.ds-search-wrap .ds-search-input:not(:placeholder-shown) ~ .ds-search-clear {
  display: flex;
}

/* Size: small — for tight spaces (table headers, modals) */
.ds-search-wrap.ds-search-sm .ds-search-input {
  padding: 6px 28px 6px 30px;
  font-size: 12px;
}

.ds-search-wrap.ds-search-sm .ds-search-icon {
  width: 14px;
  height: 14px;
  left: 9px;
}

.ds-search-wrap.ds-search-sm .ds-search-clear {
  width: 18px;
  height: 18px;
  right: 5px;
}

/* Size: large — for hero/page-level search */
.ds-search-wrap.ds-search-lg .ds-search-input {
  padding: 12px 38px 12px 40px;
  font-size: 14px;
  border-radius: 10px;
}

.ds-search-wrap.ds-search-lg .ds-search-icon {
  width: 18px;
  height: 18px;
  left: 13px;
}

.ds-search-wrap.ds-search-lg .ds-search-clear {
  width: 22px;
  height: 22px;
  right: 10px;
}

/* Width constraint — fits in page headers */
.ds-search-wrap.ds-search-header {
  max-width: 220px;
  flex-shrink: 1;
  flex-grow: 1;
}

@keyframes ds-search-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (max-width: 768px) {
  .ds-search-wrap.ds-search-header {
    max-width: 100%;
    width: 100%;
  }
}

/* Search result highlight */
tr.search-highlight {
  background: var(--primary-light) !important;
}

tr.search-highlight:hover {
  background: var(--color-primary-100) !important;
}

/* Small variant */
.pure-dropdown-sm .pure-dropdown-trigger {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 10px;
}

.pure-dropdown-sm .pure-dropdown-item {
  padding: 8px 12px;
  font-size: 13px;
}

/* Multi-select: wider trigger + menu */
.pure-dropdown[data-multi] .pure-dropdown-trigger {
  min-width: 160px;
}

.pure-dropdown[data-multi] .pure-dropdown-menu {
  min-width: 200px;
}

/* Inline / borderless variant — for use inside already-bordered containers */
.dd-inline .pure-dropdown-trigger,
.pure-dropdown.dd-inline .pure-dropdown-trigger {
  border: none;
  background: transparent;
  padding: 4px 8px;
  border-radius: 4px;
}

.dd-inline .pure-dropdown-trigger:hover {
  background: var(--gray-100);
}

.dd-inline .pure-dropdown-trigger.open {
  border: none;
  box-shadow: none;
  background: var(--gray-100);
}

/* ==================== DATE PICKER (Calendar) ==================== */
.date-picker-wrapper {
  position: relative;
  width: 100%;
}

.date-picker-wrapper--lg .date-picker-trigger {
  gap: 10px;
  min-height: 52px;
  padding: 14px 16px;
  font-size: 15px;
  border-radius: 14px;
}

.date-picker-wrapper--lg .date-picker-trigger .dp-icon {
  width: 18px;
  height: 18px;
}

.date-picker-wrapper--sm .date-picker-trigger {
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 10px;
}

.date-picker-wrapper--sm .date-picker-trigger .dp-icon {
  width: 16px;
  height: 16px;
}

.date-picker-wrapper--xs .date-picker-trigger {
  gap: 6px;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
  border-radius: 8px;
}

.date-picker-wrapper--xs .date-picker-trigger .dp-icon {
  width: 14px;
  height: 14px;
}

.date-picker-wrapper.is-disabled .date-picker-trigger {
  cursor: not-allowed;
  background: var(--color-gray-50);
  color: var(--text-secondary);
  border-color: #dbe4f0;
  box-shadow: none;
}

.date-picker-wrapper.is-disabled .date-picker-trigger:hover,
.date-picker-wrapper.is-disabled .date-picker-trigger.open {
  border-color: #dbe4f0;
  box-shadow: none;
}

.date-picker-wrapper.is-disabled .date-picker-trigger .dp-icon,
.date-picker-wrapper.is-disabled .date-picker-trigger .dp-placeholder {
  color: #c4d0e0;
}

.date-picker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 37px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--color-gray-900);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.date-picker-trigger:hover {
  border-color: var(--color-gray-300);
}

.date-picker-trigger.open {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.date-picker-trigger .dp-icon {
  color: var(--color-gray-400);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.date-picker-trigger .dp-text {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.2;
}

.date-picker-trigger .dp-placeholder {
  color: var(--color-gray-400);
  font-weight: 400;
}

.calendar-popup {
  position: absolute;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  min-width: 280px;
  display: none;
}

.calendar-popup.open {
  display: block;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-header-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-gray-900);
}

.calendar-header-editable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-month-select,
.calendar-year-input {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-gray-900);
  background: var(--color-gray-50);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.calendar-month-select:hover,
.calendar-year-input:hover {
  background: var(--color-gray-100);
}

.calendar-month-select:focus,
.calendar-year-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
}

.calendar-year-input {
  width: 66px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.calendar-year-input::-webkit-outer-spin-button,
.calendar-year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calendar-header-nav {
  display: flex;
  gap: 4px;
}

.calendar-nav-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  transition: background 0.15s;
}

.calendar-nav-btn:hover {
  background: var(--color-gray-100);
}

.calendar-nav-btn i,
.calendar-nav-btn svg {
  pointer-events: none;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.calendar-day-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-400);
  padding: 8px 0;
}

.calendar-day {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: transparent;
}

.calendar-day:hover {
  background: var(--color-gray-100);
}

.calendar-day.selected {
  background: var(--color-primary);
  color: white;
}

.calendar-day.today {
  font-weight: 700;
  color: var(--color-primary);
}

.calendar-day.today.selected {
  color: white;
}

.calendar-day.inactive {
  color: var(--color-gray-300);
  cursor: default;
}

.calendar-day.inactive:hover {
  background: transparent;
}

/* Form group spacing */
.inventory-regrading { scroll-margin-top: 20px; }
.inventory-regrading__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.inventory-regrading__summary span { display: grid; gap: 6px; font-size: 12px; color: #64748b; }
.inventory-regrading__summary strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inventory-regrading__empty, .inventory-regrading__hint { color: #64748b; font-size: 12px; line-height: 1.5; }
.inventory-regrading__item { font-size: 13px; font-weight: 600; white-space: normal; }
.inventory-regrading__form { display: grid; gap: 16px; border-top: 1px solid #e2e8f0; padding-top: 18px; margin-top: 18px; }
.inventory-regrading__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.inventory-regrading__side { display: grid; gap: 8px; min-width: 0; }
.inventory-regrading__side .form-label { margin: 0; font-size: 12px; }
.inventory-regrading__side .pure-dropdown { margin-bottom: 6px; }
.inventory-regrading__form .form-group { margin-bottom: 0; }
.inventory-regrading__preview { background: #f8fafc; border-radius: 12px; padding: 12px 16px; color: #475569; font-size: 13px; line-height: 1.5; }
.inventory-regrading__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 768px) {
  .inventory-regrading__summary, .inventory-regrading__fields { grid-template-columns: 1fr; gap: 16px; }
  .inventory-regrading__summary span { display: flex; justify-content: space-between; gap: 12px; }
  .inventory-regrading .btn, .inventory-regrading input, .inventory-regrading .pure-dropdown-trigger { min-height: 44px; }
  .inventory-regrading__actions .btn { flex: 1; justify-content: center; }
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-gray-700);
}

/* Form actions (button row) */
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-gray-200);
}

/* Global Custom Checkbox styling */
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid var(--color-gray-300);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

input[type="checkbox"]:hover {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
}

input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--primary-hover) 100%);
  border: none;
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}

img {
  max-width: 100%;
  display: block;
}

.managed-media-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.managed-media-card--uploaded {
  border-left: 4px solid var(--success-500);
}

.managed-media-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}

.managed-media-card__type-icon,
.managed-media-card__empty-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--success-700);
  background: var(--success-100);
  border-radius: 9px;
}

.managed-media-card__heading {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.managed-media-card__title {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.managed-media-card__status {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  color: var(--success-700);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.managed-media-card__preview {
  display: flex;
  width: calc(100% - 24px);
  min-height: 220px;
  max-height: 360px;
  padding: 0;
  margin: 0 12px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--gray-600);
  font: inherit;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  cursor: pointer;
}

.managed-media-card__preview img,
.managed-media-card__preview video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 336px;
  object-fit: contain;
}

.managed-media-card__preview--document {
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  text-align: center;
  word-break: break-word;
}

.managed-media-card__meta {
  padding: 9px 14px 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.managed-media-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 12px;
}

.managed-media-card__actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}

.managed-media-card__replace {
  cursor: pointer;
}

.managed-media-card__input {
  display: none;
}

.managed-media-card__footer {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--gray-100);
}

.managed-media-card__empty-target {
  display: flex;
  width: 100%;
  min-height: 164px;
  padding: 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.managed-media-card__empty-target:hover {
  background: var(--primary-50);
}

.managed-media-card--empty {
  border-style: dashed;
}

.managed-media-card--empty .managed-media-card__empty-icon {
  color: var(--gray-500);
  background: var(--gray-100);
}

.managed-media-card__hint {
  color: var(--text-secondary);
  font-size: 11px;
}

.managed-media-card--compact .managed-media-card__preview {
  min-height: 92px;
  max-height: 120px;
}

.managed-media-card--compact .managed-media-card__preview img,
.managed-media-card--compact .managed-media-card__preview video {
  max-height: 118px;
}

.managed-media-card--compact .managed-media-card__empty-target {
  min-height: 116px;
  padding: 14px;
}

.cursor-pointer {
  cursor: pointer;
}

/* ==================== LAYOUT ==================== */
.app {
  display: flex;
  min-height: 100vh;
}

/* ==================== RESPONSIVE UTILITIES ==================== */
/* Hide on mobile screens (< 768px) */
.hide-mobile {
  display: block;
}

/* Show only on mobile screens (< 768px) */
.show-mobile {
  display: none !important;
}

/* Mobile invoice lines (card view for detail page) */
.mobile-invoice-lines {
  display: none;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .mobile-invoice-lines {
    display: block;
  }
}

/* Mobile invoice line card styling */
.mobile-invoice-line {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
}

.mobile-invoice-line-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}

.mobile-invoice-line-name {
  font-weight: 600;
  color: var(--gray-900);
  font-size: 14px;
  flex: 1;
  word-break: break-word;
}

.mobile-invoice-line-delete {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--danger);
  color: white;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
}

.mobile-invoice-line-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mobile-invoice-line-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-invoice-line-field label {
  font-size: 11px;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0.5px;
}

.mobile-invoice-line-field input {
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
}

.mobile-invoice-line-total {
  grid-column: 1 / -1;
  text-align: right;
  font-weight: 700;
  color: var(--primary);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px dashed var(--gray-200);
}

.mobile-add-line-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary-light);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-lg);
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
}

/* ==================== MOBILE PRODUCT AUTOCOMPLETE ==================== */
.mobile-invoice-line-product {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.mobile-invoice-line-product label {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.mobile-product-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  background: white;
}

.mobile-product-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.mobile-product-selected {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  color: var(--gray-700);
  font-weight: 500;
  pointer-events: none;
  background: white;
  border-radius: var(--radius);
}

.mobile-product-input:focus+.mobile-product-selected {
  display: none;
}

.mobile-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.mobile-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--gray-100);
  border-radius: var(--radius);
  cursor: pointer;
  margin-left: 8px;
  font-size: 14px;
}

.mobile-lock:hover {
  background: var(--gray-200);
}

.mobile-lock.locked {
  background: var(--primary);
  color: white;
}

.mobile-invoice-line-name[contenteditable="true"] {
  cursor: text;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 1px dashed transparent;
}

.mobile-invoice-line-name[contenteditable="true"]:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.mobile-invoice-line-name[contenteditable="true"]:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
}

.mobile-invoice-line-name[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--gray-400);
  font-weight: 400;
}

/* Invoice line delete button - positioned outside table */
.invoice-line-delete-btn {
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--danger);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
}

.table-v3 tbody tr:hover .invoice-line-delete-btn {
  opacity: 1;
}

.invoice-line-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Table-responsive inside table-card */
.table-card .table-responsive {
  padding-right: 0;
}

/* Purchase invoice Line Items: supplier text and the canonical Catalog product
   share the descriptive workspace. Quantities and money keep compact predictable
   rails, so operational identity is never sacrificed to oversized numeric cells. */
.invoice-line-items-card {
  max-width: 100%;
}

.invoice-line-items-table {
  width: 100%;
  table-layout: fixed;
}

.invoice-line-items-table__col--item {
  width: 30%;
}

.invoice-line-items-table__col--catalog {
  width: 30%;
}

.invoice-line-items-table__col--qty {
  width: 88px;
}

.invoice-line-items-table__col--unit {
  width: 136px;
}

.invoice-line-items-table__col--price {
  width: 140px;
}

.invoice-line-items-table__col--vat {
  width: 130px;
}

.invoice-line-items-table__col--total {
  width: 168px;
}

.invoice-line-items-table__col--actions {
  width: 56px;
}

/* A selected canonical product is evidence, not placeholder copy. Keep the
   complete label readable at rest; focusing the control swaps to the normal
   one-line autocomplete input for searching and remapping. */
.pure-dropdown-autocomplete-readable {
  display: none;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.invoice-line-product-ac.pure-dropdown-autocomplete--readable
.pure-dropdown-trigger:not(:focus-within)
.pure-dropdown-autocomplete-readable {
  display: block;
}

.invoice-line-product-ac.pure-dropdown-autocomplete--readable
.pure-dropdown-trigger:not(:focus-within)
.pure-dropdown-autocomplete-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.invoice-line-items-table__item-cell,
.invoice-line-items-table__item-value,
.invoice-line-items-table__catalog-cell,
.invoice-line-items-table__catalog-value {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.invoice-line-items-table__item-value,
.invoice-line-items-table__catalog-value,
.invoice-line-product-ac .pure-dropdown-autocomplete-readable {
  line-height: 1.35;
}

.invoice-line-product-ac__uom {
  margin-inline-start: 8px;
  white-space: nowrap;
}

.invoice-line-items-table__footer-spacer,
.invoice-line-items-table__grand-total {
  background: #fff;
}

.invoice-line-items-table__grand-total {
  font-weight: 600;
  white-space: nowrap;
}

/* ==================== TOTALS SECTION ==================== */
.totals-item {
  text-align: center;
}

.totals-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gray-500);
  text-transform: none;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.totals-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-700);
}

.totals-input {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  text-align: center;
  font-size: 15px;
}

.totals-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.totals-total {
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--primary-hover) 100%);
  padding: 12px 24px;
  border-radius: 12px;
}

.totals-total-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-transform: none;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.totals-total-value {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.totals-total-input {
  width: 120px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.totals-total-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.totals-total-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  .totals-item {
    flex: 1;
    min-width: 80px;
  }

  .totals-total {
    width: 100%;
    margin-top: 12px;
  }
}

/* ==================== INVOICE HEADER ROW (v3.1) ==================== */
.invoice-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.invoice-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.invoice-header-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-gray-900);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.invoice-header-sub {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-top: 4px;
}

.invoice-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .invoice-header-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .invoice-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .invoice-header-actions .btn-gradient-success {
    width: 100%;
  }
}


/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s ease;
  border-right: 0;
  box-shadow: none;
}

.sidebar-header {
  height: var(--header-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 0;
}

.horex-brand {
  display: flex;
  align-items: center;
  height: 36px;
}

.horex-brand__logo {
  display: block;
  width: auto;
  height: 28px;
  max-width: 96px;
  object-fit: contain;
  object-position: left center;
}

.logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.logo-text {
  color: var(--color-gray-900);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.nav-group {
  margin-bottom: 24px;
}

.nav-group-title {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--sidebar-text);
  opacity: 0.5;
}

.nav-group-title--other-products {
  opacity: 0.6;
}

.nav-group-title-icon {
  width: 16px;
  height: 16px;
}

.nav-group--other-products {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-200);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 400;
  transition: all 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--color-gray-900);
}

.nav-item.active {
  background: #fff;
  color: var(--color-gray-900);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 22px rgba(15, 23, 42, 0.045);
}

.nav-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item:not(.active) .nav-item-icon {
  color: var(--color-gray-500);
}

.nav-item-icon--sm {
  width: 18px;
  height: 18px;
}

.nav-item-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.4;
}

.nav-item-icon--sm svg {
  width: 14px;
  height: 14px;
}

.nav-collapse-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.nav-collapse-chevron-wrap {
  margin-left: auto;
  padding: 4px;
  cursor: pointer;
}

.nav-item-badge {
  margin-left: auto;
  background: var(--color-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* Collapsible sidebar groups */
.nav-collapsible-group {
  margin: 0;
}

.nav-collapsible-toggle {
  position: relative;
}

.nav-collapsible-toggle .nav-collapse-chevron,
.nav-collapsible-parent .nav-collapse-chevron {
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s;
}

.nav-collapsible-group.expanded>.nav-collapsible-toggle .nav-collapse-chevron,
.nav-collapsible-group.expanded>.nav-collapsible-parent .nav-collapse-chevron {
  transform: rotate(90deg);
  opacity: 0.8;
}

.nav-collapsible-toggle.active-parent {
  color: var(--color-gray-900);
  opacity: 1;
}

.nav-collapsible-children {
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.nav-child-item {
  padding-left: 40px;
  font-size: 13px;
  opacity: 0.85;
}

.nav-child-item:hover {
  opacity: 1;
}

.nav-child-item.active {
  opacity: 1;
}

.other-product-item {
  opacity: 1;
}

.sidebar-footer {
  padding: 12px;
  border-top: 0;
  position: relative;
}

.org-switcher-shell {
  position: relative;
}

.org-switcher-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--gray-900);
  font-family: inherit;
  text-align: left;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025), 0 8px 22px rgba(30, 64, 175, 0.04);
  cursor: default;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.org-switcher-card.is-switchable {
  cursor: pointer;
}

.org-switcher-card.is-switchable:hover,
.org-switcher-card.open {
  border-color: rgba(var(--color-primary-rgb), 0.28);
  background: #fff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.035), 0 10px 26px rgba(30, 64, 175, 0.055);
}

.org-switcher-card:focus-visible {
  outline: none;
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12), 0 8px 22px rgba(30, 64, 175, 0.04);
}

.org-switcher-card__logo,
.org-dropdown-item__logo {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--gray-700);
  flex-shrink: 0;
}

.org-switcher-card__logo img,
.org-dropdown-item__logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.org-logo-fallback {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.org-switcher-card__copy,
.org-dropdown-item__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.org-switcher-card__name,
.org-dropdown-item__name {
  overflow: hidden;
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-switcher-card__meta,
.org-dropdown-item__meta {
  color: var(--gray-500);
  font-size: 11px;
  line-height: 1.25;
}

.org-chevron {
  width: 15px;
  height: 15px;
  color: var(--gray-400);
  stroke-width: 1.4;
}

.org-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 180;
  display: none;
  padding: 8px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.org-dropdown.open {
  display: block;
}

.org-dropdown__label {
  padding: 4px 8px 8px;
  color: var(--gray-400);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: none;
}

.org-dropdown-item {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gray-900);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.org-dropdown-item:hover,
.org-dropdown-item.active {
  background: var(--color-primary-light);
}

.org-dropdown-item__check {
  width: 15px;
  height: 15px;
  color: var(--color-primary-hover);
  stroke-width: 1.4;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease;
}

.user-info:hover {
  background: var(--sidebar-hover);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-success), #0d9488);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

.user-name {
  color: var(--color-gray-900);
  font-weight: 500;
}

.user-role {
  color: var(--sidebar-text);
  font-size: 12px;
}

/* Main Content */
.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fff;
}

@media (min-width: 1025px) {
  .app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .sidebar {
    width: calc(var(--sidebar-width) + var(--erp-shell-overlap));
    top: var(--erp-shell-gap);
    left: var(--erp-shell-gap);
    bottom: var(--erp-shell-gap);
    padding-right: var(--erp-shell-overlap);
    border-radius: var(--erp-shell-radius) 0 0 var(--erp-shell-radius);
    background-color: var(--erp-shell-surface-bg);
    background-image: var(--erp-shell-surface-image);
  }

  .main {
    position: relative;
    z-index: 110;
    margin: var(--erp-shell-gap) var(--erp-shell-gap) var(--erp-shell-gap)
      calc(var(--sidebar-width) + var(--erp-shell-gap));
    height: calc(100vh - (var(--erp-shell-gap) * 2));
    height: calc(100dvh - (var(--erp-shell-gap) * 2));
    min-height: 0;
    max-height: calc(100vh - (var(--erp-shell-gap) * 2));
    max-height: calc(100dvh - (var(--erp-shell-gap) * 2));
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--erp-shell-radius);
    overflow: hidden;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
  }
}

.header {
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--gray-200);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px) minmax(0, 1fr);
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.025);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 1025px) {
  .header {
    position: relative;
    top: auto;
    flex: 0 0 var(--header-height);
  }

  .content {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
}

.header-subtitle {
  color: var(--gray-500);
  font-size: 14px;
}

.header-right {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}

.header-ai-credits:empty {
  display: none;
}

.header-ai-credit-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--gray-700);
  font: 600 12px/1 inherit;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, background 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
}

.header-ai-credit-button:hover {
  border-color: var(--color-primary-300);
  color: var(--gray-900);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.header-ai-credit-button:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.header-ai-credit-button svg,
.header-ai-credit-button i {
  width: 15px;
  height: 15px;
  color: var(--color-primary);
}

.header-ai-credit-button[data-balance-status="low"] {
  border-color: #fed7aa;
  background: #fffaf5;
  color: #9a3412;
}

.header-ai-credit-button[data-balance-status="exhausted"] {
  border-color: #fecaca;
  background: #fff7f7;
  color: #b91c1c;
}

.header-ai-credit-button[data-balance-status="low"] svg,
.header-ai-credit-button[data-balance-status="exhausted"] svg {
  color: currentColor;
}

/* Hide header action buttons globally */
#headerActions {
  display: none !important;
}

.app-launcher-wrapper {
  display: none !important;
}

/* ==================== HEADER CHROME (desktop top bar) ==================== */
.header-search-slot {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.header-search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 9px 0 13px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  color: var(--gray-500);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.header-search-trigger:hover {
  border-color: var(--color-primary-300);
  color: var(--gray-700);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
}

.header-search-trigger:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12), 0 4px 12px rgba(15, 23, 42, 0.07);
}

.header-search-trigger i,
.header-search-trigger svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.header-search-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-profile {
  position: relative;
}

.header-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 5px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.header-profile-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-200);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.header-profile-btn:focus-visible {
  outline: none;
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.header-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-brand-indigo));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.header-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header-profile-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-900);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-profile-chevron {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
}

/* Scoped selector: must out-rank the base .user-menu-popover rule that is
   declared later in this file (sidebar variant anchors to bottom/left) */
.header-profile .header-user-popover {
  bottom: auto;
  top: calc(100% + 6px);
  left: auto;
  right: 0;
  width: 240px;
  margin-bottom: 0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.header-user-identity {
  padding: 12px 16px 2px;
}

.header-user-identity-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-user-identity-role {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 1px;
}

.header-notifications {
  position: relative;
}

.header-notification-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fff;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.header-notification-btn:hover,
.header-notification-btn[aria-expanded="true"] {
  border-color: var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-900);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.header-notification-btn:focus-visible {
  outline: none;
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.header-notification-btn svg,
.header-notification-btn i {
  width: 19px;
  height: 19px;
}

.header-notification-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
}

.header-notification-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 260;
  width: min(390px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
}

.header-notification-popover.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.notification-center__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px 8px;
}

.notification-center__head > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.notification-center__head strong {
  color: var(--gray-900);
  font-size: 15px;
}

.notification-center__head span {
  color: var(--gray-500);
  font-size: 11px;
}

.notification-center__mark-all {
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--primary-600);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.notification-center__mark-all:hover {
  background: var(--color-primary-light);
}

.notification-center__tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--gray-100);
}

.notification-center__tab {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gray-500);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.notification-center__tab.is-active {
  background: var(--color-primary-light);
  color: var(--primary-700);
}

.notification-center__list {
  max-height: min(510px, calc(100vh - 150px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notification-center__item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 8px;
  align-items: start;
  gap: 11px;
  width: 100%;
  min-height: 84px;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid var(--gray-100);
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.notification-center__item:hover {
  background: var(--gray-50);
}

.notification-center__item.is-unread {
  background: #f8faff;
}

.notification-center__item.is-unread:hover {
  background: #f1f5ff;
}

.notification-center__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #eff6ff;
  color: #2563eb;
}

.notification-center__icon--warning {
  background: #fff7ed;
  color: #c2410c;
}

.notification-center__icon--danger {
  background: #fff1f2;
  color: #be123c;
}

.notification-center__icon--success {
  background: #f0fdf4;
  color: #15803d;
}

.notification-center__icon svg,
.notification-center__icon i {
  width: 18px;
  height: 18px;
}

.notification-center__copy {
  min-width: 0;
}

.notification-center__copy strong,
.notification-center__copy span,
.notification-center__copy small {
  display: block;
  overflow-wrap: anywhere;
}

.notification-center__copy strong {
  color: var(--gray-900);
  font-size: 13px;
  line-height: 1.35;
}

.notification-center__copy span {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: var(--gray-600);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.notification-center__copy small {
  margin-top: 5px;
  color: var(--gray-400);
  font-size: 10px;
}

.notification-center__unread-dot {
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.notification-center__empty,
.notification-center__loading,
.notification-center__error {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 190px;
  padding: 38px 24px;
  color: var(--gray-500);
  text-align: center;
}

.notification-center__empty svg,
.notification-center__error svg {
  width: 28px;
  height: 28px;
  color: var(--gray-400);
}

.notification-center__empty strong,
.notification-center__error strong {
  color: var(--gray-800);
  font-size: 13px;
}

.notification-center__empty span,
.notification-center__error span {
  font-size: 11px;
  line-height: 1.5;
}

.notification-center__loading .spinner {
  width: 24px;
  height: 24px;
}

/* ==================== COMMAND PALETTE (global search) ==================== */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 1200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}

.cmdk-overlay.open {
  display: flex;
}

.cmdk-panel {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
}

.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}

.cmdk-input-row i,
.cmdk-input-row svg {
  width: 17px;
  height: 17px;
  color: var(--gray-400);
  flex-shrink: 0;
}

/* Beat the global input[type="text"] + :focus rules — the palette input is bare */
.cmdk-panel .cmdk-input {
  flex: 1;
  width: auto;
  min-height: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 15px;
  color: var(--gray-900);
  background: transparent;
  font-family: inherit;
}

.cmdk-panel .cmdk-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.cmdk-panel .cmdk-input::placeholder {
  color: var(--gray-400);
}

.cmdk-results {
  overflow-y: auto;
  padding: 6px;
  flex: 1;
}

.cmdk-group-label {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--gray-400);
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--gray-700);
  font-size: 13px;
}

.cmdk-item i,
.cmdk-item svg {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.cmdk-item.active {
  background: var(--gray-100);
  color: var(--gray-900);
}

.cmdk-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-item-meta {
  font-size: 12px;
  color: var(--gray-400);
  white-space: nowrap;
}

.cmdk-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
}

/* Header chrome is desktop-only: mobile keeps burger + sidebar as-is */
@media (max-width: 1024px) {
  .header {
    display: flex;
  }

  .header-search-slot,
  .header-profile {
    display: none;
  }

  .header-right {
    margin-left: auto;
  }

  .header-ai-credit-button {
    height: 34px;
    padding: 0 9px;
  }

  .header-ai-credit-label {
    display: none;
  }

  .header-notification-popover {
    position: fixed;
    top: calc(var(--header-height) + 6px);
    right: 8px;
    left: 8px;
    width: auto;
    transform-origin: top center;
  }

  .notification-center__list {
    max-height: calc(100dvh - var(--header-height) - 138px);
  }
}

/* On desktop only the workspace card stays in the sidebar footer;
   the personal profile lives in the header. */
@media (min-width: 1025px) {
  .sidebar-footer {
    display: block;
  }

  .sidebar-footer > .user-menu-popover,
  .sidebar-footer > .user-info {
    display: none;
  }
}

.content {
  flex: 1;
  padding: 24px;
}

/* ==================== ERP CONTENT SHELL ==================== */
.content-shell {
  width: 100%;
}

.content-shell--workspace {
  max-width: 1920px;
  margin: 0 auto;
}

.content-shell--detail {
  max-width: 1000px;
  margin: 0 auto;
}

.content-shell--compact {
  max-width: 800px;
  margin: 0 auto;
}

.refund-request-items-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

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

.refund-request-card-title {
  margin-bottom: 12px;
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.refund-request-origin__list {
  display: grid;
  gap: 0;
}

.refund-request-origin__row {
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
  gap: 3px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-100);
}

.refund-request-origin__row:first-child {
  padding-top: 0;
}

.refund-request-origin__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.refund-request-origin__row > span {
  color: var(--gray-400);
  font-size: 12px;
}

.refund-request-origin__row > strong {
  min-width: 0;
  color: var(--gray-800);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: right;
}

.refund-request-origin__row > small {
  grid-column: 2;
  color: var(--gray-400);
  font-size: 10px;
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 560px) {
  .refund-request-origin__row {
    grid-template-columns: 1fr;
  }

  .refund-request-origin__row > strong,
  .refund-request-origin__row > small {
    grid-column: 1;
    text-align: left;
  }
}

.content-shell--xwide {
  max-width: 2240px;
  margin: 0 auto;
}

.content-shell--bleed {
  max-width: none;
  margin: 0;
}

.content-shell--hr {
  max-width: none;
  margin: 0;
}

/* ==================== HR MODULE LAYOUT ==================== */
.hr-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.hr-empty-state {
  min-height: 320px;
}

.hr-header-status-select {
  width: 150px;
}

.hr-header-search {
  width: 260px;
  max-width: 100%;
}

.hr-employees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.hr-employee-card {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.hr-employee-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

.hr-employee-card__body {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
}

.hr-employee-avatar {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.hr-employee-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
  color: var(--primary-700);
  font-size: 18px;
  font-weight: 700;
}

.hr-employee-card__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.hr-employee-card__name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-employee-card__meta {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-employee-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.hr-employee-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.hr-employee-status--active {
  background: var(--success-100);
  color: var(--success-700);
}

.hr-employee-status--fired {
  background: var(--danger-100);
  color: var(--danger-700);
}

.hr-employee-status--inactive {
  background: var(--gray-200);
  color: var(--gray-700);
}

.hr-employee-detail-layout {
  align-items: start;
}

.hr-employee-form,
.hr-employee-sidebar {
  min-width: 0;
}

.hr-sticky-side-card {
  position: sticky;
  top: 20px;
}

.hr-concept-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 40px;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.hr-concept-row__select,
.hr-concept-row__percent {
  min-width: 0;
}

.hr-concept-row__percent {
  width: 100%;
}

.hr-concept-row__remove {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}

.hr-payroll-period-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.hr-payroll-period-card {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.hr-payroll-period-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-200);
  box-shadow: var(--shadow-md);
}

.hr-payroll-period-card--empty {
  opacity: 0.62;
}

.hr-payroll-period-card__body {
  display: grid;
  gap: 4px;
  min-height: 116px;
  padding: 16px;
  text-align: center;
}

.hr-payroll-period-card__month {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.hr-payroll-period-card__year,
.hr-payroll-period-card__amount--empty {
  color: var(--text-secondary);
  font-size: 11px;
}

.hr-payroll-period-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin: 4px auto 0;
  font-size: 20px;
}

.hr-payroll-period-card__icon--draft,
.hr-payroll-period-card__amount--draft {
  color: var(--gray-500);
}

.hr-payroll-period-card__icon--pending,
.hr-payroll-period-card__amount--pending {
  color: var(--warning-500);
}

.hr-payroll-period-card__icon--paid,
.hr-payroll-period-card__amount--paid {
  color: var(--success-500);
}

.hr-payroll-period-card__icon--empty {
  opacity: 0.35;
}

.hr-payroll-period-card__amount {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.payroll-period-title {
  cursor: default;
  user-select: none;
}

.payroll-submit-btn {
  border-color: #f59e0b;
  background: #f59e0b;
  color: #fff;
}

.payroll-submit-btn:hover {
  border-color: #d97706;
  background: #d97706;
  color: #fff;
}

.payroll-submit-btn--lg {
  min-height: 44px;
  padding: 12px 24px;
  font-size: 15px;
}

.payroll-closed-banner {
  margin-bottom: 16px;
  border: 1px solid #fde68a;
  background: #fffbeb;
}

.payroll-closed-banner__body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
}

.payroll-closed-banner__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #b45309;
}

.payroll-closed-banner__title {
  color: #92400e;
  font-weight: 700;
}

.payroll-closed-banner__text {
  margin-top: 4px;
  color: #78350f;
  font-size: 13px;
}

.payroll-wps-card {
  margin-bottom: 16px;
  overflow: hidden;
}

.payroll-wps-card__summary,
.payroll-wps-entity__summary,
.payroll-wps-entity__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.payroll-wps-card__summary,
.payroll-wps-entity__summary {
  list-style: none;
  cursor: pointer;
}

.payroll-wps-card__summary::-webkit-details-marker,
.payroll-wps-entity__summary::-webkit-details-marker {
  display: none;
}

.payroll-wps-card__summary {
  min-height: 58px;
  padding: 10px 14px;
}

.payroll-wps-card__title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.payroll-wps-card__summary-meta,
.payroll-wps-entity__summary-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payroll-wps-card__chevron,
.payroll-wps-entity__chevron {
  color: var(--gray-500);
  transition: transform 140ms ease;
}

.payroll-wps-card[open] > .payroll-wps-card__summary .payroll-wps-card__chevron,
.payroll-wps-entity[open] > .payroll-wps-entity__summary .payroll-wps-entity__chevron {
  transform: rotate(180deg);
}

.payroll-wps-card__summary:focus-visible,
.payroll-wps-entity__summary:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}

.payroll-wps-card__body {
  display: grid;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

.payroll-wps-card__notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--surface-primary, #fff);
  color: var(--text-primary);
  font-size: 12px;
}

.payroll-wps-card__notice svg {
  color: var(--primary-600);
}

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

.payroll-wps-entity {
  min-width: 0;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--surface-primary, #fff);
  overflow: hidden;
}

.payroll-wps-entity__summary {
  min-height: 54px;
  padding: 9px 12px;
}

.payroll-wps-entity__detail {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--gray-200);
}

.payroll-wps-entity__issues {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  padding-left: 18px;
  color: #9a3412;
  font-size: 12px;
}

.payroll-wps-entity__employees {
  display: grid;
  gap: 7px;
}

.payroll-wps-employee {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  background: #fff;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.payroll-wps-employee span {
  font-size: 13px;
  font-weight: 650;
}

.payroll-wps-employee small {
  grid-column: 1;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-wps-employee svg {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.payroll-month-table-card {
  overflow: hidden;
}

.payroll-month-table-scroll {
  max-width: 100%;
  padding: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.cash-funding-table-scroll {
  max-width: 100%;
  padding: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.cash-funding-table-scroll .data-table {
  min-width: 680px;
}

.payroll-month-table {
  width: 100% !important;
  min-width: 1120px;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.payroll-month-table th {
  padding: 12px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.payroll-month-table thead th {
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.payroll-month-table td {
  padding: 14px 8px;
  font-size: 13px;
  vertical-align: middle;
}

.payroll-month-table__group-row td {
  padding: 0 !important;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.payroll-month-table__group-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}

.payroll-month-table__group-title {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.payroll-month-table__group-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-size: 12px;
  white-space: nowrap;
}

.payroll-month-table__group-total {
  color: #0f172a;
}

.payroll-month-table__index {
  width: 44px;
  min-width: 44px;
  text-align: center;
}

.payroll-month-table__employee {
  width: 13%;
}

.payroll-month-table__employee strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-month-table__position {
  width: 9%;
  line-height: 1.35;
}

.payroll-month-table__department {
  width: 7%;
  line-height: 1.35;
}

.payroll-month-table__organization {
  overflow: hidden;
  width: 7%;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-month-table__payment {
  width: 40px;
  min-width: 40px;
  white-space: nowrap;
}

.payroll-month-table__payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.payroll-month-table__payment-badge--cash {
  background: var(--success-100);
  color: var(--success-700);
}

.payroll-month-table__payment-badge--bank-transfer {
  background: #e0f2fe;
  color: #0369a1;
}

.payroll-month-table__payment-badge--wps {
  background: var(--primary-100);
  color: var(--primary-700);
}

.payroll-month-table__payment-label {
  display: none;
}

.payroll-month-table__amount-head,
.payroll-month-table__amount-cell {
  width: 90px;
  min-width: 90px;
}

.payroll-month-table__amount-cell--restricted {
  color: var(--text-secondary);
  font-size: 12px;
  text-align: right;
}

.payroll-month-table__input {
  width: 90px !important;
  max-width: 100%;
  min-width: 90px;
  min-height: 38px;
  padding: 8px 6px;
  border-radius: 12px;
  font-size: 12px;
  text-align: right;
}

.payroll-month-table__input--success {
  color: var(--success-600);
}

.payroll-month-table__input--danger {
  color: var(--danger-600);
}

.payroll-month-table__input--warning {
  color: var(--warning-700);
}

.payroll-month-table__total {
  width: 118px;
  min-width: 118px;
  font-size: 12px;
  white-space: nowrap;
}

.payroll-month-table__actions {
  width: 48px;
  min-width: 48px;
  text-align: center;
}

.payroll-month-table__actions .btn {
  min-width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}

.payroll-month-table th:last-child,
.payroll-month-table td:last-child {
  padding-right: 18px;
}

.payroll-month-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.detail-page.pr-payroll-inspection tr[data-r="cash"] { display: none !important; }
.detail-page.pr-payroll-inspection [data-v0] { display: none !important; }
.detail-page.pr-payroll-inspection th[data-v1],
.detail-page.pr-payroll-inspection td[data-v1] { display: table-cell; }
.detail-page.pr-payroll-inspection tr[data-v1] { display: table-row; }
.detail-page.pr-payroll-inspection.pr-x tr[data-r="cash"] { display: table-row !important; }
.detail-page.pr-payroll-inspection.pr-x [data-v0] { display: revert !important; }
.detail-page.pr-payroll-inspection.pr-x [data-v1] { display: none !important; }
.detail-page.pr-payroll-inspection tr.xr { background: var(--primary-50); }
.detail-page.pr-payroll-inspection.pr-x tr.xr { display: none !important; }

@media (max-width: 1440px) {
  .payroll-month-table th,
  .payroll-month-table td {
    padding-right: 6px;
    padding-left: 6px;
  }

  .payroll-month-table__employee {
    width: 12%;
  }

  .payroll-month-table__position {
    width: 8%;
  }

  .payroll-month-table__department {
    width: 7%;
  }

  .payroll-month-table__organization {
    width: 6%;
  }

  .payroll-month-table__amount-head,
  .payroll-month-table__amount-cell {
    width: 86px;
    min-width: 86px;
  }

  .payroll-month-table__input {
    width: 86px !important;
    min-width: 86px;
  }

  .payroll-month-table__total {
    width: 112px;
    min-width: 112px;
  }
}

@media (max-width: 1100px) {
  .hr-payroll-period-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hr-employee-detail-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hr-sticky-side-card {
    position: static;
  }
}

@media (max-width: 768px) {
  .hr-page {
    gap: 16px;
  }

  .hr-employees-page .erp-page-header__controls {
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: 0;
    padding-right: 0;
    overflow-x: visible;
  }

  .hr-employees-page .erp-page-header__controls .hr-header-status-select {
    flex: 1 1 132px;
    width: auto !important;
    min-width: 132px;
    max-width: 220px;
  }

  .hr-employees-page .erp-page-header__controls .hr-header-search {
    flex: 1 0 100%;
    width: 100% !important;
    max-width: none !important;
  }

  .hr-employees-page .erp-page-header__controls .btn {
    flex: 0 0 auto;
    width: auto !important;
    justify-content: center;
  }

  .hr-employees-page .erp-page-header__controls .btn-gradient {
    margin-left: auto !important;
  }

  .hr-employees-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hr-employee-card__body {
    align-items: flex-start;
    gap: 12px;
  }

  .hr-employee-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .hr-employee-card__name,
  .hr-employee-card__meta {
    white-space: normal;
  }

  .hr-employee-detail-page .erp-page-header__controls {
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: 0;
    padding-right: 0;
    overflow-x: visible;
  }

  .hr-employee-detail-page .erp-page-header__controls .btn {
    flex: 0 0 auto;
    width: auto !important;
    justify-content: center;
  }

  .hr-employee-detail-page .erp-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .hr-concept-row {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas:
      "select select"
      "percent remove";
  }

  .hr-concept-row__select {
    grid-area: select;
  }

  .hr-concept-row__percent {
    grid-area: percent;
  }

  .hr-concept-row__remove {
    grid-area: remove;
  }

  .hr-payroll-period-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hr-payroll-month-page .erp-page-header__controls {
    flex-wrap: wrap;
    align-items: stretch;
    margin-right: 0;
    padding-right: 0;
    overflow-x: visible;
  }

  .hr-payroll-month-page .erp-page-header__controls .btn {
    flex: 0 0 auto;
    width: auto !important;
    justify-content: center;
  }

  .payroll-month-table-card {
    margin-right: -4px;
    margin-left: -4px;
  }

  .payroll-month-table-scroll {
    border-radius: inherit;
  }

  .payroll-month-table {
    min-width: 1040px;
  }

  .payroll-month-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .payroll-month-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .payroll-wps-card__summary,
  .payroll-wps-entity__summary {
    align-items: flex-start;
  }

  .payroll-wps-card__summary-meta,
  .payroll-wps-entity__summary-meta {
    width: 100%;
    justify-content: space-between;
  }

  .payroll-wps-entity__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hr-payroll-period-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hr-employee-card__side {
    align-items: flex-start;
  }
}

.page-v2,
.page-v3 {
  width: 100%;
}

/* ==================== ERP ICON UTILITIES ==================== */
.erp-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Lighter default for Lucide UI glyphs. Charts, logos, connector paths, and
   custom SVG artwork keep their own stroke contracts. */
svg.lucide {
  stroke-width: 1.4;
  scale: 1.08;
  transform-origin: center;
}

.erp-icon--8 { width: 8px; height: 8px; }
.erp-icon--10 { width: 10px; height: 10px; }
.erp-icon--11 { width: 11px; height: 11px; }
.erp-icon--12 { width: 12px; height: 12px; }
.erp-icon--13 { width: 13px; height: 13px; }
.erp-icon--14 { width: 14px; height: 14px; }
.erp-icon--15 { width: 15px; height: 15px; }
.erp-icon--16 { width: 16px; height: 16px; }
.erp-icon--17 { width: 17px; height: 17px; }
.erp-icon--18 { width: 18px; height: 18px; }
.erp-icon--20 { width: 20px; height: 20px; }
.erp-icon--22 { width: 22px; height: 22px; }
.erp-icon--24 { width: 24px; height: 24px; }
.erp-icon--28 { width: 28px; height: 28px; }
.erp-icon--32 { width: 32px; height: 32px; }
.erp-icon--40 { width: 40px; height: 40px; }
.erp-icon--48 { width: 48px; height: 48px; }

.erp-icon--inline {
  display: inline-block;
  vertical-align: middle;
}

.erp-icon--display-inline {
  display: inline;
}

.erp-icon--align-n2 { vertical-align: -2px; }
.erp-icon--align-n3 { vertical-align: -3px; }
.erp-icon--block { display: block; }
.erp-icon--mx-auto { margin-left: auto; margin-right: auto; }
.erp-icon--mr-2 { margin-right: 2px; }
.erp-icon--mr-3 { margin-right: 3px; }
.erp-icon--mr-4 { margin-right: 4px; }
.erp-icon--mr-6 { margin-right: 6px; }
.erp-icon--mr-8 { margin-right: 8px; }
.erp-icon--mt-1 { margin-top: 1px; }
.erp-icon--mt-2 { margin-top: 2px; }
.erp-icon--mb-4 { margin-bottom: 4px; }
.erp-icon--mb-8 { margin-bottom: 8px; }
.erp-icon--mb-12 { margin-bottom: 12px; }
.erp-icon--mb-16 { margin-bottom: 16px; }
.erp-icon--opacity-30 { opacity: 0.3; }
.erp-icon--opacity-40 { opacity: 0.4; }
.erp-icon--opacity-50 { opacity: 0.5; }
.erp-icon--pe-none { pointer-events: none; }
.erp-icon--fill-current { fill: currentColor; }

.erp-icon--primary { color: var(--primary); }
.erp-icon--color-primary { color: var(--color-primary); }
.erp-icon--success { color: var(--success); }
.erp-icon--warning { color: var(--warning); }
.erp-icon--danger { color: var(--danger); }
.erp-icon--text-secondary { color: var(--text-secondary); }
.erp-icon--gray-400 { color: var(--gray-400); }
.erp-icon--gray-500 { color: var(--gray-500); }
.erp-icon--gray-600 { color: var(--gray-600); }
.erp-icon--white { color: #fff; }
.erp-icon--slate-300 { color: var(--color-gray-300); }
.erp-icon--slate-400 { color: var(--color-gray-400); }
.erp-icon--slate-500 { color: var(--color-gray-500); }
.erp-icon--blue-500 { color: var(--color-primary); }
.erp-icon--blue-600 { color: var(--color-primary-hover); }
.erp-icon--blue-800 { color: var(--color-primary-800); }
.erp-icon--sky-600 { color: #0284c7; }
.erp-icon--green-500 { color: #22c55e; }
.erp-icon--green-600 { color: var(--color-success-strong); }
.erp-icon--emerald-500 { color: var(--color-success); }
.erp-icon--amber-500 { color: var(--color-warning); }
.erp-icon--amber-600 { color: var(--color-warning-dark); }
.erp-icon--red-500 { color: var(--color-danger); }
.erp-icon--red-600 { color: var(--color-danger-dark); }
.erp-icon--violet-500 { color: #8b5cf6; }
.erp-icon--violet-600 { color: var(--color-violet); }
.erp-icon--indigo-500 { color: #6366f1; }

/* ==================== ERP CHIPS ==================== */
.erp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--erp-chip-bg, var(--gray-100));
  color: var(--erp-chip-color, var(--gray-600));
  border: 1px solid var(--erp-chip-border, transparent);
}

.erp-chip--xs {
  padding: 2px 6px;
  font-size: 10px;
}

.erp-chip--sm {
  padding: 2px 8px;
  font-size: 11px;
}

.erp-chip--md {
  padding: 4px 10px;
  font-size: 13px;
}

.erp-chip--square {
  border-radius: 4px;
}

.erp-chip--soft {
  border-radius: 6px;
}

.erp-chip--rounded {
  border-radius: 8px;
}

.erp-chip--ml-4 { margin-left: 4px; }
.erp-chip--ml-6 { margin-left: 6px; }
.erp-chip--ml-8 { margin-left: 8px; }
.erp-chip--mt-4 { margin-top: 4px; }

.erp-chip--muted {
  --erp-chip-bg: #fff;
  --erp-chip-color: var(--gray-600);
  --erp-chip-border: var(--gray-300);
}

.erp-chip--primary {
  --erp-chip-bg: var(--color-primary);
  --erp-chip-color: #fff;
}

.erp-chip--success {
  --erp-chip-bg: #fff;
  --erp-chip-color: var(--color-success-strong);
  --erp-chip-border: currentColor;
}

.erp-chip--warning {
  --erp-chip-bg: #fff;
  --erp-chip-color: var(--color-warning-800);
  --erp-chip-border: currentColor;
}

.erp-chip--danger {
  --erp-chip-bg: #fff;
  --erp-chip-color: var(--color-danger-dark);
  --erp-chip-border: currentColor;
}

.erp-chip--concept {
  --erp-chip-color: #fff;
}

.erp-chip--dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  background: var(--erp-chip-bg, currentColor);
}

/* ==================== ERP PANELS ==================== */
.erp-panel {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--erp-panel-bg, #fff);
  color: var(--erp-panel-color, var(--gray-600));
  border: 1px solid var(--erp-panel-border, var(--gray-200));
  font-size: 13px;
}

.erp-panel--xs {
  padding: 8px 12px;
  border-radius: 8px;
}

.erp-panel--sm {
  padding: 10px 14px;
  border-radius: 8px;
}

.erp-panel--lg {
  padding: 14px;
  border-radius: 12px;
}

.erp-panel--flat {
  --erp-panel-border: transparent;
}

.erp-panel--muted {
  --erp-panel-bg: var(--gray-50);
  --erp-panel-color: var(--gray-600);
}

.erp-panel--primary {
  --erp-panel-bg: #fff;
  --erp-panel-color: var(--color-primary-800);
  --erp-panel-border: var(--color-primary-200);
  box-shadow: inset 3px 0 0 var(--color-primary-hover);
}

.erp-panel--warning {
  --erp-panel-bg: #fff;
  --erp-panel-color: var(--color-warning-800);
  --erp-panel-border: var(--erp-alert-warning);
  box-shadow: none;
}

.erp-panel--danger {
  --erp-panel-bg: #fff;
  --erp-panel-color: var(--color-danger-dark);
  --erp-panel-border: var(--erp-alert-danger);
  box-shadow: none;
}

.erp-panel--success {
  --erp-panel-bg: #fff;
  --erp-panel-color: var(--color-success-800);
  --erp-panel-border: var(--color-success-200);
  box-shadow: inset 3px 0 0 var(--color-success-dark);
}

/* Semantic notices use white surfaces; color identifies meaning without tinting
   the whole block. Important overrides retire legacy inline pastel fills. */
.alert.alert-info,
.alert.alert-warning,
.alert.alert-danger,
.alert.alert-success {
  background: #fff !important;
  border: 1px solid currentColor !important;
  border-radius: 10px;
}

.alert.alert-warning {
  border-color: var(--erp-alert-warning) !important;
}

.alert.alert-danger {
  border-color: var(--erp-alert-danger) !important;
}

/* Alert meaning lives in a vivid perimeter, never in a pastel fill. */
.erp-alert-state {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--erp-alert-accent, var(--gray-300));
  border-radius: 8px;
}

.erp-alert-state__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--erp-alert-accent, var(--gray-500));
}

.erp-alert-state--danger {
  --erp-alert-accent: var(--erp-alert-danger);
}

.erp-alert-state--warning {
  --erp-alert-accent: var(--erp-alert-warning);
}

.erp-alert-state--interactive {
  cursor: pointer;
}

.erp-panel--mb-4 { margin-bottom: 4px; }
.erp-panel--mb-8 { margin-bottom: 8px; }
.erp-panel--mb-10 { margin-bottom: 10px; }
.erp-panel--mb-12 { margin-bottom: 12px; }
.erp-panel--mb-16 { margin-bottom: 16px; }
.erp-panel--mb-0 { margin-bottom: 0; }
.erp-panel--mt-12 { margin-top: 12px; }
.erp-panel--mt-14 { margin-top: 14px; }

.erp-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.erp-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--erp-panel-color, var(--gray-900));
}

.erp-panel__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.erp-panel__footer {
  font-size: 11px;
  line-height: 1.35;
  margin-top: 8px;
  opacity: 0.82;
}

/* Payment Operations keeps dense registry rows readable while the order-side
   summary uses an explicit label/value grid instead of Order Detail's local
   info-list styles. */
.payment-operations-customer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}

.payment-operations-customer__name {
  color: var(--gray-900);
  font-weight: 600;
}

.payment-operations-customer__email {
  color: var(--gray-500);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.payment-order-detail-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-order-summary {
  display: grid;
  grid-template-columns: minmax(104px, auto) minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
}

.payment-order-summary dt,
.payment-order-summary dd {
  min-width: 0;
  margin: 0;
  line-height: 1.35;
}

.payment-order-summary dt {
  color: var(--gray-500);
}

.payment-order-summary dd {
  color: var(--gray-900);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.payment-order-summary__link {
  color: var(--color-primary-600);
  text-decoration: none;
}

.payment-order-summary__link:hover {
  text-decoration: underline;
}

.payment-order-summary__footer {
  margin-top: 16px;
}

.payment-order-summary__open {
  width: 100%;
  justify-content: center;
}

@media (max-width: 480px) {
  .payment-order-summary {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .payment-order-summary dd {
    margin-bottom: 8px;
    text-align: left;
  }
}

.erp-inline-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.erp-stack {
  display: flex;
  flex-direction: column;
}

.erp-stack--gap-6 { gap: 6px; }
.erp-stack--gap-8 { gap: 8px; }
.erp-stack--gap-10 { gap: 10px; }
.erp-stack--gap-12 { gap: 12px; }

.erp-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.erp-section-title {
  margin: 0;
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 700;
}

.erp-section-title--lg {
  font-size: 16px;
}

.erp-section-kicker {
  margin: 24px 0 10px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: none;
}

.erp-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.erp-filter-field {
  min-width: 180px;
}

.erp-filter-field--200 {
  min-width: 200px;
}

.erp-filter-field--240 {
  min-width: 240px;
}

.erp-filter-field--fluid {
  flex: 1;
}

.erp-field-label {
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

.erp-field-hint {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.erp-footnote {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.erp-copy-muted {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.erp-block--mb-16 { margin-bottom: 16px; }
.erp-block--mb-20 { margin-bottom: 20px; }
.erp-block--mb-24 { margin-bottom: 24px; }

.erp-progress {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--erp-progress-bg, var(--gray-200));
}

.erp-progress__bar {
  height: 100%;
  width: var(--erp-progress-value, 0%);
  border-radius: inherit;
  background: var(--erp-progress-fill, var(--color-primary));
}

.erp-progress--warning {
  --erp-progress-bg: var(--color-warning-200);
  --erp-progress-fill: linear-gradient(90deg, var(--color-warning-dark), var(--color-warning-700));
}

.erp-progress--primary {
  --erp-progress-bg: var(--color-gray-200);
  --erp-progress-fill: linear-gradient(90deg, var(--color-primary), #4f46e5);
}

.erp-data-table-wrap {
  overflow: auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.erp-data-table-wrap--hidden {
  overflow: hidden;
}

.erp-data-table-wrap--viewport {
  max-height: calc(100vh - 220px);
}

/* Attached instrument bar (search / filter chips / actions) rendered inside the wrap */
.erp-data-table__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-200);
}

.erp-data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: 12.5px;
}

.erp-data-table__toolbar {
  font-family: var(--font-data);
}

.erp-data-table thead tr {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-500);
}

.erp-data-table th {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-500);
  white-space: nowrap;
}

.erp-data-table th,
.erp-data-table td {
  padding: 10px 14px;
  text-align: left;
}

.erp-data-table td {
  color: var(--gray-700);
}

.erp-data-table tbody tr {
  border-bottom: 1px solid var(--gray-200);
}

.erp-data-table tbody tr:last-child {
  border-bottom: 0;
}

.erp-data-table__row--clickable {
  cursor: pointer;
}

.erp-data-table__row--warning {
  background: #fff7ed;
}

/* Child rows of a grouped parent (supplier → invoices, campaign → days) */
.erp-data-table__row--child td {
  color: var(--gray-600);
}

.erp-data-table__row--child td:first-child,
.erp-data-table .erp-data-table__cell--indent {
  padding-left: 32px;
}

/* Entity link inside a cell — drill-down affordance (Rule #14) */
.erp-data-table__link {
  color: var(--color-primary-hover);
  font-weight: 500;
  cursor: pointer;
}

tr:hover > td .erp-data-table__link,
.erp-data-table__link:hover {
  text-decoration: underline;
}

/* Column separators: the vertical rules are what make a grid read as a table
   rather than as a list of numbers. */
.erp-data-table th + th,
.erp-data-table td + td {
  border-left: 1px solid var(--gray-100);
}

/* Stronger rule where a numeric group starts, so grouping still reads. */
.erp-data-table .erp-data-table__cell--group {
  border-left: 1px solid var(--gray-200);
}

/* Crosshair: pointing at a cell tints its whole column. */
.erp-data-table .erp-data-table__cell--hover {
  background: rgba(15, 23, 42, 0.035);
}

/* Highlight of the actively sorted column */
.erp-data-table .erp-data-table__cell--sorted {
  background: rgba(15, 23, 42, 0.03);
}

.erp-data-table th.erp-data-table__th--sorted {
  color: var(--color-gray-900);
  font-weight: 600;
}

/* Pinned totals row */
.erp-data-table tfoot td {
  padding: 9px 14px;
  border-top: 1px solid var(--gray-300);
  background: var(--gray-50);
  color: var(--gray-900);
  font-weight: 600;
  font-size: 12.5px;
}

.erp-data-table tfoot td.erp-data-table__cell--muted {
  font-weight: 400;
}

.erp-data-table .erp-data-table__cell--muted {
  color: var(--gray-500);
  font-size: 12px;
}

.erp-data-table .erp-data-table__cell--compact {
  font-size: 12px;
}

.erp-data-table .erp-data-table__cell--center {
  text-align: center;
}

.erp-data-table .erp-data-table__cell--right {
  text-align: right;
}

.erp-data-table .erp-data-table__cell--nowrap {
  white-space: nowrap;
}

/* Precision grid — the dense, white, fixed-column table used by Lusha-like
   workspaces. It is opt-in so existing operational tables keep their current
   density until they are deliberately migrated. */
.erp-data-table-wrap--precision {
  --erp-precision-text: #262626;
  --erp-precision-rule: rgba(23, 23, 23, 0.12);
  --erp-precision-hover: #f7f7f7;
  border-color: var(--erp-precision-rule);
  border-radius: 12px;
  background: #fff;
  /* Keep horizontal panning inside the grid, but never trap the page/modal
     wheel on the vertical axis. This applies to every Precision table. */
  overscroll-behavior-inline: contain;
  overscroll-behavior-block: auto;
}

/* Toolbars and pagination belong to the visible table viewport, not to the
   table's scrollable canvas. Keep them pinned while a genuinely wide grid is
   panned horizontally. At browser zoom the shared responsive fitter normally
   removes that panning altogether. */
.erp-data-table-wrap--precision > .erp-data-table__toolbar,
.erp-data-table-wrap--precision > .erp-pagination {
  position: sticky;
  left: 0;
  z-index: 8;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: #fff;
}

.erp-data-table-wrap--precision > .erp-data-table__toolbar > * {
  min-width: 0;
}

.erp-data-table-wrap--precision.erp-data-table-wrap--responsive-fit {
  overflow-x: hidden !important;
}

.erp-data-table--precision.erp-data-table--responsive-fit {
  table-layout: fixed !important;
}

.erp-data-table--precision {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--erp-precision-text);
  font-family: Inter, var(--font-data), sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
}

.erp-data-table--precision thead tr,
.erp-data-table--precision tbody tr {
  border: 0;
  background: #fff;
}

.erp-data-table--precision th,
.erp-data-table--precision td {
  box-sizing: border-box;
  height: 40px;
  padding: 8px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--erp-precision-rule);
  background: #fff;
  color: var(--erp-precision-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  text-overflow: clip;
  white-space: nowrap;
}

.erp-data-table--precision th + th,
.erp-data-table--precision td + td,
.erp-data-table--precision .erp-data-table__cell--group {
  border-left: 1px solid var(--erp-precision-rule);
}

.erp-data-table--precision th {
  position: relative;
  color: var(--erp-precision-text);
}

.erp-data-table--precision.erp-data-table--sticky thead th {
  position: sticky;
  top: var(--erp-table-sticky-offset, 0px);
  z-index: 4;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--erp-precision-rule);
}

/* Precision tables are horizontally scrollable, while the ERP page/modal is
   usually the vertical scroll owner. CSS sticky cannot cross that overflow
   boundary in Chromium, so the shared module mirrors only the visible thead
   while it is above the scrollport. This is a visual continuation of the same
   header, not a second table surface. */
.erp-global-sticky-table-header {
  position: fixed;
  display: block;
  overflow: hidden;
  margin: 0;
  border: 0;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--erp-precision-rule, rgba(23, 23, 23, 0.12));
  pointer-events: none;
}

.erp-global-sticky-table-header[hidden] {
  display: none;
}

.erp-global-sticky-table-header__table {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  table-layout: fixed !important;
  background: #fff;
}

.erp-global-sticky-table-header__table thead th {
  position: relative !important;
  top: auto !important;
  background: #fff !important;
}

.erp-data-table--precision .erp-data-table__th-content {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

.erp-data-table--precision th.u-text-right .erp-data-table__th-content {
  justify-content: flex-end;
}

.erp-data-table--precision tbody tr:hover > td {
  background: var(--erp-precision-hover);
}

.erp-data-table--precision .erp-data-table__cell--sorted {
  background: #fff;
}

.erp-data-table--precision tbody tr:hover > .erp-data-table__cell--sorted {
  background: var(--erp-precision-hover);
}

.erp-data-table--precision th.erp-data-table__th--sorted {
  background: #fff;
  color: var(--erp-precision-text);
  font-weight: 500;
}

/* Actions are a control group rather than a reading edge. Equal-size groups
   are centered; if rows expose different numbers of actions, the complete
   column uses one stable left edge. The compatibility bridge owns the rule. */
.erp-data-table--precision .erp-data-table__cell--actions {
  text-align: center;
}

/* A schema entry alone must not reserve an empty Actions rail. The shared
   bridge applies this marker only when no row exposes an interactive action. */
.erp-data-table--precision .erp-data-table__column--empty-actions,
.erp-data-table--precision col.erp-data-table__column--empty-actions {
  display: none !important;
}

.erp-data-table--precision th.erp-data-table__cell--actions .erp-data-table__th-content,
.erp-data-table--precision .erp-data-table__actions {
  justify-content: center;
}

.erp-data-table--precision .erp-data-table__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.erp-data-table--precision td.erp-data-table__cell--actions > :is(.u-flex, [class*="actions"]) {
  justify-content: center;
}

.erp-data-table--precision .erp-data-table__cell--actions-variable {
  text-align: left;
}

.erp-data-table--precision th.erp-data-table__cell--actions-variable .erp-data-table__th-content,
.erp-data-table--precision td.erp-data-table__cell--actions-variable .erp-data-table__actions,
.erp-data-table--precision td.erp-data-table__cell--actions-variable > :is(.u-flex, [class*="actions"]) {
  justify-content: flex-start;
}

.erp-data-table--precision .erp-data-table__cell--frozen {
  position: sticky;
  left: var(--erp-data-table-sticky-left, 0);
  z-index: 2;
  background: #fff;
  box-shadow: inset -4px 0 4px -4px rgba(0, 0, 0, 0.25);
}

.erp-data-table--precision thead .erp-data-table__cell--frozen {
  z-index: 6;
}

.erp-data-table--precision tfoot .erp-data-table__cell--frozen {
  z-index: 5;
}

.erp-data-table--precision tbody tr:hover > .erp-data-table__cell--frozen {
  background: var(--erp-precision-hover);
}

.erp-data-table--precision .erp-data-table__cell--frozen.erp-data-table__cell--sorted {
  background: #fff;
}

.erp-data-table--precision tbody tr:hover > .erp-data-table__cell--frozen.erp-data-table__cell--sorted {
  background: var(--erp-precision-hover);
}

.erp-data-table--precision tfoot td {
  height: 40px;
  padding: 8px;
  border-top: 1px solid rgba(23, 23, 23, 0.2);
  border-bottom: 0;
  background: #fff;
  color: var(--erp-precision-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

/* ERP-wide Precision bridge. Raw operational tables are upgraded by
   erp-ui-kit.js so every admin module shares the approved white Lusha-like
   grid while specialist matrices can opt out with data-erp-table-variant. */
.erp-data-table-wrap--precision-auto {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Size the viewport from its layout slot, never from the table it contains.
     Otherwise a dynamically revealed column can enlarge a grid/flex item;
     the responsive fitter then mistakes its own enlarged result for newly
     available width and grows the table again on every observer cycle. */
  contain: inline-size;
  overflow-x: auto !important;
  overflow-y: visible !important;
  border: 1px solid var(--erp-precision-rule, rgba(23, 23, 23, 0.12));
  border-radius: 12px;
  background: #fff;
  overscroll-behavior-inline: contain;
  overscroll-behavior-block: auto;
  -webkit-overflow-scrolling: touch;
}

/* A table-card already owns the section outline and corner radius. Keep its
   direct Precision viewport flat so the header and grid form one surface. */
.table-card > .erp-data-table-wrap--precision {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* A Precision table already owns its white surface, outline and radius. Some
   legacy pages still place a table-only section inside an `erp-panel`/card;
   keeping that shell would add the gray padded "mat" visible around the grid.
   Retire only redundant table-only shells. Panels with real headers, copy or
   controls keep their normal card treatment. */
:is(.card, .erp-panel, .invoices-table-card):has(
  > .erp-data-table-wrap--precision:only-child
) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
}

/* A table section inside a card is one surface. The parent owns the outline
   and clips the grid; the compatibility viewport must not add a second inset
   panel with its own padding, border or rounded corners. */
:is(.card, .erp-panel, .invoices-table-card)
> :is(.card-body, .erp-panel__content, .u-p-0):has(> .erp-data-table-wrap--precision) {
  padding: 0 !important;
}

:is(.card, .erp-panel, .invoices-table-card):has(
  > :is(.card-body, .erp-panel__content, .u-p-0)
  > .erp-data-table-wrap--precision
) {
  border-radius: 16px;
  overflow: hidden;
}

:is(.card, .erp-panel, .invoices-table-card)
> :is(.card-body, .erp-panel__content, .u-p-0)
> .erp-data-table-wrap--precision {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(.card, .erp-panel, .invoices-table-card)
> :is(.card-body, .erp-panel__content, .u-p-0)
> .erp-data-table-wrap--precision
> .erp-data-table--precision
:is(th, td) {
  padding: 8px 20px;
}

.erp-data-table.erp-data-table--precision-auto {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border: 0;
  border-radius: 0;
}

.erp-data-table.erp-data-table--precision-auto thead,
.erp-data-table.erp-data-table--precision-auto thead tr,
.erp-data-table.erp-data-table--precision-auto tbody tr,
.erp-data-table.erp-data-table--precision-auto tfoot tr {
  background: #fff;
}

.erp-data-table.erp-data-table--precision-auto th,
.erp-data-table.erp-data-table--precision-auto td {
  box-sizing: border-box;
  height: 40px;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid var(--erp-precision-rule, rgba(23, 23, 23, 0.12));
  background: #fff;
  color: #262626;
  font-family: Inter, var(--font-data), sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.erp-data-table.erp-data-table--precision-auto th + th,
.erp-data-table.erp-data-table--precision-auto td + td {
  border-left: 1px solid var(--erp-precision-rule, rgba(23, 23, 23, 0.12));
}

/* Editable values remain part of the table's reading system. Legacy table-card
   inputs used a smaller 13px control font, which made numbers look unrelated
   to adjacent labels after the global Precision upgrade. */
.erp-data-table.erp-data-table--precision-auto
:is(input:not([type="checkbox"]):not([type="radio"]), .inline-input, [contenteditable="true"]) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.erp-data-table.erp-data-table--precision-auto tbody tr:hover > td {
  background: var(--erp-precision-hover, #f7f7f7);
}

.erp-data-table.erp-data-table--precision-auto tbody td:first-child,
.erp-data-table.erp-data-table--precision-auto tfoot td,
.erp-data-table.erp-data-table--precision-auto strong {
  font-weight: 600;
}

.erp-data-table.erp-data-table--precision-auto :is(a, .erp-data-table__link):not(.btn):not(.erp-action-btn) {
  color: inherit;
  text-decoration: none;
}

.erp-data-table.erp-data-table--precision-auto :is(.erp-field-hint, .erp-data-table__cell--muted, small) {
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.erp-data-table.erp-data-table--precision-auto tfoot td {
  border-top: 1px solid rgba(23, 23, 23, 0.2);
  border-bottom: 0;
  background: #fff;
  color: #262626;
  font-size: 15px;
  line-height: 24px;
}

.vat-category-cell__content,
.vat-category-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-inline-start: calc(var(--vat-category-depth, 0) * 24px);
}

.vat-category-toggle {
  width: 100%;
  padding-block: 0;
  padding-inline-end: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
}

.vat-category-toggle > .erp-icon {
  flex: 0 0 14px;
  color: var(--gray-500);
  transition: color 0.12s ease, transform 0.12s ease;
}

.vat-category-toggle:hover > .erp-icon,
.vat-category-toggle:focus-visible > .erp-icon {
  color: var(--gray-800);
}

.vat-category-toggle:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
}

.vat-category-row--parent.is-collapsed .vat-category-toggle > .erp-icon {
  transform: rotate(-90deg);
}

[dir="rtl"] .vat-category-row--parent.is-collapsed .vat-category-toggle > .erp-icon {
  transform: rotate(90deg);
}

.vat-category-toggle-spacer {
  flex: 0 0 14px;
  width: 14px;
}

.vat-category-cell__marker {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--vat-category-color, #9ca3af);
}

.erp-data-table.erp-data-table--precision-auto :is(.vat-category-row--child, .vat-category-row--direct) > .vat-category-cell {
  font-weight: 400;
}

.erp-data-table.erp-data-table--precision-auto .vat-category-row--parent > td {
  font-weight: 600;
}

.erp-data-table.erp-data-table--precision-auto .vat-category-row--root > .vat-category-cell {
  font-weight: 500;
}

.vat-category-row[hidden] {
  display: none;
}

.erp-data-table__resize-handle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -4px;
  z-index: 7;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

.erp-data-table__resize-handle::after {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 3px;
  width: 2px;
  background: rgba(23, 23, 23, 0.32);
  content: '';
  opacity: 0;
  transition: opacity 0.15s ease;
}

.erp-data-table__resize-handle:hover::after,
.erp-data-table__resize-handle:focus-visible::after,
.erp-data-table-wrap--resizable.is-resizing .erp-data-table__resize-handle::after {
  opacity: 1;
}

.erp-data-table__resize-handle:focus-visible {
  outline: 0;
}

body.erp-data-table-resizing {
  cursor: col-resize;
  user-select: none;
}

@media (pointer: coarse) {
  .erp-data-table__resize-handle {
    display: none;
  }
}

.erp-code-muted {
  color: var(--gray-500);
  font-size: 12px;
}

.erp-empty-cell,
.erp-data-table .erp-empty-cell {
  padding: 40px;
  color: var(--gray-500);
  text-align: center;
}

.erp-empty-panel {
  padding: 20px;
  color: var(--text-secondary);
  text-align: center;
  background: #fff;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-xl);
}

.erp-loading-panel {
  padding: 40px;
  color: var(--text-secondary);
  text-align: center;
}

.erp-error-panel {
  padding: 40px;
  color: var(--danger);
}

.erp-config-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  color: var(--gray-900);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.erp-config-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.erp-config-card__label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.erp-config-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--erp-config-card-tone, var(--color-primary));
  background: var(--gray-50);
  border-radius: 10px;
}

.erp-config-card__icon i,
.erp-config-card__icon svg {
  width: 19px;
  height: 19px;
}

.erp-config-card__title {
  font-weight: 700;
}

.erp-config-card__subtitle {
  color: var(--text-secondary);
  font-size: 12px;
}

.erp-config-card__metric {
  color: var(--gray-900);
  font-size: 24px;
  font-weight: 800;
}

.erp-config-card__body {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.erp-config-card--blue { --erp-config-card-tone: var(--color-primary-hover); }
.erp-config-card--purple { --erp-config-card-tone: var(--color-violet); }
.erp-config-card--green { --erp-config-card-tone: var(--color-success-strong); }
.erp-config-card--red { --erp-config-card-tone: var(--color-danger-dark); }
.erp-config-card--teal { --erp-config-card-tone: #0f766e; }
.erp-config-card--amber { --erp-config-card-tone: var(--color-warning-dark); }

.erp-centered-card {
  max-width: 520px;
  margin: 60px auto;
  text-align: center;
}

.erp-centered-card__title {
  margin: 12px 0 6px;
}

.erp-surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: none;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.erp-surface-header__hint {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.erp-description-grid {
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
}

.erp-description-grid dt {
  color: var(--text-secondary);
}

.erp-description-grid dd {
  margin: 0;
}

.fsms-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  flex-wrap: wrap;
}

.fsms-task-row__main {
  flex: 1 1 240px;
  min-width: 0;
}

.fsms-task-row__title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-900);
  font-weight: 600;
}

.fsms-task-row__meta {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-task-row__actions {
  display: flex;
  gap: 6px;
}

.fsms-doc-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 8px;
  flex-wrap: wrap;
}

.fsms-doc-alert-row__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 240px;
}

.fsms-doc-alert-row__copy {
  min-width: 0;
}

.fsms-doc-alert-row__title {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fsms-doc-alert-row__meta {
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-doc-chip {
  font-family: inherit;
  cursor: pointer;
  color: var(--fsms-doc-color);
  background: var(--fsms-doc-bg);
  border-color: var(--fsms-doc-border);
}

.fsms-template-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.fsms-template-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--color-success-100);
  border-radius: 10px;
}

.fsms-template-card__main {
  flex: 1;
  min-width: 0;
}

.fsms-template-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fsms-template-card__title {
  color: var(--gray-900);
  font-weight: 700;
}

.fsms-template-card__desc {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

.fsms-template-card__meta {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-template-items {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.fsms-template-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-200);
}

.fsms-template-item:last-child {
  border-bottom: 0;
}

.fsms-template-item__index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  background: var(--gray-100);
  border-radius: 50%;
}

.fsms-template-item__index--active {
  color: #fff;
  background: var(--primary);
}

.fsms-template-item__main {
  flex: 1;
  min-width: 0;
}

.fsms-template-item__question {
  font-weight: 600;
}

.fsms-template-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-template-item__help {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-style: italic;
}

.fsms-template-item__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.fsms-template-item__edit {
  display: none;
  padding: 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.fsms-template-item__edit.is-active {
  display: block;
}

.fsms-template-item__edit-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.fsms-option-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}

.fsms-option-card__hint {
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-template-access-option {
  margin: 12px 0 16px;
}

.fsms-inline-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.fsms-schedule-template {
  padding: 18px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.fsms-schedule-template__header,
.fsms-schedule-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fsms-schedule-template__header {
  margin-bottom: 14px;
}

.fsms-schedule-template__title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fsms-schedule-card {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.fsms-schedule-card__header {
  margin-bottom: 12px;
}

.fsms-schedule-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
}

.fsms-schedule-card__meta {
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-schedule-card__actions,
.fsms-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.fsms-schedule-card__timing-note {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 11px;
}

.fsms-routing-details {
  margin-top: 8px;
}

.fsms-routing-details__summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 3px 0;
  color: var(--gray-800);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.fsms-routing-details__summary::-webkit-details-marker {
  display: none;
}

.fsms-routing-details__summary::marker {
  content: '';
}

.fsms-routing-details__chevron {
  width: 14px;
  height: 14px;
  color: var(--gray-500);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.fsms-routing-details[open] .fsms-routing-details__chevron {
  transform: rotate(90deg);
}

.fsms-routing-details__label {
  font-weight: 600;
  white-space: nowrap;
}

.fsms-routing-details__meta {
  color: var(--text-secondary);
  min-width: 0;
}

.fsms-routing-details > .erp-stack {
  margin-top: 10px;
}

.fsms-check-row-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
  font-size: 13px;
}

.fsms-modal-note {
  padding: 12px;
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  background: var(--color-gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

.fsms-modal-note--inline {
  margin-bottom: 0;
}

.fsms-modal-grid {
  align-items: flex-start;
}

.fsms-label-optional {
  color: var(--text-secondary);
  font-weight: 400;
}

.fsms-template-modal-footer {
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-select-card {
  min-height: 108px;
  padding: 12px;
  color: inherit;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

.fsms-select-card.is-active {
  background: var(--color-primary-light);
  border-color: var(--primary);
}

.fsms-select-card--compact {
  min-height: auto;
  padding: 10px;
}

.fsms-select-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-900);
  font-weight: 700;
}

.fsms-select-card__icon {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

.fsms-select-card.is-active .fsms-select-card__icon {
  color: var(--primary);
}

.fsms-select-card__copy {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.fsms-select-card__copy--compact {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}

.fsms-is-hidden {
  display: none !important;
}

.fsms-config-group {
  margin-bottom: 14px;
}

.fsms-validation-title {
  margin: 4px 0 10px;
  color: var(--gray-900);
  font-weight: 700;
}

.fsms-validation-grid {
  margin-top: 8px;
  font-size: 13px;
}

.fsms-branch-scope {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

.fsms-branch-scope__all,
.fsms-branch-scope__branch {
  display: flex;
  cursor: pointer;
}

.fsms-branch-scope__all {
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
}

.fsms-branch-scope__all.is-active {
  background: var(--color-primary-light);
}

.fsms-branch-scope__all input {
  margin-top: 3px;
}

.fsms-branch-scope__title {
  display: block;
  color: var(--gray-900);
  font-weight: 600;
}

.fsms-branch-scope__hint {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-branch-scope__list {
  max-height: 220px;
  overflow: auto;
}

.fsms-branch-scope__branch {
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--gray-50);
}

.fsms-branch-scope__branch.is-disabled {
  opacity: .45;
}

.fsms-branch-scope__branch-name {
  color: var(--gray-900);
  font-size: 13px;
}

.fsms-branch-scope__summary {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-staff-doc-scope-toggle {
  justify-content: flex-end;
  min-width: 44px;
  min-height: 44px;
}

.fsms-timing-field {
  margin: 0;
}

.fsms-timing-field .form-label {
  font-size: 12px;
}

.fsms-answer-preview {
  padding: 14px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

.fsms-answer-preview__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.fsms-answer-preview__title {
  color: var(--gray-900);
  font-weight: 700;
}

.fsms-answer-preview__hint {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-answer-preview__badge {
  padding: 3px 8px;
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
}

.fsms-choice-preview-copy {
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-choice-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--gray-100);
}

.fsms-choice-preview-row__main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fsms-choice-preview-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
}

.fsms-choice-preview-marker--active {
  border-color: var(--primary);
}

.fsms-choice-preview-marker--box {
  border-width: 1.5px;
  border-radius: 5px;
}

.fsms-choice-preview-dot {
  display: block;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
}

.fsms-choice-preview-label {
  font-weight: 600;
}

.fsms-choice-preview-meta,
.fsms-choice-preview-note,
.fsms-choice-preview-empty {
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-choice-preview-empty {
  font-size: 13px;
}

.fsms-answer-preview__message {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
}

.fsms-answer-preview__textline {
  padding: 10px 0 6px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--gray-300);
}

.fsms-assignee-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fsms-routing-savebar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  background: #fff;
}

.fsms-routing-savebar__status {
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-routing-savebar__status[data-tone="saving"] {
  color: var(--color-primary);
}

.fsms-routing-savebar__status[data-tone="saved"] {
  color: var(--color-success);
}

.fsms-routing-savebar__status[data-tone="error"] {
  color: var(--color-danger);
}

.fsms-assignee-picker__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fsms-assignee-picker__search {
  position: relative;
  flex: 1;
  min-width: 240px;
}

.fsms-assignee-picker__summary {
  color: var(--text-secondary);
  font-size: 12px;
  white-space: normal;
}

.fsms-assignee-picker__filters,
.fsms-assignee-picker__action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fsms-assignee-picker__filter-count {
  opacity: .75;
}

.fsms-assignee-picker__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.fsms-assignee-picker__action-note,
.fsms-assignee-picker__footnote {
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-assignee-picker__footnote {
  margin-top: 6px;
}

.fsms-assignee-picker__list {
  max-height: 300px;
  overflow: auto;
  overscroll-behavior: contain;
  contain: content;
  scrollbar-gutter: stable;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

.fsms-assignee-picker__empty {
  padding: 18px 0;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

.fsms-assignee-picker__empty--left {
  padding: 14px 0;
  text-align: start;
}

.fsms-assignee-picker__group {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 2px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

.fsms-assignee-picker__group-hidden,
.fsms-assignee-picker__row-hidden {
  display: none !important;
}

.fsms-assignee-picker__user {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 56px;
  padding: 10px 0;
  cursor: pointer;
  border-top: 1px solid var(--gray-100);
  content-visibility: auto;
  contain-intrinsic-size: 56px;
}

.fsms-assignee-picker__user input {
  margin-top: 3px;
}

.fsms-assignee-picker__checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-top: 0 !important;
  background: #fff;
  border: 3px solid var(--gray-300);
  border-radius: 8px;
  cursor: pointer;
}

.fsms-assignee-picker__checkbox:checked {
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  border-color: var(--color-primary);
}

.fsms-assignee-picker__checkbox:focus-visible {
  outline: 3px solid rgba(var(--color-primary-rgb), 0.18);
  outline-offset: 2px;
}

.fsms-assignee-picker__main {
  flex: 1;
  min-width: 0;
}

.fsms-assignee-picker__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fsms-assignee-picker__name {
  color: var(--gray-900);
  font-weight: 600;
}

.fsms-assignee-picker__role {
  padding: 2px 7px;
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
}

.fsms-assignee-picker__meta {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-assignee-picker__more {
  padding: 8px 0 10px;
  border-top: 1px solid var(--gray-100);
}

.fsms-assignee-picker__more .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 720px) {
  .fsms-assignee-picker__top {
    align-items: stretch;
    flex-direction: column;
  }

  .fsms-assignee-picker__search {
    min-width: 0;
    width: 100%;
  }

  .fsms-assignee-picker__list {
    max-height: 260px;
  }
}

.fsms-file-input-hidden {
  display: none;
}

.fsms-answer-pills--stretch {
  align-items: stretch;
}

.fsms-log-answers {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

.fsms-log-answers__header {
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: none;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.fsms-log-item {
  padding: 16px;
  border-bottom: 1px solid var(--gray-200);
}

.fsms-log-item:last-child {
  border-bottom: 0;
}

.fsms-log-item__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fsms-log-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.fsms-log-item__icon--pass { color: var(--color-success-strong); }
.fsms-log-item__icon--fail { color: var(--color-danger-dark); }
.fsms-log-item__icon--na { color: var(--color-gray-500); }
.fsms-log-item__icon--pending { color: var(--color-warning-dark); }

.fsms-log-item__body {
  flex: 1;
  min-width: 0;
}

.fsms-log-item__question {
  font-weight: 500;
}

.fsms-log-item__answer {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 13px;
}

.fsms-log-item__corrective {
  margin-top: 4px;
  color: var(--color-danger-800);
  font-size: 13px;
}

.fsms-log-item__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.fsms-log-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 6px;
}

.fsms-void-reason {
  padding: 12px 14px;
  margin-bottom: 12px;
  color: var(--color-danger-800);
  font-size: 13px;
  background: var(--color-danger-50);
  border: 1px solid var(--color-danger-200);
  border-radius: 10px;
}

.fsms-staff-doc-status--expired,
.fsms-staff-doc-status--expiring_7 {
  --fsms-doc-color: var(--color-danger-dark);
  --fsms-doc-bg: var(--color-danger-50);
  --fsms-doc-border: var(--color-danger-300);
}

.fsms-staff-doc-status--expiring_30 {
  --fsms-doc-color: var(--color-warning-700);
  --fsms-doc-bg: var(--color-warning-50);
  --fsms-doc-border: #fcd34d;
}

.fsms-staff-doc-status--missing {
  --fsms-doc-color: var(--color-gray-500);
  --fsms-doc-bg: var(--color-gray-50);
  --fsms-doc-border: var(--color-gray-300);
}

.fsms-staff-doc-status--valid {
  --fsms-doc-color: var(--color-success-strong);
  --fsms-doc-bg: var(--color-success-50);
  --fsms-doc-border: var(--color-success-300);
}

.fsms-staff-doc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.fsms-staff-doc-card:hover {
  border-color: var(--fsms-doc-border, var(--gray-200));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.fsms-staff-doc-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.fsms-staff-doc-card__main {
  min-width: 0;
}

.fsms-staff-doc-card__name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fsms-staff-doc-card__meta {
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-staff-doc-card__status {
  flex-shrink: 0;
  padding: 3px 10px;
  color: var(--fsms-doc-color);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--fsms-doc-bg);
  border: 1px solid var(--fsms-doc-border);
  border-radius: 99px;
}

.fsms-staff-doc-card__docs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fsms-staff-doc-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  font-size: 11px;
  border-top: 1px solid var(--gray-100);
}

.fsms-staff-doc-card__summary {
  color: var(--text-secondary);
}

.fsms-staff-doc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary, var(--color-primary-hover));
  font-weight: 600;
}

.fsms-staff-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  background: var(--fsms-doc-bg);
  border: 1px solid var(--fsms-doc-border);
  border-radius: 8px;
}

.fsms-staff-doc-row:hover {
  filter: brightness(0.97);
}

.fsms-staff-doc-row__main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fsms-staff-doc-row__icon,
.fsms-staff-doc-row__action {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--fsms-doc-color);
}

.fsms-staff-doc-row__action--muted {
  color: var(--text-secondary);
  opacity: .6;
}

.fsms-staff-doc-row__copy {
  min-width: 0;
}

.fsms-staff-doc-row__label {
  overflow: hidden;
  color: var(--fsms-doc-color);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fsms-staff-doc-row__meta {
  color: var(--text-secondary);
  font-size: 11px;
}

.fsms-doc-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}

.fsms-doc-preview__header,
.fsms-doc-preview__actions {
  display: flex;
  gap: 12px;
}

.fsms-doc-preview__header {
  align-items: flex-start;
  justify-content: space-between;
}

.fsms-doc-preview__person {
  min-width: 0;
}

.fsms-doc-preview__name {
  font-size: 16px;
  font-weight: 700;
}

.fsms-doc-preview__sub {
  color: var(--text-secondary);
  font-size: 12px;
}

.fsms-doc-preview__status {
  padding: 4px 12px;
  color: var(--fsms-doc-color);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--fsms-doc-bg);
  border: 1px solid var(--fsms-doc-border);
  border-radius: 99px;
}

.fsms-doc-preview__meta {
  padding: 12px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}

.fsms-doc-preview__meta-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
}

.fsms-doc-preview__meta-label {
  width: 110px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.fsms-doc-preview__meta-value {
  flex: 1;
  font-weight: 500;
}

.fsms-doc-preview__inline-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fsms-doc-preview__status-text {
  color: var(--fsms-doc-color);
  font-weight: 600;
}

.fsms-doc-preview__media {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 520px;
  overflow: hidden;
  background: var(--gray-100);
  border-radius: 10px;
}

.fsms-doc-preview__image {
  display: block;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.fsms-doc-preview__pdf {
  height: 520px;
}

.fsms-doc-preview__pdf-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.fsms-doc-preview__empty,
.fsms-doc-preview__fallback,
.fsms-doc-preview__load-error {
  color: var(--text-secondary);
  text-align: center;
}

.fsms-doc-preview__empty {
  padding: 40px;
  background: var(--gray-50);
  border: 2px dashed var(--gray-300);
  border-radius: 10px;
}

.fsms-doc-preview__empty-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  color: var(--gray-400);
}

.fsms-doc-preview__empty-title {
  margin-bottom: 4px;
  font-weight: 600;
}

.fsms-doc-preview__empty-copy,
.fsms-doc-preview__fallback-copy,
.fsms-doc-preview__load-error {
  font-size: 13px;
}

.fsms-doc-preview__load-error a {
  color: var(--primary);
}

.fsms-doc-preview__fallback {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: start;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}

.fsms-doc-preview__fallback-main {
  flex: 1;
  min-width: 0;
}

.fsms-doc-preview__fallback-title {
  font-weight: 600;
}

.fsms-doc-preview__actions {
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid var(--gray-100);
}

.fsms-doc-preview__action-group {
  display: flex;
  gap: 8px;
}

.fsms-pic-roster-table {
  min-width: max-content;
}

.fsms-pic-roster__employee-head,
.fsms-pic-roster__employee-cell {
  position: sticky;
  inset-inline-start: 0;
  min-width: 220px;
}

.fsms-pic-roster__employee-head {
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  text-align: start;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.fsms-pic-roster__branch-head {
  min-width: 120px;
  padding: 10px 12px;
  font-size: 12px;
  text-align: center;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  border-inline-start: 1px solid var(--gray-100);
}

.fsms-pic-roster__branch-name {
  font-weight: 600;
}

.fsms-pic-roster__branch-meta {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 400;
}

.fsms-pic-roster__branch-meta--danger {
  color: var(--danger);
}

.fsms-pic-roster__employee-cell {
  padding: 10px 12px;
  background: #fff;
  border-inline-end: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-100);
}

.fsms-pic-roster__employee-name {
  font-weight: 500;
}

.fsms-pic-roster__employee-meta {
  color: var(--text-secondary);
  font-size: 11px;
}

.fsms-pic-roster__employee-warning {
  color: var(--color-warning-dark);
}

.fsms-pic-roster__check-cell {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--gray-100);
  border-inline-start: 1px solid var(--gray-100);
}

/* ==================== ERP FORM CONTROLS ==================== */
.erp-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--gray-900);
  box-sizing: border-box;
}

.erp-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.erp-control--sm {
  padding: 8px 10px;
  font-size: 13px;
}

.erp-control--promo {
  text-transform: none;
  font-weight: 700;
  letter-spacing: .04em;
}

.erp-control--emoji {
  font-size: 20px;
  text-align: center;
}

.erp-control--file {
  padding: 8px;
  font-size: 13px;
  background: var(--gray-50);
}

.erp-control--resize-y {
  resize: vertical;
}

/* ==================== ERP LAYOUT GRIDS ==================== */
.erp-grid {
  display: grid;
  gap: var(--erp-grid-gap, 16px);
}

.erp-grid > * {
  min-width: 0;
}

.erp-grid--gap-0 { --erp-grid-gap: 0; }
.erp-grid--gap-2 { --erp-grid-gap: 2px; }
.erp-grid--gap-3 { --erp-grid-gap: 3px; }
.erp-grid--gap-4 { --erp-grid-gap: 4px; }
.erp-grid--gap-6 { --erp-grid-gap: 6px; }
.erp-grid--gap-8 { --erp-grid-gap: 8px; }
.erp-grid--gap-10 { --erp-grid-gap: 10px; }
.erp-grid--gap-12 { --erp-grid-gap: 12px; }
.erp-grid--gap-14 { --erp-grid-gap: 14px; }
.erp-grid--gap-16 { --erp-grid-gap: 16px; }
.erp-grid--gap-18 { --erp-grid-gap: 18px; }
.erp-grid--gap-20 { --erp-grid-gap: 20px; }
.erp-grid--gap-22 { --erp-grid-gap: 22px; }
.erp-grid--gap-24 { --erp-grid-gap: 24px; }

.erp-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.erp-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.erp-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.erp-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.erp-grid--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.erp-grid--7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.erp-grid--8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.erp-grid--cards-280 {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.erp-grid--cards-300 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.erp-grid--cards-320 {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.erp-grid--cards-340 {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.erp-grid--cards-400 {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.erp-grid--cards-200 {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.erp-grid--cards-250 {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.erp-grid--cards-140 {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.erp-grid--auto-120 {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.erp-grid--auto-130 {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.erp-grid--auto-150 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.erp-grid--auto-160 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.erp-grid--auto-180 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.erp-grid--auto-190 {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.erp-grid--auto-200 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.erp-grid--auto-220 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.erp-grid--auto-250 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.erp-grid--auto-260 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.erp-grid--auto-280 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.erp-grid--auto-300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.erp-grid--auto-320 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.erp-grid--main-340 {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.erp-grid--main-350 {
  grid-template-columns: minmax(0, 1fr) 350px;
}

.erp-grid--main-360 {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.erp-grid--main-380 {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.erp-grid--main-400 {
  grid-template-columns: minmax(0, 1fr) 400px;
}

.erp-grid--main-180 {
  grid-template-columns: minmax(0, 1fr) 180px;
}

.erp-grid--main-320 {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.erp-grid--date-time {
  grid-template-columns: minmax(0, 1fr) 132px;
}

.erp-grid--content-action {
  grid-template-columns: minmax(0, 1fr) auto;
}

.erp-grid--auto-main {
  grid-template-columns: auto minmax(0, 1fr);
}

.erp-grid--recipe-form {
  grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
}

.erp-grid--pos-reviewer {
  grid-template-columns: 200px minmax(0, 1fr) 360px;
}

.erp-grid--delivery-history-main {
  grid-template-columns: minmax(320px, 1.25fr) minmax(260px, 0.9fr) minmax(260px, 0.95fr);
}

.erp-grid--hour-heatmap {
  grid-template-columns: 60px repeat(24, minmax(0, 1fr));
}

.erp-grid--tables-shell {
  grid-template-columns: 280px minmax(0, 1fr);
}

.erp-grid--explorer-shell {
  grid-template-columns: 320px minmax(0, 1fr);
}

.erp-grid--ratio-2-1 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.erp-grid--settings-aside {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.erp-grid--app-aside {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.7fr);
}

.erp-grid--qr-aside {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.75fr);
}

.erp-grid--field-accent {
  grid-template-columns: minmax(0, 1fr) 84px;
}

.erp-grid--cover-accent {
  grid-template-columns: minmax(0, 1fr) 190px;
}

.erp-grid--step-row {
  grid-template-columns: 34px minmax(0, 1fr);
}

.erp-grid--icon-24 {
  grid-template-columns: 24px minmax(0, 1fr);
}

.erp-grid--icon-28 {
  grid-template-columns: 28px minmax(0, 1fr);
}

.erp-grid--icon-48 {
  grid-template-columns: 48px minmax(0, 1fr);
}

.erp-grid--icon-56 {
  grid-template-columns: 56px minmax(0, 1fr);
}

.erp-grid--icon-80 {
  grid-template-columns: 80px minmax(0, 1fr);
}

.erp-grid--domain-step {
  grid-template-columns: 72px minmax(0, 1fr);
}

.erp-grid--payment-stripe {
  grid-template-columns: 140px minmax(0, 1fr);
}

.erp-grid--payment-mpgs {
  grid-template-columns: 140px minmax(0, 1fr) 110px;
}

.erp-grid--domain-zone {
  grid-template-columns: minmax(0, 1.2fr) 150px 150px;
}

.erp-grid--domain-radius {
  grid-template-columns: minmax(0, 1fr) 140px;
}

.erp-grid--mod-price-row {
  grid-template-columns: minmax(0, 1fr) 80px 80px;
}

.erp-grid--source-action-row {
  grid-template-columns: minmax(0, 1fr) 180px auto;
}

.erp-grid--discount-rule-row {
  grid-template-columns: minmax(0, 1fr) 140px 100px 160px;
}

.erp-grid--center-action {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.erp-grid--banner-header {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.erp-grid--banner-media {
  grid-template-columns: 220px minmax(0, 1fr);
}

.erp-grid--banner-action {
  grid-template-columns: 180px minmax(0, 1fr);
}

.erp-grid--route-progress {
  grid-template-columns: 30px minmax(0, 1fr) 30px;
}

.erp-grid--qr-dots {
  grid-template-columns: repeat(7, 8px);
}

.erp-grid--wallet-service {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.erp-grid--wallet-branding-media {
  grid-template-columns: 140px minmax(0, 1fr);
}

.erp-grid--partner-code {
  grid-template-columns: minmax(0, 1fr) 180px;
}

.erp-grid--campaign-status-window {
  grid-template-columns: 160px 160px minmax(240px, 1fr);
}

.erp-grid--service-fee {
  grid-template-columns: minmax(0, 1fr) 180px 220px;
}

.erp-grid--chart-aside {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.erp-grid--push-compose {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}

.erp-grid--fsms-temp {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 90px;
}

.erp-grid--finance-invoice-line {
  grid-template-columns: minmax(0, 2fr) 60px 100px 40px;
}

.erp-grid--finance-invoice-line-comment {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 60px 100px 40px;
}

.erp-grid--reservation-hours-row {
  grid-template-columns: 28px 80px minmax(0, 1fr) 16px minmax(0, 1fr);
}

.erp-grid--fsms-dl {
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
}

.erp-grid--legal-entity-detail {
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 1fr);
}

.erp-grid--branch-geo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px;
}

.erp-grid--discount-cat-rule {
  grid-template-columns: minmax(180px, 1.6fr) 120px 120px 120px 36px;
}

.erp-grid--discount-application {
  grid-template-columns: minmax(180px, 260px) minmax(240px, 1fr);
}

.erp-grid--discount-time {
  grid-template-columns: minmax(140px, 180px) minmax(140px, 180px);
}

.erp-grid--fee-row {
  grid-template-columns: 80px minmax(0, 1fr) auto;
}

.erp-grid--order-source-commission {
  grid-template-columns: minmax(0, 1fr) 140px 140px;
}

.erp-grid--pos-payment-panel {
  grid-template-columns: 320px minmax(0, 1fr);
}

.erp-grid--rct-detail {
  grid-template-columns: 220px minmax(0, 1fr) 280px;
}

.rct-template-detail-header {
  padding: 16px 20px;
  margin-bottom: 20px;
}

.rct-template-detail-header .rct-template-name-input {
  width: clamp(180px, 22vw, 340px);
}

@media (min-width: 769px) {
  .rct-template-detail-header .erp-page-header__identity {
    flex: 1 1 720px;
  }

  .rct-template-detail-header .erp-page-header__controls--actions-only {
    flex: 0 0 auto;
    max-width: 100%;
  }
}

.erp-grid--print-meta {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.erp-grid--staff-image-picker {
  grid-template-columns: var(--staff-preview-size, 88px) minmax(0, 1fr);
}

@media (max-width: 1024px) {
  .erp-grid--legal-entity-detail {
    grid-template-columns: 1fr;
  }

  .erp-grid--main-340,
  .erp-grid--main-350,
  .erp-grid--main-360,
  .erp-grid--main-380,
  .erp-grid--main-400,
  .erp-grid--main-320,
  .erp-grid--main-180,
  .erp-grid--pos-reviewer,
  .erp-grid--delivery-history-main,
  .erp-grid--tables-shell,
  .erp-grid--explorer-shell,
  .erp-grid--ratio-2-1,
  .erp-grid--settings-aside,
  .erp-grid--app-aside,
  .erp-grid--qr-aside,
  .erp-grid--chart-aside,
  .erp-grid--push-compose,
  .erp-grid--pos-payment-panel,
  .erp-grid--rct-detail {
    grid-template-columns: 1fr;
  }

  .erp-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .erp-grid--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .erp-grid--3,
  .erp-grid--4,
  .erp-grid--6,
  .erp-grid--branch-geo,
  .erp-grid--recipe-form,
  .erp-grid--campaign-status-window,
  .erp-grid--service-fee,
  .erp-grid--fsms-temp,
  .erp-grid--finance-invoice-line,
  .erp-grid--finance-invoice-line-comment,
  .erp-grid--domain-zone,
  .erp-grid--domain-radius,
  .erp-grid--mod-price-row,
  .erp-grid--source-action-row,
  .erp-grid--discount-rule-row,
  .erp-grid--center-action,
  .erp-grid--fsms-dl,
  .erp-grid--discount-cat-rule,
  .erp-grid--discount-application,
  .erp-grid--discount-time,
  .erp-grid--fee-row,
  .erp-grid--order-source-commission,
  .erp-grid--staff-image-picker {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .erp-grid--2,
  .erp-grid--date-time,
  .erp-grid--content-action,
  .erp-grid--auto-main,
  .erp-grid--field-accent,
  .erp-grid--cover-accent,
  .erp-grid--domain-step,
  .erp-grid--payment-stripe,
  .erp-grid--payment-mpgs,
  .erp-grid--banner-header,
  .erp-grid--banner-media,
  .erp-grid--banner-action,
  .erp-grid--wallet-service,
  .erp-grid--wallet-branding-media,
  .erp-grid--partner-code,
  .erp-grid--icon-80,
  .erp-grid--print-meta,
  .erp-grid--5 {
    grid-template-columns: 1fr;
  }
}

/* Bank Matching dashboard */
.bank-statements-page {
    gap: 16px;
}

.bank-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 0.8fr);
    gap: 16px;
}

.bank-statements-page .erp-panel {
    overflow: hidden;
}

.bank-statements-page .erp-panel__header {
    padding: 18px 20px;
}

.bank-statements-page .erp-panel__title {
    color: var(--text-primary, #0f172a);
    font-size: 18px;
}

.bank-dashboard-period-filter {
    min-width: min(100%, 520px);
}

.bank-dashboard-period-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bank-dashboard-period-controls .date-range-picker {
    min-width: 270px;
}

.bank-dashboard-period-controls .date-range-trigger {
    width: 100%;
}

.bank-dashboard-period-presets {
    flex: 0 0 auto;
}

.bank-dashboard-chart-panel .erp-panel__content {
    padding: 8px 14px 10px;
}

.bank-dashboard-chart {
    min-height: 300px;
}

.bank-dashboard-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-secondary, #475569);
    font-size: 14px;
}

.bank-dashboard-health .erp-panel__content {
    padding: 20px;
}

.bank-dashboard-health__score {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.bank-dashboard-health__score strong {
    color: var(--text-primary, #0f172a);
    font-size: 32px;
    line-height: 1;
}

.bank-dashboard-health__score span {
    color: var(--text-secondary, #475569);
    font-size: 14px;
    font-weight: 600;
}

.bank-dashboard-progress {
    overflow: hidden;
    height: 10px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: var(--color-gray-100, #f1f5f9);
}

.bank-dashboard-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-green-500, #10b981);
}

.bank-dashboard-health__rows {
    display: grid;
    gap: 0;
}

.bank-dashboard-health__rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    border-top: 1px solid var(--border, #e2e8f0);
    color: var(--text-secondary, #475569);
    font-size: 14px;
}

.bank-dashboard-health__rows strong {
    color: var(--text-primary, #0f172a);
    font-size: 14px;
}

.bank-dashboard-month-table,
.bank-statements-table {
    min-width: 850px;
}

.bank-amount {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bank-amount--in {
    color: var(--color-green-700, #047857);
}

.bank-amount--out {
    color: var(--color-orange-700, #c2410c);
}

.bank-statement-file {
    max-width: 280px;
    overflow: hidden;
    margin-top: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-statement-overlap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: var(--color-amber-700, #b45309);
    font-size: 12px;
    font-weight: 700;
}

.bank-statement-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.bank-match-reason {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: var(--text-secondary, #475569);
    font-size: 12px;
    font-weight: 600;
}

.bank-match-candidate-blocker {
    margin-top: 4px;
    color: var(--color-amber-700, #b45309);
    font-size: 11px;
    font-weight: 600;
}

.bank-match-candidate-note {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.bank-match-reason--action {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.bank-match-reason--action:hover {
    color: var(--primary);
    text-decoration: underline;
}

.bank-create-expense-btn {
    flex: 0 0 36px;
}

.bank-transaction-merchant {
    margin-top: 5px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
}

.bank-transaction-narration {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.bank-transaction-narration--secondary {
    font-size: 12px;
}

.bank-matched-document {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 6px 9px;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    background: #ecfdf5;
    color: #065f46;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.bank-matched-document:hover {
    border-color: #34d399;
    background: #d1fae5;
}

.bank-matched-document--partial {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.bank-matched-document--partial:hover {
    border-color: #f59e0b;
    background: #fef3c7;
}

.bank-match-supplier-scope {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(23, 23, 23, 0.14);
    border-radius: 8px;
    background: #fafafa;
    color: #525252;
    font-size: 12px;
}

.bank-match-supplier-scope button {
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #262626;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.bank-match-recommended-badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bank-match-tab {
    flex: 1;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: var(--card-bg, #fff);
    color: #626262;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.bank-match-tab.is-active {
    border-bottom-color: #262626;
    color: #262626;
    font-weight: 600;
}

/* Bank Reconciliation uses the shared Precision grid as an operational queue.
   The page owns vertical scrolling; the table keeps only its horizontal
   workspace and reveals audit evidence in a companion row on demand. */
.bank-reconcile-tabs {
    margin-bottom: 12px;
}

.bank-reconcile-page-header {
    margin-bottom: 16px;
}

.bank-reconcile-page-header .erp-page-header__meta {
    overflow-wrap: anywhere;
}

.bank-reconcile-summary {
    margin-bottom: 16px;
}

.catalog-precision-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.catalog-precision-name > svg,
.catalog-precision-name > i {
    flex: 0 0 16px;
    color: #737373;
}

.catalog-precision-name strong {
    overflow: hidden;
    color: #262626;
    font-size: inherit;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-precision-name--child {
    padding-left: 24px;
}

.catalog-precision-name--child strong {
    font-weight: 400;
}

.catalog-precision-color {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(38, 38, 38, 0.16);
    border-radius: 5px;
    background: var(--catalog-item-color, #a3a3a3);
    vertical-align: middle;
}

.bank-reconcile-tabs .erp-filter-tabs {
    width: 100%;
}

.bank-reconcile-table-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.bank-reconcile-table-toolbar .ds-search-wrap {
    flex: 1 1 420px;
    max-width: 720px;
}

.bank-reconcile-table-toolbar__meta {
    margin-left: auto;
    color: #626262;
    font-size: 13px;
    white-space: nowrap;
}

#bankReconciliationTable .erp-data-table--precision tbody > tr:not(.bank-reconcile-detail-row) > td {
    height: 64px;
}

.bank-reconcile-transaction-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bank-reconcile-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #747474;
    cursor: pointer;
}

.bank-reconcile-expand:hover {
    background: #f1f1f1;
    color: #262626;
}

.bank-reconcile-expand svg {
    transition: transform 150ms ease;
}

.bank-reconcile-expand.is-open svg {
    transform: rotate(90deg);
}

.bank-reconcile-transaction-copy,
.bank-reconcile-match-copy,
.bank-match-candidate-primary,
.bank-match-candidate-amount {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bank-reconcile-transaction-copy strong,
.bank-reconcile-match-copy strong,
.bank-match-candidate-primary strong,
.bank-match-candidate-amount strong {
    overflow: hidden;
    color: #262626;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-reconcile-transaction-copy span,
.bank-reconcile-match-copy span,
.bank-match-candidate-primary span,
.bank-match-candidate-amount span,
.bank-reconcile-secondary {
    overflow: hidden;
    color: #737373;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-reconcile-document {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #262626;
    font: inherit;
    cursor: pointer;
}

.bank-reconcile-document span,
.bank-reconcile-document strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-reconcile-document span {
    color: #737373;
    font-size: 12px;
}

.bank-reconcile-document strong {
    font-weight: 600;
}

.bank-reconcile-document:hover strong {
    text-decoration: underline;
}

.bank-reconcile-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.bank-reconcile-amount--income {
    color: var(--success-700, #15803d);
}

.bank-reconcile-amount--expense {
    color: var(--danger-600, #dc2626);
}

.bank-reconcile-action-rail {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    align-items: center;
    gap: 6px;
    width: 144px;
    white-space: nowrap;
}

.bank-reconcile-action-rail__slot {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 36px;
}

.bank-reconcile-action-rail__slot--primary > .btn,
.bank-reconcile-action-rail__slot--secondary > .btn {
    justify-content: center;
    width: 40px;
}

.bank-reconcile-action-rail__slot--document {
    justify-content: center;
    width: 44px;
}

.bank-reconcile-action-rail__slot--document > .btn {
    width: 44px;
    min-width: 44px;
    height: 36px;
}

.bank-reconcile-detail-row[hidden] {
    display: none;
}

#bankReconciliationTable .erp-data-table--precision .bank-reconcile-detail-row > td {
    height: auto;
    padding: 16px 20px;
    overflow: visible;
    background: #fafafa;
    white-space: normal;
}

.bank-reconcile-detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, 2fr) repeat(3, minmax(180px, 1fr));
    gap: 20px;
}

.bank-reconcile-detail-grid > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bank-reconcile-detail-grid span {
    color: #737373;
    font-size: 12px;
    line-height: 18px;
}

.bank-reconcile-detail-grid strong {
    color: #262626;
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
    overflow-wrap: anywhere;
}

#bankReconciliationTable .bank-reconcile-row--highlighted > td {
    background: #fff8dc;
}

/* Transaction matching is a wide comparison workflow. The dialog itself is
   the only vertical scroll owner; candidate tables do not introduce a second
   400px list viewport. */
.bank-match-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(4px);
}

.bank-match-modal__dialog {
    width: min(1120px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}

.bank-match-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(23, 23, 23, 0.12);
}

.bank-match-modal__header h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 20px;
    font-weight: 650;
}

.bank-match-modal__target {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.bank-match-modal__target strong {
    color: #262626;
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bank-match-modal__target span {
    color: #737373;
    font-size: 12px;
}

.bank-match-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(23, 23, 23, 0.12);
    border-radius: 10px;
    background: #fff;
    color: #525252;
    cursor: pointer;
}

.bank-match-modal__close:hover {
    background: #f7f7f7;
    color: #262626;
}

.bank-match-modal__transaction {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 130px minmax(180px, 1fr);
    gap: 16px 24px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(23, 23, 23, 0.12);
}

.bank-match-modal__transaction > div:not(.bank-match-supplier-scope) {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bank-match-modal__transaction span {
    color: #737373;
    font-size: 12px;
}

.bank-match-modal__transaction strong {
    overflow: hidden;
    color: #262626;
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-match-modal__transaction .bank-match-modal__narration {
    grid-column: 1 / -1;
}

.bank-match-modal__transaction .bank-match-modal__narration strong {
    white-space: normal;
}

.bank-match-modal__transaction .bank-match-supplier-scope {
    grid-column: 1 / -1;
    justify-self: start;
}

.bank-match-modal__tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid rgba(23, 23, 23, 0.12);
}

.bank-match-modal__search {
    padding: 14px 24px;
    border-bottom: 1px solid rgba(23, 23, 23, 0.12);
}

.bank-match-modal__results {
    min-height: 240px;
}

.bank-match-modal__results > .erp-data-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.bank-match-modal__results .erp-data-table--precision tbody td {
    height: 56px;
}

.bank-match-results-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(23, 23, 23, 0.12);
    color: #737373;
    font-size: 12px;
}

.bank-match-results-context > div {
    display: flex;
    flex-direction: column;
}

.bank-match-results-context strong {
    color: #262626;
    font-size: 14px;
    font-weight: 600;
}

.bank-match-candidate-check,
.bank-match-candidate-check .checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bank-match-candidate-notes {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bank-match-candidate-notes span {
    overflow: hidden;
    color: #737373;
    font-size: 12px;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-match-candidate-notes strong {
    color: #262626;
    font-weight: 600;
}

.bank-match-candidate-notes .bank-match-candidate-blocker {
    margin: 0;
    color: #9a6700;
}

.bank-match-candidate-row--selected > td,
.bank-match-candidate-row--selected:hover > td {
    background: #f2f2f2 !important;
}

.bank-match-candidate-row--selected > td:first-child {
    box-shadow: inset 3px 0 #262626;
}

.bank-match-candidate-row--blocked > td {
    color: #737373;
    cursor: not-allowed;
    opacity: 0.72;
}

.bank-match-modal__hud {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
    border-top: 1px solid rgba(23, 23, 23, 0.16);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
}

.bank-match-modal__hud[hidden] {
    display: none;
}

.bank-match-modal__selection {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #737373;
    font-size: 13px;
}

.bank-match-modal__selection strong {
    color: #262626;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bank-match-difference--exact,
.bank-match-difference--credit {
    color: #047857 !important;
}

.bank-match-difference--open {
    color: #9a6700 !important;
}

@media (max-width: 900px) {
    .bank-reconcile-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .bank-reconcile-table-toolbar .ds-search-wrap {
        flex-basis: auto;
        max-width: none;
    }

    .bank-reconcile-table-toolbar__meta {
        margin-left: 0;
    }

    .bank-reconcile-detail-grid {
        grid-template-columns: 1fr;
    }

    .bank-match-modal {
        align-items: flex-end;
        padding: 0;
    }

    .bank-match-modal__dialog {
        width: 100%;
        max-height: 94vh;
        border-radius: 16px 16px 0 0;
    }

    .bank-match-modal__transaction {
        grid-template-columns: 1fr 1fr;
    }

    .bank-match-modal__results > .erp-data-table-wrap {
        overflow-x: auto;
    }

    .bank-match-modal__selection {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

.corporate-tax-expense-group-row td {
    background: #fff;
    color: #262626;
    border-top: 1px solid rgba(23, 23, 23, 0.2);
}

.corporate-tax-expense-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary, #0f172a);
}

.corporate-tax-expense-row--parent td {
    background: #fff;
}

.corporate-tax-expense-row--child td:first-child {
    padding-inline-start: 42px;
}

.corporate-tax-expense-label strong {
    font-weight: 400;
}

.corporate-tax-expense-row--parent .corporate-tax-expense-label strong {
    font-weight: 500;
}

.corporate-tax-expense-group-row .corporate-tax-expense-label strong {
    font-weight: 600;
}

.corporate-tax-expense-branch {
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
}

.corporate-tax-table-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 980px) {
    .bank-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .bank-dashboard-period-filter,
    .bank-dashboard-period-controls .date-range-picker {
        min-width: 0;
        width: 100%;
    }

    .bank-dashboard-period-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .bank-dashboard-period-presets {
        width: 100%;
    }

    .bank-dashboard-period-presets .erp-segmented__button {
        flex: 1;
    }

    .bank-statements-page .erp-panel__header {
        padding: 15px 16px;
    }

    .bank-dashboard-chart-panel .erp-panel__content {
        padding-inline: 4px;
    }

    .bank-dashboard-chart,
    .bank-dashboard-chart-empty {
        min-height: 260px;
    }
}

/* ==================== BUTTONS (Legacy - keep unique classes) ==================== */
/* Note: Base .btn, .btn-gradient, .btn-secondary, .btn-sm defined in v3.1 section above */

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 37px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--color-gray-200);
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-ghost:hover {
  background: var(--gray-100);
  border-color: var(--color-gray-300);
}

.btn-ghost svg,
.btn-ghost i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn.u-text-danger,
.btn-ghost.u-text-danger {
  color: var(--danger);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  background: var(--danger);
  color: #fff;
  cursor: pointer;
}

.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  background: var(--success);
  color: #fff;
  cursor: pointer;
}

.btn-warning-outline {
  border: 1.5px solid var(--color-warning);
  color: var(--color-warning-700);
  background: var(--color-warning-50);
}

.btn-warning-outline:hover {
  background: var(--color-warning-light);
}

/* ==================== CARDS ==================== */
.card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.card-body {
  padding: 20px;
}

.card-body.no-padding {
  padding: 0;
}

/* Card Table Header has gray background */
.card table thead,
.card .table-v3 thead {
  background: var(--gray-50) !important;
}

.card table thead th,
.card .table-v3 thead th {
  background: white !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-400);
  position: relative;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

.erp-action-btn--tight {
  padding: 4px;
}

.erp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}

.erp-action-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.15);
}

.erp-action-btn--sm {
  padding: 6px 12px;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.erp-action-btn--xs {
  padding: 5px 10px;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
}

.erp-action-btn--muted {
  color: var(--gray-500);
}

.erp-action-btn--clear {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-400);
  font-size: 13px;
  line-height: 1;
  box-shadow: none;
  flex-shrink: 0;
}

.erp-action-btn--clear:hover {
  background: var(--gray-100);
  color: var(--gray-600);
  box-shadow: none;
}

.erp-bulk-actions-bar {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 100;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  padding: 16px 24px;
  color: #fff;
  background: var(--gradient-primary);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.35);
}

.erp-bulk-actions-bar[hidden] {
  display: none !important;
}

.erp-bulk-actions-summary {
  gap: 14px;
}

.erp-bulk-actions-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.erp-bulk-actions-count {
  font-size: 18px;
  font-weight: 700;
}

.erp-bulk-actions-hint {
  font-size: 12px;
  opacity: 0.8;
}

.erp-bulk-actions-controls {
  margin-left: auto;
}

.erp-bulk-actions-controls > [hidden] {
  display: none !important;
}

.erp-bulk-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  font-weight: 600;
}

.erp-bulk-btn--icon {
  width: 40px;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.erp-bulk-btn--danger {
  width: 40px;
  padding: 0;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
}

.erp-bulk-btn--ghost {
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==================== CARDS ==================== */
.card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: visible;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
}

.card-body {
  padding: 20px;
}

.card-header--compact {
  padding: 14px 16px;
}

.card-body--compact {
  padding: 14px 16px;
}

.card--elevated {
  border-radius: var(--radius-2xl, 16px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card--p-20 {
  padding: 20px;
}

.card--mb-20 {
  margin-bottom: 20px;
}

.card--overflow-hidden {
  overflow: hidden;
}

.erp-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--erp-icon-tile-size, 28px);
  height: var(--erp-icon-tile-size, 28px);
  border-radius: var(--erp-icon-tile-radius, 6px);
  background: var(--erp-icon-tile-bg, var(--gradient-primary));
  flex-shrink: 0;
}

.erp-icon-tile--md {
  --erp-icon-tile-size: 32px;
  --erp-icon-tile-radius: 8px;
}

.erp-icon-tile--amber { --erp-icon-tile-bg: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark)); }
.erp-icon-tile--cyan { --erp-icon-tile-bg: linear-gradient(135deg, #06b6d4, #0891b2); }
.erp-icon-tile--emerald { --erp-icon-tile-bg: linear-gradient(135deg, var(--color-success), var(--color-success-dark)); }
.erp-icon-tile--violet { --erp-icon-tile-bg: linear-gradient(135deg, #8b5cf6, var(--color-violet)); }
.erp-icon-tile--rose { --erp-icon-tile-bg: linear-gradient(135deg, #ec4899, #db2777); }
.erp-icon-tile--slate { --erp-icon-tile-bg: linear-gradient(135deg, var(--color-gray-500), var(--color-gray-600)); }

.erp-segmented {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--gray-50);
}

.erp-segmented__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.erp-segmented__button.is-active {
  background: #fff;
  color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.erp-segmented__button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Incoming payment schedule: page composition uses shared header, filters,
   stats, table and segmented modules. These styles only describe the
   schedule-specific calendar and compact cell content. */
.incoming-payment-schedule {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.incoming-payment-schedule__search {
  min-width: 220px;
}

.incoming-payment-schedule__list-panel,
.incoming-payment-schedule__calendar-panel {
  min-width: 0;
}

.incoming-payment-schedule .erp-data-table th:first-child:has(#paymentScheduleSelectAll),
.incoming-payment-schedule .erp-data-table td:first-child:has(.payment-schedule-select-checkbox) {
  width: 44px;
  min-width: 44px;
  padding-right: 4px;
  text-align: center;
}

.customer-payment-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.customer-payment-modal__account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
}

.customer-payment-modal__account span,
.customer-payment-modal__allocation-row span {
  color: var(--gray-500);
  font-size: 12px;
}

.customer-payment-modal__allocations {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}

.customer-payment-modal__allocation-head,
.customer-payment-modal__allocation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.customer-payment-modal__allocation-head {
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.customer-payment-modal__allocation-row + .customer-payment-modal__allocation-row {
  border-top: 1px solid var(--gray-100);
}

.customer-payment-modal__allocation-row > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.customer-payment-modal__totals {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  color: var(--gray-600);
  font-size: 13px;
}

.customer-payment-modal__totals strong {
  margin-left: 4px;
  color: var(--gray-900);
}

.incoming-payment-schedule__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  white-space: nowrap;
}

.incoming-payment-schedule__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.incoming-payment-schedule__amount {
  color: var(--gray-900);
  white-space: nowrap;
}

.incoming-payment-schedule__amount.is-overdue {
  color: var(--color-danger-dark, #b91c1c);
}

.incoming-payment-schedule__calendar-panel {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.incoming-payment-schedule__calendar-toolbar {
  position: sticky;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 840px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-200);
}

.incoming-payment-schedule__calendar-toolbar h2 {
  margin: 0;
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
}

.incoming-payment-schedule__calendar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.incoming-payment-schedule__calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  min-width: 840px;
}

.incoming-payment-schedule__weekday {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-200);
  border-left: 1px solid var(--gray-100);
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.incoming-payment-schedule__weekday:first-child {
  border-left: 0;
}

.incoming-payment-schedule__day {
  min-height: 132px;
  padding: 8px;
  border-bottom: 1px solid var(--gray-100);
  border-left: 1px solid var(--gray-100);
  background: #fff;
}

.incoming-payment-schedule__day:nth-child(7n + 1) {
  border-left: 0;
}

.incoming-payment-schedule__day.is-outside {
  background: var(--gray-50);
  color: var(--gray-400);
}

.incoming-payment-schedule__day.is-today {
  box-shadow: inset 0 0 0 2px var(--primary);
}

.incoming-payment-schedule__day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 22px;
  margin-bottom: 6px;
  color: var(--gray-600);
  font-size: 11px;
}

.incoming-payment-schedule__day-head > span {
  font-weight: 700;
}

.incoming-payment-schedule__day-head > strong {
  overflow: hidden;
  color: var(--gray-900);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incoming-payment-schedule__day-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.incoming-payment-schedule__event {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 6px 7px;
  border: 0;
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  background: var(--color-primary-50, #eff6ff);
  color: var(--gray-800);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.incoming-payment-schedule__event:hover {
  filter: brightness(0.98);
}

.incoming-payment-schedule__event > span,
.incoming-payment-schedule__event > strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incoming-payment-schedule__event.is-overdue {
  border-left-color: var(--color-danger, #dc2626);
  background: var(--color-danger-50, #fef2f2);
}

.incoming-payment-schedule__event.is-due_today {
  border-left-color: var(--color-warning-dark, #d97706);
  background: var(--color-warning-50, #fffbeb);
}

.incoming-payment-schedule__more {
  padding: 2px 4px;
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .incoming-payment-schedule {
    gap: 12px;
  }

  .incoming-payment-schedule__search {
    width: 100%;
    min-width: 0;
  }

  .incoming-payment-schedule__calendar-toolbar,
  .incoming-payment-schedule__calendar {
    min-width: 700px;
  }

  .incoming-payment-schedule__calendar {
    grid-template-columns: repeat(7, 100px);
  }

  .incoming-payment-schedule__day {
    min-height: 116px;
    padding: 6px;
  }

  .customer-payment-modal__allocation-head,
  .customer-payment-modal__allocation-row {
    grid-template-columns: minmax(0, 1fr) 120px;
  }

  .customer-payment-modal__account,
  .customer-payment-modal__totals {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

.recipe-packaging { overflow: visible; margin-bottom: 16px; }
.recipe-packaging__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.recipe-packaging__header h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.recipe-packaging__optional, .recipe-packaging__hint, .recipe-packaging__status { color: var(--color-gray-600); font-size: 12px; font-weight: 400; line-height: 1.5; }
.recipe-packaging__hint { margin: 6px 0 0; }
.recipe-packaging__type { min-width: 200px; max-width: 100%; }
.recipe-packaging__body { min-width: 0; margin: 0; padding: 16px; border: 0; }
.recipe-packaging__row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 130px 44px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-gray-200); }
.recipe-packaging__product { min-width: 0; }
.recipe-packaging__product .btn { white-space: normal; text-align: left; justify-content: flex-start; font-size: 13px; min-height: 44px; padding: 4px 0; color: var(--color-primary-hover); }
.recipe-packaging__qty, .recipe-packaging__cost { display: grid; gap: 4px; }
.recipe-packaging__qty > span, .recipe-packaging__cost > span, .recipe-packaging__totals span { font-size: 12px; color: var(--color-gray-600); }
.recipe-packaging__qty input, .recipe-packaging .btn-icon, .recipe-packaging .pure-dropdown-trigger, .recipe-packaging input { min-height: 44px; }
.recipe-packaging__cost strong { font-size: 13px; font-weight: 600; color: var(--color-gray-900); }
.recipe-packaging__rows { margin-bottom: 12px; }
.recipe-packaging__empty { margin: 0 0 12px; font-size: 13px; color: var(--color-gray-600); }
.recipe-packaging__totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
.recipe-packaging__totals > div { display: grid; gap: 4px; }
.recipe-packaging__totals strong { font-size: 15px; font-weight: 600; color: var(--color-gray-900); }
.recipe-packaging__status { padding: 0 16px 12px; margin: 0; }
.order-line-packaging { font-size: 12px; line-height: 1.5; color: var(--color-gray-600); margin-top: 4px; }
.order-line-packaging summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.order-line-packaging ul { padding-left: 18px; margin: 4px 0; }
@media (max-width: 640px) {
  .recipe-packaging__type { width: 100%; }
  .recipe-packaging__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; }
  .recipe-packaging__product { grid-column: 1 / -1; }
  .recipe-packaging__totals { grid-template-columns: 1fr; }
  .recipe-packaging__totals > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .recipe-packaging__totals strong { white-space: nowrap; }
}

.recipe-detail-v3__stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 0.72fr)) minmax(480px, 1.55fr);
  align-items: stretch;
  gap: 12px;
  margin-bottom: 24px;
}

.recipe-detail-v3__stats-row > .recipe-detail-v3__stats-grid {
  display: contents;
  margin-bottom: 0;
}

.recipe-detail-v3__stats-grid .stat-card-u {
  height: 100%;
  min-width: 0;
  padding: 18px;
}

.recipe-detail-v3__stats-grid .stat-card-u__icon {
  margin-bottom: 12px;
}

.recipe-detail-v3__stats-grid .stat-card-u__value {
  font-size: 26px;
}

.recipe-detail-v3__food-cost-value {
  color: var(--recipe-food-cost-color, var(--color-success));
}

.recipe-detail-v3__food-cost-value.is-above-target {
  --recipe-food-cost-color: var(--color-danger);
}

.recipe-detail-v3__food-cost-value.is-monitor {
  --recipe-food-cost-color: var(--color-warning);
}

.recipe-detail-v3__food-cost-value.is-on-target {
  --recipe-food-cost-color: var(--color-success);
}

.recipe-detail-v3__food-cost-value.is-no-target {
  --recipe-food-cost-color: var(--gray-500);
}

.recipe-detail-v3__food-cost-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.recipe-detail-v3__food-cost-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  cursor: pointer;
}

.recipe-detail-v3__food-cost-info i,
.recipe-detail-v3__food-cost-info svg {
  width: 12px;
  height: 12px;
}

.recipe-detail-v3__food-cost-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--color-gray-700);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.recipe-detail-v3__food-cost-trend:hover {
  border-color: var(--color-primary-300);
  color: var(--primary);
}

.recipe-detail-v3__food-cost-trend i,
.recipe-detail-v3__food-cost-trend svg {
  width: 13px;
  height: 13px;
}

.recipe-cost-trend {
  min-width: 0;
}

.recipe-cost-trend__intro {
  margin-bottom: 18px;
  color: var(--color-gray-600);
  font-size: 13px;
  line-height: 1.55;
}

.recipe-cost-trend__toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-gray-200);
}

.recipe-cost-trend__range {
  min-width: 230px;
}

.recipe-cost-trend__filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.recipe-cost-trend__label,
.recipe-cost-trend__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 650;
}

.recipe-cost-trend__apply {
  margin-left: auto;
  min-height: 40px;
}

.recipe-cost-trend__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
}

.recipe-cost-trend__title {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 18px;
  font-weight: 700;
}

.recipe-cost-trend__chart-shell {
  position: relative;
  min-height: 320px;
  margin-top: 8px;
}

.recipe-cost-trend__chart {
  min-height: 320px;
}

.recipe-cost-trend__loading,
.recipe-cost-trend__empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-gray-500);
  text-align: center;
}

.recipe-cost-trend__loading[hidden],
.recipe-cost-trend__empty[hidden] {
  display: none;
}

.recipe-cost-trend__empty i,
.recipe-cost-trend__empty svg {
  width: 24px;
  height: 24px;
  color: var(--color-gray-400);
}

.recipe-cost-trend__empty strong {
  color: var(--color-gray-800);
  font-size: 14px;
}

.recipe-cost-trend__empty span {
  max-width: 420px;
  font-size: 12px;
  line-height: 1.5;
}

.recipe-cost-trend__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-200);
}

.recipe-cost-trend__summary-item {
  min-width: 0;
  padding: 0 16px;
  border-right: 1px solid var(--color-gray-200);
}

.recipe-cost-trend__summary-item:first-child {
  padding-left: 0;
}

.recipe-cost-trend__summary-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.recipe-cost-trend__summary-item span,
.recipe-cost-trend__summary-item strong {
  display: block;
}

.recipe-cost-trend__summary-item span {
  margin-bottom: 5px;
  color: var(--color-gray-500);
  font-size: 11px;
}

.recipe-cost-trend__summary-item strong {
  color: var(--color-gray-900);
  font-size: 17px;
}

.recipe-cost-trend__summary-item strong.is-up {
  color: var(--color-danger);
}

.recipe-cost-trend__summary-item strong.is-down {
  color: var(--color-success-strong);
}

.recipe-cost-trend__note {
  margin-top: 16px;
  color: var(--color-gray-500);
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .recipe-cost-trend__toolbar,
  .recipe-cost-trend__head {
    align-items: stretch;
    flex-direction: column;
  }

  .recipe-cost-trend__range,
  .recipe-cost-trend__range .date-range-picker,
  .recipe-cost-trend__range .date-range-trigger {
    width: 100%;
  }

  .recipe-cost-trend__apply {
    width: 100%;
    margin-left: 0;
  }

  .recipe-cost-trend__summary {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .recipe-cost-trend__summary-item,
  .recipe-cost-trend__summary-item:first-child,
  .recipe-cost-trend__summary-item:last-child {
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid var(--color-gray-200);
  }

  .recipe-cost-trend__summary-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

.recipe-food-cost-info {
  padding: 4px 0 8px;
}

.recipe-food-cost-info__copy {
  margin-bottom: 16px;
  color: var(--color-gray-600);
  font-size: 14px;
  line-height: 1.6;
}

.recipe-food-cost-info__card {
  padding: 14px;
  border: 1px solid var(--recipe-cost-card-border);
  border-radius: 14px;
  background: var(--recipe-cost-card-bg);
}

.recipe-food-cost-info__card--wac {
  --recipe-cost-card-border: var(--color-primary-100);
  --recipe-cost-card-bg: var(--primary-light);
  --recipe-cost-card-label: var(--primary);
}

.recipe-food-cost-info__card--latest {
  --recipe-cost-card-border: var(--color-success-100);
  --recipe-cost-card-bg: #f6fff8;
  --recipe-cost-card-label: var(--color-success-strong);
}

.recipe-food-cost-info__label {
  margin-bottom: 6px;
  color: var(--recipe-cost-card-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}

.recipe-food-cost-info__value {
  color: var(--color-gray-900);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.recipe-food-cost-info__note {
  margin-top: 8px;
  color: var(--color-gray-600);
  font-size: 13px;
}

.recipe-food-cost-info__footer {
  margin-top: 14px;
  color: var(--color-gray-500);
  font-size: 12px;
  line-height: 1.6;
}

.recipe-form-grid {
  align-items: end;
}

.recipe-form-group {
  margin: 0;
}

.recipe-form-group--cooking {
  min-width: 130px;
}

.recipe-form-group--stations {
  min-width: 180px;
}

.recipe-form-group--color {
  min-width: 220px;
}

.recipe-detail-divider {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

.recipe-detail-media-grid {
  align-items: start;
}

.recipe-toggle-check {
  cursor: pointer;
}

.recipe-toggle-title {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 600;
}

.recipe-toggle-subtitle {
  color: var(--gray-400);
  font-size: 11px;
}

.recipe-photo-section {
  width: 160px;
}

.recipe-pos-photo-setting { margin-top: 8px; }
.recipe-pos-photo-setting .checkbox-wrapper { min-height: 44px; align-items: center; }
.recipe-pos-photo-setting .checkbox-wrapper input[type="checkbox"] {
  display: block;
  position: absolute;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
}
.recipe-pos-photo-setting .checkbox-wrapper__label { font-size: 13px; color: var(--color-gray-700); }
.recipe-pos-photo-hint { font-size: 12px; line-height: 1.45; color: var(--color-gray-600); }
.recipe-pos-photo-setting .checkbox-wrapper:focus-within { outline: 2px solid var(--color-primary-hover); outline-offset: 3px; border-radius: 4px; }

.recipe-photo-label {
  display: block;
  margin-bottom: 8px;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
}

.recipe-photo-drop {
  width: 160px;
  height: 120px;
  border: 2px dashed var(--gray-300);
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
}

.recipe-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe-photo-empty {
  color: #9ca3af;
  text-align: center;
}

.recipe-photo-empty__caption {
  font-size: 11px;
}

.recipe-photo-input {
  display: none;
}

.recipe-station-chips {
  min-height: 38px;
}

.recipe-color-control {
  padding: 4px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
}

.recipe-color-swatch {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.recipe-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1.5px solid var(--gray-200);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.recipe-color-hex {
  width: 62px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--gray-600);
  font-family: monospace;
  font-size: 11px;
  text-align: center;
}

.recipe-color-arrow {
  margin: 0 2px;
  color: var(--gray-300);
  font-size: 13px;
}

.recipe-color-preview {
  width: 48px;
  height: 36px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--recipe-color-preview-bg, var(--color-gray-200));
  color: var(--recipe-color-preview-color, #fff);
  font-size: 10px;
  font-weight: 700;
  text-shadow: var(--recipe-color-preview-shadow, 0 1px 2px rgba(0, 0, 0, 0.3));
  flex-shrink: 0;
}

.pricing-card-v3 {
  height: 100%;
  min-width: 0;
}

.recipe-pricing-header {
  margin-bottom: 14px;
}

.recipe-pricing-header-icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  stroke-width: 1.7;
}

.recipe-pricing-compare {
  display: grid;
  grid-template-columns: minmax(160px, 0.82fr) minmax(260px, 1.28fr);
  gap: 18px;
  align-items: start;
}

.recipe-pricing-current {
  min-width: 0;
}

.recipe-price-input-shell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: 5px;
  padding: 3px 0 7px;
  border-bottom: 1px solid var(--gray-200);
  background: transparent;
  transition: border-color 0.15s;
}

.recipe-price-input-shell:hover {
  border-bottom-color: var(--gray-300);
}

.recipe-price-input-shell:focus-within {
  border-bottom-color: var(--color-primary);
}

.recipe-price-input-currency,
.recipe-price-input-shell .recipe-price-input {
  color: var(--gray-900);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.recipe-price-input-currency {
  flex: 0 0 auto;
}

.recipe-price-input-shell .recipe-price-input,
.recipe-price-input-shell .recipe-price-input:focus,
.recipe-price-input-shell .recipe-price-input:focus-visible {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
  font-family: inherit;
  cursor: text;
}

.recipe-price-input-edit {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--gray-300);
  stroke-width: 1.7;
  transition: color 0.15s;
}

.recipe-price-input-shell:hover .recipe-price-input-edit,
.recipe-price-input-shell:focus-within .recipe-price-input-edit {
  color: var(--color-primary);
}

.recipe-pricing-label {
  display: block;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 650;
}

.recipe-card-heading {
  color: var(--color-gray-800);
  font-size: 14px;
  font-weight: 600;
}

.recipe-card-heading--sm {
  font-size: 13px;
}

.recipe-card-heading__muted {
  color: var(--color-gray-400);
  font-weight: 400;
}

.recipe-mini-stat {
  min-width: 0;
}

.recipe-mini-stat__label {
  color: var(--gray-500);
  font-size: 10px;
}

.recipe-mini-stat__value {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 600;
}

.recipe-mini-stat__value--strong {
  font-weight: 700;
}

.recipe-mini-stat__value--success {
  color: var(--success);
}

.recipe-pricing-hint {
  color: var(--gray-400);
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}

.recipe-price-recommendation {
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--gray-200);
}

.recipe-price-recommendation__header,
.recipe-price-recommendation__main,
.recipe-price-recommendation__empty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.recipe-price-recommendation__main {
  margin-top: 5px;
}

.recipe-price-recommendation__empty-row {
  align-items: flex-end;
  margin-top: 6px;
}

.recipe-price-recommendation__eyebrow {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 650;
}

.recipe-price-recommendation__value {
  color: var(--gray-900);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.recipe-price-recommendation__status {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.recipe-price-recommendation__copy,
.recipe-price-recommendation__meta {
  color: var(--gray-500);
  font-size: 10px;
  line-height: 1.4;
}

.recipe-price-recommendation__copy {
  max-width: 220px;
}

.recipe-price-recommendation__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  white-space: nowrap;
}

.recipe-price-recommendation__action {
  min-height: 34px;
  padding: 7px 11px;
  border-color: var(--color-primary-200, #bfdbfe);
  color: var(--color-primary-700, #1d4ed8);
  white-space: nowrap;
}

.recipe-price-recommendation.is-below .recipe-price-recommendation__status {
  background: var(--color-warning-50, #fffbeb);
  color: var(--color-warning-700, #b45309);
}

.recipe-price-recommendation.is-met .recipe-price-recommendation__status {
  background: var(--color-success-50, #ecfdf5);
  color: var(--color-success-700, #047857);
}

.recipe-price-recommendation.is-unconfigured,
.recipe-price-recommendation.is-unavailable {
  color: var(--gray-500);
}

.recipe-pricing-support {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr)) minmax(105px, auto);
  align-items: end;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

.pricing-targets-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.85fr);
  gap: 20px;
  align-items: start;
}

.pricing-targets-section-heading h2 {
  margin: 0;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 650;
}

.pricing-targets-section-heading p {
  margin: 5px 0 0;
  color: var(--gray-500);
  font-size: 13px;
  line-height: 1.5;
}

.pricing-target-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.pricing-target-mode {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  min-height: 88px;
  padding: 15px;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  background: var(--color-white);
  color: var(--gray-700);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pricing-target-mode:hover {
  border-color: var(--color-warning);
}

.pricing-target-mode.is-active {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 3px var(--color-warning-light);
}

.pricing-target-mode > svg {
  width: 22px;
  height: 22px;
  color: var(--color-warning-dark);
}

.pricing-target-mode span,
.pricing-target-mode strong,
.pricing-target-mode small {
  display: block;
}

.pricing-target-mode strong {
  color: var(--gray-900);
  font-size: 14px;
}

.pricing-target-mode small {
  margin-top: 4px;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}

.pricing-target-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.pricing-target-percent-control {
  position: relative;
}

.pricing-target-percent-control .form-input {
  padding-right: 42px;
}

.pricing-target-percent-control > span {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--gray-500);
  font-weight: 600;
  transform: translateY(-50%);
  pointer-events: none;
}

.pricing-target-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.pricing-target-preview__result {
  margin-top: 18px;
  padding: 18px;
  border: 2px solid var(--color-warning);
  border-radius: 14px;
  background: var(--color-white);
}

.pricing-target-preview__result > span,
.pricing-target-preview__result > strong,
.pricing-target-preview__result > small {
  display: block;
}

.pricing-target-preview__result > span,
.pricing-target-preview__metric > span {
  color: var(--gray-500);
  font-size: 11px;
}

.pricing-target-preview__result > strong {
  margin-top: 4px;
  color: var(--gray-900);
  font-size: 28px;
  font-weight: 700;
}

.pricing-target-preview__result > small {
  margin-top: 5px;
  color: var(--gray-500);
  font-size: 11px;
}

.pricing-target-preview__metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-200);
}

.pricing-target-preview__metric > strong {
  color: var(--color-success-dark);
  font-size: 16px;
}

.pricing-target-preview__flow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--gray-500);
  font-size: 10px;
  line-height: 1.3;
}

.pricing-target-preview__flow svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.recipe-movement-history-btn {
  white-space: nowrap;
}

.recipe-used-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  flex: 0 1 auto;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
  cursor: pointer;
  transition: all 0.15s ease;
}

.recipe-used-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.recipe-used-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

.recipe-used-card__icon--prep {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.recipe-used-card__icon--dish {
  background: var(--primary-light);
  color: var(--primary);
}

.recipe-used-card__body {
  min-width: 0;
}

.recipe-used-card__title {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-used-card__meta {
  margin-top: 2px;
}

.recipe-used-card__qty {
  color: var(--gray-500);
  font-size: 12px;
}

.recipe-used-card__chevron {
  margin-left: auto;
  color: var(--gray-400);
  flex-shrink: 0;
}

.recipe-used-header {
  margin-bottom: 14px;
}

.recipe-inline-alert {
  font-weight: 500;
}

.recipe-cost-basis-hint {
  padding: 0 20px 12px;
  color: var(--color-warning-700);
  font-size: 11px;
}

.recipe-table-card {
  margin-bottom: 24px;
}

.recipe-table-actions {
  margin-left: auto;
}

.recipe-ingredients-table {
  width: 100%;
  table-layout: fixed;
}

.recipe-ingredients-col--drag { width: 3%; text-align: center; }
.recipe-ingredients-col--product { width: 40%; }
.recipe-ingredients-col--unit { width: 5%; text-align: center; }
.recipe-ingredients-col--gross { width: 8%; text-align: center; }
.recipe-ingredients-col--cold { width: 6%; text-align: center; }
.recipe-ingredients-col--after-cold { width: 10%; text-align: center; }
.recipe-ingredients-col--hot { width: 6%; text-align: center; }
.recipe-ingredients-col--after-hot { width: 8%; text-align: center; }
.recipe-ingredients-col--cost { width: 11%; text-align: left; }
.recipe-ingredients-col--actions { width: 3%; }

.recipe-ingredients-foot {
  background: var(--gray-50);
}

.recipe-ingredients-foot__row {
  border-top: 1px solid var(--gray-200);
}

.recipe-ingredients-foot__label {
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 600;
}

.recipe-ingredients-foot__number {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.recipe-ingredients-foot__money {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
}

.recipe-ingredients-yield-input {
  width: 72px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.recipe-ingredients-foot__unit,
.recipe-ingredients-foot__hint {
  color: var(--gray-400);
  font-size: 12px;
}

.recipe-ingredients-foot__hint {
  color: var(--gray-500);
  text-align: right;
  white-space: nowrap;
}

.recipe-ingredients-yield-cell {
  text-align: center;
}

.recipe-bottom-grid {
  margin-top: 4px;
}

.recipe-nutrition-cell {
  padding: 8px 12px;
  border-radius: 8px;
}

.recipe-nutrition-cell--calories {
  background: var(--color-warning-50);
  color: var(--color-warning-800);
}

.recipe-nutrition-cell--protein {
  background: var(--color-danger-50);
  color: var(--color-danger-800);
}

.recipe-nutrition-cell--fats {
  background: #fefce8;
  color: #854d0e;
}

.recipe-nutrition-cell--carbs {
  background: var(--color-success-50);
  color: var(--color-success-800);
}

.recipe-nutrition-cell__label {
  font-size: 11px;
}

.recipe-nutrition-cell__value {
  font-size: 14px;
  font-weight: 700;
}

.recipe-nutrition-info-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-warning-light);
  color: var(--color-warning-800);
  cursor: pointer;
}

.recipe-detail-textarea {
  height: 85px;
  resize: vertical;
}

.recipe-card-field-bottom {
  margin-bottom: 0;
}

.recipe-section-card {
  margin-top: 20px;
}

.recipe-section-card__title {
  font-size: 14px;
}

.recipe-modifier-menu-wrap {
  position: relative;
}

.recipe-modifier-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  max-height: 300px;
  margin-top: 4px;
  overflow-y: auto;
}

.recipe-empty-modifiers {
  padding: 32px;
  text-align: center;
}

.recipe-empty-modifiers__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  opacity: 0.4;
  stroke-width: 1.4;
}

.recipe-empty-modifiers__text {
  color: var(--color-gray-400);
  font-size: 13px;
}

.recipe-history-header {
  cursor: pointer;
  user-select: none;
}

.recipe-history-toggle {
  color: var(--gray-400);
  transition: transform 0.2s ease;
}

.recipe-history-content {
  display: none;
  border-top: 1px solid var(--color-gray-200);
}

.recipe-history-loading {
  padding: 16px 20px;
  color: var(--gray-400);
  font-size: 13px;
  text-align: center;
}

.recipe-ingredient-row {
  cursor: grab;
}

.recipe-ingredient-row__index {
  color: var(--gray-400);
  text-align: center;
}

.recipe-ingredient-row__drag-handle {
  margin-right: 2px;
  color: var(--gray-300);
  cursor: grab;
}

.recipe-ingredient-name {
  border-bottom: 1px dashed var(--gray-300);
  font-weight: 400;
  cursor: pointer;
}

.recipe-ingredient-save-state {
  color: var(--gray-400);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.recipe-ingredient-save-state.is-saving {
  color: var(--primary);
}

.recipe-ingredient-save-state.is-saved {
  color: var(--color-success-700);
}

.recipe-ingredient-save-state.is-error {
  color: var(--color-danger);
  font-weight: 600;
}

.recipe-ingredient-open {
  padding: 2px;
  opacity: 0.5;
}

.recipe-ingredient-cell--center {
  text-align: center;
}

.recipe-ingredient-cell--right {
  text-align: right;
  white-space: nowrap;
}

.recipe-ingredient-cell--right[data-recipe-ingredient-cost] {
  text-align: left;
}

.recipe-ingredient-input {
  text-align: center;
}

.recipe-ingredient-uom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.recipe-ingredient-uom__conversion {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  background: #fff;
  color: var(--gray-500);
}

.recipe-ingredient-uom__conversion svg,
.recipe-ingredient-uom__conversion i {
  width: 14px;
  height: 14px;
}

.recipe-ingredient-delete {
  color: var(--danger);
}

.recipe-ingredient-cost-missing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.recipe-ingredient-cost-warning-icon {
  flex-shrink: 0;
  cursor: pointer;
}

.recipe-ingredient-cost-empty {
  color: var(--gray-300);
}

.recipe-ingredient-cost-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
}

.recipe-ingredient-cost-primary {
  color: inherit;
  font-weight: 400;
}

.recipe-ingredient-cost-primary.is-estimated,
.recipe-ingredient-cost-note {
  color: var(--color-warning-700);
}

.recipe-ingredient-cost-secondary,
.recipe-ingredient-cost-note {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.erp-data-table.erp-data-table--precision-auto.recipe-ingredients-table
.recipe-ingredient-row > td:first-child {
  font-weight: 400;
}

.recipe-ingredient-cost-secondary {
  color: var(--color-gray-400);
}

.recipe-add-row__cell {
  padding: 0;
}

.recipe-add-row__wrap {
  position: relative;
  padding: 10px 14px;
}

.recipe-add-row__input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--gray-500);
  font-size: 13px;
  outline: 0;
}

.recipe-add-row__input:focus {
  color: var(--gray-900);
}

.recipe-ingredient-autocomplete {
  display: block;
  width: 100%;
}

.recipe-ingredient-autocomplete .pure-dropdown-trigger {
  min-height: 36px;
  padding: 8px 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.recipe-ingredient-autocomplete .pure-dropdown-trigger:hover,
.recipe-ingredient-autocomplete .pure-dropdown-trigger.open {
  border-color: transparent;
  box-shadow: none;
}

.recipe-ingredient-autocomplete .pure-dropdown-autocomplete-input {
  color: var(--gray-500);
  font-size: 13px;
}

.recipe-ingredient-autocomplete .pure-dropdown-autocomplete-input:focus {
  color: var(--gray-900);
}

.recipe-ingredient-type-label {
  margin-right: 4px;
  color: var(--recipe-ingredient-type-color);
}

.recipe-ingredient-type-label--prep {
  --recipe-ingredient-type-color: var(--gray-400);
}

.recipe-ingredient-type-label--dish {
  --recipe-ingredient-type-color: var(--color-primary);
}

.recipe-nutrition-children {
  margin-top: 6px;
}

.recipe-nutrition-children__summary {
  color: var(--color-gray-500);
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}

.recipe-nutrition-children__label {
  border-bottom: 1px dashed var(--color-gray-300);
}

.recipe-nutrition-children__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 7px;
}

.recipe-nutrition-child {
  padding: 6px 8px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: var(--color-gray-50);
}

.recipe-nutrition-child__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-gray-700);
  font-size: 11px;
}

.recipe-nutrition-child__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recipe-nutrition-child__kcal {
  color: var(--color-warning-800);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.recipe-nutrition-child__path {
  margin-top: 2px;
  color: var(--color-gray-400);
  font-size: 10px;
}

.recipe-nutrition-summary {
  margin-bottom: 14px;
}

.recipe-nutrition-summary-card {
  padding: 12px;
  border: 1px solid var(--recipe-nutrition-summary-border);
  border-radius: 10px;
  background: var(--recipe-nutrition-summary-bg);
  color: var(--recipe-nutrition-summary-color);
}

.recipe-nutrition-summary-card--calories {
  --recipe-nutrition-summary-bg: var(--color-warning-50);
  --recipe-nutrition-summary-border: var(--color-warning-200);
  --recipe-nutrition-summary-color: var(--color-warning-800);
}

.recipe-nutrition-summary-card--protein {
  --recipe-nutrition-summary-bg: var(--color-danger-50);
  --recipe-nutrition-summary-border: var(--color-danger-200);
  --recipe-nutrition-summary-color: var(--color-danger-800);
}

.recipe-nutrition-summary-card--fats {
  --recipe-nutrition-summary-bg: #fefce8;
  --recipe-nutrition-summary-border: #fef08a;
  --recipe-nutrition-summary-color: #854d0e;
}

.recipe-nutrition-summary-card--carbs {
  --recipe-nutrition-summary-bg: var(--color-success-50);
  --recipe-nutrition-summary-border: var(--color-success-200);
  --recipe-nutrition-summary-color: var(--color-success-800);
}

.recipe-nutrition-summary-card__label {
  margin-bottom: 4px;
  font-size: 11px;
}

.recipe-nutrition-summary-card__value {
  font-size: 20px;
  font-weight: 700;
}

.recipe-nutrition-breakdown {
  max-height: 520px;
  overflow: hidden auto;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}

.recipe-nutrition-breakdown__table {
  width: 100%;
  table-layout: fixed;
}

.recipe-nutrition-breakdown__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-gray-50);
}

.recipe-nutrition-breakdown__source-col { width: 38%; }
.recipe-nutrition-breakdown__qty-col,
.recipe-nutrition-breakdown__kcal-col { width: 12%; text-align: right; }
.recipe-nutrition-breakdown__macro-col { width: 10%; text-align: right; }
.recipe-nutrition-breakdown__percent-col { width: 8%; text-align: right; }

.recipe-nutrition-breakdown__source-cell {
  vertical-align: top;
}

.recipe-nutrition-breakdown__source-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-gray-900);
  font-weight: 700;
  line-height: 1.3;
}

.recipe-nutrition-breakdown__num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  vertical-align: top;
}

.recipe-nutrition-breakdown__num--muted {
  color: var(--color-gray-600);
}

.recipe-nutrition-breakdown__num--kcal {
  color: var(--color-warning-800);
  font-weight: 700;
}

.recipe-nutrition-breakdown__num--percent {
  color: var(--color-gray-500);
}

.recipe-nutrition-empty {
  padding: 18px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: var(--color-gray-50);
  color: var(--color-gray-500);
  font-size: 13px;
}

.recipe-nutrition-modal-copy {
  margin-bottom: 12px;
  color: var(--color-gray-600);
  font-size: 13px;
}

.recipe-modifier-analyzer {
  min-width: 0;
}

.recipe-modifier-analyzer__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-gray-200);
}

.recipe-modifier-analyzer__eyebrow {
  margin-bottom: 4px;
  color: var(--color-gray-400);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recipe-modifier-analyzer__base {
  color: var(--color-gray-700);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.recipe-modifier-analyzer__toolbar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.recipe-modifier-analyzer__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  align-items: start;
  gap: 18px;
}

.recipe-modifier-analyzer__groups {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.recipe-modifier-analyzer-group {
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: #fff;
}

.recipe-modifier-analyzer-group.is-pending {
  border-color: var(--color-warning-200);
}

.recipe-modifier-analyzer-group__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

.recipe-modifier-analyzer-group__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.recipe-modifier-analyzer-group__title {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 600;
}

.recipe-modifier-analyzer-group__rule {
  margin-top: 3px;
  color: var(--color-gray-500);
  font-size: 11px;
}

.recipe-modifier-analyzer-group__count {
  flex-shrink: 0;
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 600;
}

.recipe-modifier-analyzer-group__count.is-pending {
  color: var(--color-warning-700);
}

.recipe-modifier-analyzer-group__options {
  display: flex;
  flex-direction: column;
}

.recipe-modifier-analyzer-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-gray-100);
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.recipe-modifier-analyzer-option:last-child {
  border-bottom: 0;
}

.recipe-modifier-analyzer-option:hover {
  background: var(--color-primary-light);
}

.recipe-modifier-analyzer-option:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.recipe-modifier-analyzer-option.is-selected {
  background: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.recipe-modifier-analyzer-option.has-warning:not(.is-selected) {
  background: #fffdf7;
}

.recipe-modifier-analyzer-option__control {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-gray-300);
  background: #fff;
  color: #fff;
}

.recipe-modifier-analyzer-option__control--single {
  border-radius: 50%;
}

.recipe-modifier-analyzer-option__control--multiple {
  border-radius: 5px;
}

.recipe-modifier-analyzer-option.is-selected .recipe-modifier-analyzer-option__control {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.recipe-modifier-analyzer-option__body,
.recipe-modifier-analyzer-option__economics {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.recipe-modifier-analyzer-option__title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.recipe-modifier-analyzer-option__title {
  min-width: 0;
  overflow: hidden;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-modifier-analyzer-option__source,
.recipe-modifier-analyzer-option__metrics,
.recipe-modifier-analyzer-option__price {
  color: var(--color-gray-500);
  font-size: 10px;
  line-height: 1.4;
}

.recipe-modifier-analyzer-option__metrics {
  margin-top: 2px;
  color: var(--color-gray-600);
  font-variant-numeric: tabular-nums;
}

.recipe-modifier-analyzer-option__economics {
  align-items: flex-end;
  gap: 3px;
  text-align: right;
  white-space: nowrap;
}

.recipe-modifier-analyzer-option__cost {
  color: var(--color-gray-800);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.recipe-modifier-analyzer-result {
  position: sticky;
  top: 0;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.recipe-modifier-analyzer-result__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--color-gray-200);
}

.recipe-modifier-analyzer-result__kicker {
  margin-bottom: 2px;
  color: var(--color-gray-400);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.recipe-modifier-analyzer-result__title {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 14px;
  font-weight: 600;
}

.recipe-modifier-analyzer-result__notice {
  margin: 10px 12px 0;
}

.recipe-modifier-analyzer-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.recipe-modifier-analyzer-metric {
  padding: 9px 10px;
  border: 1px solid var(--recipe-modifier-metric-border);
  border-radius: 9px;
  background: var(--recipe-modifier-metric-bg);
  color: var(--recipe-modifier-metric-color);
}

.recipe-modifier-analyzer-metric--calories {
  --recipe-modifier-metric-bg: var(--color-warning-50);
  --recipe-modifier-metric-border: var(--color-warning-200);
  --recipe-modifier-metric-color: var(--color-warning-800);
}

.recipe-modifier-analyzer-metric--protein {
  --recipe-modifier-metric-bg: var(--color-danger-50);
  --recipe-modifier-metric-border: var(--color-danger-200);
  --recipe-modifier-metric-color: var(--color-danger-800);
}

.recipe-modifier-analyzer-metric--fats {
  --recipe-modifier-metric-bg: #fefce8;
  --recipe-modifier-metric-border: #fef08a;
  --recipe-modifier-metric-color: #854d0e;
}

.recipe-modifier-analyzer-metric--carbs {
  --recipe-modifier-metric-bg: var(--color-success-50);
  --recipe-modifier-metric-border: var(--color-success-200);
  --recipe-modifier-metric-color: var(--color-success-800);
}

.recipe-modifier-analyzer-metric__label {
  font-size: 10px;
}

.recipe-modifier-analyzer-metric__value {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.recipe-modifier-analyzer-metric__delta {
  margin-top: 1px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.78;
}

.recipe-modifier-analyzer-finance {
  padding: 2px 14px 14px;
}

.recipe-modifier-analyzer-finance__basis {
  padding: 8px 0;
  border-top: 1px solid var(--color-gray-200);
  color: var(--color-gray-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recipe-modifier-analyzer-finance__row,
.recipe-modifier-analyzer-finance__subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.recipe-modifier-analyzer-finance__row {
  min-height: 34px;
  color: var(--color-gray-700);
  font-size: 12px;
}

.recipe-modifier-analyzer-finance__subrow {
  padding-bottom: 6px;
  color: var(--color-gray-400);
  font-size: 10px;
}

.recipe-modifier-analyzer-finance__row--food-cost {
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--color-gray-200);
}

.recipe-modifier-analyzer-finance__row--food-cost strong {
  font-size: 17px;
}

.recipe-modifier-analyzer-finance strong.is-success {
  color: var(--color-success-700);
}

.recipe-modifier-analyzer-finance strong.is-warning {
  color: var(--color-warning-700);
}

.recipe-modifier-analyzer-finance strong.is-danger {
  color: var(--color-danger-700);
}

.recipe-modifier-analyzer-all__note {
  margin-bottom: 14px;
}

.recipe-modifier-analyzer-table-section {
  margin-bottom: 16px;
}

.recipe-modifier-analyzer-table-section:last-child {
  margin-bottom: 0;
}

.recipe-modifier-analyzer-table-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.recipe-modifier-analyzer-table-section__head h4 {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 600;
}

.recipe-modifier-analyzer-table-section__head span {
  color: var(--color-gray-400);
  font-size: 10px;
}

.recipe-modifier-analyzer-table-wrap {
  overflow-x: auto;
}

.recipe-modifier-analyzer-table {
  min-width: 760px;
}

.recipe-modifier-analyzer-table__option {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-900);
  font-weight: 600;
}

.recipe-modifier-analyzer-table__source {
  margin-top: 2px;
  color: var(--color-gray-400);
  font-size: 10px;
}

@media (max-width: 900px) {
  .recipe-modifier-analyzer__layout {
    grid-template-columns: 1fr;
  }

  .recipe-modifier-analyzer-result {
    position: static;
    grid-row: 1;
  }
}

@media (max-width: 640px) {
  .recipe-modifier-analyzer__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .recipe-modifier-analyzer__toolbar-controls {
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
  }

  .recipe-modifier-analyzer__toolbar-controls .erp-segmented {
    width: 100%;
  }

  .recipe-modifier-analyzer__toolbar-controls .erp-segmented__button {
    min-height: 44px;
    flex: 1;
  }

  .recipe-modifier-analyzer-option {
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 76px;
  }

  .recipe-modifier-analyzer-option__economics {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    gap: 8px;
    text-align: left;
  }

  .recipe-modifier-analyzer-option__title {
    white-space: normal;
  }
}

.recipe-autocomplete-create {
  color: var(--primary);
  font-weight: 500;
  border-top: 1px solid var(--gray-200);
}

.recipe-inline-create {
  padding: 10px 12px;
}

.recipe-inline-create__title {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
}

.recipe-inline-create .form-label {
  margin-bottom: 3px;
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 600;
}

.recipe-inline-create .core-context-help--field {
  width: 15px;
  height: 15px;
}

.recipe-inline-create__input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 7px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}

.recipe-inline-create__category {
  flex: 1;
}

.recipe-inline-create__uom {
  width: 80px;
}

.recipe-inline-create__submit {
  flex: 1;
  padding: 6px 0;
  border-radius: 6px;
  font-size: 12px;
}

.recipe-inline-create__cancel {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.recipe-station-empty {
  padding: 32px;
  color: var(--color-gray-400);
  text-align: center;
}

.recipe-station-empty__title {
  font-size: 14px;
}

.recipe-station-empty__text {
  font-size: 12px;
}

.recipe-station-summary {
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: #f0f9ff;
}

.recipe-station-summary__count {
  color: #0369a1;
  font-size: 13px;
  font-weight: 500;
}

.recipe-station-summary__clear {
  border: 0;
  background: none;
  color: var(--color-danger);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
}

.recipe-station-group {
  margin-bottom: 6px;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
}

.recipe-station-group__header {
  padding: 10px 14px;
  background: var(--color-gray-50);
  cursor: pointer;
  user-select: none;
}

.recipe-station-group__arrow {
  color: var(--color-gray-500);
  transition: transform 0.2s;
}

.recipe-station-group__arrow.is-open {
  transform: rotate(90deg);
}

.recipe-station-group__name {
  color: var(--color-gray-700);
  font-size: 13px;
  font-weight: 600;
}

.recipe-station-group__active-count {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.recipe-station-group__total {
  color: var(--color-gray-400);
  font-size: 11px;
}

.recipe-station-group__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.recipe-station-group__body.is-open {
  max-height: 500px;
}

.recipe-station-group__body-inner {
  padding: 10px 14px;
}

.recipe-station-choice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 2px solid var(--color-gray-200);
  border-radius: 20px;
  background: #fff;
  color: var(--color-gray-400);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.recipe-station-choice:hover {
  border-color: var(--recipe-station-color, var(--color-gray-300));
}

.recipe-station-choice.is-active {
  border-color: var(--recipe-station-color, var(--color-primary));
  background: var(--recipe-station-color-soft, var(--primary-light));
  color: var(--recipe-station-color, var(--color-primary));
}

.recipe-batch-loss-field--hot {
  margin-top: 12px;
}

.recipe-batch-loss-field--overwrite {
  margin-top: 8px;
}

.recipe-batch-loss-label {
  color: var(--text-secondary);
  font-size: 13px;
}

.recipe-swap-results {
  max-height: 240px;
  margin-top: 8px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}

.recipe-swap-empty,
.recipe-swap-error {
  padding: 12px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.recipe-swap-error {
  padding: 8px;
  color: var(--danger);
}

.recipe-swap-option {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
  cursor: pointer;
}

.recipe-swap-option__body {
  min-width: 0;
}

.recipe-swap-option__type {
  color: var(--recipe-swap-type-color, var(--text-tertiary));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.recipe-swap-option__type--dish {
  --recipe-swap-type-color: var(--color-primary);
}

.recipe-swap-option__type--prep {
  --recipe-swap-type-color: var(--color-warning-dark);
}

.recipe-swap-option__name {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-swap-option__uom {
  color: var(--text-tertiary);
  font-size: 12px;
}

@media (max-width: 1500px) {
  .recipe-detail-v3__stats-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .recipe-detail-v3__stats-row .pricing-card-v3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .recipe-detail-v3__stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recipe-form-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .pricing-targets-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .recipe-form-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-target-mode-grid,
  .pricing-target-fields {
    grid-template-columns: 1fr;
  }

  .pricing-target-mode {
    min-height: 76px;
  }

  .recipe-price-recommendation__header,
  .recipe-price-recommendation__main,
  .recipe-price-recommendation__empty-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .recipe-price-recommendation .btn {
    width: 100%;
    min-height: 44px;
  }

  .recipe-price-recommendation__meta {
    flex-wrap: wrap;
    white-space: normal;
  }

  .recipe-pricing-compare {
    grid-template-columns: 1fr;
  }

  .recipe-price-recommendation {
    padding-top: 16px;
    padding-left: 0;
    border-top: 1px solid var(--gray-200);
    border-left: 0;
  }

  .recipe-pricing-support {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recipe-pricing-hint {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 600px) {
  .recipe-detail-v3__stats-row {
    grid-template-columns: 1fr;
  }

  .recipe-detail-v3__stats-row .pricing-card-v3 {
    grid-column: auto;
  }
}

/* ==================== DATA TABLES (v3.1) ==================== */

/* Table Container with Card Wrapper */
.table-card {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  max-width: 100%;
}

/* Legacy alias */
.table-container {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Table Header Bar */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gray-100);
  background: white;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-title .count {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
}

.table-actions {
  display: flex;
  gap: 8px;
}

/* Responsive Wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Base Table */
table,
.table-v3 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead,
.table-v3 thead {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

th,
.table-v3 th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.3px;
  color: var(--gray-500);
  white-space: nowrap;
}

/* Table header cells */
.table-card th {
  position: relative;
}

/* No resize on actions column */
.table-card th.col-actions,
.table-card td.col-actions {
  resize: none;
  min-width: 32px;
  width: 32px;
  max-width: 32px;
  padding: 0 !important;
}

/* Inputs inside table-card — flat by default, border on focus */
.table-card .inline-input,
.table-card input,
.table-card [contenteditable] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: all 0.15s ease;
}

.table-card input:hover,
.table-card .inline-input:hover {
  background: var(--gray-50);
  border-color: var(--gray-200);
}

.table-card input:focus,
.table-card .inline-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-hover-rgb), 0.08);
}

/* Consistent padding for col-money / col-center — th and td must match for alignment */
.table-card th.col-money,
.table-card td.col-money,
.table-card th.col-center,
.table-card td.col-center {
  padding-left: 8px;
  padding-right: 8px;
}

/* Remove horizontal padding from inputs inside aligned columns —
   td padding handles offset, input padding would double it */
.table-card td.col-money input,
.table-card td.col-money .inline-input,
.table-card td.col-center input,
.table-card td.col-center .inline-input {
  padding-left: 0;
  padding-right: 0;
}

td,
.table-v3 td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-50);
  color: var(--gray-700);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Compact variant for dense multi-column tables (e.g. ingredients) */
.table-compact th {
  padding: 6px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-compact td {
  padding: 6px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-compact .inline-input {
  padding: 4px 4px;
  font-size: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Row Hover */
tbody tr,
.table-v3 tbody tr {
  transition: background 0.15s;
}

tbody tr:hover,
.table-v3 tbody tr:hover {
  background: rgba(var(--color-primary-rgb), 0.03);
}

/* Table footer rows */
.table-v3 tfoot td {
  border-bottom: none;
  padding: 10px 16px;
}

.table-v3 tfoot tr:first-child {
  border-top: 1px solid var(--gray-200);
}

.table-v3 tfoot tr:first-child td {
  padding-top: 14px;
}

/* Supplier invoice audit trail */
.invoice-audit-table {
  min-width: 720px;
  table-layout: fixed;
}

.invoice-audit-table th:nth-child(1),
.invoice-audit-table td:nth-child(1) {
  width: 180px;
}

.invoice-audit-table th:nth-child(2),
.invoice-audit-table td:nth-child(2) {
  width: 220px;
}

.invoice-audit-table td {
  vertical-align: top;
}

.invoice-audit-table__date,
.invoice-audit-table__user {
  color: var(--text-secondary-strong, #475569);
  white-space: nowrap;
}

.invoice-audit-change {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.invoice-audit-change__title {
  color: var(--text-primary, #0f172a);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.invoice-audit-change__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--text-secondary-strong, #475569);
  font-size: 13px;
  line-height: 1.45;
}

.invoice-audit-change__fact {
  display: inline-flex;
  gap: 4px;
  min-width: 0;
}

.invoice-audit-change__label {
  color: var(--text-secondary, #64748b);
}

.invoice-audit-change__note {
  max-width: 900px;
  padding: 7px 10px;
  border-left: 2px solid var(--gray-300, #cbd5e1);
  border-radius: 0 6px 6px 0;
  background: var(--gray-50, #f8fafc);
  color: var(--text-secondary-strong, #475569);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ==================== HR MONTHLY SCHEDULE PLANNER ==================== */
.schedule-page-shell {
  display: grid;
  gap: 14px;
}

.schedule-header-search {
  min-width: min(360px, 100%);
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.schedule-header-search--filter {
  width: 100%;
  min-width: 0;
  box-shadow: none;
}

.schedule-header-search i,
.schedule-header-search svg {
  width: 15px;
  height: 15px;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

.schedule-header-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
}

.schedule-header-search input:focus {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.schedule-month-nav,
.schedule-filter-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-month-nav {
  flex-wrap: nowrap;
  gap: 6px;
}

.schedule-period-control {
  min-height: 36px;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: #fff;
}

.schedule-period-control__button {
  width: 36px;
  min-width: 36px;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: #fff;
  color: var(--color-gray-600);
  cursor: pointer;
}

.schedule-period-control__button:first-child {
  border-right: 1px solid var(--color-gray-200);
}

.schedule-period-control__button:last-child {
  border-left: 1px solid var(--color-gray-200);
}

.schedule-period-control__button:hover,
.schedule-period-control__current:hover {
  background: var(--color-gray-50);
}

.schedule-period-control__button i,
.schedule-period-control__button svg {
  width: 15px;
  height: 15px;
}

.schedule-period-control__current {
  min-width: 124px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  color: var(--color-gray-600);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.schedule-toolbar-row {
  align-items: flex-start;
  gap: 10px;
}

.schedule-toolbar-row .schedule-month-nav {
  flex: 0 0 auto;
}

.schedule-filter-strip {
  flex: 1 1 560px;
  display: grid;
  grid-template-columns: minmax(250px, 1.4fr) repeat(5, minmax(132px, 1fr)) auto auto;
  align-items: center;
  margin-left: 0;
  justify-content: stretch;
}

.schedule-mobile-filter-trigger {
  display: none;
}

.schedule-mobile-filter-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--color-gray-700);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  cursor: pointer;
}

.schedule-mobile-filter-btn i,
.schedule-mobile-filter-btn svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary);
}

.schedule-mobile-filter-btn strong {
  min-width: 18px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
}

.schedule-filter-control,
.schedule-filter-control .pure-dropdown,
.schedule-filter-control .pure-dropdown-trigger,
.schedule-filter-control .multi-select-dropdown,
.schedule-filter-control .multi-select-trigger,
.schedule-filter-strip .schedule-multi-filter,
.schedule-filter-strip .schedule-multi-filter .multi-select-trigger {
  width: 100%;
  min-width: 0;
}

.schedule-multi-filter .multi-select-trigger {
  min-height: 36px;
  padding: 8px 12px;
  border-color: var(--color-gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 500;
}

.schedule-multi-filter .multi-select-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-multi-filter .multi-select-trigger svg,
.schedule-multi-filter .multi-select-trigger i {
  width: 15px;
  height: 15px;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

.schedule-multi-filter__menu {
  min-width: 240px;
}

.schedule-filter-modal {
  display: grid;
  gap: 12px;
}

.schedule-filter-modal__grid {
  display: grid;
  gap: 12px;
}

.schedule-filter-modal .schedule-header-search {
  width: 100%;
  min-width: 0;
}

.schedule-filter-modal .schedule-filter-control,
.schedule-filter-modal .schedule-filter-control .pure-dropdown,
.schedule-filter-modal .schedule-filter-control .pure-dropdown-trigger,
.schedule-filter-modal .schedule-filter-control .multi-select-dropdown,
.schedule-filter-modal .schedule-filter-control .multi-select-trigger {
  width: 100%;
  min-width: 0;
}

.schedule-multi-filter__search {
  border-bottom: 1px solid var(--color-gray-200);
}

.schedule-multi-filter__options {
  max-height: 240px;
  overflow: auto;
}

.schedule-multi-filter__option {
  gap: 8px;
  font-size: 13px;
}

.schedule-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
}

.schedule-stat-card.stat-card-u {
  min-height: 76px;
  padding: 14px;
  border-radius: 8px;
  box-shadow: none;
}

.schedule-stat-card.stat-card-u:hover {
  box-shadow: var(--shadow-sm);
}

.schedule-stat-card .stat-card-u__metric-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 9px;
  border-radius: 8px;
}

.schedule-stat-card .stat-card-u__metric-icon i,
.schedule-stat-card .stat-card-u__metric-icon svg {
  width: 16px;
  height: 16px;
}

.schedule-stat-card .stat-card-u__label {
  margin-bottom: 4px;
  color: var(--color-gray-500);
}

.schedule-stat-card .stat-card-u__value {
  font-size: 22px;
}

.schedule-help-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--color-gray-600);
}

.schedule-help-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--color-gray-600);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.schedule-help-strip__item + .schedule-help-strip__item {
  padding-left: 10px;
  border-left: 1px solid var(--color-gray-200);
}

.schedule-help-strip__item i,
.schedule-help-strip__item svg {
  width: 14px;
  height: 14px;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.schedule-help-strip__item strong {
  color: var(--color-gray-900);
  font-weight: 750;
}

.schedule-help-strip__item span:not(.schedule-help-kbd) {
  color: var(--color-gray-500);
}

.schedule-help-kbd {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-300);
  border-radius: 6px;
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  font-size: 12px;
  font-weight: 800;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.schedule-help-strip__item--locked strong,
.schedule-help-strip__item--locked i,
.schedule-help-strip__item--locked svg {
  color: var(--color-warning-700);
}

.schedule-locked-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-warning-200);
  border-radius: 8px;
  background: var(--color-warning-50);
  color: #78350f;
}

.schedule-locked-banner i,
.schedule-locked-banner svg {
  width: 18px;
  height: 18px;
  color: var(--color-warning-700);
  flex-shrink: 0;
  margin-top: 1px;
}

.schedule-locked-banner strong {
  display: block;
  font-size: 13px;
  color: var(--color-warning-800);
}

.schedule-locked-banner span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #78350f;
}

.schedule-bulk-bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.schedule-bulk-bar--idle strong,
.schedule-bulk-count strong {
  display: block;
  font-size: 14px;
  color: var(--color-gray-900);
}

.schedule-bulk-bar--idle span,
.schedule-bulk-count span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-gray-500);
}

.schedule-bulk-bar.is-active {
  position: sticky;
  top: 12px;
  z-index: 20;
  border-color: var(--color-gray-300);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.schedule-bulk-count {
  min-width: 82px;
  padding-right: 12px;
  border-right: 1px solid var(--color-gray-200);
}

.schedule-bulk-count strong {
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.schedule-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.schedule-remove-employee-btn {
  color: var(--color-danger-700);
  border-color: var(--color-danger-200);
  background: #fff7f7;
}

.schedule-remove-employee-btn:hover {
  color: var(--color-danger-800);
  border-color: var(--color-danger-300);
  background: var(--color-danger-light);
}

.schedule-planner-card {
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.schedule-planner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-gray-200);
  background: #fff;
}

.schedule-planner-title {
  font-size: 15px;
  font-weight: 750;
  color: var(--color-gray-900);
}

.schedule-planner-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-gray-500);
}

.schedule-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  color: var(--color-gray-600);
}

.schedule-legend-dot {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.schedule-legend-dot--scheduled { background: var(--color-primary); }
.schedule-legend-dot--worked { background: var(--color-success-strong); }
.schedule-legend-dot--day_off { background: var(--color-gray-400); }
.schedule-legend-dot--absent { background: var(--color-danger); }
.schedule-legend-dot--leave { background: #8b5cf6; }
.schedule-legend-dot--empty {
  background: #fff7ed;
  border: 1px dashed var(--color-warning);
}

.schedule-grid-scroll {
  overflow: auto;
  height: clamp(520px, calc(100vh - 280px), 780px);
  max-height: none;
  min-height: 520px;
}

.schedule-grid {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 1640px;
  width: 100%;
  font-size: 12px;
}

.schedule-grid__employee-col {
  width: 320px;
}

.schedule-grid__day-col {
  width: 44px;
}

.schedule-grid thead th {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 0;
  background: var(--color-gray-50);
  border-bottom: 1px solid #dbe3ef;
}

.schedule-grid__employee-head {
  left: 0;
  z-index: 10 !important;
  border-right: 1px solid #dbe3ef;
}

.schedule-employee-head-inner {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--color-gray-600);
  font-size: 11px;
  font-weight: 750;
  text-transform: none;
  letter-spacing: 0.04em;
}

.schedule-grid__day-head {
  border-right: 1px solid var(--color-gray-200);
}

.schedule-grid__day-head.is-weekend {
  background: var(--color-gray-100);
}

.schedule-grid__day-head.is-today {
  background: var(--primary-light);
}

.schedule-day-button {
  width: 100%;
  min-height: 44px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 0;
  background: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  font: inherit;
}

.schedule-day-button:hover {
  background: var(--color-gray-100);
}

.schedule-day-button span {
  font-size: 10px;
  font-weight: 750;
}

.schedule-day-button strong {
  font-size: 12px;
  color: var(--color-gray-900);
  font-variant-numeric: tabular-nums;
}

.schedule-group-row td {
  position: sticky;
  left: 0;
  z-index: 7;
  padding: 0;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

.schedule-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px;
}

.schedule-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.schedule-group-toggle i,
.schedule-group-toggle svg {
  width: 15px;
  height: 15px;
  color: var(--color-gray-500);
}

.schedule-group-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--color-gray-500);
}

.schedule-group-meta span,
.schedule-group-meta strong {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: #fff;
  font-weight: 650;
}

.schedule-group .btn {
  margin-left: auto;
}

.schedule-employee-row td {
  border-bottom: 1px solid #eef2f7;
}

.schedule-grid__employee-cell {
  position: sticky;
  left: 0;
  z-index: 5;
  padding: 0;
  background: #fff;
  border-right: 1px solid var(--color-gray-200);
}

.schedule-employee-card {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
}

.schedule-employee-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 50%;
  background: var(--color-gray-50);
  color: var(--color-gray-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.schedule-employee-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.schedule-employee-avatar--initials {
  background: #eef2ff;
  border-color: #dbe3ff;
  color: var(--color-gray-700);
}

.schedule-employee-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.schedule-employee-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 750;
}

.schedule-employee-copy span,
.schedule-employee-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-500);
  font-size: 11px;
  font-style: normal;
}

.schedule-employee-copy em {
  color: var(--color-gray-400);
}

.schedule-grid__cell {
  padding: 4px 3px;
  background: #fff;
  border-right: 1px solid #eef2f7;
  vertical-align: middle;
}

.schedule-grid__cell.is-weekend {
  background: var(--color-gray-50);
}

.schedule-grid__cell.is-today {
  background: var(--primary-light);
}

.schedule-grid__cell.is-selected {
  background: var(--color-gray-100);
  box-shadow: inset 0 0 0 1px var(--color-gray-400);
}

.schedule-grid__cell.is-dimmed .schedule-cell {
  opacity: 0.3;
}

.schedule-cell {
  position: relative;
  height: 34px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 3px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.schedule-cell:hover {
  border-color: rgba(15, 23, 42, 0.22);
}

.schedule-cell--scheduled {
  background: var(--color-primary);
  color: #fff;
}

.schedule-cell--worked {
  background: var(--color-success-strong);
  color: #fff;
}

.schedule-cell--day_off {
  background: var(--color-gray-400);
  color: #fff;
}

.schedule-cell--absent {
  background: var(--color-danger-dark);
  color: #fff;
}

.schedule-cell--leave {
  background: #7c3aed;
  color: #fff;
}

.schedule-self-day-row--leave,
.schedule-self-month-day--leave {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
}

.schedule-self-hero--leave {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 68%);
}

/* Employee HR workspace */
.hr-workspace-stats {
  margin-bottom: 20px;
}

.hr-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.hr-workspace-panel {
  min-width: 0;
}

.hr-workspace-panel--wide,
.hr-workspace-panel--table {
  grid-column: 1 / -1;
}

.hr-workspace-panel + .hr-workspace-panel--table,
.hr-info-panel + .hr-workspace-panel {
  margin-top: 20px;
}

.hr-workspace-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.hr-workspace-panel__head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hr-workspace-panel__head span,
.hr-workspace-panel__head em {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: normal;
}

.hr-workspace-panel__head strong {
  color: var(--text-primary);
  font-size: 17px;
}

.hr-balance-hero {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) minmax(180px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--gray-50);
}

.hr-balance-hero > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hr-balance-hero span,
.hr-balance-hero em {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: normal;
}

.hr-balance-hero strong {
  color: var(--text-primary);
  font-size: 24px;
  letter-spacing: -0.03em;
}

.hr-detail-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
}

.hr-detail-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}

.hr-detail-list > div:last-child {
  border-bottom: 0;
}

.hr-detail-list span {
  color: var(--text-secondary);
}

.hr-detail-list strong {
  color: var(--text-primary);
  text-align: right;
}

.hr-my-profile-page .hr-workspace-panel__head > div {
  gap: 6px;
}

.hr-my-profile-page .hr-workspace-panel__head span,
.hr-my-profile-page .hr-workspace-panel__head strong {
  line-height: 1.35;
}

.hr-my-profile-page .hr-detail-list > div {
  display: grid;
  grid-template-columns: minmax(108px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  column-gap: 24px;
  padding: 9px 0;
}

.hr-my-profile-page .hr-detail-list span,
.hr-my-profile-page .hr-detail-list strong {
  display: block;
  min-width: 0;
  line-height: 1.4;
}

.hr-my-profile-page .hr-detail-list strong {
  overflow-wrap: anywhere;
}

.hr-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.hr-gratuity-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hr-gratuity-summary > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
}

.hr-gratuity-summary span {
  color: var(--text-secondary);
  font-size: 12px;
}

.hr-gratuity-summary strong {
  color: var(--text-primary);
  font-size: 17px;
}

.hr-info-panel {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #3730a3;
}

.hr-info-panel--compact {
  padding: 12px 14px;
}

.hr-info-panel > i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.hr-info-panel > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hr-info-panel strong {
  font-size: 14px;
}

.hr-info-panel span,
.hr-info-panel p {
  margin: 0;
  color: #4f46e5;
  font-size: 12px;
  line-height: 1.5;
}

.hr-modal-danger-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--gray-200);
  color: var(--text-secondary);
  font-size: 13px;
}

.hr-leave-request-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hr-leave-request-card {
  min-width: 0;
}

.hr-leave-request-card__head,
.hr-leave-request-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.hr-leave-request-card__person {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  cursor: pointer;
}

.hr-leave-request-card__person > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hr-leave-request-card__person strong {
  color: var(--text-primary);
  font-size: 14px;
}

.hr-leave-request-card__person span,
.hr-leave-request-card__footer > span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-leave-request-card__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 0;
  margin-top: 14px;
  border-top: 1px solid var(--gray-100);
}

.hr-leave-request-card__body > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hr-leave-request-card__body span {
  color: var(--text-secondary);
  font-size: 11px;
}

.hr-leave-request-card__body strong {
  color: var(--text-primary);
  font-size: 13px;
}

.hr-leave-request-card__note {
  padding: 10px 12px;
  margin: 0 0 14px;
  border-radius: 8px;
  background: var(--gray-50);
  color: var(--text-secondary);
  font-size: 12px;
}

.hr-leave-request-card__footer {
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.hr-leave-request-card__footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

@media (max-width: 900px) {
  .hr-workspace-grid,
  .hr-leave-request-grid {
    grid-template-columns: 1fr;
  }

  .hr-gratuity-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hr-workspace-panel__head,
  .hr-leave-request-card__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .hr-balance-hero {
    grid-template-columns: 1fr;
  }

  .hr-my-profile-page .hr-detail-list > div {
    grid-template-columns: minmax(92px, 0.75fr) minmax(0, 1.25fr);
    column-gap: 16px;
  }

  .hr-leave-request-card__body {
    grid-template-columns: 1fr;
  }

  .hr-leave-request-card__footer > div {
    width: 100%;
  }

  .hr-leave-request-card__footer .btn {
    flex: 1 1 140px;
  }
}

.schedule-cell--empty {
  border: 1px dashed var(--color-warning);
  background: #fff7ed;
  color: var(--color-warning-700);
}

.schedule-cell-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.schedule-cell-status i,
.schedule-cell-status svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.schedule-cell-status strong {
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
}

.schedule-cell-time {
  width: 100%;
  font-size: 9px;
  line-height: 1;
  font-weight: 750;
  opacity: 0.95;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.schedule-cell-attendance {
  position: absolute;
  right: 2px;
  bottom: 2px;
  max-width: calc(100% - 4px);
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-gray-700);
  font-size: 8px;
  line-height: 1.1;
  font-weight: 850;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.schedule-cell-attendance--success {
  color: var(--color-success-700);
}

.schedule-cell-attendance--warning {
  color: var(--color-warning-700);
}

.schedule-cell-attendance--danger {
  color: var(--color-danger-700);
}

.schedule-cell-attendance--info {
  color: #0369a1;
}

.schedule-attendance-panel {
  border: 1px solid var(--color-primary-100);
  border-radius: 10px;
  background: #f8fbff;
  padding: 14px;
}

.schedule-attendance-panel--danger {
  border-color: var(--color-danger-200);
  background: #fff7f7;
}

.schedule-attendance-panel--warning {
  border-color: var(--color-warning-200);
  background: var(--color-warning-50);
}

.schedule-attendance-panel--success {
  border-color: var(--color-success-200);
  background: var(--color-success-50);
}

.schedule-attendance-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.schedule-attendance-panel__head > i,
.schedule-attendance-panel__head > svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.schedule-attendance-panel__head div {
  min-width: 0;
  flex: 1;
}

.schedule-attendance-panel__head strong {
  display: block;
  font-size: 14px;
  color: var(--color-gray-900);
}

.schedule-attendance-panel__head span,
.attendance-muted {
  display: block;
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 2px;
}

.schedule-attendance-panel__head em {
  font-style: normal;
  font-size: 11px;
  font-weight: 750;
  color: var(--color-gray-600);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

.schedule-attendance-actual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.schedule-attendance-actual__item {
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  padding: 10px 12px;
}

.schedule-attendance-actual__item span {
  display: block;
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
}

.schedule-attendance-actual__item strong {
  display: block;
  margin-top: 4px;
  color: var(--color-gray-900);
  font-size: 18px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.schedule-attendance-actual.is-empty .schedule-attendance-actual__item strong {
  color: var(--color-gray-400);
  font-size: 14px;
}

.schedule-attendance-deltas,
.schedule-attendance-payable {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.schedule-attendance-delta {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  padding: 8px;
}

.schedule-attendance-delta span {
  display: block;
  color: var(--color-gray-500);
  font-size: 11px;
}

.schedule-attendance-delta strong {
  display: block;
  margin-top: 2px;
  color: var(--color-gray-900);
  font-size: 14px;
}

.schedule-attendance-delta--danger strong {
  color: var(--color-danger-700);
}

.schedule-attendance-delta--info strong {
  color: #0369a1;
}

.schedule-attendance-delta--success strong {
  color: var(--color-success-700);
}

.schedule-attendance-events {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.schedule-attendance-event {
  display: grid;
  grid-template-columns: 80px 56px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--color-gray-600);
}

.schedule-attendance-event strong {
  color: var(--color-gray-900);
  font-variant-numeric: tabular-nums;
}

.schedule-attendance-event em {
  font-style: normal;
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-attendance-decision {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  margin-top: 12px;
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.schedule-attendance-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.schedule-attendance-actions span {
  color: var(--color-gray-500);
  font-size: 12px;
}

.schedule-attendance-empty {
  grid-column: 1 / -1;
  color: var(--color-gray-500);
  font-size: 12px;
}

.attendance-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.attendance-report-date-picker {
  width: 178px;
}

.attendance-report-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.attendance-report-nav__date {
  width: 178px;
  min-width: 0;
}

.attendance-report-filter-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.attendance-report-mobile-filter-trigger {
  display: none;
}

.attendance-report-filter-control,
.attendance-report-filter-control .pure-dropdown,
.attendance-report-filter-control .pure-dropdown-trigger {
  width: 100%;
  min-width: 0;
}

.attendance-report-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.attendance-report-head h3 {
  margin: 0;
  font-size: 18px;
}

.attendance-report-head span,
.attendance-report-table .muted {
  color: var(--color-gray-500);
  font-size: 12px;
}

.attendance-report-table-wrap {
  overflow: auto;
}

@media (max-width: 1200px) {
  .attendance-report-filter-strip {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
}

@media (max-width: 760px) {
  .attendance-report-nav {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .attendance-report-nav__prev,
  .attendance-report-nav__next {
    min-width: 0;
    width: 42px !important;
  }

  .attendance-report-nav__date,
  .attendance-report-date-picker {
    width: 100%;
  }

  .attendance-report-nav__today {
    grid-column: 1 / 2;
  }

  .attendance-report-nav__month {
    grid-column: 2 / 4;
  }

  .attendance-report-filter-strip {
    display: none;
  }

  .attendance-report-mobile-filter-trigger {
    display: inline-flex;
  }
}

.attendance-dayoff-toggle-row td {
  padding: 14px 20px;
  background: var(--color-gray-50);
  border-top: 1px solid var(--gray-100);
  text-align: center;
}

.attendance-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 750;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  white-space: nowrap;
}

.attendance-status-pill--success {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.attendance-status-pill--warning {
  background: var(--color-warning-light);
  color: var(--color-warning-700);
}

.attendance-status-pill--danger {
  background: var(--color-danger-light);
  color: var(--color-danger-700);
}

.attendance-status-pill--info {
  background: #e0f2fe;
  color: #0369a1;
}

.attendance-report-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 150px;
}

.attendance-report-deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.attendance-report-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--color-gray-50);
  color: var(--color-gray-500);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.attendance-report-delta--danger {
  background: var(--color-danger-50);
  color: var(--color-danger-700);
}

.attendance-report-delta--info {
  background: var(--primary-light);
  color: var(--primary-hover);
}

.attendance-scan-layout {
  max-width: 760px;
}

.attendance-scan-employee {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.attendance-scan-employee__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-primary-100);
  color: var(--color-primary-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

.attendance-scan-employee__name {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 900;
}

.attendance-scan-employee__meta {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 3px;
}

.attendance-punch-state {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 2px solid var(--gray-200);
  border-radius: 18px;
  background: var(--gray-50);
  color: var(--text-primary);
}

.attendance-punch-state__message {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.attendance-punch-state__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--color-gray-500);
}

.attendance-punch-state__icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.4;
}

.attendance-punch-state__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.76;
}

.attendance-punch-state__message strong {
  display: block;
  color: inherit;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.15;
}

.attendance-punch-state__message p {
  margin: 5px 0 0;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.82;
}

.attendance-punch-state--ready {
  border-color: var(--color-primary-300);
  background: linear-gradient(145deg, var(--color-primary-light), #fff);
  color: var(--color-primary-800);
}

.attendance-punch-state--ready .attendance-punch-state__icon {
  background: var(--color-primary-100);
  color: var(--color-primary-hover);
}

.attendance-punch-state--checked-in {
  border-color: var(--color-success-300);
  background: linear-gradient(145deg, var(--color-success-50), #fff);
  color: var(--color-success-800);
}

.attendance-punch-state--checked-in .attendance-punch-state__icon {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.attendance-punch-state--complete {
  border-color: #c4b5fd;
  background: linear-gradient(145deg, #f5f3ff, #fff);
  color: #5b21b6;
}

.attendance-punch-state--complete .attendance-punch-state__icon {
  background: #ede9fe;
  color: #7c3aed;
}

.attendance-punch-state--unavailable {
  border-color: var(--color-danger-200);
  background: linear-gradient(145deg, var(--color-danger-50), #fff);
  color: var(--color-danger-700);
}

.attendance-punch-state--unavailable .attendance-punch-state__icon {
  background: var(--color-danger-light);
  color: var(--color-danger-700);
}

.attendance-punch-state__cooldown {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-warning-200);
  border-radius: 12px;
  background: var(--color-warning-50);
  color: var(--color-warning-800);
  font-size: 13px;
  font-weight: 800;
}

.attendance-punch-state__cooldown svg {
  width: 18px;
  height: 18px;
}

.attendance-punch-state__cooldown strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.attendance-punch-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.attendance-punch-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--color-gray-400);
}

.attendance-punch-step__marker {
  width: 34px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.attendance-punch-step__marker svg {
  width: 17px;
  height: 17px;
  stroke-width: 3;
}

.attendance-punch-step span:last-child {
  min-width: 0;
}

.attendance-punch-step strong,
.attendance-punch-step small {
  display: block;
}

.attendance-punch-step strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
}

.attendance-punch-step small {
  margin-top: 2px;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-punch-step--done {
  color: var(--color-success-dark);
}

.attendance-punch-step--done .attendance-punch-step__marker {
  border-color: var(--color-success-dark);
  background: var(--color-success-dark);
  color: #fff;
}

.attendance-punch-step--current {
  color: var(--color-primary-hover);
}

.attendance-punch-step--current .attendance-punch-step__marker {
  background: var(--color-primary-light);
}

.attendance-punch-steps__line {
  height: 3px;
  border-radius: 999px;
  background: var(--gray-200);
}

.attendance-punch-steps__line.is-done {
  background: var(--color-success);
}

.attendance-punch-state__instruction {
  padding-top: 12px;
  border-top: 1px solid currentColor;
  color: inherit;
  font-size: 12px;
  font-weight: 750;
  opacity: 0.72;
}

.attendance-scan-context {
  padding: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: var(--gray-50);
}

.attendance-scan-context__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-weight: 800;
}

.attendance-scan-context__title svg {
  width: 18px;
  height: 18px;
}

.attendance-scan-context__title--ready svg {
  color: var(--color-success-dark);
}

.attendance-scan-context__meta {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

.attendance-scanner-shell {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #020617;
}

.attendance-scanner-shell video {
  display: none;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  background: #020617;
}

.attendance-scanner-shell__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: #fff;
}

#attendanceScanStatus {
  color: var(--color-gray-500);
  font-size: 13px;
  font-weight: 750;
}

.attendance-scan-shift-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-primary-200);
  border-radius: 14px;
  background: var(--primary-light);
  color: var(--primary-hover);
  font-size: 14px;
  font-weight: 800;
}

.attendance-scan-shift-card svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.attendance-scan-shift-card span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.attendance-scan-shift-card__facts {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.72;
}

.attendance-action-panel {
  display: grid;
  gap: 8px;
}

.attendance-primary-action {
  min-height: 62px;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
}

.attendance-primary-action--checkout {
  border: 1px solid #c2410c;
  background: linear-gradient(135deg, #ea580c, #c2410c);
  color: #fff;
  box-shadow: 0 8px 18px rgba(194, 65, 12, 0.18);
}

.attendance-primary-action--checkout:hover:not(:disabled) {
  background: linear-gradient(135deg, #c2410c, #9a3412);
  color: #fff;
}

.attendance-primary-action--checkout:disabled {
  border-color: var(--color-warning-200);
  background: var(--color-warning-50);
  color: var(--color-warning-800);
  box-shadow: none;
  opacity: 1;
}

.attendance-primary-action--complete:disabled {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
  opacity: 1;
}

.attendance-action-hint {
  color: var(--color-gray-500);
  font-size: 13px;
  font-weight: 700;
}

.attendance-scan-shift-card--muted {
  border-color: var(--gray-200);
  background: var(--gray-50);
  color: var(--text-secondary);
}

.attendance-scan-shift-card--warning {
  border-color: var(--color-warning-200);
  background: var(--color-warning-50);
  color: var(--color-warning-700);
}

@media (max-width: 520px) {
  .attendance-punch-state {
    padding: 15px;
  }

  .attendance-punch-state__message {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
  }

  .attendance-punch-state__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .attendance-punch-state__icon svg {
    width: 24px;
    height: 24px;
  }

  .attendance-punch-state__message strong {
    font-size: 17px;
  }

  .attendance-punch-steps {
    grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
    gap: 5px;
  }

  .attendance-punch-step {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
  }

  .attendance-punch-step__marker {
    width: 30px;
    height: 30px;
  }

  .attendance-punch-state__cooldown {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .attendance-punch-state__cooldown strong {
    grid-column: 2;
  }
}

.attendance-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(300px, 1fr);
  align-items: start;
  gap: 16px;
  max-width: 1240px;
}

.attendance-settings-panel {
  display: grid;
  gap: 14px;
}

.attendance-settings-section {
  display: grid;
  gap: 12px;
}

.attendance-settings-section__title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.attendance-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.attendance-setting-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.attendance-setting-card.is-disabled {
  cursor: default;
}

.attendance-setting-card__title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.attendance-setting-card__desc {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.attendance-setting-card__input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--primary);
}

.attendance-settings-field {
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
}

.attendance-settings-field .form-label {
  font-weight: 800;
}

.attendance-settings-field__input {
  width: 100%;
  max-width: 180px;
}

.attendance-settings-field__hint {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.attendance-settings-note {
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.attendance-settings-note--info {
  border: 1px solid var(--color-primary-200);
  background: var(--primary-light);
  color: var(--color-primary-800);
}

.attendance-settings-note--warning {
  border: 1px solid var(--color-warning-200);
  background: var(--color-warning-50);
  color: var(--color-warning-800);
}

.attendance-terminal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  opacity: 1;
}

.attendance-terminal-list.is-disabled {
  opacity: .58;
}

.attendance-terminal-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  color: var(--text-primary);
}

.attendance-terminal-option input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.attendance-terminal-option strong,
.attendance-terminal-option span span {
  display: block;
}

.attendance-terminal-option strong {
  font-size: 13px;
  font-weight: 800;
}

.attendance-terminal-option span span {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
}

.attendance-settings-empty {
  padding: 14px;
  border: 1px dashed var(--gray-300);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

.attendance-settings-side-text {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

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

.attendance-branch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--color-gray-50);
}

.attendance-branch-row.is-missing {
  border-color: var(--color-warning-200);
  background: var(--color-warning-50);
}

.attendance-branch-row strong,
.attendance-branch-row span span {
  display: block;
}

.attendance-branch-row strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
}

.attendance-branch-row span span {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
}

.attendance-branch-row b {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .attendance-settings-layout,
  .attendance-settings-grid,
  .attendance-terminal-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.schedule-cell-check,
.schedule-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.schedule-cell-check {
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.schedule-cell:hover .schedule-cell-check,
.schedule-grid__cell.is-selected .schedule-cell-check {
  opacity: 1;
}

.schedule-check input,
.schedule-cell-check input {
  display: none;
}

.schedule-check span,
.schedule-cell-check span {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.schedule-cell-check span {
  width: 13px;
  height: 13px;
}

.schedule-check input:checked + span,
.schedule-cell-check input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 3px #fff, 0 1px 2px rgba(15, 23, 42, 0.1);
}

.schedule-totals-row td {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: var(--color-gray-50);
  border-top: 1px solid #dbe3ef;
}

.schedule-totals-row .schedule-grid__employee-cell {
  z-index: 9;
  padding: 9px 12px;
}

.schedule-totals-row .schedule-grid__employee-cell strong {
  display: block;
  color: var(--color-gray-900);
  font-size: 12px;
}

.schedule-totals-row .schedule-grid__employee-cell span {
  display: block;
  margin-top: 2px;
  color: var(--color-gray-500);
  font-size: 11px;
}

.schedule-total-cell {
  padding: 5px 2px;
  text-align: center;
  border-right: 1px solid var(--color-gray-200);
}

.schedule-total-cell strong {
  display: block;
  color: var(--color-gray-900);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.schedule-total-cell span {
  display: block;
  margin-top: 1px;
  color: var(--color-gray-500);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.schedule-empty-state {
  height: 280px;
  text-align: center;
  color: var(--color-gray-500);
}

.schedule-empty-state i,
.schedule-empty-state svg {
  width: 34px;
  height: 34px;
  display: block;
  margin: 0 auto 8px;
  color: var(--color-gray-400);
}

.schedule-empty-state strong {
  display: block;
  color: var(--color-gray-900);
  font-size: 16px;
}

.schedule-empty-state span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

.schedule-page-shell--self {
  width: min(100%, 980px);
  margin: 0 auto;
}

.schedule-toolbar-row--self {
  align-items: center;
}

.schedule-month-nav--self {
  width: 100%;
  justify-content: flex-start;
}

.schedule-today-btn {
  min-height: 36px;
}

.schedule-self-view {
  display: grid;
  gap: 14px;
}

.schedule-self-hero,
.schedule-self-card,
.schedule-self-empty {
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: #fff;
}

.schedule-self-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  align-items: stretch;
  gap: 18px;
  padding: 18px;
}

.schedule-self-hero--scheduled {
  border-color: var(--color-primary-200);
  background: linear-gradient(180deg, var(--primary-light), #fff 72%);
}

.schedule-self-hero--worked {
  border-color: var(--color-success-200);
  background: linear-gradient(180deg, var(--color-success-50), #fff 72%);
}

.schedule-self-hero--day_off,
.schedule-self-hero--empty {
  background: linear-gradient(180deg, var(--color-gray-50), #fff 72%);
}

.schedule-self-hero--absent {
  border-color: var(--color-danger-200);
  background: linear-gradient(180deg, var(--color-danger-50), #fff 72%);
}

.schedule-self-hero__main {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.schedule-self-hero__avatar .schedule-employee-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  font-size: 15px;
}

.schedule-self-hero__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.schedule-self-hero__copy span {
  color: var(--color-gray-500);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.schedule-self-hero__copy strong {
  color: var(--color-gray-900);
  font-size: 30px;
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.schedule-self-hero__copy em,
.schedule-self-hero__copy p,
.schedule-self-hero__copy small {
  min-width: 0;
  margin: 0;
  color: var(--color-gray-600);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.schedule-self-hero__copy p,
.schedule-self-hero__copy small {
  color: var(--color-gray-500);
}

.schedule-self-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  border-left: 1px solid rgba(148, 163, 184, 0.25);
}

.schedule-self-stat {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 4px 14px;
}

.schedule-self-stat + .schedule-self-stat {
  border-left: 1px solid rgba(148, 163, 184, 0.2);
}

.schedule-self-stat i,
.schedule-self-stat svg {
  width: 16px;
  height: 16px;
  color: var(--color-gray-500);
}

.schedule-self-stat--blue i,
.schedule-self-stat--blue svg {
  color: var(--color-primary);
}

.schedule-self-stat--gray i,
.schedule-self-stat--gray svg {
  color: var(--color-gray-500);
}

.schedule-self-stat span {
  overflow: hidden;
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-self-stat strong {
  color: var(--color-gray-900);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.schedule-self-card {
  overflow: hidden;
}

.schedule-self-section-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-gray-200);
}

.schedule-self-section-head strong {
  display: block;
  color: var(--color-gray-900);
  font-size: 15px;
  font-weight: 800;
}

.schedule-self-section-head span {
  display: block;
  margin-top: 2px;
  color: var(--color-gray-500);
  font-size: 12px;
}

.schedule-self-week-list {
  display: grid;
}

.schedule-self-day-row {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-gray-100);
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.schedule-self-day-row:last-child {
  border-bottom: 0;
}

.schedule-self-day-row:hover {
  background: var(--color-gray-50);
}

.schedule-self-day-row.is-today {
  background: var(--primary-light);
}

.schedule-self-day-row__date,
.schedule-self-day-row__shift {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.schedule-self-day-row__date strong {
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.schedule-self-day-row__date em {
  color: var(--color-gray-900);
  font-size: 20px;
  line-height: 1;
  font-style: normal;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.schedule-self-day-row__shift strong {
  overflow: hidden;
  color: var(--color-gray-900);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.schedule-self-day-row__shift em {
  overflow: hidden;
  color: var(--color-gray-500);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-self-day-row > i,
.schedule-self-day-row > svg {
  width: 16px;
  height: 16px;
  color: var(--color-gray-400);
}

.schedule-self-day-row--scheduled {
  box-shadow: inset 4px 0 0 var(--color-primary);
}

.schedule-self-day-row--worked {
  box-shadow: inset 4px 0 0 var(--color-success-strong);
}

.schedule-self-day-row--day_off {
  box-shadow: inset 4px 0 0 var(--color-gray-400);
}

.schedule-self-day-row--absent {
  box-shadow: inset 4px 0 0 var(--color-danger);
}

.schedule-self-day-row--empty {
  box-shadow: inset 4px 0 0 var(--color-warning);
}

.schedule-self-month-legend {
  flex: 0 0 auto;
}

.schedule-self-weekdays,
.schedule-self-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-self-weekdays {
  padding: 10px 12px 0;
  gap: 6px;
}

.schedule-self-weekdays span {
  color: var(--color-gray-400);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-transform: none;
}

.schedule-self-month-grid {
  gap: 6px;
  padding: 10px 12px 14px;
}

.schedule-self-month-blank {
  min-height: 58px;
}

.schedule-self-month-day {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--color-gray-700);
  cursor: pointer;
}

.schedule-self-month-day:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

.schedule-self-month-day.is-today {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.schedule-self-month-day span {
  color: var(--color-gray-900);
  font-size: 14px;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.schedule-self-month-day em {
  width: 100%;
  overflow: hidden;
  color: var(--color-gray-500);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.schedule-self-month-day--scheduled {
  background: var(--primary-light);
  border-color: var(--color-primary-200);
}

.schedule-self-month-day--worked {
  background: var(--color-success-50);
  border-color: var(--color-success-200);
}

.schedule-self-month-day--day_off {
  background: var(--color-gray-100);
}

.schedule-self-month-day--absent {
  background: var(--color-danger-50);
  border-color: var(--color-danger-200);
}

.schedule-self-month-day--empty {
  background: #fffaf0;
  border-style: dashed;
  border-color: var(--color-warning-200);
}

.schedule-self-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 18px;
  color: var(--color-gray-500);
  text-align: center;
}

.schedule-self-empty i,
.schedule-self-empty svg {
  width: 34px;
  height: 34px;
  color: var(--color-gray-400);
}

.schedule-self-empty strong {
  color: var(--color-gray-900);
  font-size: 17px;
}

.schedule-self-empty span {
  max-width: 420px;
  font-size: 13px;
  line-height: 1.45;
}

.schedule-bulk-modal {
  display: grid;
  gap: 16px;
}

.schedule-bulk-source {
  padding: 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: var(--color-gray-50);
}

.schedule-bulk-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.schedule-bulk-source span {
  display: block;
  margin-bottom: 3px;
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
}

.schedule-bulk-source strong {
  display: block;
  color: var(--color-gray-900);
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.schedule-bulk-source p {
  margin: 10px 0 0;
  color: var(--color-gray-500);
  font-size: 12px;
  line-height: 1.45;
}

.schedule-label-with-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.schedule-label-with-hint em {
  color: var(--color-gray-400);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
}

.schedule-bulk-modal .time-input:focus,
.schedule-bulk-modal .form-control:focus {
  border-color: var(--color-gray-400) !important;
  box-shadow: none !important;
}

.schedule-bulk-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.schedule-bulk-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-gray-600);
  font-size: 13px;
  line-height: 1.4;
}

.schedule-bulk-checkbox input {
  width: 16px !important;
  height: 16px;
  margin-top: 1px;
}

.schedule-bulk-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-200);
}

.schedule-print-modal {
  display: grid;
  gap: 16px;
}

.schedule-print-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: var(--color-gray-50);
}

.schedule-print-summary span,
.schedule-print-summary em {
  display: block;
  color: var(--color-gray-500);
  font-size: 12px;
  font-style: normal;
}

.schedule-print-summary strong {
  display: block;
  margin-top: 2px;
  color: var(--color-gray-900);
  font-size: 14px;
  font-weight: 750;
}

.schedule-print-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.schedule-print-section {
  min-width: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.schedule-print-section-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

.schedule-print-section-head strong {
  color: var(--color-gray-900);
  font-size: 13px;
}

.schedule-print-section-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.schedule-print-section-head button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.schedule-print-option-list {
  max-height: 280px;
  overflow: auto;
  padding: 6px;
}

.schedule-print-option {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.schedule-print-option:hover {
  background: var(--color-gray-50);
}

.schedule-print-option input {
  width: 16px !important;
  height: 16px;
  flex-shrink: 0;
}

.schedule-print-option span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.schedule-print-option strong {
  overflow: hidden;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-print-option em,
.schedule-print-empty {
  color: var(--color-gray-500);
  font-size: 11px;
  font-style: normal;
}

.schedule-print-empty {
  padding: 12px;
}

.schedule-print-export {
  display: none;
}

.schedule-history-modal {
  display: grid;
  gap: 10px;
}

.schedule-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: #fff;
}

.schedule-history-row__main {
  min-width: 0;
}

.schedule-history-row__main strong,
.schedule-history-row__meta strong {
  display: block;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 750;
}

.schedule-history-row__main span,
.schedule-history-row__meta span,
.schedule-history-row__meta em {
  display: block;
  margin-top: 2px;
  color: var(--color-gray-500);
  font-size: 12px;
  font-style: normal;
}

.schedule-history-row__main p {
  margin: 6px 0 0;
  color: var(--color-gray-700);
  font-size: 12px;
  line-height: 1.45;
}

.schedule-history-row__meta {
  text-align: right;
}

.schedule-history-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  color: var(--color-gray-500);
  text-align: center;
}

.schedule-history-empty i,
.schedule-history-empty svg {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: var(--color-gray-400);
}

.schedule-history-empty strong {
  color: var(--color-gray-900);
  font-size: 15px;
}

.schedule-history-empty span {
  margin-top: 4px;
  font-size: 12px;
}

@media (max-width: 1200px) {
  .schedule-stats {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .schedule-filter-strip {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 1fr));
  }

  .schedule-help-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-planner-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-filter-strip {
    margin-left: 0;
    justify-content: flex-start;
  }
}

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

  .schedule-page-shell--self {
    width: 100%;
  }

  .schedule-toolbar-row--self {
    flex-direction: row;
    align-items: center;
  }

  .schedule-month-nav--self {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .schedule-self-view {
    gap: 12px;
  }

  .schedule-self-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .schedule-self-hero__main {
    gap: 12px;
  }

  .schedule-self-hero__avatar .schedule-employee-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    font-size: 13px;
  }

  .schedule-self-hero__copy strong {
    font-size: 25px;
  }

  .schedule-self-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    border-left: 0;
    padding-top: 10px;
  }

  .schedule-self-stat {
    padding: 0 10px;
  }

  .schedule-self-section-head {
    min-height: 50px;
    padding: 12px;
  }

  .schedule-self-section-head strong {
    font-size: 14px;
  }

  .schedule-self-month-legend {
    display: none;
  }

  .schedule-self-day-row {
    grid-template-columns: 52px minmax(0, 1fr) 16px;
    min-height: 60px;
    gap: 10px;
    padding: 9px 12px;
  }

  .schedule-self-day-row__date em {
    font-size: 18px;
  }

  .schedule-self-day-row__shift strong {
    font-size: 14px;
  }

  .schedule-self-weekdays {
    gap: 4px;
    padding: 8px 8px 0;
  }

  .schedule-self-month-grid {
    gap: 4px;
    padding: 8px;
  }

  .schedule-self-month-blank,
  .schedule-self-month-day {
    min-height: 50px;
  }

  .schedule-self-month-day {
    border-radius: 7px;
    padding: 5px 3px;
  }

  .schedule-self-month-day span {
    font-size: 13px;
  }

  .schedule-self-month-day em {
    font-size: 8px;
  }

  .schedule-planner-card {
    margin-right: -16px;
    margin-left: -16px;
    overflow: visible;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .schedule-planner-head {
    gap: 10px;
    padding: 12px 16px;
  }

  .schedule-legend {
    justify-content: flex-start;
    gap: 8px;
  }

  .schedule-grid-scroll {
    width: 100%;
    max-width: 100vw;
    height: min(62vh, 560px);
    min-height: 360px;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
  }

  .schedule-grid {
    width: max-content;
    min-width: 1390px;
    font-size: 11px;
  }

  .schedule-grid__employee-col {
    width: 168px;
  }

  .schedule-grid__day-col {
    width: 39px;
  }

  .schedule-employee-head-inner {
    min-height: 40px;
    gap: 7px;
    padding: 7px 8px;
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  .schedule-day-button {
    min-height: 40px;
  }

  .schedule-day-button span {
    font-size: 9px;
  }

  .schedule-day-button strong {
    font-size: 11px;
  }

  .schedule-group {
    min-height: 38px;
    padding: 7px 8px;
  }

  .schedule-group-meta {
    display: none;
  }

  .schedule-employee-card {
    min-height: 44px;
    gap: 7px;
    padding: 6px 8px;
  }

  .schedule-employee-avatar {
    width: 26px;
    height: 26px;
    min-width: 26px;
    font-size: 10px;
  }

  .schedule-employee-copy strong {
    font-size: 12px;
  }

  .schedule-employee-copy span,
  .schedule-employee-copy em {
    font-size: 10px;
  }

  .schedule-grid__cell {
    padding: 3px 2px;
  }

  .schedule-cell {
    height: 34px;
    overflow: hidden;
    border-radius: 5px;
    padding: 2px;
  }

  .schedule-cell-status {
    gap: 2px;
  }

  .schedule-cell-status i,
  .schedule-cell-status svg {
    width: 10px;
    height: 10px;
  }

  .schedule-cell-status strong {
    font-size: 9px;
  }

  .schedule-cell-time,
  .schedule-cell-attendance {
    display: none;
  }

  .schedule-cell-check {
    top: 1px;
    left: 1px;
  }

  .schedule-totals-row .schedule-grid__employee-cell {
    padding: 7px 8px;
  }

  .schedule-bulk-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-bulk-actions {
    justify-content: flex-start;
  }

  .erp-page-header__filter-row.schedule-toolbar-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .erp-page-header__filter-row.schedule-toolbar-row > .schedule-month-nav {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  .erp-page-header__filter-row.schedule-toolbar-row > .schedule-mobile-filter-trigger {
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex;
    flex: 0 0 auto;
  }

  .schedule-period-control {
    width: 100%;
    min-width: 0;
  }

  .schedule-period-control__current {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 10px;
  }

  .schedule-filter-strip {
    display: none;
  }

  .schedule-help-strip {
    grid-template-columns: 1fr;
  }

  .schedule-print-columns {
    grid-template-columns: 1fr;
  }

  .schedule-history-row {
    grid-template-columns: 1fr;
  }

  .schedule-history-row__meta {
    text-align: left;
  }

}

@media print {
  @page {
    size: A4 landscape;
    margin: 5mm;
  }

  html,
  body.schedule-print-mode {
    width: 297mm !important;
    min-width: 297mm !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body.schedule-print-mode .app,
  body.schedule-print-mode .main {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.schedule-print-mode * {
    visibility: hidden !important;
  }

  body.schedule-print-mode #schedulePrintExport,
  body.schedule-print-mode #schedulePrintExport * {
    visibility: visible !important;
  }

  body.schedule-print-mode .sidebar,
  body.schedule-print-mode .top-bar,
  body.schedule-print-mode .app-launcher-wrapper,
  body.schedule-print-mode .app-launcher-btn,
  body.schedule-print-mode .app-launcher-dropdown,
  body.schedule-print-mode #dynamicModal,
  body.schedule-print-mode .erp-page-header,
  body.schedule-print-mode .schedule-stats,
  body.schedule-print-mode .schedule-help-strip,
  body.schedule-print-mode .schedule-bulk-bar {
    display: none !important;
  }

  body.schedule-print-mode .content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.schedule-print-mode #mainContent {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  body.schedule-print-mode .schedule-planner-card {
    border: 0;
    box-shadow: none;
  }

  body.schedule-print-mode .schedule-grid-scroll {
    overflow: visible;
    max-height: none;
  }

  body.schedule-print-mode .schedule-grid {
    min-width: 0;
    font-size: 9px;
  }

  body.schedule-print-mode .schedule-cell {
    height: 22px;
    border-radius: 3px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body.schedule-print-mode .schedule-cell-check,
  body.schedule-print-mode .schedule-check {
    display: none !important;
  }

  body.schedule-print-mode .schedule-print-export {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 287mm !important;
    max-width: 287mm !important;
    overflow: visible !important;
    color: var(--color-gray-900);
    background: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
  }

  body.schedule-print-mode .schedule-print-title-row {
    display: flex;
    justify-content: space-between;
    gap: 8mm;
    margin-bottom: 2mm;
  }

  body.schedule-print-mode .schedule-print-title-row h1 {
    margin: 0 0 1.5mm;
    color: var(--color-gray-900);
    font-size: 12.5pt;
    line-height: 1.1;
  }

  body.schedule-print-mode .schedule-print-title-row p {
    margin: 0.5mm 0 0;
    color: var(--color-gray-600);
    font-size: 6.8pt;
  }

  body.schedule-print-mode .schedule-print-legend {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 3mm;
    flex-wrap: wrap;
    max-width: 80mm;
  }

  body.schedule-print-mode .schedule-print-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 5.2pt;
    line-height: 1.15;
  }

  body.schedule-print-mode .schedule-print-employee-col {
    width: 33mm;
  }

  body.schedule-print-mode .schedule-print-table thead {
    display: table-header-group !important;
  }

  body.schedule-print-mode .schedule-print-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.schedule-print-mode .schedule-print-table th,
  body.schedule-print-mode .schedule-print-table td {
    border: 1px solid var(--color-gray-300);
    padding: 0.6mm 0.25mm;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body.schedule-print-mode .schedule-print-table thead th {
    height: 6.5mm;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    font-weight: 750;
  }

  body.schedule-print-mode .schedule-print-table thead th.is-weekend {
    background: var(--color-gray-200);
  }

  body.schedule-print-mode .schedule-print-table thead th span,
  body.schedule-print-mode .schedule-print-table thead th strong {
    display: block;
    line-height: 1.05;
  }

  body.schedule-print-mode .schedule-print-table thead th .schedule-print-day-name {
    color: var(--color-gray-500);
    font-size: 4.2pt;
    font-weight: 800;
  }

  body.schedule-print-mode .schedule-print-table thead th strong {
    margin-top: 0.4mm;
    color: var(--color-gray-900);
    font-size: 6.1pt;
  }

  body.schedule-print-mode .schedule-print-employee-head,
  body.schedule-print-mode .schedule-print-employee-cell {
    text-align: left !important;
  }

  body.schedule-print-mode .schedule-print-employee-wrap {
    display: flex;
    align-items: center;
    gap: 1.5mm;
    min-width: 0;
  }

  body.schedule-print-mode .schedule-print-employee-wrap > div {
    min-width: 0;
  }

  body.schedule-print-mode .schedule-print-avatar {
    width: 5mm;
    height: 5mm;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 5mm;
    overflow: hidden;
    border: 1px solid var(--color-gray-300);
    border-radius: 999px;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: 5pt;
    font-weight: 800;
    line-height: 1;
  }

  body.schedule-print-mode .schedule-print-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  body.schedule-print-mode .schedule-print-employee-cell strong {
    display: block;
    overflow: hidden;
    color: var(--color-gray-900);
    font-size: 5.8pt;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.schedule-print-mode .schedule-print-employee-cell span {
    display: block;
    overflow: hidden;
    margin-top: 0.5mm;
    color: var(--color-gray-500);
    font-size: 4.8pt;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.schedule-print-mode .schedule-print-group-row td {
    padding: 0.9mm 1.2mm;
    background: var(--color-gray-200);
    color: var(--color-gray-900);
    font-size: 5.8pt;
    font-weight: 800;
    text-align: left;
  }

  body.schedule-print-mode .schedule-print-cell {
    overflow: hidden;
    color: var(--color-gray-900);
    font-size: 4.7pt;
    font-weight: 750;
    white-space: nowrap;
    text-overflow: clip;
  }

  body.schedule-print-mode .schedule-print-cell--scheduled { background: var(--color-primary-100); }
  body.schedule-print-mode .schedule-print-cell--worked { background: var(--color-success-100); }
  body.schedule-print-mode .schedule-print-cell--day_off { background: var(--color-gray-200); color: var(--color-gray-600); }
  body.schedule-print-mode .schedule-print-cell--absent { background: var(--color-danger-light); color: var(--color-danger-800); }
  body.schedule-print-mode .schedule-print-cell--leave { background: #ede9fe; color: #6d28d9; }
  body.schedule-print-mode .schedule-print-cell--empty { background: #fff; color: transparent; }

  body.schedule-print-mode .schedule-print-total-row td {
    background: var(--color-gray-50);
    color: var(--color-gray-900);
    font-weight: 750;
  }

  body.schedule-print-mode .schedule-print-total-row strong,
  body.schedule-print-mode .schedule-print-total-row span {
    display: block;
  }

  body.schedule-print-mode .schedule-print-total-row span {
    margin-top: 0.3mm;
    color: var(--color-gray-500);
    font-size: 4.8pt;
  }
}

/* Column Types */
.col-primary {
  font-weight: 600;
  color: var(--gray-900);
  word-break: break-word;
  max-width: 200px;
}

.col-money {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.col-right {
  text-align: right;
}

.col-date {
  color: var(--gray-500);
  font-size: 13px;
}

.col-center {
  text-align: center;
}

.col-muted {
  color: var(--gray-500);
  font-size: 13px;
}

.col-bold {
  font-weight: 600;
  color: var(--gray-900);
}

.col-code {
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
}

.col-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.col-nowrap {
  white-space: nowrap;
}

.col-checkbox {
  width: 44px;
  padding-left: 16px;
  padding-right: 8px;
}

.col-actions {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  text-align: center;
  padding: 0 !important;
}

.col-actions button {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s;
  opacity: 0.3;
}

/* Show action buttons on row hover */
tr:hover .col-actions button,
.col-actions button:focus {
  opacity: 1;
}

.col-actions button:hover {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
  opacity: 1;
}

/* Destructive table actions stay visible and sit on the exact optical centre
   of one fixed-width terminal column. This intentionally overrides the legacy
   reveal-on-row-hover action treatment above. */
.table-card :is(th, td).col-actions.invoice-line-actions,
.table-card :is(th, td).col-actions.recipe-ingredient-actions {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle;
}

.col-actions .invoice-line-delete-action,
.col-actions .recipe-ingredient-delete {
  display: flex;
  width: 40px;
  height: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--danger);
  opacity: 1;
  cursor: pointer;
}

.col-actions :is(.invoice-line-delete-action, .recipe-ingredient-delete) svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.col-actions .invoice-line-delete-action:hover,
.col-actions .recipe-ingredient-delete:hover {
  background: var(--color-danger-50);
  color: var(--danger);
  opacity: 1;
}

/* Row Selection */
tbody tr.selected {
  background: rgba(var(--color-primary-rgb), 0.08);
}

tbody tr.selected:hover {
  background: rgba(var(--color-primary-rgb), 0.12);
}

/* Empty State */
.table-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--gray-400);
}

.table-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--gray-300);
}

.table-empty-text {
  font-size: 15px;
  color: var(--gray-500);
}

/* Table Footer & Pagination */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  font-size: 13px;
  color: var(--gray-500);
}

.invoice-list-footer-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.invoice-list-footer-summary strong {
  color: var(--gray-900);
  font-weight: 700;
  white-space: nowrap;
}

.table-pagination {
  display: flex;
  gap: 4px;
}

.table-pagination button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.table-pagination button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.table-pagination button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ==================== BADGES (glassmorphism) ==================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.4);
}

.badge-sm {
  padding: 2px 8px;
  font-size: 11px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge i,
.badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* — Tones (glassmorphism) — */
.badge-gray { background: #fff; color: var(--color-gray-500); border-color: var(--color-gray-400); }
.badge-gray .badge-dot { background: var(--color-gray-400); }

.badge-green { background: #fff; color: var(--color-success-dark); border-color: var(--color-success-dark); }
.badge-green .badge-dot { background: var(--color-success-dark); }

.badge-red { background: #fff; color: var(--color-danger-dark); border-color: var(--color-danger-dark); }
.badge-red .badge-dot { background: var(--color-danger-dark); }

.badge-yellow { background: #fff; color: var(--color-warning-dark); border-color: var(--color-warning-dark); }
.badge-yellow .badge-dot { background: var(--color-warning-dark); }

.badge-blue { background: #fff; color: var(--primary); border-color: var(--primary); }
.badge-blue .badge-dot { background: var(--primary); }

.badge-orange { background: #fff; color: #ea580c; border-color: #ea580c; }
.badge-orange .badge-dot { background: #ea580c; }

.badge-purple { background: #fff; color: var(--color-violet); border-color: var(--color-violet); }
.badge-purple .badge-dot { background: var(--color-violet); }

.badge-emerald { background: #fff; color: var(--color-success-dark); border-color: var(--color-success-dark); }
.badge-emerald .badge-dot { background: var(--color-success-dark); }

/* — Aliases (backward compat) — */
.badge-success { background: #fff; color: var(--color-success-dark); border-color: var(--color-success-dark); }
.badge-success .badge-dot { background: var(--color-success-dark); }
.badge-danger { background: #fff; color: var(--color-danger-dark); border-color: var(--color-danger-dark); }
.badge-danger .badge-dot { background: var(--color-danger-dark); }
.badge-warning { background: #fff; color: var(--color-warning-dark); border-color: var(--color-warning-dark); }
.badge-warning .badge-dot { background: var(--color-warning-dark); }
.badge-primary { background: #fff; color: var(--primary); border-color: var(--primary); }
.badge-primary .badge-dot { background: var(--primary); }
.badge-secondary,
.badge-muted,
.badge-neutral { background: #fff; color: var(--color-gray-500); border-color: var(--color-gray-400); }
.badge-secondary .badge-dot,
.badge-muted .badge-dot,
.badge-neutral .badge-dot { background: var(--color-gray-400); }

/* Reusable soft-fill badge variant (renderUiBadge/renderStatusBadge). */
.badge--soft {
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.badge--soft.badge-gray { background: var(--gray-100); color: var(--gray-700); }
.badge--soft.badge-green { background: var(--color-success-100); color: var(--color-success-800); }
.badge--soft.badge-red { background: var(--color-danger-light); color: var(--color-danger-800); }
.badge--soft.badge-yellow { background: var(--color-warning-light); color: var(--color-warning-800); }
.badge--soft.badge-blue { background: var(--color-primary-light); color: var(--color-primary-800); }
.badge--soft.badge-orange { background: #fff7ed; color: #c2410c; }
.badge--soft.badge-purple { background: #f5f3ff; color: #6d28d9; }

/* High-scan status variant: color remains a fast background/icon signal,
   while every label uses the same dark ink for stronger table contrast. */
.badge--signal {
  border-color: transparent;
  color: var(--gray-900);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.badge--signal.badge-gray { background: var(--gray-200); }
.badge--signal.badge-green { background: var(--color-success-200); }
.badge--signal.badge-red { background: var(--color-danger-200); }
.badge--signal.badge-yellow { background: var(--color-warning-light); }
.badge--signal.badge-blue { background: var(--color-primary-200); }
.badge--signal.badge-orange { background: #fed7aa; }
.badge--signal.badge-purple { background: #ddd6fe; }

.badge--signal.badge-gray > svg { color: var(--gray-600); }
.badge--signal.badge-green > svg { color: var(--color-success-800); }
.badge--signal.badge-red > svg { color: var(--color-danger-800); }
.badge--signal.badge-yellow > svg { color: var(--color-warning-700); }
.badge--signal.badge-blue > svg { color: var(--color-primary-800); }
.badge--signal.badge-orange > svg { color: #c2410c; }
.badge--signal.badge-purple > svg { color: #6d28d9; }

/* Category Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
}

.tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #fff !important;
  border: 1px solid currentColor;
}

.status-draft {
  color: var(--color-warning-800);
}

.status-posted {
  color: var(--color-success-800);
}

.status-canceled {
  color: var(--color-danger-800);
}

.status-pending {
  color: var(--color-primary-800);
}

.status-active {
  color: #065f46;
}

/* Not Found Row (Inventory) */
.not-found-row {
  background: #fef9c3 !important;
  opacity: 0.7;
}

.not-found-row td {
  text-decoration: line-through;
  color: var(--gray-500);
}

/* ==================== FORMS ==================== */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: #fff;
  color: var(--gray-900);
  transition: all 0.15s ease;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-hover-rgb), 0.1);
}

/* `.form-control` is used across integrations, WhatsApp setup, POS and the
   Waiter flow editor but never had a base rule, so those inputs rendered as
   raw browser fields. It follows the same contract as .form-input. */
.form-control {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: #fff;
  color: var(--gray-900);
  transition: all 0.15s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-hover-rgb), 0.1);
}
textarea.form-control { min-height: 76px; resize: vertical; }
select.form-control { min-height: 42px; }

.form-input::placeholder {
  color: var(--gray-400);
}

/* Global select normalization — prevent double borders and text wrapping */
select,
select.form-select {
  outline: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 28px;
}

select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-hover-rgb), 0.1);
}

.form-input-sm {
  padding: 8px 10px;
  font-size: 13px;
}

/* Modern inline input — borderless by default */
.inline-input {
  border: 1px solid transparent;
  padding: 6px 8px;
  border-radius: 6px;
  background: transparent;
  transition: all 0.15s ease;
  font-variant-numeric: tabular-nums;
}

.inline-input:hover {
  background: var(--gray-50);
  border-color: var(--gray-200);
}

.inline-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-hover-rgb), 0.08);
}

/* Empty/Warning Input */
.inline-input.empty {
  border-color: var(--warning);
  background: var(--color-warning-50);
}

.inline-input.empty:focus {
  border-color: var(--warning);
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}

/* Hide number input spinners */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button,
.table-card input[type="number"]::-webkit-outer-spin-button,
.table-card input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinners,
.table-card input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Inline Loading */
.inline-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--primary-light);
  border-radius: var(--radius);
  color: var(--primary);
  font-weight: 500;
}

.inline-loading .spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

/* Search */
.search-box {
  position: relative;
}

.search-box input {
  padding-left: 40px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

/* Search Box V2 (global) */
.search-box-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  padding: 10px 14px;
}

.search-box-v2 svg,
.search-box-v2>i {
  width: 18px;
  height: 18px;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

.search-box-v2 input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  min-width: 0;
}

/* Stat Card V3 (global dashboard cards) */
.stat-card-v3 {
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}

.stat-card-v3:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.stat-card-v3 .stat-card-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card-v3 .stat-card-icon i,
.stat-card-v3 .stat-card-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.stat-card-v3 .stat-card-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card-v3 .stat-card-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
  margin-top: 4px;
}

.stat-card-v3 .stat-card-sub {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .stat-card-v3 {
    padding: 14px;
    gap: 12px;
  }

  .stat-card-v3 .stat-card-value {
    font-size: 20px;
  }

  .stat-card-v3 .stat-card-icon {
    width: 40px;
    height: 40px;
  }
}

/* ==================== STAT CARD (unified) ==================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Fixed column counts (desktop only) */
.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.stat-grid--5 { grid-template-columns: repeat(5, 1fr); }
.stat-grid--6 { grid-template-columns: repeat(6, 1fr); }

.stat-card-u {
  --stat-card-u-shadow: var(--surface-shadow);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--stat-card-u-shadow);
  transition: box-shadow 0.15s;
}

.stat-card-u:hover {
  box-shadow: var(--stat-card-u-shadow);
}
.stat-card-u[onclick]:hover, .stat-card-u[data-erp-stat-card-action]:hover {
  box-shadow: var(--surface-shadow-hover);
}

.stat-card-u[onclick] {
  cursor: pointer;
}

.stat-card-u--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb), 0.9), 0 4px 12px rgba(var(--color-primary-rgb), 0.15);
}

/* Icon — clean outline marker without a decorative pastel tile */
.stat-card-u__icon {
  width: 28px;
  height: 28px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
  background: transparent;
  color: var(--gray-700);
}

.stat-card-u__icon i,
.stat-card-u__icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.4;
}

/* Tone remains semantic; the icon itself no longer creates another surface. */
.stat-card-u--gray   .stat-card-u__icon { background: transparent; color: var(--gray-600); }
.stat-card-u--blue   .stat-card-u__icon { background: transparent; color: var(--color-primary-hover); }
.stat-card-u--green  .stat-card-u__icon { background: transparent; color: var(--color-success-dark); }
.stat-card-u--red    .stat-card-u__icon { background: transparent; color: var(--color-danger-dark); }
.stat-card-u--yellow .stat-card-u__icon { background: transparent; color: var(--color-warning-dark); }
.stat-card-u--purple .stat-card-u__icon { background: transparent; color: var(--color-violet); }

/* Label */
.stat-card-u__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 6px;
}

.stat-card-u__label-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.stat-card-u__label-row .stat-card-u__label {
  margin-bottom: 0;
}

.stat-card-u__info {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-400);
  cursor: help;
}

.stat-card-u__info:hover,
.stat-card-u__info:focus-visible {
  color: var(--gray-700);
}

.stat-card-u__info:focus-visible {
  border-radius: 50%;
  outline: 2px solid rgba(var(--color-primary-rgb), 0.45);
  outline-offset: 2px;
}

.erp-info-hint {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-400);
  cursor: help;
}

.erp-info-hint:hover,
.erp-info-hint:focus-visible {
  color: var(--gray-700);
}

.erp-info-hint:focus-visible {
  outline: 2px solid rgba(var(--color-primary-rgb), 0.45);
  outline-offset: 2px;
}

.erp-info-hint i,
.erp-info-hint svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.erp-global-info-tooltip {
  position: fixed;
  z-index: 100100;
  max-width: min(320px, calc(100vw - 20px));
  padding: 9px 11px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-900);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.erp-global-info-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.erp-global-info-tooltip[data-placement="right"] {
  transform: translateX(-6px);
}

.erp-global-info-tooltip[data-placement="left"] {
  transform: translateX(6px);
}

.erp-global-info-tooltip[data-placement="right"].is-visible,
.erp-global-info-tooltip[data-placement="left"].is-visible {
  transform: translateX(0);
}

.erp-global-info-tooltip[data-kind="row-issue"] {
  --erp-table-row-issue-color: var(--color-warning-dark);
  display: grid;
  gap: 2px;
  max-width: min(300px, calc(100vw - 20px));
  border-inline-start: 3px solid var(--erp-table-row-issue-color);
  background: #fff;
  color: var(--gray-900);
  text-align: start;
}

.erp-global-info-tooltip[data-kind="row-issue"][data-tone="danger"] {
  --erp-table-row-issue-color: var(--color-danger-dark);
}

.erp-global-info-tooltip[data-kind="row-issue"][data-tone="info"] {
  --erp-table-row-issue-color: var(--color-info-strong);
}

.erp-global-info-tooltip__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.erp-global-info-tooltip__detail {
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .erp-global-info-tooltip {
    transition: none;
  }
}

.stat-card-u__info i,
.stat-card-u__info svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.4;
}

.stat-card-u__info-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(280px, calc(100vw - 32px));
  padding: 9px 11px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-900);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
  pointer-events: none;
}

.stat-grid > .stat-card-u:nth-child(even) .stat-card-u__info-tooltip {
  right: 0;
  left: auto;
}

.stat-card-u:hover,
.stat-card-u:focus-within {
  z-index: 30;
}

.stat-card-u__info:hover .stat-card-u__info-tooltip,
.stat-card-u__info:focus-visible .stat-card-u__info-tooltip,
.stat-card-u__info:focus .stat-card-u__info-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Link arrow — top right corner, animated */
.stat-card-u__link {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}

.stat-card-u__link i,
.stat-card-u__link svg {
  width: 16px;
  height: 16px;
}

.stat-card-u:hover .stat-card-u__link {
  color: var(--gray-900);
  transform: translate(2px, -2px);
}

/* Value */
.stat-card-u__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

/* Colored value for specific tones */
.stat-card-u--red .stat-card-u__value--colored { color: var(--color-danger-dark); }
.stat-card-u--green .stat-card-u__value--colored { color: var(--color-success-dark); }

/* Badge — below value */
.stat-card-u__badge {
  margin-top: 10px;
}

/* Sub description */
.stat-card-u__sub {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 8px;
  line-height: 1.5;
}

/* Trend indicator */
.stat-card-u__trend {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}

.stat-card-u__trend--up { color: var(--color-success-strong); }
.stat-card-u__trend--down { color: var(--color-danger-dark); }
.stat-card-u__trend--neutral { color: var(--gray-400); }

.stat-card-u__meta {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
}

.stat-card-u--metric {
  min-height: 0;
  padding: 18px;
}

.stat-card-u__metric-icon {
  width: 24px;
  height: 24px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
  background: transparent;
  color: var(--gray-700);
}

.stat-card-u__metric-icon i,
.stat-card-u__metric-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.4;
}

.stat-card-u--metric .stat-card-u__value {
  font-size: 22px;
  line-height: 1.1;
}

.stat-card-u--metric .stat-card-u__label {
  font-size: 12px;
  margin-bottom: 6px;
}

.stat-card-u--metric .stat-card-u__label-row .stat-card-u__label {
  margin-bottom: 0;
}

.stat-card-u--metric .stat-card-u__sub,
.stat-card-u--metric .stat-card-u__trend {
  margin-top: 6px;
  font-size: 11px;
}

.stat-card-u--gray .stat-card-u__metric-icon { background: transparent; color: var(--gray-600); }
.stat-card-u--blue .stat-card-u__metric-icon { background: transparent; color: var(--color-primary-hover); }
.stat-card-u--green .stat-card-u__metric-icon { background: transparent; color: var(--color-success-dark); }
.stat-card-u--red .stat-card-u__metric-icon { background: transparent; color: var(--color-danger-dark); }
.stat-card-u--yellow .stat-card-u__metric-icon { background: transparent; color: var(--color-warning-dark); }
.stat-card-u--purple .stat-card-u__metric-icon { background: transparent; color: var(--color-violet); }

@media (max-width: 768px) {
  .stat-grid,
  .stat-grid--2,
  .stat-grid--3,
  .stat-grid--4,
  .stat-grid--5,
  .stat-grid--6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .stat-card-u {
    padding: 14px;
    min-height: 0;
  }

  .stat-card-u__value {
    font-size: 18px;
    word-break: break-all;
  }

  .stat-card-u--metric {
    padding: 14px;
  }

  .stat-card-u--metric .stat-card-u__metric-icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
  }

  .stat-card-u--metric .stat-card-u__metric-icon i,
  .stat-card-u--metric .stat-card-u__metric-icon svg {
    width: 20px;
    height: 20px;
  }

  .stat-card-u--metric .stat-card-u__value {
    font-size: 18px;
    word-break: break-word;
  }

  .stat-card-u__meta {
    top: 8px;
    right: 10px;
    font-size: 10px;
  }

  .stat-card-u__label {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .stat-card-u__icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
    margin-bottom: 12px;
  }

  .stat-card-u__icon i,
  .stat-card-u__icon svg {
    width: 20px;
    height: 20px;
  }

  .stat-card-u__sub {
    font-size: 11px;
    margin-top: 4px;
  }

  .stat-card-u__link {
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
  }

  .stat-card-u__link i,
  .stat-card-u__link svg {
    width: 12px;
    height: 12px;
  }
}

/* ==================== PURE DROPDOWN (v3.1) ==================== */
.dropdown {
  position: relative;
  width: 100%;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  background: white;
  color: var(--gray-900);
  cursor: pointer;
  transition: all 0.15s;
}

.dropdown-trigger:hover {
  border-color: var(--gray-400);
}

.dropdown-trigger.open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.dropdown-trigger .chevron {
  transition: transform 0.2s;
}

.dropdown-trigger.open .chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-menu.open {
  display: block;
}

.dropdown-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s;
}

.dropdown-item:hover {
  background: var(--gray-100);
}

.dropdown-item.selected {
  background: var(--primary-light);
  color: var(--primary);
}

.dropdown-item .check {
  opacity: 0;
}

.dropdown-item.selected .check {
  opacity: 1;
}

/* ==================== SEARCH WITH RESULTS (v3.1) ==================== */
.search-container {
  position: relative;
}

.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

.search-result-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.search-result-item:hover {
  background: var(--gray-50);
}

.search-result-item:first-child {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.search-result-item:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.search-result-icon {
  width: 36px;
  height: 36px;
  background: var(--gray-100);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
}

.search-result-info {
  flex: 1;
}

.search-result-title {
  font-weight: 500;
  font-size: 14px;
}

.search-result-meta {
  font-size: 12px;
  color: var(--gray-500);
}

/* ==================== STATS CARDS (v3.1) ==================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  padding: 16px 20px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.stat-card-icon svg {
  width: 22px;
  height: 22px;
}

.stat-card-label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.stat-card-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

/* Stat Card Variants */
.stat-card.stat-neutral {
  background: linear-gradient(135deg, var(--color-gray-600) 0%, var(--color-gray-800) 100%);
  box-shadow: 0 4px 20px rgba(30, 41, 59, 0.35);
}

.stat-card.stat-neutral .stat-card-icon {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.stat-card.stat-neutral .stat-card-label {
  color: rgba(255, 255, 255, 0.85);
}

.stat-card.stat-neutral .stat-card-value {
  color: white;
}

.stat-card.stat-success {
  background: linear-gradient(135deg, var(--color-success-strong) 0%, #15803d 100%);
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.2);
}

.stat-card.stat-success .stat-card-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.stat-card.stat-success .stat-card-label {
  color: rgba(255, 255, 255, 0.85);
}

.stat-card.stat-success .stat-card-value {
  color: white;
}

.stat-card.stat-warning {
  background: linear-gradient(135deg, var(--color-warning-dark) 0%, var(--color-warning-700) 100%);
  box-shadow: 0 4px 20px rgba(180, 83, 9, 0.2);
}

.stat-card.stat-warning .stat-card-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.stat-card.stat-warning .stat-card-label {
  color: rgba(255, 255, 255, 0.85);
}

.stat-card.stat-warning .stat-card-value {
  color: white;
}

.stat-card.stat-danger {
  background: linear-gradient(135deg, var(--color-danger-dark) 0%, var(--color-danger-700) 100%);
  box-shadow: 0 4px 20px rgba(185, 28, 28, 0.2);
}

.stat-card.stat-danger .stat-card-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.stat-card.stat-danger .stat-card-label {
  color: rgba(255, 255, 255, 0.85);
}

.stat-card.stat-danger .stat-card-value {
  color: white;
}

.stat-card.stat-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--primary-hover) 100%);
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.35);
}

.stat-card.stat-primary .stat-card-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.stat-card.stat-primary .stat-card-label {
  color: rgba(255, 255, 255, 0.85);
}

.stat-card.stat-primary .stat-card-value {
  color: white;
}

.stat-card.stat-light {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-gray-50) 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-gray-200);
}

.stat-card.stat-light .stat-card-icon {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.stat-card.stat-light .stat-card-label {
  color: var(--color-gray-500);
}

.stat-card.stat-light .stat-card-value {
  color: var(--color-gray-900);
}

/* ==================== MODALS ==================== */
.modal-backdrop,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  padding: 24px;
}

/* Active state */
.modal-backdrop.active,
.modal-overlay {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.modal-backdrop.active .modal {
  transform: scale(1) translateY(0);
}

@media (max-width: 768px) {

  .modal-backdrop,
  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }

  .modal {
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
  }
}

/* Modal content container (alternative to .modal) */
.modal-content {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--gray-500);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--gray-100);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.erp-dynamic-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}

.erp-dynamic-modal__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--erp-dynamic-modal-max-width, 480px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: erp-modal-in 0.2s ease;
}

.erp-dynamic-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-gray-200);
}

.erp-dynamic-modal__title {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 18px;
  font-weight: 600;
}

.erp-dynamic-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s;
}

.erp-dynamic-modal__close:hover {
  background: var(--color-gray-200);
}

.erp-dynamic-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.erp-dynamic-modal__footer {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-gray-200);
}

.erp-dynamic-modal__action {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}

.add-guest-modal .erp-dynamic-modal__close,
.add-guest-modal .btn {
  min-width: 44px;
  min-height: 44px;
}

.invoice-filter-sort-dir {
  flex: 0 0 auto;
  min-width: 100px;
}

.invoice-filter-actions {
  position: sticky;
  bottom: -24px;
  z-index: 5;
  margin: 0 -24px;
  padding: 12px 24px;
  border-top: 1px solid var(--color-gray-200);
  background: #fff;
}

.invoice-filter-actions .btn {
  flex: 1;
}

.invoice-detail-field--wide {
  grid-column: span 2;
}

@keyframes erp-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .erp-dynamic-modal {
    align-items: flex-end;
    padding: 12px;
  }

  .erp-dynamic-modal__content {
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
  }
}

/* ==================== LOADING ==================== */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner--16 {
  width: 16px;
  height: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-700);
}

/* ==================== DATE PICKER (v3.1) ==================== */
.date-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
}

.date-input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.date-input-group input {
  border: none;
  outline: none;
  font-size: 14px;
  width: 100px;
  text-align: center;
}

.date-input-group .separator {
  color: var(--gray-400);
  font-weight: 500;
}

.date-input-group .icon {
  color: var(--gray-400);
}

.date-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.date-preset-btn {
  padding: 6px 12px;
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.date-preset-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.date-preset-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* Calendar Dropdown */
.date-picker-container {
  position: relative;
}

.date-calendar {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 99999;
  min-width: 280px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-header span {
  font-weight: 600;
  font-size: 15px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.calendar-day-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  padding: 8px 0;
}

.calendar-day {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s;
}

.calendar-day:hover {
  background: var(--gray-100);
}

.calendar-day.selected {
  background: var(--primary);
  color: white;
}

.calendar-day.range {
  background: var(--primary-light);
  border-radius: 0;
}

.calendar-day.range-start {
  border-radius: 9999px 0 0 9999px;
}

.calendar-day.range-end {
  border-radius: 0 9999px 9999px 0;
}

.calendar-day.range-start.range-end {
  border-radius: 9999px;
}

.calendar-day.today {
  font-weight: 700;
  color: var(--primary);
}

.calendar-day.inactive {
  color: var(--gray-300);
}

/* ==================== MULTI-SELECT DROPDOWN ==================== */
.multi-select-dropdown {
  position: relative;
}

.multi-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 14px;
  min-width: 160px;
}

.multi-select-trigger:hover {
  border-color: var(--gray-400);
}

.multi-select-dropdown.open .multi-select-trigger {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.multi-select-options {
  position: fixed;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  max-height: 240px;
  min-width: 200px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.multi-select-dropdown.open .multi-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.multi-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 14px;
}

.multi-option:hover {
  background: var(--gray-50);
}

.multi-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.report-header-toolbar {
  width: max-content;
  max-width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.report-filter-control {
  width: 180px;
  min-width: 160px;
}

.report-filter-control--date {
  width: 224px;
  min-width: 200px;
}

.report-icon-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.report-multi-filter,
.report-multi-filter .multi-select-trigger {
  width: 100%;
  min-width: 0;
}

.report-multi-filter .multi-select-trigger {
  min-height: 38px;
  padding: 8px 10px;
  border-color: var(--color-gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 600;
}

.report-multi-filter .multi-select-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-multi-filter .multi-select-trigger svg,
.report-multi-filter .multi-select-trigger i {
  width: 15px;
  height: 15px;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.report-multi-filter__menu {
  min-width: 240px;
  max-height: none;
  overflow: visible;
}

.report-multi-filter__search {
  border-bottom: 1px solid var(--color-gray-200);
}

.report-multi-filter__options {
  max-height: 240px;
  overflow: auto;
}

.report-multi-filter__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--color-gray-200);
  background: #fff;
  position: sticky;
  bottom: 0;
}

.report-multi-filter__actions button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--color-gray-600);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.report-multi-filter__actions button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.price-changes-page .erp-page-header__controls {
  flex: 0 0 auto;
  min-width: 0;
  max-width: calc(100% - 360px);
  justify-content: flex-start;
  overflow: visible;
  scrollbar-width: none;
}

.price-changes-page .erp-page-header__controls::-webkit-scrollbar {
  display: none;
}

.price-changes-page .price-changes-advanced-filters {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: center;
  gap: 10px;
}

.price-changes-page .price-changes-advanced-filters > * {
  min-width: 0;
}

.courier-analytics-page .erp-page-header__controls {
  flex: 0 0 auto;
  min-width: 0;
  max-width: calc(100% - 360px);
  justify-content: flex-start;
  overflow: visible;
  scrollbar-width: none;
}

.courier-analytics-page .erp-page-header__controls::-webkit-scrollbar {
  display: none;
}

.courier-analytics-page .courier-analytics-toolbar {
  max-width: none;
  grid-template-columns: repeat(3, 78px) 224px 180px 180px 38px;
}

.price-changes-page .price-changes-primary-toolbar {
  max-width: none;
  grid-template-columns: 224px 180px 180px 38px;
}

.courier-analytics-page .courier-analytics-toolbar > .btn:not(.report-icon-btn) {
  min-width: 78px;
}

@media (max-width: 1180px) {
  .price-changes-page .erp-page-header__controls,
  .courier-analytics-page .erp-page-header__controls {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow: visible;
  }

  .price-changes-page .price-changes-primary-toolbar,
  .courier-analytics-page .courier-analytics-toolbar {
    width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    white-space: normal;
  }

  .price-changes-page .report-filter-control,
  .price-changes-page .report-filter-control--date,
  .courier-analytics-page .report-filter-control,
  .courier-analytics-page .report-filter-control--date {
    width: 100%;
    min-width: 0;
  }

  .courier-analytics-page .courier-analytics-toolbar > .btn:not(.report-icon-btn) {
    min-width: 0;
  }

  .price-changes-page .report-icon-btn,
  .courier-analytics-page .report-icon-btn {
    justify-self: end;
  }
}

.concept-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==================== DATE RANGE PICKER ==================== */
.date-range-picker {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.date-range-picker-host {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.date-range-picker-host--end {
  margin-left: auto;
}

.date-range-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  min-height: 46px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-size: 14px;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

.date-range-trigger--lg {
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 15px;
}

.date-range-trigger--sm {
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  gap: 8px;
}

.date-range-trigger--sm .dp-icon {
  width: 16px;
  height: 16px;
}

.date-range-trigger--sm .dp-text {
  font-size: inherit;
}

.date-range-trigger:hover {
  border-color: var(--color-gray-300);
}

.date-range-trigger:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.date-range-picker.open .date-range-trigger {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.date-range-trigger .dp-icon {
  width: 18px;
  height: 18px;
  color: var(--color-gray-400);
  flex-shrink: 0;
}

.date-range-trigger .dp-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.2;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-range-trigger .dp-text.dp-placeholder {
  color: var(--color-gray-400);
  font-weight: 400;
}

.date-range-display {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}

.date-range-display--single {
  flex: 1 1 auto;
  min-width: 0;
}

.date-range-picker[data-single-date="true"] .date-range-trigger,
.date-range-picker[data-single-date="true"] .date-range-display--single {
  white-space: nowrap;
}

.date-range-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 99999;
  min-width: 320px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.date-range-picker.open .date-range-dropdown {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.date-range-calendar .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.date-range-calendar .calendar-header-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--gray-900);
}

.date-range-calendar .calendar-nav-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: all 0.15s;
}

.date-range-calendar .calendar-nav-btn:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.date-range-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.orders-filters-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ==================== TOASTS ==================== */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideIn 0.2s ease;
  max-width: 360px;
}

.toast-success {
  border-left: 3px solid var(--success);
}

.toast-error {
  border-left: 3px solid var(--danger);
}

.toast-warning {
  border-left: 3px solid var(--warning);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==================== DETAIL PAGE ==================== */
.page-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-btn {
  color: var(--gray-500);
  padding: 8px;
  border-radius: var(--radius);
}

.back-btn:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
}

.page-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}

/* Image Gallery */
.gallery {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gallery-main {
  aspect-ratio: 4/3;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--gray-200);
  overflow-x: auto;
}

.gallery-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.gallery-thumb:hover,
.gallery-thumb.active {
  opacity: 1;
}

.gallery-thumb.active {
  border-color: var(--primary);
}

.gallery-thumb-wrap {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
}

.invoice-page-thumb-delete {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--erp-alert-danger);
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
  cursor: pointer;
}

.invoice-page-thumb-delete svg,
.invoice-page-thumb-delete i {
  width: 13px;
  height: 13px;
}

.invoice-page-thumb-delete:hover {
  background: var(--color-danger-dark);
}

.invoice-line-uom-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  white-space: nowrap;
}

.invoice-line-uom-control .pure-dropdown {
  min-width: 0;
}

.invoice-line-uom-info {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  background: #fff;
  color: var(--gray-500);
  cursor: pointer;
}

.invoice-line-uom-info svg,
.invoice-line-uom-info i {
  width: 15px;
  height: 15px;
}

.invoice-line-uom-info:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

/* ==================== CAMERA ==================== */
.invoice-capture-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.invoice-capture-actions.has-native-scan {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoice-capture-action {
  min-width: 0;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  color: var(--gray-800);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.invoice-capture-action:hover {
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--gray-200));
  box-shadow: 0 8px 22px rgba(30, 64, 175, 0.09);
  transform: translateY(-1px);
}

.invoice-capture-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  outline-offset: 2px;
}

.invoice-capture-action__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--color-primary);
}

.invoice-capture-action__icon svg {
  width: 19px;
  height: 19px;
}

.invoice-capture-action strong,
.invoice-capture-action small {
  display: block;
}

.invoice-capture-action strong {
  color: var(--gray-900);
  font-size: 13px;
  line-height: 1.25;
}

.invoice-capture-action small {
  margin-top: 4px;
  color: var(--gray-500);
  font-size: 11px;
  line-height: 1.35;
}

.camera-wrapper {
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  position: relative;
}

.camera-mode-label {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  align-items: center;
}

.capture-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.capture-btn:active {
  transform: scale(0.9);
}

.captured-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.captured-photo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  object-fit: cover;
  position: relative;
}

.captured-photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 620px) {
  .invoice-capture-actions {
    grid-template-columns: 1fr;
  }

  .invoice-capture-action {
    min-height: 78px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .invoice-capture-action__icon {
    flex: 0 0 38px;
  }
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
  text-align: center;
  padding: 64px 24px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--gray-700);
}

.empty-text {
  color: var(--gray-500);
  margin-bottom: 24px;
}

/* ==================== UTILITIES ==================== */
.text-muted {
  color: var(--gray-500);
}

.text-right {
  text-align: right;
}

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

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.cursor-pointer {
  cursor: pointer;
}

/* ==================== RESPONSIVE ==================== */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--gray-700);
  cursor: pointer;
  margin-right: 12px;
}

@media (max-width: 1024px) {
  html {
    scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 16px);
  }

  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main {
    margin-left: 0;
  }

  .nav-item.active {
    background: var(--color-gray-100);
    box-shadow: none;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

@media (max-width: 768px) {
  html {
    font-size: 13px;
  }

  .header {
    padding: 0 16px;
  }

  .content {
    padding: 16px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Mobile Cards instead of Table */
  .mobile-cards table thead {
    display: none;
  }

  .mobile-cards table tbody tr {
    display: block;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    padding: 16px;
  }

  .mobile-cards table td {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border: none;
  }

  .mobile-cards table td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--gray-500);
  }

  .modal {
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-body {
    max-height: calc(100vh - 140px);
  }

  /* Mobile-friendly inputs */
  .form-input,
  .form-select {
    min-height: 44px;
    font-size: 16px;
    /* Prevents iOS zoom on focus */
  }

  /* Mobile header actions - hide on mobile */
  #headerActions {
    display: none !important;
  }

  .app-launcher-wrapper {
    display: none !important;
  }

  /* Invoice list mobile cards */
  .invoice-card {
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
  }

  /* Detail page mobile */
  .detail-container .card {
    margin-bottom: 12px;
  }

  /* Grid layouts on mobile */
  .detail-container [style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }

  /* Table horizontal scroll container */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Bigger touch targets */
  .btn-sm {
    min-height: 36px;
    min-width: 36px;
    padding: 8px 12px;
  }

  .btn-ghost {
    min-height: 40px;
    min-width: 40px;
  }

  /* Toast positioning on mobile */
  .toast-container {
    left: 16px;
    right: 16px;
    width: auto;
  }

  .toast {
    max-width: 100%;
  }

  /* Recipe detail mobile */
  .recipe-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Page title smaller on mobile */
  #pageTitle {
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw;
  }
}

/* Mobile Overlay for Sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

@media (max-width: 1024px) {
  .sidebar.open+.sidebar-overlay {
    display: block;
  }
}

/* User Menu Popover */
.sidebar-footer {
  position: relative;
}

.user-menu-popover {
  position: absolute;
  bottom: 100%;
  left: 16px;
  right: 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 150;
  overflow: hidden;
}

.user-menu-popover.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.popover-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  color: var(--gray-700);
  transition: background 0.15s;
}

.popover-item:hover {
  background: var(--gray-50);
}

.popover-item.text-danger {
  color: var(--danger);
}

.popover-section-label {
  padding: 14px 16px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--gray-500);
}

.popover-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 12px 0 6px;
}

.locale-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px 8px;
}

.locale-switcher__btn:nth-child(3) {
  grid-column: 1 / -1;
}

.locale-switcher__btn {
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-700);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.locale-switcher__btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.locale-switcher__btn.active {
  border-color: rgba(var(--color-primary-hover-rgb), 0.4);
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.14), rgba(var(--color-primary-hover-rgb), 0.08));
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.08);
}

/* ==================== ARABIC / RTL FOUNDATION ==================== */
html.locale-ar body {
  font-family: 'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  direction: rtl;
}

html.locale-ar .sidebar {
  right: 0;
  left: auto;
}

html.locale-ar .main {
  margin-right: var(--sidebar-width);
  margin-left: 0;
}

html.locale-ar .horex-brand__logo {
  object-position: right center;
}

html.locale-ar .header-search-label,
html.locale-ar .org-switcher-card,
html.locale-ar .org-dropdown-item,
html.locale-ar .pure-dropdown-item,
html.locale-ar .form-label,
html.locale-ar .info-label,
html.locale-ar .info-grid label {
  text-align: start;
}

html.locale-ar .nav-collapse-chevron-wrap,
html.locale-ar .nav-item-badge {
  margin-right: auto;
  margin-left: 0;
}

html.locale-ar .nav-child-item {
  padding-right: 40px;
  padding-left: 12px;
}

html.locale-ar .header-profile .header-user-popover,
html.locale-ar .header-notification-popover {
  right: auto;
  left: 0;
  transform-origin: top left;
}

html.locale-ar .app-launcher-dropdown {
  right: auto;
  left: 24px;
}

html.locale-ar input[type="email"],
html.locale-ar input[type="number"],
html.locale-ar input[type="tel"],
html.locale-ar input[type="url"],
html.locale-ar input[data-ltr],
html.locale-ar textarea[data-ltr],
html.locale-ar [data-ltr],
html.locale-ar code,
html.locale-ar pre,
html.locale-ar .u-font-mono {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

html.locale-ar .header-notification-badge {
  right: auto;
  left: 1px;
}

html.locale-ar .tree-row__chevron {
  transform: scaleX(-1);
}

/* Attendance, Inbox and Procurement: mirror navigational chrome while keeping
   technical values and chat ownership rails stable. */
html.locale-ar [data-inbox-i18n] .inbox-sidebar {
  border-right: 0;
  border-left: 1px solid var(--gray-200);
}

html.locale-ar [data-inbox-i18n] .inbox-conversation-item {
  border-left: 0;
  border-right: 3px solid transparent;
}

html.locale-ar [data-inbox-i18n] .inbox-conversation-item.active {
  border-right-color: var(--primary);
}

html.locale-ar [data-inbox-i18n] .inbox-search input {
  padding-right: 40px;
  padding-left: 12px;
}

html.locale-ar [data-inbox-i18n] .inbox-search i,
html.locale-ar [data-inbox-i18n] .inbox-search svg {
  right: 12px;
  left: auto;
}

html.locale-ar [data-inbox-i18n] .inbox-filter-tab .count {
  margin-right: 4px;
  margin-left: 0;
}

html.locale-ar [data-inbox-i18n] .inbox-avatar .channel-badge {
  right: auto;
  left: 0;
}

html.locale-ar [data-inbox-i18n] .inbox-back-btn {
  margin-right: 0;
  margin-left: 8px;
}

html.locale-ar [data-inbox-i18n] .inbox-back-btn svg {
  transform: scaleX(-1);
}

html.locale-ar [data-inbox-i18n] .inbox-customer-panel {
  border-left: 0;
  border-right: 1px solid var(--gray-200);
}

html.locale-ar [data-inbox-i18n] .message-bubble {
  direction: ltr;
}

html.locale-ar [data-inbox-i18n] .message-bubble > div {
  direction: rtl;
}

html.locale-ar [data-procurement-i18n] .lucide-arrow-right,
html.locale-ar [data-procurement-i18n] .lucide-arrow-left,
html.locale-ar [data-procurement-i18n] .lucide-chevron-right,
html.locale-ar [data-procurement-i18n] .lucide-chevron-left {
  transform: scaleX(-1);
}

html.locale-ar [data-procurement-i18n] .pod-items-table th,
html.locale-ar [data-procurement-i18n] .pod-items-table td {
  text-align: right;
}

html.locale-ar [data-procurement-i18n] .pod-items-table [data-ltr],
html.locale-ar [data-procurement-i18n] .pod-summary-row [data-ltr],
html.locale-ar [data-procurement-i18n] .po-receive-line [data-ltr],
html.locale-ar [data-procurement-i18n] .po-receive-qty,
html.locale-ar [data-procurement-i18n] .po-receive-difference,
html.locale-ar [data-procurement-i18n] .po-order-number,
html.locale-ar [data-procurement-i18n] .po-order-amount,
html.locale-ar [data-procurement-i18n] .po-supplier-option .date,
html.locale-ar [data-procurement-i18n] .po-supplier-option .price,
html.locale-ar [data-procurement-i18n] .po-cart-item .item-details,
html.locale-ar [data-procurement-i18n] .po-cart-item .item-total {
  text-align: left !important;
}

html.locale-ar [data-procurement-i18n] .po-search-results {
  right: 0;
  left: 0;
  text-align: right;
}

/* References: mirror table rails and the nested Integrations workspace. */
html.locale-ar [data-references-i18n] table th.erp-table-align--text,
html.locale-ar [data-references-i18n] table td.erp-table-align--text {
  text-align: right !important;
}

html.locale-ar [data-references-i18n] table th.erp-table-align--number,
html.locale-ar [data-references-i18n] table td.erp-table-align--number,
html.locale-ar [data-references-i18n] table th.erp-table-align--terminal,
html.locale-ar [data-references-i18n] table td.erp-table-align--terminal {
  text-align: left !important;
}

html.locale-ar [data-references-i18n] table td.erp-table-align--terminal > a,
html.locale-ar [data-references-i18n] table td.erp-table-align--terminal > div {
  justify-content: flex-start;
  margin-right: auto;
  margin-left: 0;
}

html.locale-ar [data-references-i18n] .integration-sidebar {
  border-right: 0 !important;
  border-left: 1px solid var(--gray-200) !important;
}

html.locale-ar [data-references-i18n] .int-nav-item {
  border-left: 0 !important;
  border-right: 3px solid transparent !important;
}

html.locale-ar [data-references-i18n] .int-nav-item.active {
  border-right-color: var(--primary) !important;
}

html.locale-ar [data-references-i18n] .int-subitem {
  padding-right: 40px !important;
  padding-left: 16px !important;
}

html.locale-ar [data-references-i18n] .int-badge,
html.locale-ar [data-references-i18n] .int-soon {
  margin-right: auto !important;
  margin-left: 0 !important;
}

html.locale-ar [data-references-i18n] .qr-copy-btn {
  right: auto !important;
  left: 8px !important;
}

@media (max-width: 768px) {
  html.locale-ar [data-references-i18n] .integration-sidebar {
    border-left: 0 !important;
  }

  html.locale-ar [data-references-i18n] .integration-nav .int-nav-item {
    border-right: 0 !important;
  }
}

/* Finance: keep narrative columns on the RTL start edge and numeric rails LTR. */
html.locale-ar [data-finance-i18n] table th,
html.locale-ar [data-finance-i18n] table td {
  text-align: right;
}

html.locale-ar [data-finance-i18n] table th.u-text-right,
html.locale-ar [data-finance-i18n] table td.u-text-right,
html.locale-ar [data-finance-i18n] table th[data-ltr],
html.locale-ar [data-finance-i18n] table td[data-ltr],
html.locale-ar [data-finance-i18n] .invoice-amount,
html.locale-ar [data-finance-i18n] .col-price,
html.locale-ar [data-finance-i18n] .col-total,
html.locale-ar [data-finance-i18n] .col-cost,
html.locale-ar [data-finance-i18n] .col-markup,
html.locale-ar [data-finance-i18n] .col-profit {
  text-align: left !important;
}

html.locale-ar [data-finance-i18n] .u-text-right:not([dir="auto"]) {
  text-align: left !important;
}

html.locale-ar [data-finance-i18n] .lucide-arrow-right,
html.locale-ar [data-finance-i18n] .lucide-arrow-left,
html.locale-ar [data-finance-i18n] .lucide-chevron-right,
html.locale-ar [data-finance-i18n] .lucide-chevron-left {
  transform: scaleX(-1);
}

html.locale-ar [data-finance-i18n] .fq-search-results {
  right: 0;
  left: auto;
  text-align: right;
}

html.locale-ar [data-finance-i18n] .column-resizer {
  right: auto !important;
  left: 0 !important;
}

html.locale-ar [data-finance-i18n] .pnl-secondary-toggle,
html.locale-ar [data-finance-i18n] .pnl-apply-button,
html.locale-ar [data-finance-i18n] .pure-dropdown-trigger,
html.locale-ar [data-finance-i18n] .erp-control,
html.locale-ar [data-finance-i18n] .form-input,
html.locale-ar [data-finance-i18n] .form-select {
  text-align: start;
}

html.locale-ar [data-finance-i18n] .reconcile-hero button,
html.locale-ar [data-finance-i18n] .accounting-vendor-row,
html.locale-ar [data-finance-i18n] .cf-branch-detail {
  direction: rtl;
}

/* Reports: mirror narrative UI while keeping measures, dates and IDs LTR. */
html.locale-ar [data-reports-i18n] table th,
html.locale-ar [data-reports-i18n] table td {
  text-align: right;
}

html.locale-ar [data-reports-i18n] table th.u-text-right,
html.locale-ar [data-reports-i18n] table td.u-text-right,
html.locale-ar [data-reports-i18n] table th[data-ltr],
html.locale-ar [data-reports-i18n] table td[data-ltr],
html.locale-ar [data-reports-i18n] .u-money-nowrap,
html.locale-ar [data-reports-i18n] .item-perf-th--right {
  text-align: left !important;
}

html.locale-ar [data-reports-i18n] .u-text-right:not([dir="auto"]) {
  text-align: left !important;
}

html.locale-ar [data-reports-i18n] .lucide-arrow-right,
html.locale-ar [data-reports-i18n] .lucide-arrow-left,
html.locale-ar [data-reports-i18n] .lucide-chevron-right,
html.locale-ar [data-reports-i18n] .lucide-chevron-left {
  transform: scaleX(-1);
}

html.locale-ar [data-reports-i18n] .pure-dropdown-trigger,
html.locale-ar [data-reports-i18n] .multi-select-trigger,
html.locale-ar [data-reports-i18n] .erp-control,
html.locale-ar [data-reports-i18n] .form-input,
html.locale-ar [data-reports-i18n] .form-select,
html.locale-ar [data-reports-i18n] .report-multi-filter__search {
  text-align: start;
}

html.locale-ar [data-reports-i18n] .column-resizer {
  right: auto !important;
  left: 0 !important;
}

html.locale-ar [data-reports-i18n] .olap-sticky-col {
  right: 0;
  left: auto;
}

html.locale-ar [data-reports-i18n] .comp-table-scroll,
html.locale-ar [data-reports-i18n] .olap-v2-result-body {
  direction: rtl;
}

html.locale-ar [data-reports-i18n] [data-ltr] {
  unicode-bidi: isolate;
}

.core-price-changes-search__icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  width: 17px;
  height: 17px;
  color: var(--gray-400);
  transform: translateY(-50%);
}

.core-price-changes-search__input {
  height: 40px;
  padding-inline-start: 38px;
}

@media (min-width: 1025px) {
  html.locale-ar .sidebar {
    right: var(--erp-shell-gap);
    left: auto;
    padding-right: 0;
    padding-left: var(--erp-shell-overlap);
    border-radius: 0 var(--erp-shell-radius) var(--erp-shell-radius) 0;
  }

  html.locale-ar .main {
    margin: var(--erp-shell-gap) calc(var(--sidebar-width) + var(--erp-shell-gap))
      var(--erp-shell-gap) var(--erp-shell-gap);
  }
}

@media (max-width: 1024px) {
  html.locale-ar .sidebar {
    transform: translateX(100%);
  }

  html.locale-ar .sidebar.open {
    transform: translateX(0);
  }

  html.locale-ar .main {
    margin-right: 0;
  }
}

/* Line Total Lock Button */
.btn-lock {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 50%;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s;
  vertical-align: middle;
}

.btn-lock:hover {
  opacity: 1;
  background: var(--gray-100);
}

.btn-lock.locked {
  opacity: 1;
  color: var(--warning);
}

@media (max-width: 768px) {
  .btn-lock {
    font-size: 14px;
    padding: 4px 8px;
    min-width: 32px;
    min-height: 32px;
  }
}

/* UOM Info Button & Popup */
.btn-uom-info {
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: all 0.15s;
  flex-shrink: 0;
  color: var(--gray-600);
  padding: 0;
}

.btn-uom-info:hover {
  opacity: 1;
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.uom-info-popup {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  min-width: 280px;
  max-width: 380px;
  font-size: 13px;
}

.uom-info-header {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 8px;
}

.uom-info-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin-bottom: 6px;
}

.uom-info-base {
  margin-top: 3px;
  color: var(--gray-500);
  font-size: 11px;
}

.uom-info-used {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--success-200, #bbf7d0);
  border-radius: 10px;
  background: var(--success-50, #f0fdf4);
}

.uom-info-used__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--success-800, #166534);
  font-size: 11px;
  font-weight: 700;
}

.uom-info-used__formula {
  color: var(--gray-900);
  font-size: 14px;
}

.uom-info-used__calculation {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 7px;
  color: var(--gray-500);
  font-size: 11px;
}

.uom-info-used__calculation strong {
  color: var(--gray-700);
  font-size: 12px;
}

.uom-info-snapshot-missing {
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid var(--warning-200, #fde68a);
  border-radius: 8px;
  background: var(--warning-50, #fffbeb);
  color: var(--warning-800, #92400e);
  font-size: 12px;
}

.uom-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  flex-wrap: wrap;
}

.uom-info-row__formula {
  font-size: 12px;
}

.uom-info-row__scope {
  flex-basis: 100%;
  padding-left: 34px;
  color: var(--gray-400);
  font-size: 11px;
}

.uom-info-empty {
  padding: 4px 0;
  color: var(--gray-400);
  font-size: 12px;
}

[dir="rtl"] .uom-info-row__scope {
  padding-right: 34px;
  padding-left: 0;
}

/* ==================== DISHES TREE VIEW ==================== */
.dishes-tree {
  padding: 8px 0;
}

.tree-folder {
  margin-bottom: 2px;
}

.tree-folder-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.15s ease;
  gap: 8px;
}

.tree-folder-header:hover {
  background: var(--gray-100);
}

.tree-toggle {
  width: 16px;
  font-size: 10px;
  color: var(--gray-500);
  text-align: center;
  flex-shrink: 0;
}

.tree-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.tree-name {
  flex: 1;
  font-weight: 500;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-count {
  font-size: 12px;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

.tree-action {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tree-folder-header:hover .tree-action,
.tree-dish:hover .tree-action {
  opacity: 1;
}

.tree-folder-content {
  margin-left: 0;
}

.tree-dish {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.15s ease;
  gap: 8px;
}

.tree-dish:hover {
  background: var(--gray-50);
}

.tree-dish .tree-name {
  font-weight: 400;
}

.tree-code {
  font-size: 11px;
  color: var(--gray-500);
  font-family: monospace;
  padding: 2px 6px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
}

.tree-price {
  font-size: 13px;
  color: var(--success);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 70px;
  text-align: right;
}

.tree-dish.dragging,
.tree-folder.dragging {
  opacity: 0.4;
}

.tree-folder-header.drag-over,
.tree-folder.drag-over>.tree-folder-header {
  background: var(--primary-light);
  outline: 2px dashed var(--primary);
}

.tree-uncategorized .tree-folder-header {
  background: transparent;
}

.tree-uncategorized .tree-name {
  font-style: italic;
}

/* Drop zones */
.drop-zone {
  height: 0;
  overflow: hidden;
  transition: height 0.15s ease, background 0.15s ease;
  border-radius: var(--radius);
  margin: 0 8px;
}

.drop-zone-before {
  margin-bottom: -2px;
}

.drop-zone-inside {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--primary);
  margin-top: 4px;
}

.drop-zone-active {
  height: 36px;
  background: var(--primary-light);
  border: 2px dashed var(--primary);
}

.drop-zone-active span {
  opacity: 1;
}

.drop-zone span {
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* Highlight animation for drilldown */
@keyframes highlight-fade {
  0% {
    background-color: var(--primary-light);
  }

  100% {
    background-color: transparent;
  }
}

.highlight-pulse {
  background-color: var(--primary-light);
  animation: highlight-fade 3s ease-out forwards;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* ==================== MOBILE CARD LIST ==================== */
/* Hide mobile cards on desktop by default */
.mobile-card-list {
  display: none;
}

/* Desktop/Mobile visibility toggles */
.show-on-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }

  .show-on-mobile {
    display: block !important;
  }

  .show-on-mobile.mobile-card-list {
    display: block !important;
  }

  /* Cash Flow responsive grids */
  .cf-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .cf-chart-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==================== MOBILE CARD (unified) ==================== */
.mobile-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.15s ease;
}

.mobile-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.mobile-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mobile-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-card__title-group {
  flex: 1;
  min-width: 0;
}

.mobile-card__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-card__subtitle {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.mobile-card__badge {
  flex-shrink: 0;
}

.mobile-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--gray-100);
}

.mobile-card__label {
  font-size: 12px;
  color: var(--gray-500);
}

.mobile-card__value {
  font-size: 13px;
  color: var(--gray-700);
  text-align: right;
}

/* Mobile-responsive table: tighter padding, smaller font on mobile */
@media (max-width: 768px) {
  .table-responsive,
  .table-container,
  .table-card,
  .invoices-table-card,
  .comp-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .table-responsive table,
  .table-container table,
  .table-card table,
  .invoices-table-card table {
    min-width: max-content;
  }

  .table-card th {
    padding: 8px 10px;
    font-size: 11px;
  }

  .table-card td {
    padding: 10px;
    font-size: 13px;
  }
}

/* Mobile Invoice Card Styles (legacy — use .mobile-card for new pages) */
.mobile-invoice-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-invoice-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.mobile-invoice-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.mobile-invoice-card-header > div:first-child {
  min-width: 0;
}

.mobile-invoice-card-actions {
  display: flex;
  align-items: flex-start;
  flex: none;
  gap: 4px;
}

.mobile-invoice-card-select {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-invoice-card-select .invoice-settlement-checkbox {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  .invoices-v2 .erp-bulk-actions-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  .invoices-v2 .erp-bulk-actions-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-left: 0;
  }

  .invoices-v2 .erp-bulk-actions-controls .btn {
    min-height: 44px;
    height: auto;
    white-space: normal;
  }
}

.mobile-invoice-card-number {
  font-weight: 600;
  color: var(--gray-900);
  font-size: 15px;
}

.mobile-invoice-card-date {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

.mobile-invoice-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--gray-100);
}

.mobile-invoice-card-label {
  font-size: 12px;
  color: var(--gray-500);
}

.mobile-invoice-card-value {
  font-size: 13px;
  color: var(--gray-700);
}

.mobile-invoice-card-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}

/* ==================== INVOICES PAGE (Purchases/Stock) ==================== */
/* Width is owned by the shared content-shell mode; page styles must not re-cap it. */
.invoices-v2 {
  margin: 0 auto;
}

.invoices-header-row {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.invoices-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invoices-header-icon {
  width: 40px;
  height: 40px;
  background: var(--gray-100);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
}

.invoices-header-icon svg {
  width: 20px;
  height: 20px;
}

.invoices-header-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
}

.invoices-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.invoices-header-badge svg {
  width: 14px;
  height: 14px;
}

.invoices-header-badge.warning {
  background: #fff;
  border: 1px solid currentColor;
  color: var(--color-warning-700);
}

.invoices-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Invoice header actions — inherit global 37px default */

/* ==================== SURFACE (v3.2) ====================
   One card surface for the whole ERP: the page header's radius and soft blue
   shadow apply to every top-level card, panel and table wrapper. A surface
   nested inside another surface is a section, not a second object, so it
   stays flat. Clickable surfaces and rows lift on hover. */
:root {
  --surface-radius: 16px;
  --surface-shadow: 0 1px 2px rgba(15, 23, 42, 0.025), 0 8px 24px rgba(30, 64, 175, 0.045);
  --surface-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.03), 0 12px 32px rgba(30, 64, 175, 0.09);
}
.card, .erp-panel, .erp-data-table-wrap, .table-card, .table-container, .profile-card {
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
}
.card .card, .card .erp-panel, .card .erp-data-table-wrap, .card .table-card, .card .profile-card,
.erp-panel .erp-panel, .erp-panel .card, .erp-panel .erp-data-table-wrap, .erp-panel .table-card,
.profile-card .card, .profile-card .erp-data-table-wrap,
.erp-action-card .erp-data-table-wrap, .erp-panel-card .erp-data-table-wrap, .hgm-panel .erp-data-table-wrap, .erp-detail-grid__aside .erp-data-table-wrap,
.modal-body .card, .modal-body .erp-panel, .modal-body .erp-data-table-wrap, .horex-modal .card, .horex-modal .erp-panel,
.onboarding-flow .card, .onboarding-flow .erp-panel, .onboarding-flow .erp-data-table-wrap,
.erp-skeleton-metric-card .card {
  border-radius: 12px;
  box-shadow: none;
}
.card[onclick], .erp-panel[onclick], .card[role="button"], .erp-panel[role="button"], .card--link, .erp-panel--link {
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.card[onclick]:hover, .erp-panel[onclick]:hover, .card[role="button"]:hover, .erp-panel[role="button"]:hover, .card--link:hover, .erp-panel--link:hover {
  border-color: var(--color-primary-300);
  box-shadow: var(--surface-shadow-hover);
}
.erp-data-table__row--link { cursor: pointer; }
.erp-data-table__row--link:hover td { background: var(--color-primary-light); }
.erp-data-table__row--link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
/* ==================== ERP PAGE HEADER ==================== */
.erp-page-header {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--surface-radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--surface-shadow);
}

.erp-page-header__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.erp-page-header__identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1 320px;
}

.erp-page-header__back {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.erp-page-header__back:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.erp-page-header__back:focus-visible {
  outline: 2px solid rgba(var(--color-primary-rgb), 0.2);
  outline-offset: 2px;
}

.erp-page-header__back svg,
.erp-page-header__back i {
  width: 20px;
  height: 20px;
}

.erp-page-header__back--normalized {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--gray-500) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

.erp-page-header__back--normalized:hover {
  background: var(--gray-100) !important;
  color: var(--gray-700) !important;
}

.erp-page-header__back--normalized svg,
.erp-page-header__back--normalized i {
  width: 20px !important;
  height: 20px !important;
}

.erp-page-header__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.erp-page-header__icon svg,
.erp-page-header__icon i {
  width: 20px;
  height: 20px;
  stroke-width: 1.4;
}

.erp-page-header__icon--blue,
.erp-page-header__icon--emerald,
.erp-page-header__icon--amber,
.erp-page-header__icon--violet,
.erp-page-header__icon--rose,
.erp-page-header__icon--slate {
  background: var(--color-primary-hover);
  color: #fff;
}

.erp-page-header__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.erp-page-header__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.erp-page-header__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.erp-page-header__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gray-500);
  min-height: 18px;
}

.erp-page-header__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.erp-page-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
}

.erp-page-header__badge svg,
.erp-page-header__badge i {
  width: 14px;
  height: 14px;
}

.erp-page-header__badge--blue {
  background: #fff;
  border-color: var(--color-primary-hover);
  color: var(--primary-hover);
}

.erp-page-header__badge--emerald {
  background: #fff;
  border-color: var(--color-success-dark);
  color: var(--color-success-700);
}

.erp-page-header__badge--amber {
  background: #fff;
  border-color: var(--color-warning-dark);
  color: var(--color-warning-700);
}

.erp-page-header__badge--rose {
  background: #fff;
  border-color: var(--color-danger-dark);
  color: #be123c;
}

.erp-page-header__badge--slate {
  background: #fff;
  border-color: var(--gray-400);
  color: var(--gray-600);
}

.erp-page-header__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 560px;
  min-width: 0;
  max-width: 1100px;
}

.erp-page-header__control {
  min-width: 0;
  margin: 0 !important;
}

.erp-page-header__control--field {
  flex: 0 1 auto;
  width: auto !important;
}

.erp-page-header__control--select {
  flex-basis: 160px;
  width: 160px !important;
  min-width: 132px;
  max-width: 220px;
}

.erp-page-header__control--search {
  flex: 1 1 240px;
  width: clamp(200px, 22vw, 300px) !important;
  max-width: 320px !important;
}

.erp-page-header__control--date {
  flex: 0 1 auto;
  width: auto !important;
  max-width: 280px;
}

.erp-page-header__control--group {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}

.erp-page-header__filter-row.erp-page-header__control--group {
  justify-content: flex-end;
}

.erp-page-header__control--action {
  flex: 0 0 auto;
  width: auto !important;
  white-space: nowrap;
}

.erp-page-header__control--full {
  flex: 1 0 100%;
  width: 100% !important;
  max-width: none !important;
}

/* Header controls — inherit global 37px default */

.erp-page-header__secondary {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.erp-page-header__filter-row-content {
  display: contents;
}

.erp-page-header__mobile-filter-button {
  min-height: 36px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--color-gray-700);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  cursor: pointer;
}

.erp-page-header__mobile-filter-button i,
.erp-page-header__mobile-filter-button svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary);
}

.erp-page-header__mobile-filter-button strong {
  min-width: 18px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
}

.erp-filter-horex-modal .modal-title {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 17px;
  font-weight: 700;
}

.erp-filter-horex-modal .modal-body {
  display: grid;
  gap: 12px;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.erp-filter-horex-modal .modal-body > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.erp-filter-horex-modal .modal-body .ds-search-wrap,
.erp-filter-horex-modal .modal-body .pure-dropdown,
.erp-filter-horex-modal .modal-body .pure-dropdown-trigger,
.erp-filter-horex-modal .modal-body .date-range-picker,
.erp-filter-horex-modal .modal-body .date-picker-wrapper,
.erp-filter-horex-modal .modal-body .date-range-picker-host,
.erp-filter-horex-modal .modal-body .erp-page-header-filter-btn {
  width: 100% !important;
}

.erp-filter-horex-modal .pure-dropdown-menu,
.erp-filter-horex-modal .multi-select-options {
  z-index: 99999;
}

.erp-filter-horex-modal .modal-body .erp-filter-chips {
  width: 100%;
  align-items: stretch;
}

.erp-filter-horex-modal .modal-body .erp-filter-chips__chip {
  justify-content: center;
  min-height: 38px;
}

.erp-filter-horex-modal .modal-footer {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-gray-200);
  background: #fff;
  justify-content: stretch;
}

.erp-filter-horex-modal .modal-footer .btn {
  flex: 1 1 0;
  min-height: 42px;
}

.payroll-month-filter-strip {
  display: contents;
}

.payroll-month-mobile-filter-trigger {
  display: none;
}

.payroll-concept-filter-chips .erp-filter-chips__chip.active {
  border-color: var(--payroll-concept-color, var(--primary));
  background: var(--payroll-concept-color, linear-gradient(135deg, var(--primary), var(--primary-700)));
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.18);
}

.payroll-filter-modal {
  display: grid;
  gap: 16px;
}

.payroll-filter-modal__section {
  display: grid;
  gap: 10px;
}

.payroll-filter-modal__section > label {
  color: var(--color-gray-600);
  font-size: 13px;
  font-weight: 700;
}

.payroll-filter-modal__money {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--color-gray-700);
  font-size: 13px;
}

.payroll-filter-modal__money span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.payroll-filter-modal__money i,
.payroll-filter-modal__money svg {
  width: 14px;
  height: 14px;
}

.payroll-filter-modal__checks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.payroll-filter-modal__checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-gray-700);
  font-size: 13px;
}

.payroll-filter-modal__actions {
  display: grid;
  gap: 10px;
}

.payroll-filter-modal__actions .btn {
  justify-content: center;
  width: 100%;
}

.erp-page-header__support {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.erp-page-help {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--color-primary-100);
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 55%, var(--color-gray-50) 100%);
}

.erp-page-help__lead {
  display: grid;
  gap: 10px;
  align-content: start;
}

.erp-page-help__eyebrow,
.erp-page-help__link-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: none;
}

.erp-page-help__eyebrow {
  color: var(--color-gray-500);
}

.erp-page-help__title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-gray-900);
}

.erp-page-help__copy {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-gray-500);
}

.erp-page-help__badges,
.erp-page-help__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.erp-page-help__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.erp-page-help__links .docs-nav-button {
  min-height: 100%;
  box-shadow: none;
}

.erp-page-help__link-label {
  display: inline-flex;
  margin-right: 6px;
  color: var(--color-gray-400);
}

.erp-page-header__filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.erp-page-header__filter-row--end {
  justify-content: flex-end;
}

/* ── Filter Tabs ─────────────────────────────────────── */
.erp-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.erp-filter-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.erp-filter-tabs__tab svg,
.erp-filter-tabs__tab i {
  width: 14px;
  height: 14px;
  stroke-width: 1.4;
}
.erp-filter-tabs__tab:hover { border-color: var(--primary-300); color: var(--primary); }
.erp-filter-tabs__tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb),0.25);
}
.erp-filter-tabs__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.erp-filter-tabs__count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  font-weight: 600;
}
.erp-filter-tabs__tab.active .erp-filter-tabs__count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* ── Filter Chips ────────────────────────────────────── */
.erp-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.erp-filter-chips__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  background: var(--white);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.erp-filter-chips__chip i { width: 13px; height: 13px; }
.erp-filter-chips__chip:hover { border-color: var(--primary-300); color: var(--primary); }
.erp-filter-chips__chip.active {
  border-color: var(--primary);
  background: rgba(var(--color-primary-rgb),0.08);
  color: var(--primary);
  font-weight: 600;
}
.erp-filter-chips__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Documentation Library ──────────────────────────── */
.docs-page {
  display: grid;
  gap: 20px;
}

.docs-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.docs-toolbar__search {
  min-width: 0;
}

.docs-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.docs-active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 32px;
}

.docs-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--color-primary-100);
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.docs-active-filter i,
.docs-active-filter svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.docs-library-layout,
.docs-article-layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.docs-article-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.docs-explorer,
.docs-results-shell,
.docs-article-main,
.docs-article-sidebar {
  display: grid;
  gap: 16px;
}

.docs-article-sidebar {
  position: sticky;
  top: 16px;
}

.docs-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.docs-panel--sticky {
  position: sticky;
  top: 16px;
}

.docs-panel__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--color-gray-400);
}

.docs-panel__title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-gray-900);
}

.docs-panel__copy {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-gray-500);
}

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

.docs-nav-button {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  display: grid;
  gap: 6px;
}

.docs-nav-button:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

.docs-nav-button.is-active {
  border-color: var(--color-primary-200);
  background: linear-gradient(135deg, var(--primary-light), #ffffff);
  box-shadow: 0 10px 20px rgba(var(--color-primary-hover-rgb), 0.08);
}

.docs-nav-button__top,
.docs-nav-button__label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.docs-nav-button__label-wrap {
  justify-content: flex-start;
  min-width: 0;
}

.docs-nav-button__icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.docs-nav-button__icon i,
.docs-nav-button__icon svg {
  width: 14px;
  height: 14px;
}

.docs-nav-button__label {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gray-900);
}

.docs-nav-button__meta {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-gray-500);
}

.docs-nav-button__count,
.docs-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.docs-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.docs-results-head,
.docs-results-group {
  display: grid;
  gap: 14px;
}

.docs-results-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.docs-results-head h2,
.docs-results-group__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-gray-900);
}

.docs-results-head p,
.docs-results-group__copy {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-gray-500);
}

.docs-results-head__meta,
.docs-article-card__eyebrow,
.docs-article-card__tags,
.docs-article-summary__tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.docs-results-group__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.docs-card-grid,
.docs-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.docs-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.docs-article-card {
  text-align: left;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.docs-article-card:hover {
  transform: translateY(-1px);
  border-color: var(--color-gray-300);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.docs-article-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.docs-article-card__jump {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: var(--color-gray-50);
  color: var(--color-gray-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.docs-article-card__jump i,
.docs-article-card__jump svg {
  width: 16px;
  height: 16px;
}

.docs-article-card__path {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--color-gray-400);
}

.docs-article-card__title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-gray-900);
}

.docs-article-card__summary,
.docs-article-card__hint,
.docs-section__text,
.docs-step__body,
.docs-mini-card__body,
.docs-muted-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-gray-600);
}

.docs-article-card__hint {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-gray-500);
}

.docs-article-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  font-size: 12px;
  color: var(--color-gray-500);
}

.docs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}

.docs-pill--blue {
  background: var(--primary-light);
  color: var(--primary);
}

.docs-pill--emerald {
  background: #ecfdf5;
  color: var(--color-success-dark);
}

.docs-pill--amber {
  background: var(--color-warning-50);
  color: var(--color-warning-dark);
}

.docs-pill--slate {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.docs-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: 600;
}

.docs-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.docs-breadcrumbs__item {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--color-gray-500);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.docs-breadcrumbs__item:hover {
  color: var(--primary);
}

.docs-breadcrumbs__separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-300);
}

.docs-breadcrumbs__separator i,
.docs-breadcrumbs__separator svg {
  width: 14px;
  height: 14px;
}

.docs-article-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.docs-article-summary {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--color-primary-100);
  background: linear-gradient(135deg, #ffffff 0%, var(--primary-light) 100%);
}

.docs-article-summary__lead {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-gray-700);
}

.docs-article-summary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.docs-article-summary__item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
}

.docs-article-summary__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--color-gray-400);
}

.docs-article-summary__value {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--color-gray-900);
}

.docs-section {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.03);
  scroll-margin-top: 88px;
}

.docs-section--lead {
  border-color: var(--color-primary-100);
  background: linear-gradient(135deg, var(--primary-light) 0%, #ffffff 100%);
}

.docs-section--checklist {
  background: var(--color-gray-50);
}

.docs-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.docs-section__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-gray-900);
}

.docs-section__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.docs-section__icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  color: var(--color-gray-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.docs-section__icon-btn:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}

.docs-section__icon-btn--primary {
  border-color: var(--color-primary-100);
  background: var(--primary-light);
  color: var(--primary);
}

.docs-section__icon-btn i,
.docs-section__icon-btn svg {
  width: 14px;
  height: 14px;
}

.docs-section__text--lead {
  font-size: 15px;
  color: var(--color-gray-700);
}

.docs-step-list,
.docs-outline,
.docs-aside-list {
  display: grid;
  gap: 10px;
}

.docs-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

.docs-step__number {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-primary-100);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

.docs-step__title,
.docs-mini-card__title,
.docs-aside-link__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-gray-900);
}

.docs-step__title {
  margin-bottom: 6px;
}

.docs-checklist {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: var(--color-gray-600);
  font-size: 14px;
  line-height: 1.7;
}

.docs-mini-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--color-gray-200);
  background: linear-gradient(180deg, #ffffff, var(--color-gray-50));
}

.docs-callout {
  box-shadow: none;
}

.docs-callout--info {
  background: var(--primary-light);
  border-color: var(--color-primary-200);
}

.docs-callout--warn {
  background: #fff7ed;
  border-color: #fdba74;
}

.docs-callout--ok {
  background: #ecfdf5;
  border-color: var(--color-success-300);
}

.docs-outline__link,
.docs-aside-link {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all 0.15s ease;
}

.docs-outline__link:hover,
.docs-aside-link:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
}

.docs-aside-link__meta {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-gray-500);
}

.docs-empty-state {
  padding: 56px 24px;
  border-radius: 24px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
}

@media (max-width: 1100px) {
  .docs-library-layout,
  .docs-article-layout,
  .docs-results-head {
    grid-template-columns: 1fr;
  }

  .docs-panel--sticky,
  .docs-article-sidebar {
    position: static;
  }

  .docs-summary-grid,
  .docs-article-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .docs-toolbar,
  .docs-results-group__head,
  .docs-article-header-row,
  .docs-section__header {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .docs-summary-grid,
  .docs-article-summary__grid,
  .docs-card-grid,
  .docs-cards-grid {
    grid-template-columns: 1fr;
  }

  .docs-results-head,
  .docs-panel,
  .docs-section,
  .docs-article-summary,
  .docs-article-card,
  .docs-empty-state {
    padding: 16px;
    border-radius: 18px;
  }

  .docs-active-filters {
    min-height: 0;
  }

  .docs-article-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Pagination ──────────────────────────────────────── */
.erp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}
.erp-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.erp-pagination__btn i { width: 14px; height: 14px; }
.erp-pagination__btn:hover:not(:disabled) { border-color: var(--primary-300); color: var(--primary); }
.erp-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.erp-pagination__btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: #fff;
  border-color: transparent;
}
.erp-pagination__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.erp-pagination__dots {
  padding: 0 4px;
  color: var(--gray-400);
  font-size: 13px;
}
.erp-pagination__info {
  font-size: 13px;
  color: var(--gray-500);
  white-space: nowrap;
}

.erp-pagination--load-more {
  justify-content: center;
}
.erp-pagination__load-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1px dashed var(--gray-300);
  border-radius: 10px;
  background: var(--white);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.erp-pagination__load-more i { width: 16px; height: 16px; }
.erp-pagination__load-more:hover {
  border-color: var(--primary);
  background: rgba(var(--color-primary-rgb),0.04);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .erp-filter-tabs { gap: 4px; }
  .erp-filter-tabs__tab { padding: 5px 10px; font-size: 12px; }
  .erp-filter-chips__chip { padding: 4px 10px; font-size: 11px; }
  .erp-pagination { gap: 8px; flex-wrap: wrap; }
  .erp-pagination__btn { padding: 6px 10px; font-size: 12px; }
  .erp-pagination__info { font-size: 12px; }
  .erp-pagination__nav { gap: 2px; }
}

/* Filter row controls — inherit global 37px default */

.erp-page-header__controls .pure-dropdown,
.erp-page-header__filter-row .pure-dropdown,
.erp-page-header__controls .date-range-picker,
.erp-page-header__filter-row .date-range-picker,
.erp-page-header__controls .date-picker-wrapper,
.erp-page-header__filter-row .date-picker-wrapper,
.erp-page-header__controls .date-range-picker-host,
.erp-page-header__filter-row .date-range-picker-host {
  width: auto;
}

.erp-page-header__controls .date-range-picker-host,
.erp-page-header__filter-row .date-range-picker-host {
  display: inline-flex;
}

.erp-page-header-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-700);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.erp-page-header-filter-btn:hover {
  background: var(--gray-50);
  border-color: var(--color-gray-300);
}

.erp-page-header-filter-btn.active {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--primary-300);
  color: var(--primary-hover);
}

.erp-page-header .orders-filters-row {
  margin-bottom: 0;
}

/* Icon-only buttons */
.btn-icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Page-header normalization makes actions content-width. Restore the square
   only where that contract intersects with an icon-only header action. */
.erp-page-header__control--action.btn-icon-only {
  width: 37px !important;
  min-width: 37px !important;
  max-width: 37px;
  height: 37px;
  flex: 0 0 37px !important;
  padding: 0 !important;
}

.btn-icon-only svg,
.btn-icon-only i {
  width: 16px;
  height: 16px;
}

/* Filter count badge */
.filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  background: var(--primary);
  color: white;
}

.invoice-status-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px;
  margin-bottom: 16px;
}

.invoice-status-tabs::-webkit-scrollbar {
  display: none;
}

.status-tab {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--gray-100);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.status-tab:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.status-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.status-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  background: rgba(255, 255, 255, 0.25);
}

.status-tab:not(.active) .status-tab-count {
  background: var(--gray-200);
  color: var(--gray-600);
}

.invoice-quick-search {
  position: relative;
  flex-shrink: 1;
  flex-grow: 1;
  max-width: 200px;
}

.invoice-quick-search input {
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 13px;
  width: 100%;
  background: var(--gray-50);
  color: var(--gray-700);
  transition: all 0.15s ease;
  outline: none;
}

.invoice-quick-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
  background: white;
}

.invoice-quick-search input::placeholder {
  color: var(--gray-400);
}

/* Invoices Table Card */
.invoices-table-card {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.invoices-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.invoices-table-header>div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.invoices-table {
  width: 100%;
  border-collapse: collapse;
}

.invoices-table thead th {
  background: var(--gray-50);
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0.5px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}

.invoices-table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-50);
}

/* Cell alignment utilities are explicit contracts and must win over the
   default left alignment declared by individual table families. */
table th.u-text-right,
table td.u-text-right { text-align: right !important; }

table th.u-text-center,
table td.u-text-center { text-align: center !important; }

table th.u-text-left,
table td.u-text-left { text-align: left !important; }

table th.u-text-right,
table td.u-text-right,
table .u-tabular-nums { font-variant-numeric: tabular-nums; }

/* ==================== ERP TABLE ALIGNMENT CONTRACT ====================
   Text and units read from the left. Quantities and money align by their
   least-significant digit. Status/action rails terminate the row on the right. */
table th.erp-table-align--text,
table td.erp-table-align--text {
  text-align: left !important;
}

table th.erp-table-align--number,
table td.erp-table-align--number,
table th.erp-table-align--terminal,
table td.erp-table-align--terminal {
  text-align: right !important;
}

table th.erp-table-align--center,
table td.erp-table-align--center {
  text-align: center !important;
}

table th.erp-table-align--number,
table td.erp-table-align--number,
table td.erp-table-align--number input,
table td.erp-table-align--number .inline-input {
  font-variant-numeric: tabular-nums;
}

table td.erp-table-align--number input,
table td.erp-table-align--number .inline-input {
  text-align: right !important;
}

table td.erp-table-align--text input,
table td.erp-table-align--text .inline-input,
table td.erp-table-align--text .pure-dropdown-trigger {
  text-align: left !important;
}

table th.erp-table-align--number .app-sortable-th__inner,
table th.erp-table-align--terminal .app-sortable-th__inner {
  width: 100%;
  justify-content: flex-end;
}

table td.erp-table-align--terminal > a,
table td.erp-table-align--terminal > div {
  justify-content: flex-end;
  margin-left: auto;
}

.core-price-changes-table { table-layout: fixed; }
.core-price-changes-table__price-col { width: 220px; }
.core-price-changes-table__delta-col { width: 150px; }
.core-price-changes-table__product-cell { min-width: 0; }

.core-price-changes-table__product,
.core-price-changes-table__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.core-price-changes-table__product { font-weight: 600; }

.core-price-changes-table__meta,
.core-price-changes-table__previous-price {
  color: var(--gray-500);
  font-size: 12px;
}

.core-price-changes-table__price,
.core-price-changes-table__delta { white-space: nowrap; }

.core-price-changes-table__current-price {
  color: var(--gray-800);
  font-weight: 700;
}

.core-price-changes-table__uom {
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 500;
}

.core-price-changes-table__delta { font-weight: 500; }

.invoices-row {
  cursor: pointer;
  transition: background 0.15s;
}

.invoices-row:hover {
  background: var(--gray-50);
}

.invoices-count {
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 400;
}

.invoices-table-v2 {
  width: 100%;
  border-collapse: collapse;
}

.invoices-table-v2 thead th {
  background: var(--gray-50);
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: none;
  letter-spacing: 0.5px;
  text-align: left;
  border-bottom: 2px solid var(--gray-200);
}

.invoices-table-v2 tbody td {
  padding: 16px;
  font-size: 14px;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.invoices-table-v2 tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.invoices-table-v2 tbody tr:hover {
  background: var(--gray-50);
}

.invoices-table-v2 .invoice-settlement-select-cell {
  width: 44px;
  min-width: 44px;
  padding-right: 4px;
  text-align: center;
}

.invoices-table-v2 tbody .invoice-settlement-select-cell--active {
  cursor: pointer;
}

.invoices-table-v2 tbody .invoice-settlement-select-cell--active:hover {
  background: var(--color-gray-100);
}

.invoices-table-v2 tbody .invoice-settlement-select-cell.erp-table-row-issue-host {
  padding-inline: 18px 4px;
}

.invoices-table-v2 tbody .invoice-settlement-select-cell.erp-table-row-issue-host .invoice-settlement-checkbox {
  position: relative;
  z-index: 7;
}

.invoice-settlement-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.invoice-settlement-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.invoice-payment-editor {
  display: inline-flex;
  justify-content: flex-start;
  min-width: 126px;
}

.invoice-payment-status-dropdown {
  min-width: 126px;
}

.invoice-payment-status-dropdown .pure-dropdown-trigger {
  min-height: 32px;
  padding-block: 2px;
  padding-inline: 0 4px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.invoice-payment-status-dropdown .pure-dropdown-trigger:hover,
.invoice-payment-status-dropdown .pure-dropdown-trigger.open {
  border-color: var(--gray-200);
  background: var(--gray-50);
  box-shadow: none;
}

.invoice-payment-status-dropdown .pure-dropdown-menu {
  right: 0;
  left: auto;
  min-width: 180px;
  text-align: left;
}

.invoice-payment-system-owned {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* Invoice lists: keep the terminal status rail compact and anchored to the card edge. */
.invoices-v2 .invoices-table-v2 th:last-child,
.invoices-v2 .invoices-table-v2 td:last-child {
  width: 1%;
  min-width: max-content;
  padding-right: 20px;
  text-align: right;
  white-space: nowrap;
}

.invoices-v2 .invoices-table-v2 td:last-child .invoice-row-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Sortable column headers */
.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.sortable-th:hover {
  color: var(--gray-700);
}

.sortable-th.sort-active {
  color: var(--primary);
}

.sort-arrow {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
  vertical-align: middle;
}

.app-sortable-th {
  cursor: pointer;
}

.app-sortable-th__inner {
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
  gap: 4px;
  min-width: 0;
}

.stock-table-v3__qty-col .app-sortable-th__inner,
.stock-table-v3__status-col .app-sortable-th__inner {
  justify-content: flex-end;
  width: 100%;
}

.stock-table-v3__status-col .app-sortable-th__inner {
  justify-content: center;
}

.app-sortable-th__arrow {
  min-width: 10px;
  color: currentColor;
  opacity: 0.85;
}

.invoice-number-cell {
  font-weight: 600;
  color: var(--gray-900);
}

.invoice-number-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.invoice-number-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.invoice-row-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  font-size: inherit;
  display: block;
}

.invoice-row-link:hover {
  color: inherit;
  text-decoration: none;
}

.invoice-amount {
  font-weight: 700;
  color: var(--gray-900);
  text-align: right;
}

/* Status Pills */
.status-pill-v2 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  color: #262626 !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-transform: capitalize;
  background: #fff !important;
}

.status-pill-v2::before {
  content: none;
}

.status-pill-v2.posted {
  color: #137a52 !important;
}

.status-pill-v2.draft {
  color: #525252 !important;
}

.status-pill-v2.needs_review {
  color: #8a5a00 !important;
}

.status-pill-v2.uploaded,
.status-pill-v2.processing {
  color: #525252 !important;
}

.status-pill-v2.canceled {
  color: #b42318 !important;
}

.status-pill-v2.paid,
.status-pill-v2.approved,
.status-pill-v2.accepted,
.status-pill-v2.completed { color: #137a52 !important; }

.status-pill-v2.overdue,
.status-pill-v2.rejected,
.status-pill-v2.cancelled { color: #b42318 !important; }

.status-pill-v2.partial,
.status-pill-v2.expired { color: #8a5a00 !important; }

/* Invoice list status rail: one primary state with quiet inline diagnostics. */
.invoice-status-table-cell {
  min-width: 220px;
}

.invoice-row-link.invoice-status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  white-space: nowrap;
}

.invoice-status-badge,
.invoice-payment-badge {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
}

.invoice-status-details {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 14px;
  padding-left: 3px;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.invoice-status-detail--danger { color: var(--color-danger-700); }
.invoice-status-details__separator { color: var(--gray-300); }

/* Category Tag */
.category-tag-v2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--gray-200);
}

/* Mobile Responsive */
.mobile-card-list {
  display: none;
}

/* Show mobile cards only on small screens */
@media (max-width: 768px) {
  .erp-page-header {
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 14px;
  }

  .erp-page-header__main {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .erp-page-header__identity {
    width: 100%;
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 10px;
  }

  .erp-page-header__copy {
    flex: 1 1 auto;
  }

  .erp-page-header__title-row {
    align-items: flex-start;
    gap: 8px;
  }

  .erp-page-header__title {
    font-size: 18px;
  }

  .erp-page-header__meta {
    align-items: flex-start;
    gap: 6px;
    line-height: 1.35;
  }

  .erp-page-header__badges {
    gap: 6px;
  }

  .erp-page-header__badge {
    max-width: 100%;
    min-height: 24px;
    white-space: normal;
  }

  .erp-page-header__back {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .erp-page-header__back--normalized {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
  }

  .erp-page-header__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .erp-page-header__icon svg,
  .erp-page-header__icon i {
    width: 20px;
    height: 20px;
  }

  .erp-page-header__controls,
  .erp-page-header__filter-row {
    width: 100%;
    align-items: center;
    justify-content: flex-start;
  }

  .erp-page-header__filter-row.erp-page-header__control--group {
    justify-content: flex-start;
  }

  .erp-page-header__controls {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
    margin-right: -14px;
    padding: 2px 14px 6px 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .erp-page-header__controls::-webkit-scrollbar {
    display: none;
  }

  .erp-page-header__controls--has-fields {
    flex-wrap: wrap;
    margin-right: 0;
    padding-right: 0;
    overflow-x: visible;
  }

  .finance-invoice-detail-header .erp-page-header__controls--actions-only {
    flex-wrap: wrap;
    margin-right: 0;
    padding-right: 0;
    overflow-x: visible;
  }

  .erp-page-help {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .erp-page-help__links {
    grid-template-columns: 1fr;
  }

  .erp-page-header__controls > *,
  .erp-page-header__filter-row > * {
    margin: 0 !important;
  }

  .erp-page-header__controls > * {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(82vw, 340px);
    flex: 0 0 auto;
  }

  .erp-page-header__controls > .erp-page-header__control--full {
    max-width: none;
  }

  .erp-page-header__controls--has-fields > .erp-page-header__control--full {
    flex: 1 0 100%;
    grid-column: 1 / -1;
    width: 100% !important;
  }

  .erp-page-header__controls > .erp-page-header__control--search {
    flex: 1 0 100%;
    width: 100% !important;
    max-width: none !important;
  }

  .erp-page-header__controls > .erp-page-header__control--select {
    flex: 1 1 132px;
    width: auto !important;
    min-width: 132px !important;
    max-width: 220px;
  }

  .erp-page-header__controls > .erp-page-header__control--date {
    flex: 1 1 180px;
    width: auto !important;
    min-width: 160px !important;
    max-width: 280px;
  }

  .erp-page-header__controls > .erp-page-header__control--action {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 40px !important;
  }

  /* Mobile filter fields and groups fill the header content column. The
     generic 82vw cap above remains for compact action-only controls. */
  .erp-page-header__controls--has-fields > .erp-page-header__control--field,
  .erp-page-header__controls--has-fields > .erp-page-header__control--group {
    flex: 1 0 100%;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
  }

  .erp-page-header__controls--single-action {
    width: auto;
    align-self: flex-end;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .erp-page-header__filter-row > * {
    width: 100% !important;
    min-width: 100% !important;
  }

  .erp-page-header__filter-row--mobile-collapsible {
    width: 100% !important;
    min-width: 100% !important;
    flex: 1 0 100%;
  }

  .erp-page-header__filter-row--mobile-collapsible > .erp-page-header__filter-row-content {
    display: none;
  }

  .erp-page-header__filter-row--mobile-collapsible > .erp-page-header__mobile-filter-button {
    width: 100% !important;
    min-width: 100% !important;
    display: inline-flex;
    flex: 1 0 100%;
  }

  .payroll-month-filter-row {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto;
  }

  .payroll-month-filter-strip {
    display: none;
  }

  .payroll-month-mobile-filter-trigger {
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex;
    flex: 0 0 auto;
  }

  .attendance-report-filter-row {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto;
  }

  .attendance-report-mobile-filter-trigger {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto;
  }

  .erp-page-header__filter-row .pure-dropdown,
  .erp-page-header__filter-row .date-range-picker,
  .erp-page-header__filter-row .date-picker-wrapper,
  .erp-page-header__filter-row .date-range-picker-host {
    width: 100% !important;
  }

  .erp-page-header__controls:not(.erp-page-header__controls--has-fields) .btn,
  .erp-page-header__controls:not(.erp-page-header__controls--has-fields) button {
    width: auto !important;
    min-width: 40px;
    white-space: nowrap;
  }

  .erp-page-header__controls .pure-dropdown-trigger,
  .erp-page-header__filter-row .pure-dropdown-trigger,
  .erp-page-header__controls .date-picker-trigger,
  .erp-page-header__filter-row .date-picker-trigger,
  .erp-page-header__controls .date-range-trigger,
  .erp-page-header__filter-row .date-range-trigger,
  .erp-page-header-filter-btn {
    width: 100%;
  }

  .mobile-card-list {
    display: block;
  }

  /* Inventory has its own stacked rows; do not hide the operational queue. */
  .invoices-table-card:not(.catalog-table):not(.recipes-table):not(.inventory-home-section):not(.vat-report-card) {
    display: none;
  }

  /* Responsive header for catalog and recipes */
  .invoices-header-row {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
  }

  .invoices-header-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .invoice-quick-search {
    max-width: none;
    flex: 1 1 100%;
    order: 10;
  }

  .invoice-status-tabs {
    width: 100%;
    padding-bottom: 4px;
  }
}

/* On wider phones and compact tablets a lone page action shares the title row
   instead of consuming an otherwise empty second row. */
@media (min-width: 520px) and (max-width: 768px) {
  .erp-page-header--single-action .erp-page-header__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .erp-page-header--single-action .erp-page-header__identity {
    width: auto;
    min-width: 0;
  }

  .erp-page-header--single-action .erp-page-header__controls--single-action {
    width: auto;
    align-self: start;
  }
}

/* Transaction row highlight animation (bank reconciliation) */
@keyframes highlightPulse {
  0% {
    background: linear-gradient(90deg, var(--primary-300), var(--color-primary-100));
  }

  50% {
    background: linear-gradient(90deg, var(--color-primary-100), var(--primary-light));
  }

  100% {
    background: transparent;
  }
}

/* ==================== DARK DROPDOWN (v3.1) ==================== */
.dark-dropdown {
  position: relative;
  display: inline-block;
}

.dark-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.15s;
}

.dark-dropdown-trigger:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.dark-dropdown-trigger .chevron {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  transition: transform 0.2s;
}

.dark-dropdown.open .dark-dropdown-trigger {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.dark-dropdown.open .dark-dropdown-trigger .chevron {
  transform: rotate(180deg);
}

.dark-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 4px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  max-height: 200px;
  overflow-y: auto;
}

.dark-dropdown.open .dark-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dark-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.1s;
}

.dark-dropdown-item:hover {
  background: var(--gray-100);
}

.dark-dropdown-item.selected {
  background: var(--primary-light);
  color: var(--primary);
}

.dark-dropdown-item .check {
  width: 16px;
  height: 16px;
  opacity: 0;
  flex-shrink: 0;
}

.dark-dropdown-item.selected .check {
  opacity: 1;
  color: var(--primary);
}

/* ==================== QUOTATION TOTALS ==================== */
.quo-totals {
  padding: 16px;
  background: var(--gray-50);
  border-radius: 12px;
  margin-top: 16px;
}

.quo-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: var(--gray-600);
}

.quo-totals-row span:first-child {
  font-weight: 500;
}

.quo-totals-row span:last-child {
  font-weight: 600;
  color: var(--gray-800);
  font-variant-numeric: tabular-nums;
}

.quo-totals-row.total {
  border-top: 1px solid var(--gray-200);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 16px;
}

.quo-totals-row.total span:first-child {
  font-weight: 600;
  color: var(--gray-800);
}

.quo-totals-row.total span:last-child {
  font-weight: 700;
  font-size: 18px;
  color: var(--gray-900);
}

.quo-totals-row.discount span:last-child {
  color: var(--gray-800);
}

.quo-totals-cost-rows {
  border-top: 1px dashed var(--gray-200);
  margin-top: 12px;
  padding-top: 12px;
}

.quo-totals-cost-rows .quo-totals-row span:last-child {
  color: var(--gray-500);
}

.quo-totals-cost-rows .quo-totals-row.profit span:last-child {
  color: var(--gray-800);
  font-weight: 600;
}

/* ==================== CALENDAR OVERFLOW FIX ==================== */
/* Ensure date picker dropdowns are not clipped by parent overflow */
.date-picker-wrapper,
.date-picker-container {
  position: relative;
  overflow: visible !important;
}

.date-picker-wrapper .calendar-popup,
.date-picker-container .date-calendar,
.date-calendar,
.calendar-popup {
  z-index: 99999 !important;
}

/* Fix for card/box containers that might clip calendars */
.card:has(.date-picker-wrapper),
.card:has(.date-picker-container),
.form-group:has(.date-picker-wrapper),
.form-group:has(.date-picker-container),
.modal-content:has(.date-picker-wrapper),
/* Pure Dropdown overflow fix */
.modal-content:has(.pure-dropdown),
.form-group:has(.pure-dropdown) {
  overflow: visible !important;
}

/* ==================== RECIPE DETAIL v3 RESPONSIVE ==================== */
/* Recipe header responsive */
@media (max-width: 768px) {
  .recipe-info-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .recipe-bottom-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Recipe header stack on mobile */
  .recipe-info-grid>div:first-child {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ==================== V3.1 UNIFIED REGISTRY HEADER ==================== */
.header-row {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-icon-box i,
.header-icon-box svg {
  width: 24px;
  height: 24px;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

.header-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-gray-100);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-500);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }

  .header-left {
    flex-wrap: wrap;
    gap: 12px;
  }

  .header-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .header-icon-box i,
  .header-icon-box svg {
    width: 20px;
    height: 20px;
  }

  .header-title {
    font-size: 18px;
  }

  .header-actions {
    flex-wrap: wrap;
    gap: 10px;
  }

  .header-actions .btn-gradient {
    width: 100%;
    justify-content: center;
  }
}

/* ==================== CORE DASHBOARD ==================== */
.core-dashboard {
  padding: 0;
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

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

@media (max-width: 600px) {
  .dashboard-stats-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-stats-grid .stat-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dashboard-stats-grid .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.dashboard-stats-grid .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-stats-grid .stat-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.dashboard-stats-grid .stat-content {
  flex: 1;
  min-width: 0;
}

.dashboard-stats-grid .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  margin-bottom: 4px;
}

.dashboard-stats-grid .stat-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}

.dashboard-stats-grid .stat-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.dashboard-stats-grid .stat-sub.positive {
  color: var(--color-success-300);
}

.dashboard-stats-grid .stat-sub.negative {
  color: var(--color-danger-300);
}

.dashboard-stats-grid .stat-sub i {
  vertical-align: middle;
  margin-right: 2px;
}

/* Card Variants */
.stat-card--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--primary-hover) 100%);
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.3);
}

.stat-card--success {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}

.stat-card--info {
  background: linear-gradient(135deg, var(--color-brand-indigo-light) 0%, var(--color-brand-indigo) 100%);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.stat-card--warning {
  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

/* Dashboard Content Grid */
.dashboard-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 992px) {
  .dashboard-content-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Dashboard Cards */
.dashboard-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.dashboard-card--alert {
  border-color: var(--color-danger-200);
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.dashboard-card-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.dashboard-card-header h3 svg {
  width: 18px;
  height: 18px;
  color: var(--gray-500);
}

.dashboard-card-content {
  padding: 16px 20px;
}

/* Expense Breakdown */
.expense-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.expense-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}

.expense-row:last-child {
  border-bottom: none;
}

.expense-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.expense-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.expense-name {
  font-weight: 500;
  color: var(--gray-900);
}

.expense-count {
  font-size: 12px;
  color: var(--gray-500);
}

.expense-amount {
  font-weight: 600;
  color: var(--gray-900);
}

/* Stock Alerts */
.stock-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stock-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--erp-alert-danger);
  border-radius: 10px;
}

.stock-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stock-name {
  font-weight: 500;
  color: var(--gray-900);
}

.stock-level {
  font-size: 12px;
  color: var(--gray-500);
}

.stock-qty {
  font-weight: 600;
  color: var(--gray-700);
}

.stock-qty.critical {
  color: var(--color-danger-dark);
}

/* Recent Lists */
.recent-list {
  display: flex;
  flex-direction: column;
}

.recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.15s;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.recent-row:hover {
  background: var(--gray-50);
}

.recent-row:last-child {
  border-bottom: none;
}

.recent-info {
  min-width: 0;
  flex: 1;
}

.recent-title {
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-500);
}

.recent-right {
  text-align: right;
  flex-shrink: 0;
  margin-left: 16px;
}

.recent-amount {
  font-weight: 600;
  color: var(--gray-900);
}

.recent-date {
  font-size: 12px;
  color: var(--gray-500);
}

.recent-date.cost {
  color: var(--gray-400);
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
}

.pill-success {
  background: var(--color-success-100);
  color: var(--color-success-strong);
}

.pill-warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

/* Link Arrow */
.link-arrow {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
}

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

/* Empty State */
.empty-state {
  padding: 24px;
  text-align: center;
  color: var(--gray-500);
  font-size: 14px;
}

.empty-state.success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-success-strong);
  background: var(--color-success-50);
  border-radius: 10px;
}

.empty-state.success svg {
  width: 18px;
  height: 18px;
}

/* Badge variants — unified in BADGES section above */

/* Error Card */
.error-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
  padding: 20px;
  border-radius: 12px;
  font-weight: 500;
}

.error-card svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ==================== MARKETING HERO (Global) ==================== */
.marketing-hero {
  position: relative;
  border-radius: 16px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-800) 50%, var(--color-primary) 100%);
}

.marketing-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-800) 50%, var(--color-primary) 100%);
  border-radius: 16px;
}

.marketing-hero-content {
  position: relative;
  z-index: 1;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.marketing-hero-right {
  position: relative;
  z-index: 100;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.marketing-hero-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(219, 228, 240, 0.9);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-primary-900);
  font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.marketing-hero-filter-btn:hover {
  border-color: rgba(var(--color-primary-rgb),0.35);
}

.marketing-hero-filter-btn i,
.marketing-hero-filter-btn svg {
  width: 16px;
  height: 16px;
}

.marketing-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.marketing-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-top: 4px;
}

.marketing-customer-map {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.marketing-customer-map__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  background:
    radial-gradient(circle at 95% 0%, rgba(var(--color-primary-rgb), 0.11), transparent 34%),
    #fff;
}

.marketing-customer-map__intro h2 {
  margin: 4px 0 6px;
  color: var(--color-gray-900);
  font-size: 20px;
  font-weight: 700;
}

.marketing-customer-map__intro p {
  max-width: 760px;
  margin: 0;
  color: var(--color-gray-500);
  font-size: 13px;
  line-height: 1.55;
}

.marketing-customer-map__eyebrow,
.marketing-customer-map__privacy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-primary-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.marketing-customer-map__eyebrow svg,
.marketing-customer-map__privacy svg {
  width: 15px;
  height: 15px;
}

.marketing-customer-map__privacy {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--color-success-200, #bbf7d0);
  border-radius: 10px;
  background: var(--color-success-50, #f0fdf4);
  color: var(--color-success-700, #15803d);
  letter-spacing: 0;
  text-transform: none;
}

.marketing-customer-map__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) repeat(3, minmax(130px, 0.8fr)) minmax(100px, 0.55fr) auto;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  background: var(--color-gray-50);
}

.marketing-customer-map__filter-field {
  min-width: 0;
}

.marketing-customer-map__filter-field .pure-dropdown,
.marketing-customer-map__filter-field .form-input {
  width: 100%;
}

.marketing-customer-map__filter-field .form-input {
  min-height: 36px;
}

.marketing-customer-map__filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.marketing-customer-map__filter-actions .btn {
  min-height: 36px;
  white-space: nowrap;
}

.marketing-customer-map__status,
.marketing-customer-map__warning,
.marketing-customer-map__coverage {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: #fff;
  color: var(--color-gray-600);
  font-size: 13px;
}

.marketing-customer-map__status svg,
.marketing-customer-map__warning > svg,
.marketing-customer-map__coverage svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.marketing-customer-map__warning {
  align-items: flex-start;
  border-color: var(--color-warning-200, #fde68a);
  background: var(--color-warning-50, #fffbeb);
  color: var(--color-warning-800, #92400e);
}

.marketing-customer-map__warning > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.marketing-customer-map__warning span {
  color: var(--color-warning-700, #a16207);
}

.marketing-customer-map__warning--error {
  border-color: var(--color-danger-200, #fecaca);
  background: var(--color-danger-50, #fef2f2);
  color: var(--color-danger-700, #b91c1c);
}

.marketing-customer-map__warning--error span {
  color: var(--color-danger-600, #dc2626);
}

.marketing-customer-map__coverage {
  justify-content: space-between;
  border-color: var(--color-primary-100);
  background: var(--color-primary-50);
}

.marketing-customer-map__coverage.is-low {
  border-color: var(--color-warning-200, #fde68a);
  background: var(--color-warning-50, #fffbeb);
}

.marketing-customer-map__coverage-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.marketing-customer-map__coverage-copy > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.marketing-customer-map__coverage-copy strong {
  color: var(--color-gray-900);
}

.marketing-customer-map__coverage-copy span {
  color: var(--color-gray-600);
}

.marketing-customer-map__coverage-missing {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--color-gray-600);
  font-size: 11px;
  font-weight: 600;
}

.marketing-customer-map__stats {
  margin: 0;
}

.marketing-customer-map__map-card {
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.marketing-customer-map__map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-gray-200);
}

.marketing-customer-map__map-toolbar h3 {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 15px;
  font-weight: 700;
}

.marketing-customer-map__map-toolbar p,
.marketing-customer-map__top-card .marketing-card-header p {
  margin: 3px 0 0;
  color: var(--color-gray-500);
  font-size: 12px;
}

.marketing-customer-map__map-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.marketing-customer-map__map-actions .erp-filter-tabs {
  min-height: 36px;
}

.marketing-customer-map__map-shell {
  position: relative;
}

.marketing-customer-map__canvas {
  position: relative;
  height: clamp(520px, 62vh, 720px);
  min-height: 520px;
  overflow: hidden;
  background: var(--color-gray-100);
}

.marketing-customer-map__loading,
.marketing-customer-map__empty {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-gray-50);
  color: var(--color-gray-500);
  font-size: 13px;
}

.marketing-customer-map__loading svg {
  width: 18px;
  height: 18px;
}

.marketing-customer-map__empty {
  inset: auto 50% 24px auto;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(50%);
  flex-direction: row;
  padding: 10px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}

.marketing-customer-map__empty svg {
  width: 18px;
  height: 18px;
}

.marketing-customer-map__empty span {
  color: var(--color-gray-500);
}

.marketing-customer-map__legend {
  position: absolute;
  left: 14px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  color: var(--color-gray-600);
  font-size: 10px;
  backdrop-filter: blur(8px);
}

.marketing-customer-map__legend-gradient {
  width: 110px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(30, 64, 175), rgb(37, 99, 235), rgb(6, 182, 212), rgb(250, 204, 21), rgb(249, 115, 22), rgb(220, 38, 38));
}

.marketing-customer-map__branch-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
}

.marketing-customer-map__branch-key i {
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #0d9488;
  box-shadow: 0 0 0 1px #0f766e;
}

.marketing-customer-map__top-card {
  overflow: hidden;
}

.marketing-customer-map__top-card .marketing-card-header {
  align-items: flex-start;
}

.marketing-customer-map__area-list {
  display: flex;
  flex-direction: column;
}

.marketing-customer-map__area-row {
  display: grid;
  grid-template-columns: 30px minmax(160px, 1fr) minmax(170px, auto) 18px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--color-gray-100);
  background: #fff;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 0.15s ease;
}

.marketing-customer-map__area-row:hover {
  background: var(--color-gray-50);
}

.marketing-customer-map__area-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-size: 12px;
  font-weight: 700;
}

.marketing-customer-map__area-copy,
.marketing-customer-map__area-metrics {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.marketing-customer-map__area-copy strong,
.marketing-customer-map__area-metrics strong {
  overflow: hidden;
  color: var(--color-gray-900);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-customer-map__area-copy small,
.marketing-customer-map__area-metrics small {
  overflow: hidden;
  color: var(--color-gray-500);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-customer-map__area-metrics {
  align-items: flex-end;
}

.marketing-customer-map__area-row > svg {
  width: 17px;
  height: 17px;
  color: var(--color-primary-500);
}

.marketing-customer-map__info {
  min-width: 250px;
  max-width: 320px;
  padding: 2px;
  font-family: Inter, sans-serif;
}

.marketing-customer-map__info-kicker {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.marketing-customer-map__info h4 {
  margin: 4px 0 12px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

.marketing-customer-map__info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.marketing-customer-map__info-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 7px;
  background: #f8fafc;
}

.marketing-customer-map__info-grid span {
  color: #64748b;
  font-size: 10px;
}

.marketing-customer-map__info-grid strong {
  color: #0f172a;
  font-size: 12px;
}

.marketing-customer-map__info-meta {
  margin-top: 9px;
  color: #64748b;
  font-size: 10px;
}

.marketing-customer-map__info--branch {
  min-width: 180px;
}

@media (max-width: 1280px) {
  .marketing-customer-map__filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .marketing-customer-map__filter-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .marketing-customer-map__intro,
  .marketing-customer-map__map-toolbar,
  .marketing-customer-map__coverage {
    align-items: stretch;
    flex-direction: column;
  }

  .marketing-customer-map__privacy {
    align-self: flex-start;
  }

  .marketing-customer-map__filters {
    grid-template-columns: 1fr 1fr;
  }

  .marketing-customer-map__filter-actions {
    grid-column: 1 / -1;
  }

  .marketing-customer-map__filter-actions .btn {
    flex: 1;
    min-height: 44px;
  }

  .marketing-customer-map__filter-field .form-input,
  .marketing-customer-map__filter-field .pure-dropdown-trigger {
    min-height: 44px;
  }

  .marketing-customer-map__map-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .marketing-customer-map__map-actions .erp-filter-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .marketing-customer-map__map-actions .erp-filter-tabs__tab {
    flex: 1 0 auto;
    min-height: 44px;
  }

  .marketing-customer-map__canvas {
    height: 62dvh;
    min-height: 440px;
    max-height: 620px;
  }

  .marketing-customer-map__legend {
    right: 10px;
    bottom: 22px;
    left: 10px;
    justify-content: center;
  }

  .marketing-customer-map__legend-gradient {
    width: min(90px, 24vw);
  }

  .marketing-customer-map__area-row {
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    min-height: 68px;
  }

  .marketing-customer-map__area-metrics {
    grid-column: 2;
    align-items: flex-start;
  }

  .marketing-customer-map__area-row > svg {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 520px) {
  .marketing-customer-map__filters {
    grid-template-columns: 1fr;
  }

  .marketing-customer-map__filter-actions {
    grid-column: auto;
  }

  .marketing-customer-map__legend {
    gap: 5px;
    font-size: 9px;
  }

  .marketing-customer-map__branch-key {
    display: none;
  }
}

/* ==================== WHATSAPP CAMPAIGN FLOW BUILDER ==================== */

/* Drawflow Canvas Overrides */
#drawflowCanvas .drawflow {
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

#drawflowCanvas .drawflow .drawflow-node {
  background: #fff;
  border: 2px solid var(--color-gray-200);
  border-radius: 12px;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#drawflowCanvas .drawflow .drawflow-node:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

#drawflowCanvas .drawflow .drawflow-node.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2), 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Node Title */
#drawflowCanvas .drawflow .drawflow-node .title-box {
  background: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary) 100%);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px 10px 0 0;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
}

/* Node Content */
#drawflowCanvas .drawflow .drawflow-node .box {
  padding: 16px;
}

.node-content {
  font-size: 13px;
}

.node-content .node-field {
  margin-bottom: 12px;
}

.node-content .node-field:last-child {
  margin-bottom: 0;
}

.node-content .node-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: none;
  margin-bottom: 6px;
}

.node-content .node-field input,
.node-content .node-field select,
.node-content .node-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  font-size: 13px;
  background: var(--color-gray-50);
}

.node-content .node-field input:focus,
.node-content .node-field select:focus,
.node-content .node-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
}

.node-content .node-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.node-content .node-label {
  font-size: 12px;
  color: var(--color-gray-500);
  font-style: italic;
}

.node-content .node-outputs {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-gray-200);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  color: var(--color-gray-500);
}

/* Connections */
#drawflowCanvas .drawflow .connection .main-path {
  stroke: var(--color-gray-400);
  stroke-width: 2px;
  fill: none;
}

#drawflowCanvas .drawflow .connection .main-path:hover {
  stroke: var(--color-primary);
  stroke-width: 3px;
}

/* Input/Output Ports */
#drawflowCanvas .drawflow .drawflow-node .input,
#drawflowCanvas .drawflow .drawflow-node .output {
  width: 14px;
  height: 14px;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}

#drawflowCanvas .drawflow .drawflow-node .input:hover,
#drawflowCanvas .drawflow .drawflow-node .output:hover {
  background: var(--primary-hover);
  transform: scale(1.2);
}

/* Hide delete button on connections */
.drawflow-delete {
  display: none !important;
}

/* Node Palette */
.node-palette {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}

.node-palette::-webkit-scrollbar {
  width: 6px;
}

.node-palette::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 3px;
}

.palette-node {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: grab;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
}

.palette-node:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.15);
  transform: translateX(4px);
}

.palette-node:active {
  cursor: grabbing;
  transform: scale(0.98);
}

/* Campaign Cards */
.campaign-card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.campaign-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.campaign-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.campaign-card-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-gray-800);
}

.campaign-card-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

.campaign-card-status.draft {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.campaign-card-status.active {
  background: var(--color-success-100);
  color: var(--color-success-strong);
}

.campaign-card-status.paused {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.campaign-card-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--color-gray-500);
}

.campaign-card-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==================== QUERY BUILDER INPUTS ==================== */
.condition-num-input {
  width: 80px !important;
  min-width: 80px;
  padding: 8px 12px !important;
  font-size: 13px !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 8px !important;
  background: #fff !important;
  text-align: center;
  -moz-appearance: textfield;
}

.condition-num-input::-webkit-outer-spin-button,
.condition-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.condition-num-input:focus {
  outline: none;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

/* ==================== INBOX / MESSENGER UI ==================== */

/* Main Container */
.inbox-container {
  display: flex;
  height: 100%;
  background: var(--gray-50);
  overflow: hidden;
}

/* Conversation List Panel */
.inbox-sidebar {
  width: 380px;
  background: white;
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: transform 0.3s ease, width 0.3s ease;
}

.inbox-sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
}

.inbox-sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.inbox-sidebar-title h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--gray-900);
}

.inbox-search {
  position: relative;
}

.inbox-search input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  font-size: 13px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
  transition: all 0.2s;
}

.inbox-search input:focus {
  background: white;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.inbox-search i,
.inbox-search svg {
  position: absolute !important;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  pointer-events: none;
  z-index: 1;
}

/* Filter Tabs */
.inbox-filter-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.inbox-filter-tab {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s;
}

.inbox-filter-tab:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.inbox-filter-tab.active {
  background: var(--primary);
  color: white;
}

.inbox-filter-tab .count {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.8;
}

/* Conversation List */
.inbox-conversation-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.inbox-conversation-item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}

.inbox-conversation-item:hover {
  background: var(--gray-50);
}

.inbox-conversation-item.active {
  background: var(--primary-light);
  border-left-color: var(--primary);
}

.inbox-conversation-item.unread {
  background: #f0f9ff;
}

.inbox-conversation-item.unread .conv-name {
  font-weight: 600;
}

/* Avatar */
.inbox-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 600;
  position: relative;
}

.inbox-avatar .channel-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.inbox-avatar .channel-badge i {
  width: 10px;
  height: 10px;
}

.inbox-avatar .online-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid white;
}

/* Conversation Content */
.inbox-conv-content {
  flex: 1;
  min-width: 0;
}

.inbox-conv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.inbox-conv-header .conv-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-conv-header .conv-time {
  font-size: 11px;
  color: var(--gray-500);
  flex-shrink: 0;
}

.inbox-conv-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inbox-conv-preview .preview-text {
  font-size: 13px;
  color: var(--gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-conv-preview .unread-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Chat Panel */
.inbox-chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
  min-width: 0;
  overflow: hidden;
}

/* Chat Header */
.inbox-chat-header {
  padding: 12px 20px;
  background: white;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.inbox-chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inbox-chat-header-info .avatar {
  width: 40px;
  height: 40px;
}

.inbox-chat-header-details h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.inbox-chat-header-details .status {
  font-size: 12px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
}

.inbox-chat-header-actions {
  display: flex;
  gap: 8px;
}

.inbox-chat-header-actions .inbox-mobile-help { display: none; }

.inbox-chat-header-actions .btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

/* Mobile back button */
.inbox-back-btn {
  display: none;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  margin-right: 8px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

.inbox-back-btn:hover {
  background: var(--gray-100);
}

/* Messages Container */
.inbox-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 0;
}

/* Date Separator */
.inbox-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

.inbox-date-separator span {
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
}

/* Activity Event (Order, Reservation, etc) */
.inbox-activity-event {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
  animation: slideInFade 0.3s ease;
}

.inbox-activity-event .event-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: all 0.2s;
  max-width: 320px;
}

.inbox-activity-event .event-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.inbox-activity-event .event-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inbox-activity-event .event-icon.order {
  background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
  color: white;
}

.inbox-activity-event .event-icon.reservation {
  background: linear-gradient(135deg, #8b5cf6, var(--color-violet));
  color: white;
}

.inbox-activity-event .event-icon.call {
  background: linear-gradient(135deg, var(--color-primary), var(--primary));
  color: white;
}

.inbox-activity-event .event-icon i {
  width: 18px;
  height: 18px;
}

.inbox-activity-event .event-content {
  flex: 1;
  min-width: 0;
}

.inbox-activity-event .event-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 6px;
}

.inbox-activity-event .event-meta {
  font-size: 11px;
  color: var(--gray-500);
}

.inbox-activity-event .event-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-success);
}

/* Message Bubble */
.inbox-message {
  display: flex;
  max-width: 75%;
  animation: slideInMessage 0.2s ease;
  min-width: 0;
}

.inbox-message.outgoing {
  align-self: flex-end;
}

.inbox-message.incoming {
  align-self: flex-start;
}

.inbox-message .bubble {
  padding: 10px 14px;
  border-radius: 16px;
  position: relative;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.inbox-message.outgoing .bubble {
  background: #dcf8c6;
  border-bottom-right-radius: 4px;
}

.inbox-message.incoming .bubble {
  background: white;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.inbox-message .bubble-text {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.inbox-message .bubble-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.inbox-message .bubble-time {
  font-size: 11px;
  color: var(--gray-500);
}

.inbox-message .bubble-status {
  width: 14px;
  height: 14px;
}

.inbox-message .bubble-status.read {
  color: #34b7f1;
}

.inbox-message .bubble-status.delivered {
  color: var(--gray-400);
}

/* Typing Indicator */
.inbox-typing-indicator {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: white;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  align-self: flex-start;
}

.inbox-typing-indicator .dot {
  width: 8px;
  height: 8px;
  background: var(--gray-400);
  border-radius: 50%;
  animation: typingDot 1.4s infinite;
}

.inbox-typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.inbox-typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {

  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-4px);
  }
}

/* Scroll to Bottom Button */
.inbox-scroll-bottom {
  position: absolute;
  bottom: 80px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--gray-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
}

.inbox-scroll-bottom:hover {
  background: var(--gray-50);
  transform: scale(1.05);
}

.inbox-scroll-bottom i {
  width: 20px;
  height: 20px;
  color: var(--gray-600);
}

/* Composer */
.inbox-composer {
  padding: 16px 20px;
  background: white;
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.inbox-composer-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.inbox-composer-actions {
  display: flex;
  gap: 4px;
}

.inbox-composer-actions .btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.inbox-composer-input {
  flex: 1;
}

.inbox-composer-input textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  background: var(--gray-50);
  transition: all 0.2s;
}

.inbox-composer-input textarea:focus {
  background: white;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.inbox-composer .send-btn {
  height: 44px;
  padding: 0 20px;
}

/* Customer Info Panel */
.inbox-customer-panel {
  width: 340px;
  background: white;
  border-left: 1px solid var(--gray-200);
  overflow-y: auto;
  flex-shrink: 0;
  transition: width 0.3s ease;
}

/* Empty State */
.inbox-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gray-400);
  padding: 40px;
}

.inbox-empty-state i {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  stroke-width: 1;
}

.inbox-empty-state h4 {
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--gray-600);
}

.inbox-empty-state p {
  font-size: 13px;
  margin: 0;
}

/* Animations */
@keyframes slideInMessage {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFade {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==================== INBOX FULLSCREEN MODE ====================
   Pure CSS, no JS tracking. Uses dvh (dynamic viewport height) —
   iOS Safari 17+ and all modern browsers shrink dvh when on-screen
   keyboard opens, so flex cascade naturally pushes composer above
   keyboard. Combined with interactive-widget=resizes-content meta
   for Chromium, this is the production pattern used by modern
   messengers (Matrix/hydrogen-web style). Fallback svh for older. */
html.inbox-active, body.inbox-active {
  overflow: hidden;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
}
body.inbox-active .app {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
body.inbox-active .main {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
@media (min-width: 1025px) {
  body.inbox-active .main {
    height: calc(100% - (var(--erp-shell-gap) * 2));
    max-height: calc(100% - (var(--erp-shell-gap) * 2));
  }
}
body.inbox-active .content { flex: 1; min-height: 0; height: 100%; overflow: hidden; padding: 0; }
/* Hide ERP top header only inside an open conversation on mobile — list view keeps it */
@media (max-width: 768px) {
  body.inbox-active .main:has(#inboxSidebar.hidden) > .header { display: none; }
}

/* ==================== INBOX MOBILE RESPONSIVE ==================== */
@media (max-width: 768px) {
  .inbox-container {
    position: relative;
  }

  .inbox-chat-header { padding: 12px; gap: 8px; }
  .inbox-chat-header-info { flex: 1; min-width: 0; gap: 8px; }
  .inbox-chat-header-info > .inbox-avatar { display: none; }
  .inbox-chat-header-details { min-width: 0; overflow-wrap: anywhere; }
  .inbox-chat-header-actions { flex-shrink: 0; gap: 4px; }
  .inbox-chat-header-actions .btn { min-width: 44px; min-height: 44px; }
  .inbox-chat-header-actions .inbox-mobile-help { display: flex; }

  .inbox-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 20;
    transform: translateX(0);
  }

  .inbox-sidebar.hidden {
    transform: translateX(-100%);
  }

  .inbox-chat-panel {
    width: 100%;
  }

  .inbox-chat-panel.hidden {
    display: none;
  }

  .inbox-back-btn {
    display: flex;
  }

  .inbox-customer-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 30;
    transform: translateX(100%);
  }

  .inbox-customer-panel.open {
    transform: translateX(0);
  }

  .inbox-message {
    max-width: 85%;
  }

  .inbox-activity-event .event-card {
    max-width: 90%;
  }

  /* Fullscreen composer on mobile */
  .inbox-composer {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .inbox-composer-actions .btn {
    width: 40px;
    height: 40px;
  }

  .inbox-composer .send-btn {
    height: 40px;
    padding: 0 16px;
  }
}

/* ==================== CUSTOMER INFO PANEL ==================== */
.customer-info-panel {
  width: 340px;
  background: white;
  border-left: 1px solid var(--gray-200);
  overflow-y: auto;
}

@media (max-width: 768px) {
  .customer-info-panel {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100vh;
    z-index: 1000;
    border: none;
    animation: slideUp 0.2s ease;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* ==================== VARIABLE PICKER CHIPS ==================== */
.var-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;

  /* Default: Customer (purple) */
  background: #f3e8ff;
  color: var(--color-violet);
  border: 1px solid #e9d5ff;
}

.var-chip:hover {
  background: #e9d5ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.var-chip:active {
  transform: translateY(0);
}

/* Order chips (green) */
.var-chip-order {
  background: var(--color-success-100);
  color: #15803d;
  border-color: var(--color-success-200);
}

.var-chip-order:hover {
  background: var(--color-success-200);
}

/* Booking chips (blue) */
.var-chip-booking {
  background: var(--color-primary-100);
  color: var(--primary-hover);
  border-color: var(--color-primary-200);
}

.var-chip-booking:hover {
  background: var(--color-primary-200);
}

/* Business chips (amber) */
.var-chip-business {
  background: var(--color-warning-light);
  color: var(--color-warning-700);
  border-color: var(--color-warning-200);
}

.var-chip-business:hover {
  background: var(--color-warning-200);
}

/* ==================== ORDERS FILTERS BAR ==================== */
.orders-filters-bar {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: visible;
}

.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.filters-header:hover {
  background: var(--gray-50);
}

.filters-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--gray-700);
}

.filter-badge {
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 9999px;
  min-width: 18px;
  text-align: center;
}

.filters-body {
  display: none;
  padding: 0 16px 16px;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: visible;
}

.filters-body.expanded {
  display: flex;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  flex: 1;
}

.filter-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  color: var(--gray-500);
}

.filter-group-date {
  min-width: 220px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .filters-body {
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
  }

  .filter-actions {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
}

/* ==================== SORTABLEJS DRAG STATES ==================== */
.drag-handle {
  cursor: grab;
  touch-action: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.tree-row__drag {
  display: inline-flex;
  width: 14px;
  min-width: 14px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.3px);
  background-position: center;
  background-size: 5px 5px;
  user-select: none;
}

.tree-row__chevron {
  display: inline-flex;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  appearance: none;
  vertical-align: middle;
}

.tree-row__chevron:hover {
  color: var(--gray-900);
  background: var(--gray-50);
}

.tree-row__chevron:focus-visible {
  outline: 2px solid var(--primary-300);
  outline-offset: 2px;
}

.tree-row__chevron .tree-row__chevron-icon {
  display: block;
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.sortable-ghost {
  opacity: 0.4;
  background: rgba(var(--color-primary-rgb), 0.08) !important;
}

.sortable-chosen {
  background: var(--gray-50) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sortable-drag {
  opacity: 0.95;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  z-index: 9999;
}

/* ==================== P&L REPORT PAGE ==================== */

/* Hero header — white variant */
.pnl-hero-header {
  background: white;
  border-radius: 16px;
  padding: 24px 28px 20px;
  color: var(--color-gray-900);
  margin-bottom: 24px;
  border: 1px solid var(--color-gray-200);
}

.pnl-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pnl-hero-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pnl-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary), var(--primary-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pnl-hero-icon i,
.pnl-hero-icon svg {
  width: 22px;
  height: 22px;
  color: white !important;
  stroke: white !important;
}

.pnl-hero-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.pnl-hero-header .hero-subtitle {
  font-size: 13px;
  color: var(--color-gray-500);
  margin: 2px 0 0;
}

.pnl-hero-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pnl-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-400), var(--primary));
  box-shadow: 0 0 0 0 rgba(var(--color-primary-hover-rgb), 0.35);
  animation: pnlPulse 1.2s ease-in-out infinite;
}

.pnl-apply-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pnl-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: white;
  border-radius: 50%;
  display: none;
  animation: spin 0.8s linear infinite;
}

.pnl-apply-button.is-loading {
  opacity: 0.9;
  pointer-events: none;
}

.pnl-apply-button.is-loading .pnl-btn-spinner {
  display: inline-block;
}

.pnl-apply-button.is-loading .pnl-apply-icon {
  display: none;
}

.pnl-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.pnl-secondary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  color: var(--color-gray-500);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pnl-secondary-toggle:hover,
.pnl-secondary-toggle.active {
  border-color: var(--color-primary-200);
  background: var(--primary-light);
  color: var(--primary-hover);
}

.pnl-secondary-toggle i,
.pnl-secondary-toggle svg {
  width: 14px;
  height: 14px;
}

.pnl-secondary-toggle strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary-100);
  color: var(--primary-hover);
  font-size: 11px;
  line-height: 1;
}

.pnl-advanced-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: var(--color-gray-50);
}

.pnl-advanced-panel.is-open {
  display: flex;
}

.pnl-help-panel {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--color-primary-100);
  background: var(--primary-light);
  color: var(--color-gray-600);
  font-size: 12px;
  line-height: 1.45;
}

.pnl-help-panel.is-open {
  display: grid;
}

.pnl-help-panel strong {
  color: var(--color-gray-800);
}

.pnl-loading-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pnl-loading-grid {
  margin-bottom: 0;
}

.pnl-loading-grid-compact {
  grid-template-columns: repeat(3, 1fr);
}

.pnl-loading-card,
.pnl-loading-section-card {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
}

.pnl-loading-card {
  min-height: 188px;
  padding: 20px;
}

.pnl-loading-card-compact {
  min-height: 150px;
}

.pnl-loading-section-card {
  padding: 24px;
}

.pnl-loading-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.pnl-loading-sections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pnl-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-gray-200);
}

.pnl-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: pnlShimmer 1.25s ease-in-out infinite;
}

.pnl-skeleton-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.pnl-skeleton-icon.small {
  width: 34px;
  height: 34px;
  margin-bottom: 0;
}

.pnl-skeleton-label {
  width: 96px;
  height: 12px;
  margin-bottom: 10px;
}

.pnl-skeleton-value {
  width: 72%;
  height: 32px;
  margin-bottom: 14px;
  border-radius: 12px;
}

.pnl-skeleton-value.short {
  width: 48%;
}

.pnl-skeleton-line {
  width: 100%;
  height: 12px;
  margin-bottom: 10px;
}

.pnl-skeleton-line.short {
  width: 68%;
}

.pnl-skeleton-line.tiny {
  width: 48px;
  height: 10px;
  margin-bottom: 0;
}

.pnl-skeleton-heading {
  width: 180px;
  height: 18px;
  border-radius: 10px;
}

.pnl-skeleton-pill {
  width: 132px;
  height: 34px;
}

.pnl-skeleton-bar {
  width: 100%;
  height: 12px;
  border-radius: 999px;
}

.pnl-skeleton-waterfall {
  width: 36px;
  border-radius: 14px 14px 8px 8px;
}

.pnl-loading-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.3fr) minmax(120px, 1fr) 110px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

.pnl-loading-row + .pnl-loading-row {
  border-top: 1px solid var(--color-gray-100);
}

.pnl-loading-row-copy {
  min-width: 0;
}

.pnl-loading-row-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.pnl-loading-waterfall-bars {
  height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.pnl-loading-waterfall-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@keyframes pnlShimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes pnlPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--color-primary-hover-rgb), 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--color-primary-hover-rgb), 0);
    transform: scale(1.05);
  }
}

/* Concept chips row */
.pnl-concept-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pnl-filter-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pnl-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pnl-filter-label {
  min-width: 92px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--color-gray-400);
}

.pnl-concept-chip {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--color-gray-200);
  background: transparent;
  color: var(--color-gray-500);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.pnl-concept-chip:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
  color: var(--color-gray-700);
}

.pnl-concept-chip.active {
  background: var(--primary-light);
  border-color: var(--color-primary);
  color: var(--primary-hover);
  font-weight: 600;
}

/* Stats cards grid */
.pnl-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.pnl-stat-card {
  border-radius: 16px;
  padding: 20px;
  color: white;
  position: relative;
  overflow: hidden;
}

.pnl-stat-card .stat-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.pnl-stat-card .stat-icon-box i {
  width: 22px;
  height: 22px;
  color: white;
}

.pnl-stat-card .stat-label {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 4px;
  font-weight: 500;
}

.pnl-stat-card .stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.pnl-stat-card .stat-sub {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pnl-stat-card .stat-sub i {
  width: 14px;
  height: 14px;
}

/* Light variant — white card with dark text */
.pnl-stat-card.pnl-stat-card-light {
  background: white;
  color: var(--color-gray-900);
  border: 1px solid var(--color-gray-200);
}

.pnl-stat-card-light .stat-label {
  color: var(--color-gray-500);
  opacity: 1;
}

.pnl-stat-card-light .stat-value {
  color: var(--color-gray-900);
}

.pnl-stat-card-light .stat-sub {
  color: var(--color-gray-500);
  opacity: 1;
}

.pnl-stat-card-light .stat-sub i {
  color: var(--color-gray-400);
}

/* COGS toggle for light cards */
/* COGS toggle inside stat card */
.pnl-cogs-toggle {
  display: inline-flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 2px;
  margin-left: 8px;
}

.pnl-cogs-toggle button {
  font-size: 11px;
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}

.pnl-cogs-toggle button.active {
  background: white;
  color: var(--color-gray-800);
}

.pnl-cogs-toggle button:not(.active) {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.pnl-cogs-toggle button:not(.active):hover {
  color: white;
}

/* Light variant for white cards — MUST come after base rules */
.pnl-cogs-toggle.pnl-cogs-toggle-light {
  background: var(--color-gray-100);
}

.pnl-cogs-toggle.pnl-cogs-toggle-light button.active {
  background: var(--color-primary);
  color: white;
}

.pnl-cogs-toggle.pnl-cogs-toggle-light button:not(.active) {
  background: transparent;
  color: var(--color-gray-500);
}

.pnl-cogs-toggle.pnl-cogs-toggle-light button:not(.active):hover {
  color: var(--color-gray-900);
}

/* Waterfall chart */
.pnl-waterfall-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--color-gray-200);
  margin-bottom: 24px;
}

.pnl-waterfall-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: 20px;
}

.pnl-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.pnl-section-grid > .pnl-section-card,
.pnl-section-grid > .pnl-waterfall-card {
  margin-bottom: 0;
}

.pnl-waterfall-bars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 180px;
}

.pnl-wf-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pnl-wf-bar-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gray-900);
  white-space: nowrap;
}

.pnl-wf-bar-inner {
  width: 100%;
  border-radius: 8px 8px 4px 4px;
  min-height: 8px;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pnl-wf-bar-label {
  font-size: 11px;
  color: var(--color-gray-500);
  text-align: center;
  font-weight: 500;
}

/* Section cards */
.pnl-section-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--color-gray-200);
  margin-bottom: 24px;
}

.pnl-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pnl-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-gray-900);
}

.pnl-section-subtitle {
  font-size: 13px;
  color: var(--color-gray-500);
  margin: -8px 0 16px;
}

.pnl-section-badge {
  font-size: 13px;
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-weight: 600;
}

.pnl-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
}

/* Expense rows */
.pnl-exp-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-gray-100);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 8px;
  margin: 0 -8px;
}

.pnl-exp-row:hover {
  background: var(--color-gray-50);
}

.pnl-exp-row.pnl-drill-row {
  cursor: pointer;
}

.pnl-exp-row.pnl-drill-row:hover,
.pnl-concept-card.pnl-drill-row:hover {
  border-color: var(--color-primary-200);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.pnl-exp-row.pnl-drill-row:focus-visible,
.pnl-concept-card.pnl-drill-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.pnl-exp-row:last-child {
  border-bottom: none;
}

.pnl-exp-row.parent-row {
  background: var(--color-gray-50);
  cursor: default;
}

.pnl-exp-row.parent-row.pnl-drill-row {
  cursor: pointer;
}

.pnl-exp-row.child-row {
  padding-left: 44px;
}

.pnl-exp-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pnl-exp-icon i {
  width: 20px;
  height: 20px;
}

.pnl-exp-info {
  flex: 1;
  min-width: 0;
}

.pnl-exp-name {
  font-weight: 600;
  color: var(--color-gray-900);
  font-size: 14px;
}

.pnl-exp-type {
  font-size: 12px;
  color: var(--color-gray-400);
}

.pnl-exp-bar-wrap {
  flex: 1;
  max-width: 200px;
}

.pnl-exp-bar-bg {
  height: 8px;
  background: var(--color-gray-100);
  border-radius: 4px;
  overflow: hidden;
}

.pnl-exp-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.pnl-exp-amount {
  text-align: right;
  min-width: 100px;
  flex-shrink: 0;
}

.pnl-exp-amount-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-gray-900);
}

.pnl-exp-amount-sub {
  font-size: 11px;
  color: var(--color-gray-400);
}

/* Concept cards grid */
.pnl-concepts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* P&L statement/table view */
.pnl-view-toggle {
  flex-shrink: 0;
}

.pnl-export-button {
  min-height: 38px;
  gap: 6px;
}

.pnl-export-button.is-loading {
  opacity: 0.65;
  cursor: wait;
}

.pnl-table-view {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pnl-table-card {
  background: #fff;
  border: 0;
  border-radius: 18px;
  padding: 0;
}

/* Every P&L table belongs to the same full-width report workspace. */
.pnl-table-card--statement {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.pnl-table-card--management {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.pnl-table-card-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.pnl-table-card-header h2 {
  margin: 0;
  color: var(--color-gray-900);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pnl-table-card-header p {
  margin: 4px 0 0;
  color: #8a94a6;
  font-size: 12px;
  line-height: 1.45;
}

.pnl-table-basis {
  flex: 0 0 auto;
  padding-bottom: 1px;
  color: var(--color-gray-500);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.pnl-statement-wrap .erp-data-table-wrap,
.pnl-management-wrap .erp-data-table-wrap,
#pnlTableBreakdownContent .erp-data-table-wrap {
  border-radius: 12px;
}

/* Management and every Breakdowns tab opt into the same precision-table
   module as the statement. They remain page content, not nested viewports. */
.pnl-management-wrap .erp-data-table-wrap,
#pnlTableBreakdownContent .erp-data-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior: auto;
}

.pnl-statement-wrap .erp-data-table-wrap {
  border-color: rgba(23, 23, 23, 0.12);
  border-radius: 12px;
}

/* The statement is one continuous report, not a viewport inside a page. Keep
   horizontal overflow available for narrow screens, but never cap its height. */
.pnl-statement-wrap .erp-data-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior: auto;
}

/* On wide report workspaces the table already fits without a horizontal
   scroller. Releasing overflow entirely lets the toolbar and thead attach to
   the real page scroll container, so both rows can stay visible while the
   statement body moves underneath them. Narrower workspaces retain x-scroll. */
@media (min-width: 1600px) {
  .pnl-statement-wrap .erp-data-table-wrap {
    overflow: visible;
  }
}

.pnl-statement-wrap .erp-data-table__toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #fff;
}

.pnl-statement-wrap .erp-data-table--sticky thead th {
  top: 48px;
  z-index: 3;
  box-shadow: inset 0 -1px 0 rgba(23, 23, 23, 0.12);
}

/* Desktop content scrolls inside a container with 24px padding. Pull the
   sticky stack through that padding so no body row remains visible above it. */
@media (min-width: 1600px) {
  .pnl-statement-wrap .erp-data-table__toolbar {
    top: -24px;
  }

  .pnl-statement-wrap .erp-data-table--sticky thead th {
    top: 24px;
  }
}

.pnl-statement-wrap .erp-data-table--precision thead .erp-data-table__cell--frozen {
  z-index: 6;
}

.pnl-statement-wrap .erp-data-table tfoot td {
  position: static;
  box-shadow: inset 0 1px 0 rgba(23, 23, 23, 0.12);
}

.pnl-statement-wrap .erp-data-table--precision tfoot .erp-data-table__cell--frozen {
  position: static;
  z-index: auto;
}

.pnl-statement-wrap .erp-data-table {
  min-width: 1286px;
  font-size: 15px;
}

/* Lusha-like density: figures stay readable through tabular alignment and
   consistent grid rhythm rather than extra size or weight. */
.pnl-statement-wrap .pnl-statement-value,
.pnl-statement-wrap .pnl-statement-ratio-v2,
.pnl-statement-wrap .pnl-statement-delta {
  font-size: 15px;
  font-weight: 400;
}

.pnl-statement-wrap .pnl-statement-row-v2--subtotal .pnl-statement-value,
.pnl-statement-wrap .pnl-statement-row-v2--subtotal .pnl-statement-ratio-v2 {
  font-weight: 500;
}

.pnl-statement-wrap .pnl-statement-row-v2--subtotal-strong .pnl-statement-value,
.pnl-statement-wrap .pnl-statement-row-v2--subtotal-strong .pnl-statement-ratio-v2,
.pnl-statement-wrap .erp-data-table tfoot .pnl-statement-value,
.pnl-statement-wrap .erp-data-table tfoot .pnl-statement-ratio-v2 {
  font-weight: 600;
}

.pnl-statement-wrap .erp-data-table thead tr {
  border-bottom-color: #e3e7ee;
}

.pnl-statement-wrap .erp-data-table th {
  height: 40px;
  padding: 8px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.12);
  background: #fff;
  color: #262626;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}

.pnl-statement-wrap .erp-data-table tbody tr {
  border-bottom-color: #eceff4;
}

.pnl-statement-wrap .erp-data-table tbody td {
  border-bottom: 1px solid rgba(23, 23, 23, 0.12);
}

.pnl-statement-wrap .erp-data-table tbody tr:not(.pnl-statement-row-v2--section) td {
  height: 40px;
  padding: 8px;
  color: #262626;
  font-size: 15px;
  line-height: 24px;
}

/* Lusha keeps one reading edge across mixed data types. P&L follows the same
   column rhythm: labels, counts, money, percentages and totals all start left. */
.pnl-statement-wrap .erp-data-table th,
.pnl-statement-wrap .erp-data-table td,
.pnl-statement-wrap .erp-data-table .u-numeric-tabular {
  text-align: left !important;
}

.pnl-statement-wrap .erp-data-table th .erp-data-table__th-content {
  justify-content: flex-start;
}

.pnl-statement-wrap .erp-data-table .erp-data-table__cell--group {
  border-left-color: rgba(23, 23, 23, 0.12);
}

.pnl-statement-wrap .erp-data-table__row--link:hover td {
  background: #f7f7f7;
}

.pnl-management-wrap .erp-data-table {
  min-width: 1040px;
}

.pnl-management-wrap .erp-data-table th,
.pnl-management-wrap .erp-data-table td,
#pnlTableBreakdownContent .erp-data-table th,
#pnlTableBreakdownContent .erp-data-table td,
#pnlTableBreakdownContent .erp-data-table .u-numeric-tabular {
  color: #262626;
  text-align: left !important;
}

.pnl-management-wrap .erp-data-table th .erp-data-table__th-content,
#pnlTableBreakdownContent .erp-data-table th .erp-data-table__th-content {
  justify-content: flex-start;
}

.pnl-management-wrap .erp-data-table tbody td {
  height: 56px;
}

#pnlTableBreakdownContent .erp-data-table tbody td {
  height: 40px;
}

.pnl-statement-row-v2 td {
  vertical-align: middle;
}

.pnl-statement-line {
  display: flex;
  align-items: center;
  min-width: 0;
}

.pnl-statement-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: inherit;
  white-space: nowrap;
}

/* The drill affordance stays quiet until the row is actually pointed at —
   twenty permanent arrows read as noise, not as an invitation. */
.pnl-statement-drill-icon {
  flex: 0 0 auto;
  color: #b3bac7;
  transition: opacity 0.12s ease, transform 0.12s ease, color 0.12s ease;
}

.pnl-statement-row-v2.erp-data-table__row--link:hover .pnl-statement-drill-icon,
.pnl-statement-row-v2.erp-data-table__row--link:focus-visible .pnl-statement-drill-icon {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* The statement stays monochrome, hover included: nearly every line here is
   openable, so colour on names says nothing. The affordance is the arrow plus
   the row highlight. */
.pnl-statement-row-v2.erp-data-table__row--link:hover .pnl-statement-label--drilldown {
  color: var(--color-gray-900);
}

/* A quiet marker at the start of every openable line gives the rows a rhythm
   instead of leaving the left side bare. */
.pnl-statement-drill-icon {
  opacity: 0.45;
}

.pnl-statement-row-v2.erp-data-table__row--link:hover .pnl-statement-drill-icon,
.pnl-statement-row-v2.erp-data-table__row--link:focus-visible .pnl-statement-drill-icon {
  opacity: 1;
  color: var(--color-gray-700);
}

/* Collapse control for section captions and parent categories. */
.pnl-statement-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #8a94a6;
  cursor: pointer;
  transition: transform 0.12s ease, color 0.12s ease;
}

.pnl-statement-toggle:hover {
  color: var(--color-gray-800);
}

.pnl-statement-row-v2.is-collapsed .pnl-statement-toggle {
  transform: rotate(-90deg);
}

.pnl-statement-toggle-spacer {
  flex: 0 0 18px;
  width: 18px;
  margin-right: 6px;
}

.pnl-statement-value--prev {
  color: #262626;
}

.pnl-statement-period-drilldown {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.pnl-statement-period-drilldown .erp-icon {
  flex: 0 0 auto;
  color: #b3bac7;
  transition: color 0.12s ease, transform 0.12s ease;
}

.pnl-statement-period-drilldown:hover .erp-icon,
.pnl-statement-period-drilldown:focus-visible .erp-icon {
  color: var(--color-gray-700);
  transform: translate(1px, -1px);
}

.pnl-statement-period-drilldown:focus-visible {
  outline: 1px solid #b3bac7;
  outline-offset: 3px;
  border-radius: 4px;
}

.pnl-statement-delta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Change columns stay in ink: the +/- sign already carries direction, and
   colouring almost every row turns the signal back into wallpaper. Colour is
   spent once, on the bottom line. */
.pnl-statement-delta.is-up,
.pnl-statement-delta.is-down {
  color: #262626;
}

.pnl-statement-delta.is-flat {
  color: var(--color-gray-400);
}

/* Source-record counts ride under the line name so the statement keeps a
   single descriptor column instead of a half-empty one. */
.pnl-statement-records {
  color: #262626;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

.pnl-statement-wrap .erp-data-table__toolbar {
  min-height: 48px;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 4px 12px;
  border-bottom-color: rgba(23, 23, 23, 0.12);
  background: #fff;
}

.pnl-statement-search {
  width: min(320px, 45vw);
}

.pnl-statement-search.ds-search-wrap .ds-search-input {
  padding-left: 30px;
  border-color: transparent;
  background: #fff;
  color: #262626;
  font-size: 15px;
}

.pnl-statement-search.ds-search-wrap .ds-search-input:focus {
  border-color: transparent;
  box-shadow: none;
  background: #fff;
}

.pnl-statement-search.ds-search-wrap:focus-within .ds-search-icon {
  color: var(--color-gray-600);
}

.pnl-statement-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  color: rgba(23, 23, 23, 0.5);
  font-size: 15px;
  white-space: nowrap;
}

/* Indicator name over its explanation — the shared statement line is a flex row
   for the collapse chevron, so this table needs its own two-line cell. */
.pnl-indicator-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pnl-indicator-note {
  color: #8a94a6;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.pnl-indicator-basis {
  color: #262626;
  font-size: 15px;
  font-weight: 400;
}

.pnl-statement-sort-reset {
  padding: 4px 10px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--color-gray-600);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.pnl-statement-sort-reset:hover {
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
}

/* Sort carets sit next to right-aligned numeric headers, not away from them. */
.pnl-statement-wrap .erp-data-table th.erp-data-table__th--sortable {
  cursor: pointer;
}

.pnl-statement-wrap .erp-data-table th .erp-icon {
  margin-left: 4px;
  vertical-align: -2px;
}

.pnl-statement-toolbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--color-gray-500);
  cursor: pointer;
}

.pnl-statement-toolbar-action:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-800);
}

/* A section caption is the most important label in the statement — it must
   outrank the lines under it, not hide below them in pale small caps. */
.pnl-statement-section-label {
  color: #262626;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Section captions remain inside the same 40px grid. The prior large gaps made
   the statement read as disconnected blocks instead of one financial table. */
.pnl-statement-wrap .erp-data-table .pnl-statement-row-v2--section td,
.pnl-statement-row-v2--section td {
  height: 40px;
  padding: 8px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.12) !important;
  background: #fff !important;
}

.pnl-statement-row-v2--section:not(:first-child) td {
  border-top: 1px solid rgba(23, 23, 23, 0.2);
}

.pnl-statement-section-summary {
  display: none;
}

.pnl-statement-row-v2--section.is-collapsed .pnl-statement-section-summary {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

.pnl-statement-row-v2--section.is-collapsed .pnl-statement-section-summary .pnl-statement-value,
.pnl-statement-row-v2--section.is-collapsed .pnl-statement-section-summary .pnl-statement-ratio-v2,
.pnl-statement-row-v2--section.is-collapsed .pnl-statement-section-summary .pnl-statement-delta {
  font-weight: 600;
}

.pnl-statement-row-v2--depth-2 td:first-child {
  padding-left: 50px;
}

/* Parent labels keep a medium weight so the accounting tree is scannable;
   leaf rows stay regular and subtotals carry the stronger hierarchy below. */
.pnl-statement-row-v2--source-group td:first-child,
.pnl-statement-row-v2--group td:first-child {
  font-weight: 500;
}

.pnl-statement-row-v2--source-detail td {
  color: #262626;
}

.pnl-statement-row-v2--source-detail td:first-child {
  color: #262626;
}

.pnl-statement-row-v2--subtotal,
.pnl-statement-row-v2--subtotal-strong {
  border-top: 1px solid #e3e7ee;
}

.pnl-statement-row-v2--subtotal td,
.pnl-statement-row-v2--subtotal-strong td {
  color: #262626;
  font-weight: 500;
}

.pnl-statement-row-v2--subtotal-strong {
  border-top-color: #cfd5df;
}

.pnl-statement-row-v2--subtotal-strong td {
  font-weight: 600;
}

.pnl-statement-value,
.pnl-statement-ratio-v2,
.pnl-breakdown-money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pnl-statement-value {
  color: #262626;
  font-weight: 400;
}

.pnl-statement-ratio-v2 {
  color: #262626;
  font-size: 15px;
  font-weight: 400;
}

.pnl-statement-value.is-zero,
.pnl-statement-ratio-v2.is-zero {
  color: #262626;
}

.pnl-statement-value.is-negative,
.pnl-breakdown-money.is-negative {
  color: #dc5a5a;
}

/* Breakdowns are accounting data, not alerts. Direction is already explicit
   in the minus sign, so all values use the same ink as the statement. */
.pnl-breakdown-money.is-negative {
  color: #262626;
}

/* A minus is the normal life of a P&L line. Painting every deduction red turns
   the signal into wallpaper — red is reserved for a losing bottom line. */
.pnl-statement-value.is-negative,
.pnl-statement-ratio-v2.is-negative {
  color: #262626;
}

.pnl-statement-row-v2--subtotal .pnl-statement-value,
.pnl-statement-row-v2--subtotal .pnl-statement-ratio-v2,
.pnl-statement-row-v2--subtotal .pnl-statement-value.is-negative,
.pnl-statement-row-v2--subtotal .pnl-statement-ratio-v2.is-negative {
  color: #262626;
  font-weight: 500;
}

.pnl-statement-row-v2--subtotal-strong .pnl-statement-value,
.pnl-statement-row-v2--subtotal-strong .pnl-statement-ratio-v2,
.pnl-statement-row-v2--subtotal-strong .pnl-statement-value.is-negative,
.pnl-statement-row-v2--subtotal-strong .pnl-statement-ratio-v2.is-negative {
  color: #262626;
  font-weight: 600;
}

/* Bottom line follows the same quiet grid and Lusha-like 40px rhythm. */
.pnl-statement-wrap .erp-data-table tfoot td {
  height: 40px;
  padding: 8px;
  border-top: 1px solid rgba(23, 23, 23, 0.2);
  background: #fff;
  color: #262626;
  font-weight: 600;
}

.pnl-statement-wrap .erp-data-table tfoot td.erp-data-table__cell--muted,
.pnl-statement-ratio-v2--total {
  color: #262626;
  font-size: 15px;
  font-weight: 600;
}

.pnl-statement-value--total {
  color: #262626;
  font-size: 15px;
  font-weight: 600;
}

.pnl-statement-value--total.is-negative,
.pnl-statement-ratio-v2--total.is-negative {
  color: var(--color-danger);
}

.pnl-breakdown-header {
  align-items: center;
}

.pnl-breakdown-toggle {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.pnl-breakdown-toggle .erp-segmented__button {
  flex-shrink: 0;
  white-space: nowrap;
}

.pnl-breakdown-table {
  min-width: 1320px;
}

.pnl-drilldown-body {
  min-height: 180px;
  color: #262626;
  transition: opacity 0.12s ease;
}

.pnl-drilldown-body.is-loading {
  opacity: 1;
  pointer-events: auto;
}

.pnl-drilldown-body.is-loading .pnl-drilldown-overview,
.pnl-drilldown-body.is-loading .erp-data-table,
.pnl-drilldown-body.is-loading .erp-pagination {
  opacity: 0.58;
  pointer-events: none;
}

.pnl-drilldown-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-gray-500);
  min-height: 160px;
  font-size: 14px;
}

.pnl-cost-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.pnl-cost-warning > div {
  flex: 1 1 320px;
}

.pnl-cost-warning > button,
.pnl-cost-source {
  min-height: 44px;
}

.pnl-cost-issues .pnl-cost-cell,
.pnl-cost-issues .pnl-cost-cell * {
  white-space: normal;
  overflow-wrap: anywhere;
}

.pnl-cost-cell {
  display: grid;
  gap: 4px;
  padding-block: 4px;
}

.pnl-cost-note {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.pnl-cost-source {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-primary-600, #2563eb);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pnl-cost-source:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.pnl-drilldown-overview {
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.12);
  border-radius: 12px;
  background: #fff;
}

.pnl-drilldown-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.12);
  color: #666;
  font-size: 13px;
  line-height: 20px;
}

.pnl-drilldown-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pnl-drilldown-metric {
  min-width: 0;
  padding: 14px 16px 15px;
  background: #fff;
}

.pnl-drilldown-metric + .pnl-drilldown-metric {
  border-left: 1px solid rgba(23, 23, 23, 0.12);
}

.pnl-drilldown-metric span,
.pnl-drilldown-metric strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pnl-drilldown-metric span {
  margin-bottom: 3px;
  color: #666;
  font-size: 12px;
  line-height: 18px;
}

.pnl-drilldown-metric strong {
  color: #262626;
  font-family: Inter, var(--font-data), sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  font-variant-numeric: tabular-nums;
}

.pnl-drilldown-insight {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 16px;
  border-top: 1px solid rgba(23, 23, 23, 0.12);
  color: #444;
  font-size: 13px;
  line-height: 20px;
}

.pnl-drilldown-insight .erp-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #666;
}

.pnl-drilldown-table-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(23, 23, 23, 0.12);
  border-radius: 12px;
  background: #fff;
}

.pnl-drilldown-table-shell > .erp-data-table-wrap--precision {
  width: 100%;
  max-width: 100%;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: auto;
  border: 0;
  border-radius: 0;
}

.pnl-drilldown-table-shell > .erp-pagination {
  border-top: 1px solid rgba(23, 23, 23, 0.12);
  background: #fff;
  border-radius: 0 0 12px 12px;
}

.pnl-drilldown-sticky-header {
  position: sticky;
  top: -24px;
  z-index: 9;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 -1px 0 rgba(23, 23, 23, 0.12);
}

.pnl-drilldown-sticky-header__viewport {
  width: 100%;
  overflow: hidden;
}

.pnl-drilldown-sticky-header .erp-data-table--precision {
  margin: 0;
}

.pnl-drilldown-sticky-header .erp-data-table--precision th {
  position: relative;
  z-index: 1;
}

.pnl-drilldown-sticky-header .erp-data-table--precision .erp-data-table__cell--frozen {
  position: sticky;
  z-index: 2;
}

.pnl-drilldown-original-head {
  display: none;
}

.pnl-drilldown-table-shell > .erp-data-table__toolbar {
  min-height: 52px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.12);
  background: #fff;
}

.pnl-drilldown-table-shell > .erp-data-table__toolbar .ds-search-wrap {
  width: min(520px, 100%);
}

.pnl-drilldown-table-shell > .erp-data-table__toolbar .ds-search-input {
  padding-left: 30px;
  border-color: transparent;
  background: #fff;
  color: #262626;
  font-size: 15px;
}

.pnl-drilldown-table-shell > .erp-data-table__toolbar .ds-search-input:focus {
  border-color: transparent;
  box-shadow: none;
  background: #fff;
}

.pnl-drilldown-table-shell > .erp-data-table__toolbar .ds-search-wrap:focus-within .ds-search-icon {
  color: #666;
}

.pnl-drilldown-body .erp-data-table--precision th,
.pnl-drilldown-body .erp-data-table--precision td,
.pnl-drilldown-body .erp-data-table--precision .u-numeric-tabular {
  color: #262626;
  text-align: left !important;
}

.pnl-drilldown-body .erp-data-table--precision th,
.pnl-drilldown-body .erp-data-table--precision td {
  padding: 8px 16px;
}

.pnl-drilldown-body .erp-data-table--precision th .erp-data-table__th-content {
  justify-content: flex-start;
}

.pnl-drilldown-document {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #262626;
  font-weight: 500;
}

a.pnl-drilldown-document { text-decoration: none; }
a.pnl-drilldown-document:hover { text-decoration: underline; }
a.pnl-drilldown-document:focus-visible {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (max-width: 640px) {
  a.pnl-drilldown-document { min-height: 44px; }
}

.pnl-drilldown-document .erp-icon {
  flex: 0 0 auto;
  color: #777;
  opacity: 0.7;
}

.pnl-drilldown-negative {
  color: var(--color-danger-dark);
}

@media (max-width: 760px) {
  .pnl-drilldown-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pnl-drilldown-metric:nth-child(3) {
    border-top: 1px solid rgba(23, 23, 23, 0.12);
    border-left: 0;
  }

  .pnl-drilldown-metric:nth-child(4) {
    border-top: 1px solid rgba(23, 23, 23, 0.12);
  }
}

.pnl-concept-card {
  background: var(--color-gray-50);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid var(--color-gray-400);
  transition: transform 0.15s, box-shadow 0.15s;
}

.pnl-concept-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.pnl-concept-name {
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 8px;
  font-size: 14px;
}

.pnl-concept-amount {
  font-size: 20px;
  font-weight: 700;
}

.pnl-concept-invoices {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 4px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .pnl-hero-header {
    padding: 20px 16px 16px;
  }

  .pnl-hero-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .pnl-hero-filters {
    width: 100%;
  }

  .pnl-view-toggle {
    order: -1;
  }

  .pnl-view-toggle .erp-segmented__button,
  .pnl-export-button {
    min-height: 44px;
  }

  .pnl-table-card {
    padding: 0;
    border-radius: 14px;
  }

  .pnl-table-card-header,
  .pnl-breakdown-header {
    flex-direction: column;
    align-items: stretch;
  }

  .pnl-breakdown-toggle {
    width: 100%;
  }

  .pnl-breakdown-toggle .erp-segmented__button {
    min-height: 44px;
  }

  .pnl-table-basis {
    align-self: flex-start;
  }

  .pnl-statement-line {
    align-items: center;
  }

  .pnl-statement-wrap .erp-data-table__row--link td {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .pnl-statement-wrap .erp-data-table--precision th,
  .pnl-statement-wrap .erp-data-table--precision td {
    height: 44px;
  }

  .pnl-statement-search {
    width: min(260px, 70vw);
  }

  .pnl-statement-toolbar-meta > span {
    display: none;
  }

  .pnl-filter-actions {
    width: 100%;
  }

  .pnl-secondary-toggle {
    flex: 1;
    justify-content: center;
  }

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

  .pnl-filter-label {
    min-width: 0;
    width: 100%;
  }

  .pnl-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pnl-stat-card {
    padding: 16px;
  }

  .pnl-stat-card .stat-value {
    font-size: 22px;
  }

  .pnl-waterfall-bars {
    height: 140px;
  }

  .pnl-section-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pnl-wf-bar-value {
    font-size: 10px;
  }

  .pnl-exp-bar-wrap {
    display: none;
  }

  .pnl-section-card {
    padding: 16px;
    border-radius: 12px;
  }

  .pnl-loading-section-card,
  .pnl-loading-card {
    padding: 16px;
    border-radius: 12px;
  }

  .pnl-loading-sections-grid {
    grid-template-columns: 1fr;
  }

  .pnl-loading-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .pnl-loading-row .pnl-skeleton-bar,
  .pnl-loading-row-amount {
    grid-column: 2;
  }

  .pnl-loading-row-amount {
    align-items: flex-start;
  }

  .pnl-loading-waterfall-bars {
    height: 140px;
    gap: 8px;
  }

  .pnl-concepts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .pnl-stats-grid {
    grid-template-columns: 1fr;
  }

  .pnl-loading-grid-compact {
    grid-template-columns: 1fr;
  }

  .pnl-waterfall-bars {
    height: 120px;
    gap: 4px;
  }

  .pnl-wf-bar-label {
    font-size: 9px;
  }

  .pnl-hero-header h1 {
    font-size: 18px;
  }

}

/* ==================== POS CATEGORY SIDEBAR ==================== */
.pos-cat-item {
  transition: all 0.15s ease;
  color: var(--gray-700);
}

.pos-cat-item:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.pos-cat-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600 !important;
}

.pos-item:hover {
  background: var(--gray-100) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Mobile: stack sidebar and grid vertically */
@media (max-width: 768px) {
  .pos-cat-item {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
}

/* ================================================================
   RESERVATIONS PAGE
   ================================================================ */

.reservations-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.reservations-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reservations-date-nav .btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  color: var(--text-primary);
}

.reservations-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

.reservations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reservation-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.15s ease;
}

.reservation-card:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.reservation-card-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  flex-shrink: 0;
}

.reservation-time-from {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.reservation-time-sep {
  font-size: 11px;
  color: var(--text-muted);
}

.reservation-time-to {
  font-size: 13px;
  color: var(--text-secondary);
}

.reservation-card-body {
  flex: 1;
  min-width: 0;
}

.reservation-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.reservation-guest-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.reservation-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.reservation-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.reservation-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.reservation-source-badge {
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-brand-indigo-light);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.reservation-card-notes {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  font-style: italic;
}

.reservation-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Settings page */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.settings-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .reservations-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .reservations-date-nav {
    justify-content: center;
  }

  .reservations-filters {
    justify-content: center;
  }

  .reservation-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }

  .reservation-card-time {
    flex-direction: row;
    gap: 6px;
  }

  .reservation-card-actions {
    align-self: flex-end;
  }
}

/* ==================== JBAC v2: GRANULAR PERMISSIONS ==================== */

/* Category accordion */
.perm-category {
  border-bottom: 1px solid var(--gray-100);
}

.perm-category:last-child {
  border-bottom: none;
}

.perm-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--gray-50);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.perm-category-header:hover {
  background: var(--gray-100);
}

.perm-category-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.perm-category-icon i {
  width: 16px;
  height: 16px;
}

.perm-category-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
}

.perm-category-count {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 2px 8px;
  background: var(--gray-200);
  border-radius: 10px;
}

.perm-category-chevron {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  transition: transform 0.2s ease;
}

.perm-category.open .perm-category-chevron {
  transform: rotate(180deg);
}

.perm-category-body {
  display: none;
  padding: 0;
}

.perm-category.open .perm-category-body {
  display: block;
}

/* Named navigation section inside a permission product. */
.perm-section {
  border-top: 1px solid var(--gray-200);
}

.perm-section-title {
  margin: 0;
  padding: 16px 20px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Module sub-section inside category */
.perm-module {
  padding: 12px 20px 16px;
  border-bottom: 1px solid var(--gray-100);
}

.perm-module:last-child {
  border-bottom: none;
}

.perm-module-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.perm-module-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.perm-module-toggle-all {
  margin-left: auto;
  font-size: 11px;
  color: var(--primary);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}

.perm-module-toggle-all:hover {
  background: var(--primary-light);
}

/* Action grid */
.perm-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}

.perm-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.perm-action:hover {
  background: var(--gray-50);
}

.perm-action.dangerous {
  border-left: 2px solid var(--danger);
}

/* Custom toggle switch */
.perm-toggle {
  position: relative;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}

.perm-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.perm-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gray-300);
  border-radius: 20px;
  transition: background 0.2s;
}

.perm-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.perm-toggle input:checked+.perm-toggle-slider {
  background: var(--primary);
}

.perm-toggle input:checked+.perm-toggle-slider::before {
  transform: translateX(14px);
}

.perm-toggle.saving .perm-toggle-slider {
  background: var(--color-warning) !important;
}

.perm-toggle.saved .perm-toggle-slider {
  background: var(--color-success) !important;
}

/* Action label */
.perm-action-label {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
  cursor: pointer;
  line-height: 1.3;
}

/* Info button */
.perm-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  background: transparent;
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  font-family: serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
  line-height: 1;
}

.perm-info-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* Info popover */
.perm-info-popover {
  position: fixed;
  z-index: 10000;
  width: 320px;
  max-width: 90vw;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--gray-200);
  padding: 16px;
  animation: popoverIn 0.15s ease-out;
}

@keyframes popoverIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.perm-info-popover-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.perm-info-popover-close {
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 16px;
}

.perm-info-popover-close:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.perm-info-popover-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.perm-info-popover .perm-danger-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--color-danger-50);
  color: var(--color-danger-dark);
  border-radius: 10px;
  font-weight: 600;
  margin-top: 10px;
}

/* Quick actions bar */
.perm-quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  flex-wrap: wrap;
}

.perm-quick-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.perm-quick-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.perm-preset-select {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
  background: white;
  cursor: pointer;
  margin-left: auto;
}

/* Mobile */
@media (max-width: 768px) {
  .perm-actions-grid {
    grid-template-columns: 1fr;
  }

  .perm-category-header {
    padding: 12px 14px;
  }

  .perm-module {
    padding: 10px 14px 12px;
  }

  .perm-quick-actions {
    padding: 10px 14px;
  }

  .perm-info-popover {
    width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px !important;
  }
}

/* ==================== BULK UPLOAD DROPZONE ==================== */
.bulk-dropzone {
  border: 2px dashed var(--border-color, var(--color-gray-200));
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg-card, #fff);
}

.bulk-dropzone:hover,
.bulk-dropzone.dragover {
  border-color: var(--primary);
  background: rgba(var(--color-primary-rgb), 0.04);
}

.bulk-dropzone.dragover {
  transform: scale(1.01);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

/* ==================== AUDIT REPORT SHARED STYLES ==================== */
.comp-orders-page { display: flex; flex-direction: column; gap: 20px; }
.comp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.comp-stat-card {
  display: flex; align-items: center; gap: 16px; padding: 20px; background: white;
  border-radius: 12px; border: 1px solid var(--color-gray-200); transition: all 0.2s;
}
.comp-stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
.comp-stat-total { border-left: 3px solid var(--color-danger); }
.comp-stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comp-stat-value { font-size: 22px; font-weight: 700; color: var(--color-gray-900); line-height: 1.2; }
.comp-stat-label { font-size: 12px; color: var(--color-gray-500); font-weight: 500; margin-top: 2px; text-transform: none; letter-spacing: 0.5px; }
.comp-breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comp-breakdown-panel { background: white; border-radius: 12px; border: 1px solid var(--color-gray-200); overflow: hidden; }
.comp-breakdown-header {
  display: flex; align-items: center; gap: 8px; padding: 16px 20px;
  border-bottom: 1px solid var(--color-gray-100); font-weight: 600; font-size: 14px; color: var(--color-gray-900);
}
.comp-breakdown-body { padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; }
.comp-breakdown-row {
  display: flex; align-items: center; padding: 8px 4px; border-radius: 8px; transition: background 0.15s;
}
.comp-breakdown-row:hover { background: var(--color-gray-50); }
.comp-table-wrap { background: white; border-radius: 12px; border: 1px solid var(--color-gray-200); overflow: hidden; }
.comp-table-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--color-gray-100);
}
.comp-count-badge {
  background: var(--primary-light); color: var(--color-primary); font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
}
.comp-table-scroll { overflow-x: auto; }
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table thead th {
  padding: 12px 16px; text-align: left; font-size: 11px; text-transform: none;
  letter-spacing: 0.5px; color: var(--color-gray-500); font-weight: 600; background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200); white-space: nowrap;
}
.comp-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--color-gray-100); }
.comp-order-row { transition: background 0.15s; }
.comp-order-row:hover { background: var(--color-gray-50); }
.comp-order-row:last-child td { border-bottom: none; }
.comp-clear-btn {
  display: flex; align-items: center; gap: 4px; padding: 8px 14px; background: var(--color-danger-50);
  border: 1px solid var(--color-danger-200); border-radius: 8px; color: var(--color-danger); font-size: 13px;
  font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.comp-clear-btn:hover { background: var(--color-danger-light); }
@media (max-width: 1024px) {
  .comp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .comp-breakdown-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .comp-stats-grid { grid-template-columns: 1fr; }
  .comp-stat-card { padding: 14px; }
  .comp-stat-value { font-size: 18px; }
}

/* ==================== FSMS Wizard (checklist form) ==================== */
.fsms-wizard { max-width: 760px; margin: 0 auto; }
.fsms-wizard-card { background: white; border: 1px solid var(--gray-200); border-radius: 12px; padding: 28px; margin: 12px 0 18px; box-shadow: var(--shadow-sm); }
.fsms-wizard-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fsms-wizard-footer-left { display: flex; gap: 8px; }
.fsms-wizard-snooze { text-align: center; margin-top: 14px; }

.fsms-progress-bar { height: 6px; background: var(--gray-200); border-radius: 99px; overflow: hidden; }
.fsms-progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); transition: width 0.3s ease; border-radius: 99px; }

/* Question step */
.fsms-question-category { font-size: 11px; text-transform: none; letter-spacing: 0.6px; color: var(--gray-500); font-weight: 700; margin-bottom: 8px; }
.fsms-question-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.fsms-question-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--gray-900); line-height: 1.3; flex: 1; }
.fsms-required-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 99px; background: var(--color-danger-50); color: var(--color-danger-dark); font-size: 11px; font-weight: 700; white-space: nowrap; text-transform: none; letter-spacing: 0.3px; }
.fsms-required-chip i { width: 10px; height: 10px; }
.fsms-required-asterisk { color: var(--color-danger); font-weight: 700; }
.fsms-question-help { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--color-info-light); border-inline-start: 3px solid var(--color-info); border-radius: 6px; font-size: 13px; color: var(--gray-700); margin-bottom: 20px; line-height: 1.5; }
.fsms-question-help i { width: 15px; height: 15px; color: var(--color-info); flex-shrink: 0; margin-top: 2px; }

.fsms-answer-wrap { margin: 20px 0; }

/* Yes/No answer pills */
.fsms-answer-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.fsms-answer-pill { flex: 1; min-width: 120px; padding: 20px 24px; font-size: 16px; font-weight: 600; border: 2px solid var(--gray-300); background: white; color: var(--gray-700); border-radius: 12px; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; }
.fsms-answer-pill i { width: 18px; height: 18px; }
.fsms-answer-pill:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-primary-light); }
.fsms-answer-pill.active { border-color: transparent !important; color: #ffffff !important; box-shadow: var(--shadow-md); }
.fsms-answer-pill.active i,
.fsms-answer-pill.active svg { color: #ffffff !important; stroke: #ffffff !important; }
.fsms-answer-pill--yes.active { background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !important; }
.fsms-answer-pill--no.active { background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark)) !important; }
.fsms-answer-pill--na.active { background: linear-gradient(135deg, var(--color-gray-500), var(--color-gray-700)) !important; }

/* Temperature input */
.fsms-temp-wrap { display: flex; align-items: stretch; background: white; border: 2px solid var(--gray-300); border-radius: 12px; overflow: hidden; transition: border-color 0.15s; }
.fsms-temp-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.fsms-temp-sign-btn { width: 58px; border: 0; border-inline-end: 2px solid var(--gray-200); background: var(--gray-50); color: var(--gray-700); font-size: 28px; font-weight: 800; line-height: 1; cursor: pointer; font-family: inherit; }
.fsms-temp-sign-btn:active { background: var(--gray-100); color: var(--gray-900); }
.fsms-temp-input { flex: 1; border: none; outline: none; padding: 20px 24px; font-size: 32px; font-weight: 700; text-align: center; background: transparent; color: var(--gray-900); font-family: inherit; min-width: 0; }
.fsms-temp-unit { padding: 0 28px; font-size: 22px; font-weight: 700; color: var(--gray-600); background: var(--gray-50); border-inline-start: 2px solid var(--gray-200); display: flex; align-items: center; }
.fsms-temp-range { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--gray-500); }
.fsms-temp-range span { display: inline-flex; align-items: center; gap: 4px; }

/* Text / textarea input */
.fsms-text-input { width: 100%; padding: 14px 16px; font-size: 15px; border: 2px solid var(--gray-300); border-radius: 10px; resize: vertical; font-family: inherit; line-height: 1.5; background: white; color: var(--gray-900); transition: border-color 0.15s; box-sizing: border-box; }
.fsms-text-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

/* Photo-only placeholder */
.fsms-photo-only-hint { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px; background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: 10px; color: var(--gray-500); font-size: 14px; }
.fsms-photo-only-hint i { width: 18px; height: 18px; }

/* Fail block */
.fsms-fail-block { margin-top: 20px; padding: 16px; border: 1px solid var(--color-danger-200); background: var(--color-danger-50); border-radius: 10px; }
.fsms-fail-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-danger-800); margin-bottom: 12px; font-size: 14px; }
.fsms-fail-title i { width: 16px; height: 16px; }
.fsms-fail-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--gray-800); }
.fsms-fail-hint { font-size: 11px; color: var(--color-danger-800); margin-top: 8px; font-style: italic; opacity: 0.8; }

/* Photo section */
.fsms-photo-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gray-200); }
.fsms-photo-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gray-800); margin-bottom: 12px; }
.fsms-photo-count { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; background: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: 600; }
.fsms-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.fsms-photo-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-200); background: var(--gray-100); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.fsms-photo-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.fsms-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsms-photo-tile--uploading { display: flex; align-items: center; justify-content: center; color: var(--gray-500); background: var(--gray-50); cursor: default; }
.fsms-photo-tile--uploading i { width: 24px; height: 24px; }
.fsms-photo-delete { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.65); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.fsms-photo-delete i { width: 14px; height: 14px; }
.fsms-photo-delete:hover { background: var(--color-danger); }
.fsms-photo-tile:hover .fsms-photo-delete { opacity: 1; }
.fsms-photo-add { aspect-ratio: 1 / 1; border: 2px dashed var(--gray-300); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--gray-500); cursor: pointer; transition: all 0.15s; font-size: 12px; font-weight: 600; text-align: center; background: white; }
.fsms-photo-add i { width: 24px; height: 24px; }
.fsms-photo-add:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }

/* Review step */
.fsms-review-head { margin-bottom: 16px; }
.fsms-review-title { margin: 0 0 6px 0; font-size: 22px; font-weight: 600; color: var(--gray-900); }
.fsms-review-sub { font-size: 13px; color: var(--gray-500); line-height: 1.5; }
.fsms-review-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fsms-review-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.fsms-review-chip i { width: 13px; height: 13px; }
.fsms-review-chip--pass { background: var(--color-success-light); color: var(--color-success-dark); border-color: #a7f3d0; }
.fsms-review-chip--fail { background: var(--color-danger-50); color: var(--color-danger-dark); border-color: var(--color-danger-200); }
.fsms-review-chip--na { background: var(--gray-100); color: var(--gray-600); border-color: var(--gray-200); }
.fsms-review-chip--pending { background: var(--color-warning-50); color: var(--color-warning-dark); border-color: var(--color-warning-200); }
.fsms-review-banner { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--color-danger-50); border: 1px solid var(--color-danger-200); border-radius: 8px; margin-bottom: 16px; font-size: 13px; color: var(--color-danger-800); font-weight: 500; }

.fsms-required-chip,
.fsms-review-chip,
.fsms-review-banner,
.fsms-fail-block,
.fsms-question-help {
  background: #fff !important;
}
.fsms-review-banner i { width: 16px; height: 16px; flex-shrink: 0; }
.fsms-review-list { border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.fsms-review-row { padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: background 0.12s; }
.fsms-review-row + .fsms-review-row { border-top: 1px solid var(--gray-100); }
.fsms-review-row:hover { background: var(--gray-50); }
.fsms-review-row__icon { width: 20px; height: 20px; flex-shrink: 0; }
.fsms-review-row__icon--pass { color: var(--color-success); }
.fsms-review-row__icon--fail { color: var(--color-danger); }
.fsms-review-row__icon--na { color: var(--gray-400); }
.fsms-review-row__icon--pending { color: var(--color-warning); }
.fsms-review-row__body { flex: 1; min-width: 0; }
.fsms-review-row__q { font-size: 14px; font-weight: 500; color: var(--gray-900); margin-bottom: 2px; }
.fsms-review-row__a { font-size: 12px; color: var(--gray-500); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fsms-review-row__corrective { color: var(--color-danger-dark); }
.fsms-review-row__photos { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; background: var(--gray-100); color: var(--gray-600); font-weight: 600; }
.fsms-review-row__chevron { width: 14px; height: 14px; color: var(--gray-400); flex-shrink: 0; }
.fsms-review-empty { font-style: italic; color: var(--gray-400); }

html.locale-ar .fsms-wizard-footer [data-lucide="chevron-left"],
html.locale-ar .fsms-wizard-footer [data-lucide="chevron-right"],
html.locale-ar .fsms-review-row__chevron {
  transform: scaleX(-1);
}

html.locale-ar .fsms-progress-bar__fill {
  margin-inline-start: auto;
}

/* Spinner animation (reused by many wizards) */
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .fsms-wizard-card { padding: 18px; }
  .fsms-answer-pill { padding: 16px 18px; font-size: 15px; min-width: 90px; }
  .fsms-temp-sign-btn { width: 48px; font-size: 24px; }
  .fsms-temp-input { font-size: 26px; padding: 14px 16px; }
  .fsms-temp-unit { padding: 0 18px; font-size: 18px; }
  .fsms-question-title { font-size: 18px; }
  .fsms-review-title { font-size: 19px; }
  .fsms-photo-grid { grid-template-columns: repeat(3, 1fr); }
  .fsms-photo-delete { opacity: 1; }
}

/* ==================== STAFF PERFORMANCE ==================== */
.staff-perf-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.staff-perf-stats {
  margin-bottom: 2px;
}

.staff-perf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
}

.staff-perf-panel {
  min-width: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: var(--surface-primary, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}

.staff-perf-panel--wide {
  grid-row: span 2;
}

.staff-perf-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-gray-200);
  background: #fff;
}

.staff-perf-panel__head--filters {
  justify-content: flex-start;
}

.staff-perf-panel__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

.staff-perf-table-shell {
  width: 100%;
  overflow-x: auto;
}

.staff-perf-builder-groups {
  display: flex;
  flex-direction: column;
}

.staff-perf-builder-group {
  border-top: 1px solid var(--border-primary);
  background: #fff;
}

.staff-perf-builder-group:first-child {
  border-top: 0;
}

.staff-perf-builder-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--border-primary);
}

.staff-perf-builder-group__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.staff-perf-builder-group__order {
  min-width: 44px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.staff-perf-builder-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.staff-perf-builder-group__icon svg,
.staff-perf-builder-group__icon i {
  width: 15px;
  height: 15px;
  stroke-width: 1.4;
}

.staff-perf-builder-group__copy {
  min-width: 0;
}

.staff-perf-builder-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.staff-perf-builder-group__title > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-perf-builder-group__meta {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.staff-perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.staff-perf-table--grouped th {
  background: #fff;
}

.staff-perf-table th {
  padding: 11px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  color: var(--text-muted);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-primary);
  white-space: nowrap;
}

.staff-perf-table td {
  padding: 13px 14px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-primary);
  vertical-align: middle;
  line-height: 1.4;
}

.staff-perf-table svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.4;
  flex-shrink: 0;
}

.staff-perf-table tbody tr:last-child td {
  border-bottom: 0;
}

.staff-perf-section-row td {
  background: var(--color-gray-50);
  border-top: 1px solid var(--border-primary);
}

.staff-perf-section-line {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.staff-perf-section-line i,
.staff-perf-section-line svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--color-gray-500);
  stroke-width: 1.4;
  flex-shrink: 0;
}

.staff-perf-section-line__time {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--color-gray-300);
  border-radius: 999px;
  background: #fff;
  color: var(--color-gray-600);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.staff-perf-section-line__title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.staff-perf-cell-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.staff-perf-cell-title i,
.staff-perf-cell-title svg,
.staff-perf-panel__head i,
.staff-perf-panel__head svg,
.staff-perf-row-actions i,
.staff-perf-row-actions svg,
.staff-perf-choice svg,
.staff-perf-choice i {
  width: 16px;
  height: 16px;
  stroke-width: 1.4;
}

.staff-perf-cell-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}

.staff-perf-row-actions {
  text-align: right;
  white-space: nowrap;
}

.staff-perf-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.staff-perf-danger-text {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
}

.staff-perf-rank {
  width: 64px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.staff-perf-progress {
  width: 100%;
  min-width: 110px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gray-100);
}

.staff-perf-progress span {
  display: block;
  width: var(--score, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.staff-perf-score {
  --score: 0%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 59%),
    conic-gradient(var(--primary) var(--score), var(--gray-100) 0);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.staff-perf-module-list {
  display: flex;
  flex-direction: column;
}

.staff-perf-module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-primary);
}

.staff-perf-module-row:last-child {
  border-bottom: 0;
}

.staff-perf-module-score {
  flex-shrink: 0;
}

.staff-perf-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.staff-perf-detail-hero__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.staff-perf-detail-hero__title i,
.staff-perf-detail-hero__title svg {
  width: 18px;
  height: 18px;
  color: var(--color-gray-700);
  stroke-width: 1.4;
}

.staff-perf-detail-hero__badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.staff-perf-empty {
  padding: 36px 20px;
}

.staff-perf-empty .empty-icon i {
  width: 42px;
  height: 42px;
}

.staff-perf-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.staff-perf-form .form-group {
  min-width: 0;
}

.staff-perf-form .form-control {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--color-gray-900);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.staff-perf-form .form-control:hover {
  border-color: var(--color-gray-300);
}

.staff-perf-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.staff-perf-form .form-control::placeholder {
  color: var(--color-gray-400);
}

.staff-perf-form textarea.form-control {
  min-height: auto;
  resize: vertical;
}

.staff-perf-form .pure-dropdown,
.staff-perf-form .pure-dropdown-trigger {
  width: 100%;
  box-sizing: border-box;
}

.staff-perf-kind-help {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.staff-perf-kind-help__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: var(--color-gray-50);
}

.staff-perf-kind-help__item > span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.1);
}

.staff-perf-kind-help__item svg,
.staff-perf-kind-help__item i {
  width: 15px;
  height: 15px;
}

.staff-perf-kind-help__item strong {
  display: block;
  margin-bottom: 3px;
  color: var(--color-gray-900);
  font-size: 13px;
  line-height: 1.25;
}

.staff-perf-kind-help__item p {
  margin: 0;
  color: var(--color-gray-500);
  font-size: 12px;
  line-height: 1.45;
}

.staff-perf-form--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-perf-form-span {
  grid-column: 1 / -1;
}

.staff-perf-hidden {
  display: none !important;
}

.staff-perf-option-list {
  display: grid;
  gap: 8px;
}

.staff-perf-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.staff-perf-option-row__main {
  min-width: 0;
}

.staff-perf-option-row__check {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.staff-perf-option-row__check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
}

.staff-perf-submission {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.staff-perf-submission__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.staff-perf-question {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  background: var(--gray-50);
}

.staff-perf-submission-section {
  padding: 12px 2px 2px;
  border-top: 1px solid var(--border-primary);
}

.staff-perf-submission-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.staff-perf-question__head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
}

.staff-perf-question__head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-primary);
}

.staff-perf-question h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-primary);
}

.staff-perf-question p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.staff-perf-choice-list {
  display: grid;
  gap: 8px;
}

.staff-perf-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.staff-perf-choice--media {
  align-items: center;
  min-height: 74px;
}

.staff-perf-image-picker {
  --staff-preview-size: 92px;
  align-items: flex-start;
}

.staff-perf-image-picker--compact {
  --staff-preview-size: 54px;
}

.staff-perf-image-picker__preview {
  width: var(--staff-preview-size);
  height: var(--staff-preview-size);
  overflow: hidden;
  background: var(--color-gray-50);
  border: 1px dashed var(--border-primary);
  border-radius: 10px;
}

.staff-perf-image-picker__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.staff-perf-image-picker__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

.staff-perf-image-picker__controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.staff-perf-image-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.staff-perf-image-picker__hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.staff-perf-question-thumb {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

.staff-perf-option-media {
  align-items: center;
  width: 100%;
}

.staff-perf-option-media__image {
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

.staff-perf-option-media__label {
  min-width: 0;
}

.staff-perf-question__image {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border-primary);
  border-radius: 10px;
}

.discount-toggle-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-primary, var(--color-gray-200));
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.discount-toggle-card input {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--primary);
  cursor: pointer;
}

.discount-toggle-card__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, var(--color-gray-900));
}

.discount-toggle-card__desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary, var(--color-gray-500));
  line-height: 1.35;
}

.discount-toggle-card--manager {
  background: var(--color-gray-50);
}

.discount-toggle-card--staff-pin {
  background: #fff;
}

@media (max-width: 1100px) {
  .staff-perf-grid {
    grid-template-columns: 1fr;
  }

  .staff-perf-panel--wide {
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  .staff-perf-panel__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .staff-perf-form--grid {
    grid-template-columns: 1fr;
  }

  .staff-perf-detail-hero {
    flex-direction: column;
  }

  .staff-perf-builder-group__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .staff-perf-builder-group__identity {
    width: 100%;
  }

  .staff-perf-builder-group__title {
    align-items: flex-start;
    flex-direction: column;
  }

  .staff-perf-option-row {
    grid-template-columns: 1fr;
  }
}

/* OLAP Builder v2 */
.olap-v2-layout {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.olap-page-header {
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 10px;
}

.olap-page-header .erp-page-header__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.olap-page-header .erp-page-header__icon svg,
.olap-page-header .erp-page-header__icon i {
  width: 19px;
  height: 19px;
}

.olap-page-header .erp-page-header__title {
  font-size: 18px;
}

.olap-page-header .erp-page-header__meta {
  font-size: 12px;
}

.olap-v2-builder {
  padding: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
}

.olap-v2-result-card {
  min-width: 0;
  overflow: visible;
}

.olap-v2-result-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 16px 12px;
  border-bottom: 1px solid var(--gray-200);
}

.olap-v2-toolbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.olap-v2-report-head {
  min-width: 0;
  flex: 1 1 auto;
}

.olap-v2-result-actions,
.olap-v2-result-selects {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.olap-v2-result-selects {
  min-width: 0;
}

.olap-v2-result-selects .pure-dropdown {
  min-width: 122px;
  width: 132px;
}

.olap-control-field {
  display: grid;
  gap: 4px;
  min-width: 122px;
}

.olap-control-field > span {
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 700;
}

.olap-report-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  flex-wrap: wrap;
}

.olap-report-cube {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-900);
}

.olap-report-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #fff !important;
  border: 1px solid currentColor;
}

.olap-report-status--success {
  color: var(--color-success-800, #065f46);
}

.olap-report-status--warning {
  color: var(--color-warning-800, #92400e);
}

.olap-report-status--info {
  color: var(--color-primary-dark);
}

.olap-report-status--muted {
  color: var(--gray-500);
}

.olap-report-status-detail {
  color: var(--gray-500);
  white-space: nowrap;
}

.olap-v2-result-body {
  padding: 16px;
}

.olap-builder-section {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
}

.olap-builder-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.olap-field-catalog {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--color-gray-50);
}

.olap-field-group + .olap-field-group {
  margin-top: 12px;
}

.olap-field-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: none;
}

.olap-field-group-title small {
  font-size: 10px;
  color: var(--gray-400);
}

.olap-field-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.olap-chip,
.olap-zone-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.olap-chip {
  border: 1px solid transparent;
}

.olap-chip.is-selected {
  border-color: var(--color-primary, #2563eb);
  background: var(--color-primary-100);
  color: var(--color-primary-dark);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}

.olap-chip--measure.is-selected {
  border-color: var(--color-warning-700, #b45309);
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
  box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.14);
}

.olap-chip--dimension,
.olap-zone-chip--dimension {
  color: var(--color-primary-dark);
  border-color: var(--color-primary-300);
  background: var(--color-primary-100);
}

.olap-chip--measure,
.olap-zone-chip--measure {
  color: var(--color-warning-dark);
  border-color: var(--color-warning);
  background: var(--color-warning-light);
}

.olap-zone-stack {
  display: grid;
  gap: 10px;
}

.olap-zone {
  border: 1px dashed var(--gray-300);
  border-radius: 8px;
  background: #fff;
}

.olap-zone-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
}

.olap-zone-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  padding: 8px;
}

.olap-zone-chip [data-lucide="x"] {
  opacity: 0.62;
}

.olap-zone-chip [data-lucide="chevron-left"],
.olap-zone-chip [data-lucide="chevron-right"] {
  opacity: 0.54;
}

.olap-zone-chip:hover [data-lucide="chevron-left"],
.olap-zone-chip:hover [data-lucide="chevron-right"] {
  opacity: 0.9;
}

.olap-zone-chip:hover [data-lucide="x"] {
  opacity: 1;
}

.olap-zone-placeholder {
  align-self: center;
  font-size: 12px;
  color: var(--gray-500);
}

.olap-custom-groups-help {
  display: block;
  margin-top: 3px;
  color: var(--gray-500);
  font-size: 11px;
  line-height: 1.35;
}

.olap-custom-group-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.olap-custom-group-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 34px 34px;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 6px 7px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
}

.olap-custom-group-icon,
.olap-custom-group-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.olap-custom-group-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-primary-light);
  color: var(--color-brand-indigo);
}

.olap-custom-group-copy {
  min-width: 0;
}

.olap-custom-group-copy strong,
.olap-custom-group-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.olap-custom-group-copy strong {
  color: var(--gray-900);
  font-size: 12px;
  font-weight: 700;
}

.olap-custom-group-copy small,
.olap-custom-groups-empty,
.olap-custom-group-selection {
  color: var(--gray-500);
  font-size: 11px;
}

.olap-custom-group-copy small {
  margin-top: 2px;
}

.olap-custom-group-action {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
}

.olap-custom-group-action:hover {
  background: var(--color-gray-100);
  color: var(--gray-900);
}

.olap-custom-groups-empty {
  margin: 10px 0 0;
  line-height: 1.4;
}

.olap-custom-group-editor {
  display: grid;
  gap: 14px;
}

.olap-custom-group-dimension {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--color-gray-50);
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 700;
}

.olap-custom-group-values .olap-filter-option.is-disabled {
  background: var(--color-gray-50);
  color: var(--gray-500);
  cursor: not-allowed;
  opacity: 0.72;
}

.olap-custom-group-selection {
  margin-top: 7px;
  text-align: right;
  font-weight: 700;
}

.olap-builder-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.olap-preset-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.olap-preset-mini,
.olap-preset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--gray-900);
  cursor: pointer;
}

.olap-preset-mini {
  min-height: 44px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.olap-preset-mini.is-current-cube {
  border-color: var(--color-primary-300);
  background: var(--color-primary-light);
}

.olap-empty {
  padding: 30px;
  text-align: center;
}

.olap-run-state {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-warning-200, #fde68a);
  border-radius: 8px;
  background: var(--color-warning-50, #fffbeb);
}

.olap-run-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
  color: var(--color-warning-800, #92400e);
}

.olap-run-state-copy {
  flex: 1;
  min-width: 0;
}

.olap-run-state-copy div {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 800;
}

.olap-run-state-copy p {
  margin: 3px 0 0;
  color: var(--gray-600);
  font-size: 12px;
}

.olap-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 18px;
  text-align: left;
}

.olap-preset-card {
  min-height: 82px;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
}

.olap-preset-card span {
  font-size: 12px;
  color: var(--gray-500);
}

.olap-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
}

.olap-result-notices {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.olap-axis-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--gray-600);
}

.olap-axis-warning strong,
.olap-axis-warning span {
  display: block;
}

.olap-axis-warning span {
  margin-top: 2px;
  color: var(--gray-500);
  font-size: 11px;
}

.olap-axis-warning strong {
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 600;
}

.olap-axis-warning-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.olap-axis-warning-link {
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--color-primary-dark);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}

.olap-axis-warning-link:hover,
.olap-axis-warning-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.olap-pivot-table {
  width: max-content;
  min-width: 100%;
}

.olap-pivot-table th,
.olap-pivot-table td {
  white-space: nowrap;
}

.olap-pivot-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-gray-50);
}

.olap-sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
}

th.olap-sticky-col {
  z-index: 4;
  background: var(--color-gray-50);
}

.olap-column-group-row th {
  top: 0;
  border-bottom: 1px solid var(--gray-200);
  background: var(--color-gray-100, #f1f5f9);
}

.olap-column-group-row .olap-row-dim-head {
  vertical-align: bottom;
}

.olap-column-group-head,
.olap-row-dim-head {
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.olap-column-group-head {
  text-transform: none;
  color: var(--gray-800);
}

.olap-metric-head-row th {
  top: 37px;
}

.olap-pivot-table thead tr:first-child.olap-metric-head-row th {
  top: 0;
}

.olap-row-dim-head {
  text-align: left;
}

.olap-row-dim-cell {
  color: var(--gray-900);
}

.olap-dimension-link {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
}

.olap-dimension-link:hover,
.olap-dimension-link:focus-visible {
  color: var(--color-primary-dark);
  text-decoration-color: currentColor;
}

.olap-dimension-link--header {
  font-size: inherit;
  font-weight: inherit;
}

.olap-total-row td {
  font-weight: 700;
  background: var(--color-gray-50);
}

.olap-metric-cell {
  font-weight: 600;
  cursor: pointer;
}

.olap-metric-cell:hover {
  background: var(--color-primary-100);
}

.olap-cell-drop {
  background: var(--color-warning-50, #fffbeb);
  color: var(--color-warning-800, #92400e);
}

.olap-cell-drop-strong {
  background: var(--color-danger-50, #fef2f2);
  color: var(--color-danger-800, #991b1b);
}

.olap-cell-high {
  background: var(--color-success-50, #ecfdf5);
  color: var(--color-success-800, #065f46);
}

.olap-cell-low {
  background: var(--color-gray-50);
  color: var(--gray-500);
}

.olap-delta-cell {
  font-weight: 700;
}

.olap-sortable {
  cursor: pointer;
}

.olap-delta-up,
.olap-delta-down {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 12px;
}

.olap-delta-up {
  color: var(--success);
}

.olap-delta-down {
  color: var(--danger);
}

.olap-chart {
  min-height: 460px;
  padding: 12px;
}

.olap-chart-notices,
.olap-chart-stack {
  display: grid;
  gap: 10px;
}

.olap-chart-notices {
  margin-bottom: 10px;
}

.olap-chart-panel {
  min-width: 0;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
}

.olap-chart-panel-title {
  padding: 12px 14px 0;
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 700;
}

.olap-chart-canvas {
  min-width: 0;
}

.olap-heatmap-legend {
  display: grid;
  grid-template-columns: auto minmax(120px, 260px) auto;
  align-items: center;
  justify-content: end;
  gap: 8px;
  margin: 0 4px 10px;
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 600;
}

.olap-heatmap-legend__scale {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-gray-100), var(--color-primary-100), var(--color-primary-300), var(--color-primary-dark));
}

.olap-drill-limit {
  margin-bottom: 10px;
}

.olap-drill-table-wrap {
  max-width: 100%;
}

.olap-drill-table {
  width: max-content;
  min-width: 100%;
}

.olap-drill-cell {
  max-width: 280px;
  white-space: nowrap;
}

.olap-drill-cell--text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.olap-drill-cell--long_text {
  min-width: 180px;
  max-width: 320px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.olap-drill-cell--money,
.olap-drill-cell--int,
.olap-drill-cell--duration_s {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.olap-filter-values {
  position: static;
  display: block;
  max-height: 360px;
  overflow: auto;
  margin-top: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
}

.olap-filter-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
}

.olap-filter-option small {
  color: var(--gray-500);
}

.olap-mobile-config-btn {
  display: none;
}

@media (max-width: 900px) {
  .olap-v2-layout {
    grid-template-columns: 1fr;
  }

  .olap-v2-builder {
    display: none;
  }

  .olap-mobile-config-btn {
    display: inline-flex;
  }

  .olap-v2-result-toolbar {
    align-items: flex-start;
  }

  .olap-v2-toolbar-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .olap-axis-warning {
    align-items: flex-start;
    flex-direction: column;
  }

  .olap-v2-result-actions,
  .olap-v2-result-selects {
    justify-content: flex-start;
    width: 100%;
  }

  .olap-run-state {
    align-items: flex-start;
    flex-direction: column;
  }

  .olap-v2-mobile-builder {
    max-height: 72vh;
    overflow: auto;
  }

  .olap-custom-group-row {
    grid-template-columns: 30px minmax(0, 1fr) 44px 44px;
  }

  .olap-custom-group-action {
    width: 44px;
    height: 44px;
  }

  .olap-v2-result-body {
    min-width: 0;
    padding: 10px;
    overflow: visible;
  }

  .olap-table-wrap {
    width: 100%;
    max-width: calc(100vw - 40px);
    overflow-x: auto !important;
  }

  .olap-preset-list {
    grid-template-columns: 1fr;
  }

  .olap-control-field,
  .olap-control-field .pure-dropdown {
    width: 100%;
  }
}

/* Analytics Builder v3: view-first report workspace */
.olap-v3-page {
  max-width: none;
}

.olap-loading-pad {
  padding: 40px;
}

:is(.olap-v3-workspace,.erp-builder-workspace) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

:is(.olap-v3-workspace,.erp-builder-workspace).is-configuring {
  grid-template-columns: minmax(0, 1fr) 274px;
}

:is(.olap-v3-canvas,.erp-builder-canvas) {
  min-width: 0;
  overflow: visible;
  border-radius: 12px;
}

:is(.olap-v3-workspace,.erp-builder-workspace).is-configuring :is(.olap-v3-canvas,.erp-builder-canvas) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.olap-report-header {
  position: relative;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: start;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--gray-200);
  background: #fff;
  border-radius: 12px 12px 0 0;
}

.olap-report-selector,
.olap-action-menu-wrap {
  position: relative;
  min-width: 0;
}

.olap-report-selector__button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  max-width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-900);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: start;
}

.olap-report-selector__button:hover,
.olap-report-selector__button:focus-visible {
  background: var(--gray-50);
}

.olap-report-selector__button > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.olap-report-selector__button > svg:last-child {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.olap-modified-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--color-warning-light);
  border-radius: 999px;
  background: var(--color-warning-50);
  color: var(--color-warning-800);
  font-size: 10px;
  font-weight: 700;
}

.olap-report-header__period,
.olap-report-header__actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.olap-report-header__actions {
  align-items: center;
}

.olap-report-header__period .date-range-picker {
  min-width: 190px;
}

.olap-compare-control {
  display: grid;
  gap: 4px;
  min-width: 154px;
}

.olap-compare-control .pure-dropdown-trigger,
.olap-report-header__actions .btn {
  min-height: 40px;
}

.olap-compare-control > span {
  padding-inline: 7px;
  color: var(--gray-600);
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
}

.olap-icon-button {
  width: 40px;
  min-width: 40px;
  padding-inline: 0;
  justify-content: center;
}

.olap-live-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--gray-600);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.olap-live-status--success { color: var(--success); }
.olap-live-status--warning { color: var(--warning); }
.olap-live-status--info { color: var(--primary); }

.olap-report-menu,
.olap-action-menu,
.olap-field-row-menu {
  position: absolute;
  z-index: 100;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.olap-report-menu {
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  width: min(360px, calc(100vw - 32px));
  padding: 10px;
}

.olap-report-menu__section {
  display: grid;
  gap: 3px;
  padding-top: 10px;
}

.olap-report-menu__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 8px;
}

.olap-report-menu__row:hover,
.olap-report-menu__row.is-active,
.olap-report-menu__preset:hover,
.olap-report-menu__preset.is-active {
  background: var(--gray-50);
}

.olap-report-menu__main,
.olap-report-menu__row-actions button,
.olap-report-menu__new,
.olap-action-menu button,
.olap-field-row-menu button {
  border: 0;
  background: transparent;
  color: var(--gray-900);
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.olap-report-menu__main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
}

.olap-report-menu__main > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.olap-report-menu__preset {
  width: 100%;
  border-radius: 8px;
}

.olap-report-menu__preset span,
.olap-report-menu__preset strong,
.olap-report-menu__preset small {
  display: block;
}

.olap-report-menu__preset small,
.olap-report-menu__empty {
  color: var(--gray-600);
  font-size: 11px;
}

.olap-report-menu__row-actions {
  display: flex;
  align-items: center;
  opacity: 0;
}

.olap-report-menu__row:hover .olap-report-menu__row-actions,
.olap-report-menu__row:focus-within .olap-report-menu__row-actions {
  opacity: 1;
}

.olap-report-menu__row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--gray-600);
}

.olap-report-menu__row-actions button:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.olap-report-menu__new {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  padding: 8px;
  border-top: 1px solid var(--gray-200);
  color: var(--primary);
  font-weight: 700;
}

.olap-action-menu {
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  width: 220px;
  padding: 5px;
}

.olap-action-menu.open {
  display: grid;
}

.olap-action-menu button,
.olap-field-row-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
}

.olap-action-menu button:hover,
.olap-field-row-menu button:hover {
  background: var(--gray-50);
}

.olap-action-menu button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.olap-layout-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  scrollbar-width: none;
}

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

.olap-ai-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.olap-ai-composer--panel {
  padding: 2px 0 8px;
}

.olap-ai-composer__heading,
.olap-ai-composer__entry,
.olap-ai-composer__draft {
  display: flex;
  align-items: center;
  min-width: 0;
}

.olap-ai-composer__heading {
  gap: 9px;
}

.olap-ai-composer__icon,
.olap-ai-composer__draft-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #d9e3ff;
  border-radius: 9px;
  background: #eff4ff;
  color: var(--primary);
}

.olap-ai-composer__heading strong {
  display: block;
  color: var(--gray-900);
  font-size: 13px;
}

.olap-ai-composer__heading p,
.olap-ai-composer__error {
  margin: 2px 0 0;
  color: var(--gray-600);
  font-size: 11px;
  line-height: 1.35;
}

.olap-ai-composer__entry {
  gap: 8px;
}

.olap-ai-composer--panel .olap-ai-composer__entry {
  align-items: stretch;
  flex-direction: column;
}

.olap-ai-composer__label {
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 600;
}

.olap-ai-composer__input {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 82px;
  max-height: 144px;
  padding: 9px 11px;
  resize: vertical;
  border: 1px solid var(--gray-300);
  border-radius: 9px;
  background: #fff;
  color: var(--gray-900);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}

.olap-ai-composer__input::placeholder {
  color: var(--gray-500);
}

.olap-ai-composer__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent);
}

.olap-ai-composer__submit {
  flex: 0 0 auto;
  min-height: 38px;
  white-space: nowrap;
}

.olap-ai-composer--panel .olap-ai-composer__submit {
  width: 100%;
  min-height: 42px;
}

.olap-ai-composer__error {
  margin-top: -2px;
  color: var(--danger);
}

.olap-ai-composer__draft {
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #d9e3ff;
  border-radius: 9px;
  background: #f8faff;
}

.olap-ai-composer__draft-icon {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
}

.olap-ai-composer__draft-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.olap-ai-composer__draft-copy strong,
.olap-ai-composer__draft-copy span,
.olap-ai-composer__draft-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.olap-ai-composer__draft-copy strong {
  color: var(--gray-900);
  font-size: 12px;
}

.olap-ai-composer__draft-copy span,
.olap-ai-composer__draft-copy small {
  color: var(--gray-600);
  font-size: 11px;
}

.olap-ai-composer__unsaved {
  flex: 0 0 auto;
  margin-inline-start: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff4d8;
  color: #9a5410;
  font-size: 10px;
  font-weight: 700;
}

.olap-ai-composer__draft .btn {
  flex: 0 0 auto;
}

.olap-layout-summary button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-900);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
}

.olap-layout-summary button span,
.olap-layout-summary strong.is-empty,
.olap-layout-summary__dot {
  color: var(--gray-600);
  font-weight: 400;
}

.olap-quality-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--gray-200);
  background: #fff;
  scrollbar-width: none;
}

.olap-quality-strip__label,
.olap-quality-strip__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.olap-quality-strip__label {
  flex: 0 0 auto;
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.olap-quality-strip__badges {
  min-width: 0;
}

:is(.olap-kpi-grid,.erp-builder-kpi-grid) {
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: start;
  gap: 10px;
  margin: 0;
  padding: 16px 16px 0;
}

:is(.olap-kpi-grid,.erp-builder-kpi-grid) .stat-card-u {
  min-width: 0;
}

:is(.olap-v3-result-body,.erp-builder-result-body) {
  min-width: 0;
  padding: 16px;
}

@media (min-width: 901px) {
  :is(.olap-v3-workspace,.erp-builder-workspace).is-configuring :is(.olap-v3-result-body,.erp-builder-result-body) {
    padding-inline-end: 0;
  }
}

.olap-result-frame {
  position: relative;
  min-width: 0;
}

.olap-query-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

:is(.olap-v3-settings,.erp-builder-settings) {
  position: sticky;
  top: 0;
  z-index: 20;
  min-width: 0;
  border: 1px solid var(--gray-200);
  border-inline-start: 0;
  border-radius: 0 12px 12px 0;
  background: var(--gray-50);
}

@media (min-width: 1025px) {
  :is(.olap-v3-settings,.erp-builder-settings) {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--header-height) - (var(--erp-shell-gap) * 2) - 26px);
    max-height: calc(100dvh - var(--header-height) - (var(--erp-shell-gap) * 2) - 26px);
    overflow: hidden;
  }

  :is(.olap-v3-settings,.erp-builder-settings) > :is(.olap-settings-header,.erp-builder-settings-header),
  :is(.olap-v3-settings,.erp-builder-settings) > .erp-filter-tabs {
    flex: 0 0 auto;
  }

  :is(.olap-v3-settings,.erp-builder-settings) > :is(.olap-settings-body,.erp-builder-settings-body) {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

:is(.olap-settings-header,.erp-builder-settings-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--gray-200);
}

:is(.olap-settings-header,.erp-builder-settings-header) strong {
  display: block;
  color: var(--gray-900);
  font-size: 14px;
}

:is(.olap-settings-close,.erp-builder-settings-close),
.olap-field-picker__head button,
.olap-drill-drawer__header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
}

:is(.olap-settings-close,.erp-builder-settings-close):hover,
.olap-field-picker__head button:hover,
.olap-drill-drawer__header button:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

:is(.olap-v3-settings,.erp-builder-settings) > .erp-filter-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 8px 10px 0;
}

:is(.olap-v3-settings,.erp-builder-settings) > .erp-filter-tabs .erp-filter-tabs__tab:not(.active) {
  background: #fff;
}

:is(.olap-settings-body,.erp-builder-settings-body) {
  display: grid;
  gap: 0;
  padding: 12px;
}

:is(.olap-settings-body,.erp-builder-settings-body) > * + * {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

.olap-settings-field {
  display: grid;
  gap: 6px;
}

.olap-settings-field .pure-dropdown {
  width: 100%;
}

:is(.olap-v3-settings,.erp-builder-settings) .olap-zone-stack {
  gap: 0;
}

:is(.olap-v3-settings,.erp-builder-settings) .olap-zone {
  border: 0;
  border-radius: 0;
  background: transparent;
}

:is(.olap-v3-settings,.erp-builder-settings) .olap-zone + .olap-zone {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
}

#app :is(.olap-v3-settings,.erp-builder-settings) .olap-zone-title,
#app :is(.olap-v3-settings,.erp-builder-settings) .olap-section-label,
#app .olap-custom-groups-details > summary {
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

:is(.olap-v3-settings,.erp-builder-settings) .olap-zone-title {
  justify-content: flex-start;
  gap: 5px;
  min-height: 20px;
  padding: 0 1px 6px;
  border: 0;
}

:is(.olap-v3-settings,.erp-builder-settings) .olap-zone-title small {
  color: inherit;
  font-size: 10px;
}

:is(.olap-v3-settings,.erp-builder-settings) .olap-zone-body {
  display: grid;
  gap: 6px;
  min-height: 0;
  padding: 0;
}

:is(.olap-v3-settings,.erp-builder-settings) .olap-section-label {
  margin: 0;
}

.olap-field-row {
  position: relative;
  display: grid;
  grid-template-columns: 16px 8px minmax(0, 1fr) 28px 28px;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 3px 4px 3px 7px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
}

.olap-field-row__grip {
  color: var(--gray-500);
  cursor: grab;
}

.olap-field-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.olap-field-dot--measure {
  background: var(--success);
}

.olap-field-row__name,
.olap-field-row__sort,
.olap-field-row__menu-button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-900);
  cursor: pointer;
  font: inherit;
}

.olap-field-row__name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 400;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.olap-field-row__sort,
.olap-field-row__menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 7px;
  color: var(--gray-600);
}

.olap-field-row__sort:hover,
.olap-field-row__menu-button:hover {
  background: var(--gray-50);
}

.olap-field-row-menu {
  inset-block-start: 32px;
  inset-inline-end: 3px;
  width: 180px;
  padding: 4px;
}

.olap-field-row-menu.open {
  display: grid;
}

.olap-field-row__actions {
  width: 28px;
}

.olap-field-row-menu .is-danger {
  color: var(--danger);
}

.olap-zone-placeholder {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px dashed var(--gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--gray-500);
}

.olap-zone-add {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
  padding-inline: 7px;
  border: 1px dashed var(--gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--gray-600);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.olap-zone-add:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.olap-custom-groups-details {
  border-top: 1px solid var(--gray-200);
  margin-top: 8px;
  padding-top: 12px;
}

.olap-custom-groups-details > summary {
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  cursor: pointer;
}

.olap-custom-groups-details .olap-builder-section {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
}

.olap-view-section,
.olap-settings-field {
  margin: 0;
}

.olap-view-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 6px;
}

.olap-view-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--gray-600);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.olap-view-option.is-active {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.olap-switch-row,
.olap-drill-fields-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--gray-900);
  font: inherit;
  text-align: start;
}

.olap-switch-row__copy,
.olap-switch-row__copy strong,
.olap-switch-row__copy small {
  display: block;
}

.olap-switch-row__copy {
  min-width: 0;
  cursor: pointer;
}

.olap-switch-row__copy strong { font-size: 12px; }
.olap-switch-row__copy small { margin-top: 2px; color: var(--gray-600); font-size: 10px; }

.olap-switch-row > .erp-toggle,
.olap-drill-fields-toggle > .erp-toggle {
  flex: 0 0 auto;
}

.olap-switch-row.is-disabled {
  opacity: .55;
}

.olap-field-picker-backdrop,
.olap-drill-backdrop,
:is(.olap-mobile-sheet-backdrop,.erp-builder-mobile-backdrop) {
  position: fixed;
  inset: 0;
  z-index: 1100;
  border: 0;
  background: color-mix(in srgb, var(--gray-900) 28%, transparent);
}

.olap-field-picker {
  position: fixed;
  z-index: 1110;
  top: 0;
  left: 0;
  visibility: hidden;
  width: min(320px, calc(100vw - 32px));
  max-height: 420px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.olap-field-picker.is-positioned {
  visibility: visible;
}

.olap-field-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin-bottom: 8px;
}

.olap-field-picker__list {
  max-height: 320px;
  margin-top: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.olap-field-picker__group + .olap-field-picker__group {
  margin-top: 12px;
}

.olap-field-picker__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px auto 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 6px 7px;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-900);
  font: inherit;
  font-size: 13px;
  text-align: start;
}

.olap-field-picker__row:hover,
.olap-field-picker__row.is-selected {
  background: var(--gray-50);
}

.olap-field-picker__row small {
  color: var(--gray-500);
  font-size: 10px;
}

.olap-field-picker__select {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.olap-field-picker__select:focus-visible {
  border-radius: 5px;
  outline: 2px solid rgba(var(--color-primary-rgb), 0.45);
  outline-offset: 2px;
}

.olap-field-picker__info {
  color: var(--gray-400);
}

.olap-table-host {
  min-width: 0;
}

.olap-table-host .erp-data-table-wrap--precision,
.olap-drill-table-wrap .erp-data-table-wrap--precision {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

.olap-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.olap-table-toolbar .erp-search-input {
  width: min(280px, 100%);
}

.olap-table-toolbar > span {
  color: var(--gray-600);
  font-size: 12px;
  white-space: nowrap;
}

.olap-table-sort,
.olap-table-filter,
.olap-metric-link,
.olap-group-toggle,
.olap-other-link {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.olap-table-column-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.olap-pivot-column-header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.olap-pivot-column-header__context {
  display: block;
  overflow: hidden;
  color: var(--gray-600);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.olap-table-sort {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  font-weight: 600;
  text-align: start;
}

.olap-table-sort > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.olap-table-sort:not(.is-active) > .erp-icon:last-child {
  color: var(--gray-400);
  opacity: 0;
  transition: opacity 120ms ease;
}

.olap-table-column-tools:hover .olap-table-sort:not(.is-active) > .erp-icon:last-child,
.olap-table-sort:focus-visible > .erp-icon:last-child {
  opacity: 1;
}

.olap-table-filter {
  position: relative;
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  color: var(--gray-500);
}

.olap-table-filter:hover,
.olap-table-filter:focus-visible,
.olap-table-filter.is-active {
  background: var(--color-primary-100);
  color: var(--color-primary);
}

.olap-table-filter__dot {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

.olap-result-filter-copy {
  margin-bottom: 14px;
  color: var(--gray-600);
  font-size: 13px;
}

.olap-result-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.olap-result-filter-clear {
  margin-top: 14px;
}

@media (max-width: 520px) {
  .olap-result-filter-grid {
    grid-template-columns: 1fr;
  }
}

.olap-metric-link {
  width: calc(100% + 24px);
  min-height: 36px;
  margin: -6px -12px;
  padding: 6px 12px;
  text-align: end;
}

.olap-metric-link:hover { background: var(--color-primary-100); }
.olap-metric-link.is-negative { color: var(--danger); }

.olap-group-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 0;
  font-weight: 700;
}

.olap-group-toggle small {
  color: var(--gray-600);
  font-size: 10px;
}

.olap-pivot-row--group td {
  background: var(--gray-50);
  font-weight: 700;
}

.olap-pivot-row--subtotal td {
  background: var(--gray-50);
  font-weight: 700;
}

.olap-pivot-row--other td {
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.olap-dimension-link.is-child {
  padding-inline-start: 20px;
}

.olap-other-link {
  padding: 0;
  color: var(--primary);
  font-weight: 700;
}

.olap-zero-value {
  color: var(--gray-500);
}

.olap-truncation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.olap-truncation-banner > span:last-child {
  display: flex;
  gap: 6px;
}

.olap-chart-caption {
  margin-top: 10px;
  color: var(--gray-600);
  font-size: 11px;
  text-align: center;
}

.olap-chart-canvas {
  height: clamp(340px, 44vh, 520px);
}

.olap-drill-backdrop {
  z-index: 1200;
  background: rgba(0, 0, 0, .32);
}

.olap-drill-drawer {
  position: fixed;
  z-index: 1210;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(var(--olap-drill-width, 760px), calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  border-inline-start: 1px solid var(--gray-200);
  background: #fff;
  box-shadow: var(--shadow-xl);
}

.olap-drill-resize-handle {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline-start: -5px;
  width: 10px;
  cursor: ew-resize;
  touch-action: none;
}

.olap-drill-resize-handle::after {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 4px;
  width: 2px;
  background: transparent;
  content: '';
  transition: background .15s ease;
}

.olap-drill-resize-handle:hover::after,
.olap-drill-resize-handle:focus-visible::after,
.olap-drill-drawer.is-resizing .olap-drill-resize-handle::after {
  background: var(--color-primary);
}

.olap-drill-resize-handle:focus-visible {
  outline: 0;
}

.olap-drill-drawer.is-resizing {
  user-select: none;
}

.olap-drill-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 70px;
  padding: 14px 12px 12px 16px;
  border-bottom: 1px solid var(--gray-200);
}

.olap-drill-drawer__header strong,
.olap-drill-drawer__header span {
  display: block;
}

.olap-drill-drawer__header strong {
  color: var(--gray-900);
  font-size: 16px;
}

.olap-drill-drawer__header span {
  margin-top: 5px;
  color: var(--gray-600);
  font-size: 12px;
}

.olap-drill-fields-toggle {
  min-height: 42px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--gray-200);
}

.olap-drill-fields-toggle > label {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.olap-drill-drawer__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 12px 16px 16px;
}

.olap-drill-table-wrap {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.olap-drill-table-wrap > :first-child {
  flex: 1;
  min-height: 0;
  max-height: 100%;
}

.olap-drill-cell--long_text {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.olap-mobile-sheet-backdrop,.erp-builder-mobile-backdrop) {
  display: none;
}

@media (max-width: 1199px) {
  .olap-report-header {
    grid-template-columns: minmax(180px, 1fr) auto;
  }

  .olap-report-header__period {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .olap-report-header__actions {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 900px) {
  :is(.olap-v3-workspace,.erp-builder-workspace).is-configuring {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.olap-v3-workspace,.erp-builder-workspace).is-configuring :is(.olap-v3-canvas,.erp-builder-canvas) {
    border-radius: 12px;
  }

  :is(.olap-v3-settings,.erp-builder-settings) {
    position: fixed;
    z-index: 1160;
    inset-inline: 0;
    inset-block-end: 0;
    top: auto;
    max-height: 90dvh;
    overflow-y: auto;
    border: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-xl);
  }

  :is(.olap-mobile-sheet-backdrop,.erp-builder-mobile-backdrop) {
    display: block;
    z-index: 1150;
  }

  .olap-field-picker {
    z-index: 1180;
    inset-inline: 16px;
    inset-block-start: auto;
    inset-block-end: 16px;
    width: auto;
    max-height: 70vh;
  }

  .olap-field-picker-backdrop { z-index: 1170; }

  .olap-field-row__grip {
    visibility: hidden;
  }

  .olap-report-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px 10px;
  }

  .olap-report-selector__button {
    min-height: 44px;
    font-size: 16px;
  }

  .olap-report-header__period {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, .72fr);
    width: 100%;
  }

  .olap-report-header__period .date-range-picker,
  .olap-compare-control,
  .olap-compare-control .pure-dropdown {
    width: 100%;
    min-width: 0;
  }

  .olap-live-status,
  .olap-action-label {
    display: none;
  }

  .olap-report-header__actions .btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }

  .olap-layout-summary {
    min-height: 44px;
  }

  .olap-ai-composer { gap: 9px; }

  .olap-ai-composer__entry {
    align-items: stretch;
    flex-direction: column;
  }

  .olap-ai-composer__submit {
    width: 100%;
    min-height: 42px;
  }

  .olap-ai-composer__draft {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .olap-ai-composer__draft-copy {
    flex: 1 1 calc(100% - 42px);
  }

  .olap-ai-composer__unsaved {
    margin-inline-start: 0;
  }

  .olap-quality-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  :is(.olap-kpi-grid,.erp-builder-kpi-grid) {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  :is(.olap-kpi-grid,.erp-builder-kpi-grid) .stat-card-u {
    flex: 0 0 210px;
    scroll-snap-align: start;
  }

  :is(.olap-v3-result-body,.erp-builder-result-body) {
    padding: 10px;
  }

  .olap-table-host,
  .olap-table-host .erp-data-table-wrap--precision {
    max-width: calc(100vw - 36px);
  }

  .olap-table-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .olap-field-row,
  .olap-zone-add,
  .olap-field-picker__row,
  .olap-switch-row {
    min-height: 44px;
  }

  .olap-field-row__sort,
  .olap-field-row__menu-button {
    width: 36px;
    height: 36px;
  }

  .olap-drill-drawer {
    inset-inline: 0;
    inset-block-start: auto;
    width: 100%;
    max-width: none;
    height: 90vh;
    border: 1px solid var(--gray-200);
    border-radius: 16px 16px 0 0;
  }

  .olap-drill-resize-handle {
    display: none;
  }

  .olap-truncation-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .olap-field-picker {
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    max-height: none;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .olap-field-picker__head,
  .olap-field-picker > .erp-search-input {
    flex: 0 0 auto;
  }

  .olap-field-picker__list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .olap-filter-modal {
    align-items: stretch;
    padding: 0;
  }

  .olap-filter-modal .erp-dynamic-modal__content {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .olap-filter-modal .erp-dynamic-modal__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }

  .olap-filter-modal .olap-filter-values {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .olap-filter-modal .erp-dynamic-modal__footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .olap-report-header__period {
    grid-template-columns: 1fr;
  }

  .olap-report-header__actions > :nth-child(2),
  .olap-report-header__actions > :nth-child(3) {
    display: none;
  }

  .olap-report-menu__row-actions {
    opacity: 1;
  }
}

/* ==================== Stock / Inventory Surfaces ==================== */
.is-invisible {
  visibility: hidden !important;
  pointer-events: none !important;
}

.item-context-menu {
  position: fixed;
  min-width: 178px;
  padding: 4px 0;
  z-index: 1000;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(15, 23, 42, 0.14));
}

.item-context-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  color: var(--gray-700);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.item-context-menu__item:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

.item-context-menu__item--danger {
  color: var(--danger, #ef4444);
}

.item-context-menu__item--danger:hover {
  background: var(--color-danger-50, #fef2f2);
  color: var(--danger, #ef4444);
}

.item-context-menu__divider {
  height: 1px;
  margin: 4px 0;
  background: var(--gray-200);
}

.catalog-toolbar-search {
  margin-right: 8px;
}

.catalog-toolbar-btn.btn-secondary {
  border: 1px solid var(--gray-300);
}

.catalog-table-head-row,
.erp-tree-table-head-row {
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.catalog-table__select {
  width: 40px;
  padding: 12px 8px !important;
  text-align: center !important;
}

.catalog-table__name {
  min-width: 300px;
  padding: 12px 16px !important;
  text-align: left !important;
}

.catalog-table__icon {
  width: 50px;
  text-align: center !important;
}

.catalog-table__status {
  width: 100px;
  text-align: center !important;
}

.catalog-table__price,
.catalog-table__actions {
  width: 120px;
  text-align: right !important;
}

.catalog-table__actions {
  padding-right: 16px !important;
}

.erp-tree-table__select-cell {
  padding: 8px 4px !important;
  text-align: center !important;
}

.erp-tree-table__name-cell {
  white-space: nowrap;
}

.recipe-readonly-id {
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  user-select: text;
}

.tree-row[data-level="0"] > .erp-tree-table__name-cell { padding-inline-start: 8px !important; }
.tree-row[data-level="1"] > .erp-tree-table__name-cell { padding-inline-start: 32px !important; }
.tree-row[data-level="2"] > .erp-tree-table__name-cell { padding-inline-start: 56px !important; }
.tree-row[data-level="3"] > .erp-tree-table__name-cell { padding-inline-start: 80px !important; }
.tree-row[data-level="4"] > .erp-tree-table__name-cell { padding-inline-start: 104px !important; }
.tree-row[data-level="5"] > .erp-tree-table__name-cell { padding-inline-start: 128px !important; }
.tree-row[data-level="6"] > .erp-tree-table__name-cell { padding-inline-start: 152px !important; }
.tree-row[data-level="7"] > .erp-tree-table__name-cell { padding-inline-start: 176px !important; }
.tree-row[data-level="8"] > .erp-tree-table__name-cell { padding-inline-start: 200px !important; }
.tree-row[data-level="9"] > .erp-tree-table__name-cell { padding-inline-start: 224px !important; }
.tree-row[data-level="10"] > .erp-tree-table__name-cell { padding-inline-start: 248px !important; }
.tree-row[data-level="11"] > .erp-tree-table__name-cell { padding-inline-start: 272px !important; }
.tree-row[data-level="12"] > .erp-tree-table__name-cell { padding-inline-start: 296px !important; }
.tree-row[data-level="13"] > .erp-tree-table__name-cell { padding-inline-start: 320px !important; }
.tree-row[data-level="14"] > .erp-tree-table__name-cell { padding-inline-start: 344px !important; }
.tree-row[data-level="15"] > .erp-tree-table__name-cell { padding-inline-start: 368px !important; }
.tree-row[data-level="16"] > .erp-tree-table__name-cell { padding-inline-start: 392px !important; }

.erp-tree-dropdown-item[data-depth="0"] { padding-left: 14px !important; }
.erp-tree-dropdown-item[data-depth="1"] { padding-left: 34px !important; }
.erp-tree-dropdown-item[data-depth="2"] { padding-left: 54px !important; }
.erp-tree-dropdown-item[data-depth="3"] { padding-left: 74px !important; }
.erp-tree-dropdown-item[data-depth="4"] { padding-left: 94px !important; }
.erp-tree-dropdown-item[data-depth="5"] { padding-left: 114px !important; }
.erp-tree-dropdown-item[data-depth="6"] { padding-left: 134px !important; }
.erp-tree-dropdown-item[data-depth="7"] { padding-left: 154px !important; }
.erp-tree-dropdown-item[data-depth="8"] { padding-left: 174px !important; }
.erp-tree-dropdown-item[data-depth="9"] { padding-left: 194px !important; }
.erp-tree-dropdown-item[data-depth="10"] { padding-left: 214px !important; }
.erp-tree-dropdown-item[data-depth="11"] { padding-left: 234px !important; }
.erp-tree-dropdown-item[data-depth="12"] { padding-left: 254px !important; }
.erp-tree-dropdown-item[data-depth="13"] { padding-left: 274px !important; }
.erp-tree-dropdown-item[data-depth="14"] { padding-left: 294px !important; }
.erp-tree-dropdown-item[data-depth="15"] { padding-left: 314px !important; }
.erp-tree-dropdown-item[data-depth="16"] { padding-left: 334px !important; }

.erp-tree-table__name-header {
  min-width: 300px;
  padding: 12px 16px !important;
  text-align: left !important;
}

.erp-tree-table__items-header {
  /* Precision cells reserve 20px on each reading edge. A 50px legacy slot
     left only 10px for the translated label, so "Items" rendered as
     "Ite…" even though the column itself was semantically complete. */
  width: 112px;
  min-width: 112px;
  text-align: center !important;
}

.erp-tree-table__concept-header,
.erp-tree-table__yield-header {
  width: 100px;
}

.erp-tree-table__concept-header {
  text-align: center !important;
}

.erp-tree-table__concept-cell {
  min-width: 100px;
  white-space: nowrap;
}

.erp-tree-table__yield-header,
.erp-tree-table__cost-header,
.erp-tree-table__price-header,
.erp-tree-table__actions-header {
  text-align: right !important;
}

.erp-tree-table__cost-header,
.erp-tree-table__price-header {
  width: 120px;
}

.erp-tree-table__cost-header {
  color: var(--gray-400);
  font-weight: 500;
}

.erp-tree-table__actions-header {
  width: 60px;
  padding-right: 16px !important;
}

.erp-tree-table__actions-header--wide {
  width: 80px;
}

.erp-tree-table__warning-icon {
  display: block;
  cursor: pointer;
  flex-shrink: 0;
}

.catalog-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.35);
}

.catalog-bulk-bar[hidden] {
  display: none !important;
}

.catalog-bulk-bar__summary,
.catalog-bulk-bar__actions {
  display: flex;
  align-items: center;
}

.catalog-bulk-bar__summary {
  gap: 14px;
}

.catalog-bulk-bar__actions {
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.catalog-bulk-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
}

.catalog-bulk-bar__count {
  font-size: 18px;
  font-weight: 700;
}

.catalog-bulk-bar__hint {
  font-size: 12px;
  opacity: 0.8;
}

.product-detail-v3 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-detail-v3__stats {
  gap: 16px;
}

.product-detail-v3__stats .stat-card-u__value {
  font-size: 28px;
}

.product-detail-v3__general-grid,
.product-detail-v3__pricing-form {
  display: grid;
  gap: 16px;
}

.product-detail-v3__general-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.product-detail-v3__pricing-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-detail-v3__bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px;
}

.product-detail-v3__allergens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.product-detail-hint,
.form-label-note,
.product-detail-empty-note {
  color: var(--gray-500);
}

.product-detail-hint {
  margin-bottom: 16px;
  font-size: 13px;
}

.form-label-note {
  font-weight: 400;
}

.product-detail-empty-note {
  padding: 8px 0;
  font-size: 13px;
}

.product-detail-card-header-wrap {
  flex-wrap: wrap;
  gap: 12px;
}

.product-allergen-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--gray-100);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.product-allergen-tile.is-active {
  background: var(--primary-light);
  color: var(--primary);
}

.product-allergen-tile--readonly {
  cursor: default;
}

.product-allergen-tile__icon {
  font-size: 18px;
  line-height: 1;
}

.product-allergen-tile__label {
  min-width: 0;
}

.product-recipe-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  flex: 0 1 auto;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.product-recipe-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.product-recipe-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
}

.product-recipe-card__icon--dish {
  background: var(--primary-light);
  color: var(--primary);
}

.product-recipe-card__icon--prep {
  background: var(--color-warning-50, #fef3c7);
  color: var(--color-warning-dark, #d97706);
}

.product-recipe-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}

.product-recipe-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.product-recipe-card__chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--gray-400);
}

.product-usage-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--gray-100);
}

.product-usage-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.product-usage-tab.is-active {
  background: #fff;
  color: var(--primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.product-usage-hidden {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.product-usage-hidden.is-open {
  display: flex;
}

.product-usage-show-more {
  margin-top: 14px;
  text-align: center;
}

.product-usage-show-more__btn {
  padding: 6px 16px;
  font-size: 12px;
}

.procurement-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.procurement-panel {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.procurement-panel--empty {
  min-height: 280px;
}

.procurement-orders-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.po-status-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.po-status-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.po-status-tab:hover {
  border-color: #bfdbfe;
  color: #2563eb;
}

.po-status-tab.active {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #2563eb;
}

.po-status-tab .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: inherit;
  font-size: 12px;
  font-weight: 900;
}

.po-status-tab--draft.active {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
}

.po-status-tab--sent.active {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #2563eb;
}

.po-status-tab--confirmed.active,
.po-status-tab--received.active {
  border-color: #86efac;
  background: #f0fdf4;
  color: #16a34a;
}

.po-status-tab--cancelled.active {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.po-section {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.po-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 900;
}

.po-section-header i {
  width: 17px;
  height: 17px;
}

.po-section-header .count {
  color: var(--gray-400);
  font-size: 12px;
}

.po-section--draft .po-section-header {
  color: #475569;
}

.po-section--sent .po-section-header {
  color: #2563eb;
}

.po-section--confirmed .po-section-header,
.po-section--received .po-section-header {
  color: #16a34a;
}

.po-section--cancelled .po-section-header {
  color: #dc2626;
}

.po-orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
}

.po-order-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.po-order-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.po-order-card.recent {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 52%);
}

.po-order-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.po-order-number {
  overflow: hidden;
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.po-order-supplier {
  overflow: hidden;
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-order-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--gray-400);
  font-size: 12px;
}

.po-order-meta .value {
  color: var(--gray-700);
  font-weight: 900;
}

.po-approval-chip{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--color-gray-100,#f1f5f9);color:var(--color-gray-600,#475569);width:max-content}
.po-approval-chip--awaiting_approval{background:#eff6ff;color:#1d4ed8}.po-approval-chip--awaiting_approval.is-mine{background:#fef3c7;color:#b45309}
.po-approval-chip--needs_approval{background:#fef3c7;color:#b45309}.po-approval-chip--approved{background:#dcfce7;color:#15803d}.po-approval-chip--rejected{background:#fee2e2;color:#b91c1c}
.po-approvals-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#f59e0b;color:#fff;font-size:11px;font-weight:700;margin-left:4px}
.po-follow-up {
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 11px;
  font-weight: 900;
}

.po-follow-up--completed {
  background: #ecfdf5;
  color: #047857;
}

.po-follow-up-banner,
.po-receive-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  background: #fff7ed;
  color: #9a3412;
}

.po-follow-up-banner > svg,
.po-receive-notice > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.po-follow-up-banner > div {
  display: grid;
  gap: 3px;
}

.po-follow-up-banner span {
  color: #7c2d12;
  font-size: 13px;
}

.po-follow-up-banner--completed {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.po-follow-up-banner--completed span {
  color: #065f46;
}

.po-receive-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.po-receive-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.po-receive-section-head h3,
.po-receive-section-head p {
  margin: 0;
}

.po-receive-section-head h3 {
  font-size: 17px;
}

.po-receive-section-head p {
  margin-top: 4px;
  color: var(--gray-500);
  font-size: 13px;
}

.po-receive-table-head,
.po-receive-line {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px 170px 100px;
  gap: 16px;
  align-items: center;
}

.po-receive-table-head {
  padding: 10px 20px;
  background: #f8fafc;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.po-receive-line {
  padding: 14px 20px;
  border-top: 1px solid var(--gray-100);
}

.po-receive-line--different {
  background: #fff7ed;
}

.po-receive-product {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.po-receive-product strong,
.po-receive-product small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-receive-product small,
.po-receive-ordered {
  color: var(--gray-500);
  font-size: 12px;
}

.po-receive-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.po-receive-qty {
  width: 110px;
  text-align: end;
}

.po-receive-input-wrap > span:last-child {
  color: var(--gray-500);
  font-size: 12px;
}

.po-receive-difference {
  color: var(--gray-500);
  font-weight: 800;
  text-align: end;
}

.po-receive-line--different .po-receive-difference {
  color: #c2410c;
}

.po-receive-side {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.po-receive-photo {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--gray-300);
  border-radius: 12px;
  background: #f8fafc;
}

.po-receive-photo__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
}

.po-receive-photo p {
  margin: 3px 0 10px;
  color: var(--gray-500);
  font-size: 12px;
}

.po-receive-photo input {
  grid-column: 1 / -1;
  max-width: 100%;
}

.po-receive-submit-note {
  color: var(--gray-500);
  font-size: 12px;
  line-height: 1.5;
}

.invoice-po-workflow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
}

.invoice-po-workflow--success {
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.invoice-po-workflow--warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.invoice-po-workflow--compact {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  padding: 12px 14px;
}

.invoice-po-workflow--compact .invoice-po-workflow__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.invoice-po-workflow--candidate {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 12px;
}

.invoice-po-workflow--candidate .invoice-po-workflow__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.invoice-po-workflow--candidate .invoice-po-workflow__icon svg {
  width: 18px;
  height: 18px;
}

.invoice-po-workflow--candidate .invoice-po-workflow__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoice-po-workflow--candidate .invoice-po-workflow__body > strong {
  font-size: 13px;
}

.invoice-po-workflow--candidate .btn {
  flex: 0 0 auto;
}

.invoice-po-workflow__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #fff;
  color: #2563eb;
}

.invoice-po-workflow__icon svg {
  width: 20px;
  height: 20px;
}

.invoice-po-workflow--success .invoice-po-workflow__icon { color: #059669; }
.invoice-po-workflow--warning .invoice-po-workflow__icon { color: #c2410c; }

.invoice-po-workflow__body,
.invoice-po-workflow__head > div,
.invoice-po-candidate > div:first-child {
  display: grid;
  gap: 4px;
}

.invoice-po-workflow__body > span,
.invoice-po-workflow__head span,
.invoice-po-candidate span {
  color: #64748b;
  font-size: 12px;
}

.invoice-po-workflow__link {
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(100, 116, 139, 0.45);
  text-underline-offset: 2px;
  white-space: nowrap;
}

.invoice-po-workflow__link:hover {
  color: #2563eb;
  text-decoration-color: currentColor;
}

.invoice-po-workflow__link:focus-visible {
  border-radius: 3px;
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

.invoice-po-workflow__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.invoice-po-comparison {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(194, 65, 12, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.invoice-po-comparison__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, 0.42fr) minmax(110px, 0.42fr) minmax(150px, 0.55fr);
  align-items: center;
  min-height: 40px;
  border-top: 1px solid rgba(194, 65, 12, 0.12);
  font-size: 12px;
  line-height: 1.35;
}

.invoice-po-comparison__row:first-child {
  border-top: 0;
}

.invoice-po-comparison__row > span {
  min-width: 0;
  padding: 8px 10px;
}

.invoice-po-comparison__row--head {
  min-height: 32px;
  background: rgba(255, 247, 237, 0.74);
}

.invoice-po-comparison__row--head > span {
  padding-top: 7px;
  padding-bottom: 7px;
  color: #9a3412;
  font-size: 11px;
  font-weight: 600;
}

.invoice-po-comparison__product {
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
}

.invoice-po-comparison__qty {
  color: #334155;
  font-variant-numeric: tabular-nums;
}

.invoice-po-comparison__result {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.invoice-po-comparison__result.is-match {
  color: #047857;
}

.invoice-po-comparison__result.is-warning {
  color: #9a3412;
}

.invoice-po-comparison__empty {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(194, 65, 12, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #7c2d12;
  font-size: 12px;
}

.invoice-po-workflow__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.invoice-po-price-drift {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  color: #334155;
  font-size: 12px;
}

.invoice-po-candidates {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.invoice-po-candidate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.invoice-po-candidate__score {
  color: #2563eb;
  font-weight: 900;
}

.invoice-po-number {
  margin-top: 3px;
  color: #c2410c;
  font-size: 11px;
  font-weight: 800;
}

.po-order-actions {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
}

.po-order-amount {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.po-action-danger {
  color: #dc2626;
}

.po-action-danger:hover {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.pod-page {
  width: 100%;
}

.pod-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.pod-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.pod-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.pod-card-header h3 {
  margin: 0;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 900;
}

.pod-card-header span {
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 700;
}

.pod-card-body {
  overflow-x: auto;
}

.pod-supplier-card {
  background: linear-gradient(180deg, #eff6ff 0%, #fff 48%);
}

.pod-supplier-info {
  padding: 20px;
}

.pod-supplier-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 900;
}

.pod-supplier-name i {
  width: 20px;
  height: 20px;
  color: #2563eb;
}

.pod-supplier-details {
  display: grid;
  gap: 10px;
}

.pod-supplier-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--gray-600);
  font-size: 14px;
}

.pod-supplier-row i {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--gray-400);
}

.pod-supplier-row span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pod-summary {
  padding: 18px 20px;
  border-top: 1px solid var(--gray-100);
  background: #f8fafc;
}

.pod-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  color: var(--gray-600);
  font-size: 13px;
}

.pod-summary-row span:last-child {
  color: var(--gray-900);
  font-weight: 800;
  text-align: right;
}

.pod-summary-row.total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--gray-200);
  color: #2563eb;
  font-size: 18px;
  font-weight: 900;
}

.pod-summary-row.total span:last-child {
  color: #2563eb;
}

.pod-items-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.pod-items-table th,
.pod-items-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
  vertical-align: middle;
}

.pod-items-table th {
  background: #f8fafc;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none;
}

.pod-items-table tr:last-child td {
  border-bottom: 0;
}

.pod-items-table .product-name,
.pod-items-table .qty,
.pod-items-table .total {
  color: var(--gray-900);
  font-weight: 800;
}

.pod-items-table .price {
  color: var(--gray-500);
}

.pod-total-col {
  width: 120px;
}

.pod-action-col {
  width: 54px;
}

.pod-add-row {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
  background: #f8fafc;
}

.pod-add-row select {
  flex: 2 1 220px;
  min-width: 0;
}

.pod-add-row input {
  flex: 0 0 100px;
}

.smart-order-page,
.po-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  align-items: start;
}

.smart-order-page {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.product-list-header,
.cart-header,
.po-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.product-list-title,
.cart-header,
.po-card-header h3 {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 900;
}

.product-list-subtitle {
  margin-top: 3px;
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 600;
}

.product-row {
  display: grid;
  grid-template-columns: minmax(170px, 2fr) 68px 104px 68px 68px 82px minmax(130px, 1fr) 42px;
  gap: 8px;
  align-items: center;
  min-height: 56px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  font-size: 13px;
}

.product-row:last-child {
  border-bottom: 0;
}

.product-row.header {
  min-height: 44px;
  background: #f8fafc;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none;
}

.product-row strong {
  color: var(--gray-900);
  font-weight: 900;
}

.smart-order-stock-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.smart-order-stock-cell strong {
  font-variant-numeric: tabular-nums;
}

.smart-order-stock-cell--pending strong {
  color: #c2410c;
}

.smart-order-cell-label {
  display: none;
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 800;
}

.qty-critical {
  color: #dc2626;
  font-weight: 900;
}

.supplier-select {
  width: 100%;
  min-width: 0;
  font-size: 12px;
}

.cart-panel {
  align-self: start;
}

.cart-header span:last-child {
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 800;
}

.cart-supplier-header {
  padding: 9px 20px;
  border-bottom: 1px solid var(--gray-100);
  background: #f8fafc;
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 900;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
  font-size: 13px;
}

.cart-item:last-child {
  border-bottom: 0;
}

.cart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 30px 20px;
  color: var(--gray-500);
  text-align: center;
}

.cart-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
  background: #f8fafc;
}

.po-card {
  min-width: 0;
}

.po-card--product-search {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.po-card-body {
  padding: 20px;
}

.po-search {
  position: relative;
}

.po-search .ds-search {
  width: 100%;
}

.po-search .ds-search-input {
  min-height: 48px;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 15px;
}

.po-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 100;
  display: none;
  overflow-y: auto;
  max-height: 320px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.po-search-results.show {
  display: block;
}

.po-search-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  background: #fff;
  cursor: pointer;
}

.po-search-item:hover {
  background: #f8fafc;
}

.po-search-item:last-child {
  border-bottom: 0;
}

.po-search-item .name {
  margin-bottom: 4px;
  color: var(--gray-900);
  font-weight: 800;
}

.po-search-item .meta {
  color: var(--gray-500);
  font-size: 12px;
}

.po-product-form {
  display: none;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #f8fafc;
}

.po-product-form.show {
  display: block;
}

.po-product-form .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--gray-900);
  font-weight: 900;
}

.po-product-form .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--gray-400);
  cursor: pointer;
}

.po-product-form .close:hover {
  background: #fee2e2;
  color: #dc2626;
}

.po-supplier-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.po-supplier-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.po-supplier-option:hover {
  border-color: #bfdbfe;
}

.po-supplier-option.selected {
  border-color: #93c5fd;
  background: #eff6ff;
}

.po-supplier-option input[type="radio"] {
  display: none;
}

.po-supplier-option .radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
}

.po-supplier-option.selected .radio {
  border-color: #2563eb;
}

.po-supplier-option.selected .radio::after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
  content: '';
}

.po-supplier-option .info {
  flex: 1 1 auto;
  min-width: 0;
}

.po-supplier-option .name {
  overflow: hidden;
  color: var(--gray-900);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-supplier-option .date,
.po-supplier-option .no-price {
  color: var(--gray-500);
  font-size: 12px;
}

.po-supplier-option .price {
  color: #16a34a;
  font-weight: 900;
  white-space: nowrap;
}

.po-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.po-qty-row input {
  width: 100px;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 15px;
  text-align: center;
}

.po-qty-row .btn {
  flex: 1 1 auto;
}

.po-cart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  padding: 40px 20px;
  color: var(--gray-500);
  text-align: center;
}

.po-cart-empty i {
  width: 44px;
  height: 44px;
  color: var(--gray-300);
}

.po-cart-group {
  margin: 0 0 14px;
}

.po-cart-group:last-child {
  margin-bottom: 0;
}

.po-cart-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  background: #eff6ff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}

.po-cart-group-body {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.po-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}

.po-cart-item:last-child {
  border-bottom: 0;
}

.po-cart-item .item-name {
  color: var(--gray-900);
  font-weight: 800;
}

.po-cart-item .item-details {
  color: var(--gray-500);
  font-size: 13px;
}

.po-cart-item .item-total {
  color: var(--gray-900);
  font-weight: 900;
  white-space: nowrap;
}

.po-cart-item .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--gray-400);
  cursor: pointer;
}

.po-cart-item .remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

.po-cart-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
  background: #f8fafc;
}

.po-cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.po-cart-total .label {
  color: var(--gray-600);
  font-weight: 800;
}

.po-cart-total .amount {
  color: #2563eb;
  font-size: 20px;
  font-weight: 900;
}

.po-delivery-panel {
  margin: 16px 0;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

.po-delivery-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 900;
}

.po-notes-input {
  min-height: 64px;
  resize: vertical;
}

.warehouse-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.warehouse-page .erp-page-header,
.warehouse-page .stat-grid {
  margin-bottom: 0;
}

.warehouse-panel {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.warehouse-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.warehouse-panel__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.warehouse-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--primary);
}

.warehouse-panel__title {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 800;
}

.warehouse-panel__meta {
  margin-top: 2px;
  color: var(--gray-500);
  font-size: 13px;
}

.warehouse-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.warehouse-panel__body {
  min-width: 0;
}

.warehouse-filter-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.warehouse-filter-panel__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-filter-panel__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

.warehouse-filter-panel .pure-dropdown,
.warehouse-filter-panel .date-range-wrapper {
  width: 220px;
  max-width: 100%;
  flex: 0 1 220px;
}

.warehouse-filter-panel .pure-dropdown-trigger {
  min-width: 0;
}

.warehouse-filter-panel .btn,
.warehouse-filter-panel button {
  flex: 0 0 auto;
}

.warehouse-filter-panel--toolbar {
  align-items: center;
}

.warehouse-filter-panel--toolbar .warehouse-filter-panel__controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 220px));
  flex: 0 1 auto;
  width: min(100%, 700px);
}

.warehouse-filter-panel--toolbar .warehouse-filter-select {
  width: 100%;
  min-width: 0;
}

.warehouse-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  min-height: 220px;
  padding: 48px 20px;
  color: var(--gray-500);
  text-align: center;
}

.warehouse-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f1f5f9;
  color: #64748b;
}

.warehouse-empty__title {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 800;
}

.warehouse-empty__copy {
  max-width: 460px;
  color: var(--gray-500);
  font-size: 14px;
  line-height: 1.45;
}

.warehouse-empty__actions {
  margin-top: 8px;
}

.transfers-page-v3,
.writeoffs-page-v3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-filters-card,
.wo-filters-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.tr-grid-v3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-card-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tr-card-v3:hover {
  border-color: #bfdbfe;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.tr-main-v3 {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.tr-number-v3 {
  min-width: 130px;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 800;
}

.tr-route-v3 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--gray-500);
  font-size: 14px;
}

.tr-route-arrow {
  color: var(--primary);
  font-weight: 800;
}

.tr-route-wh {
  overflow: hidden;
  max-width: 260px;
  color: var(--gray-900);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tr-meta-v3 {
  margin-top: 4px;
  color: var(--gray-400);
  font-size: 13px;
}

.tr-status-v3 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.tr-status-v3.draft {
  background: #fef3c7;
  color: #b45309;
}

.tr-status-v3.posted {
  background: #dcfce7;
  color: #15803d;
}

.tr-status-v3.cancelled {
  background: #fee2e2;
  color: #dc2626;
}

.tr-actions-v3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tr-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.tr-action-btn.post {
  background: #dcfce7;
  color: #15803d;
}

.tr-action-btn.delete {
  background: #fee2e2;
  color: #dc2626;
}

.tr-action-btn:hover {
  border-color: currentColor;
}

.wo-table-card {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.wo-table-v3 {
  width: 100%;
  border-collapse: collapse;
}

.wo-table-v3 thead {
  background: var(--gray-50);
}

.wo-table-v3 th,
.wo-table-v3 td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
}

.wo-table-v3 th {
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
}

.wo-table-v3 td {
  font-size: 14px;
}

.wo-table-v3 tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.wo-table-v3 tbody tr:hover {
  background: var(--gray-50);
}

.wo-table-v3 tbody tr:last-child td {
  border-bottom: 0;
}

.wo-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #fff !important;
  border: 1px solid currentColor;
}

.wo-status-badge.draft {
  color: #2563eb;
}

.wo-status-badge.posted {
  color: #15803d;
}

.wo-status-badge.canceled {
  color: #dc2626;
}

.wo-number {
  color: var(--gray-900);
  font-weight: 800;
}

.wo-amount {
  color: #dc2626;
  font-weight: 800;
}

.warehouse-filter-select {
  width: 160px;
  min-width: 140px;
}

.warehouse-table-heading-right {
  text-align: right !important;
}

.warehouse-table-heading-center {
  text-align: center !important;
}

.warehouse-muted-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gray-100, #f1f5f9);
  color: var(--gray-700, #334155);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.warehouse-detail-card {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.warehouse-detail-card__body {
  padding: 18px 20px;
}

.warehouse-form-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
}

.warehouse-form-footer--stack {
  flex-direction: column;
}

.warehouse-push-right {
  margin-left: auto;
}

.warehouse-doc-link {
  color: #3b82f6;
  font-weight: 700;
  text-decoration: none;
}

.warehouse-doc-link:hover {
  text-decoration: underline;
}

.warehouse-doc-meta {
  color: #94a3b8;
  font-size: 12px;
}

.smg-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.smg-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.smg-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.smg-stat {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.smg-stat-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}

.smg-stat-value {
  margin-top: 4px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.smg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.smg-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.smg-count {
  color: #64748b;
  font-size: 13px;
}

.smg-table-wrap {
  overflow: auto;
  max-height: 65vh;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.smg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.smg-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 9px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: none;
}

.smg-source-row td {
  padding: 0;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.smg-source-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
}

.smg-source-main {
  min-width: 0;
}

.smg-source-title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.smg-source-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.smg-source-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.smg-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.smg-product-row td {
  padding: 8px 12px;
  border-top: 1px solid #f1f5f9;
  vertical-align: middle;
}

.smg-product-row:hover td {
  background: #fafbfd;
}

.smg-product-name {
  color: #334155;
  font-weight: 600;
}

.smg-qty {
  color: #0f172a;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.smg-uom {
  color: #475569;
  white-space: nowrap;
}

.smg-empty-row td {
  padding: 14px;
  border-top: 1px solid #f1f5f9;
  color: #94a3b8;
  text-align: center;
}

.smg-empty-state {
  padding: 36px 16px;
}

.warehouse-full-button {
  width: 100%;
  justify-content: center;
}

.warehouse-input-inline {
  width: 100%;
}

.warehouse-input-inline--right {
  width: 100%;
  text-align: right;
}

.warehouse-cell-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gray-400);
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.warehouse-cell-link:hover {
  color: var(--primary);
}

.wo-date-col {
  width: 110px;
}

.wo-count-col {
  width: 80px;
  text-align: right !important;
}

.wo-amount-col {
  width: 120px;
  text-align: right !important;
}

.wo-status-col {
  width: 110px;
  text-align: center !important;
}

.writeoff-create-page,
.writeoff-detail-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.writeoff-create-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.writeoff-table-container,
.writeoff-table-wrap,
.writeoff-detail-table-card,
.writeoff-detail-table-wrap {
  overflow: visible;
}

.writeoff-lines-table,
.writeoff-detail-lines-table {
  width: 100%;
  table-layout: fixed;
}

.writeoff-lines-table th,
.writeoff-lines-table td,
.writeoff-detail-lines-table th,
.writeoff-detail-lines-table td {
  vertical-align: middle;
}

.writeoff-lines-table th:nth-child(2),
.writeoff-lines-table td:nth-child(2),
.writeoff-lines-table th:nth-child(3),
.writeoff-lines-table td:nth-child(3),
.writeoff-lines-table th:nth-child(4),
.writeoff-lines-table td:nth-child(4),
.writeoff-detail-lines-table th:nth-child(2),
.writeoff-detail-lines-table td:nth-child(2),
.writeoff-detail-lines-table th:nth-child(3),
.writeoff-detail-lines-table td:nth-child(3),
.writeoff-detail-lines-table th:nth-child(4),
.writeoff-detail-lines-table td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.writeoff-lines-table .line-item-name,
.writeoff-detail-lines-table .line-item-name {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writeoff-lines-table .line-item-meta {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.writeoff-lines-table .item-autocomplete,
.writeoff-lines-table .form-input-sm,
.writeoff-detail-lines-table .item-autocomplete,
.writeoff-detail-lines-table .form-input-sm {
  width: 100%;
  min-width: 0;
}

.writeoff-lines-table .writeoff-input-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.writeoff-input-row,
.writeoff-detail-lines-table .input-row {
  background: var(--gray-50);
}

.writeoff-lines-table .writeoff-add-btn,
.writeoff-detail-lines-table .writeoff-add-btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

.writeoff-lines-table .writeoff-remove-btn,
.writeoff-detail-lines-table .writeoff-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
}

.writeoff-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.writeoff-detail-meta-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.warehouse-source-card {
  margin-top: 16px;
  border-left: 4px solid var(--source-accent, var(--primary));
  cursor: default;
}

.warehouse-source-card.is-clickable {
  cursor: pointer;
}

.warehouse-source-card__body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}

.warehouse-source-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  background: var(--source-gradient, linear-gradient(135deg, #3b82f6, #6366f1));
}

.warehouse-source-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1e293b;
  font-size: 15px;
  font-weight: 700;
}

.warehouse-source-card__amount {
  margin-left: auto;
  text-align: right;
}

.warehouse-source-card__amount-main {
  color: #1e293b;
  font-size: 16px;
  font-weight: 800;
}

.transfer-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.transfer-route-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 20px;
}

.transfer-route-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 12px;
}

.transfer-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  display: none;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 4px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.transfer-cart-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.transfer-cart-count {
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.transfer-cart-items {
  flex: 1;
  min-height: 200px;
  padding: 16px;
}

.transfer-cart-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.transfer-search-row,
.transfer-cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.transfer-search-row {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease;
}

.transfer-search-row:hover {
  background: #f8fafc;
}

.transfer-search-row__title,
.transfer-cart-row__title {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.transfer-type-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.transfer-type-badge--prep {
  background: #ecfdf5;
  color: #047857;
}

.transfer-type-badge--product {
  background: #eff6ff;
  color: #2563eb;
}

.transfer-add-pill {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 7px;
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.transfer-search-note {
  padding: 14px 16px;
  color: #64748b;
  font-size: 14px;
}

.transfer-search-note--error {
  color: #ef4444;
}

.transfer-cart-row {
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.transfer-cart-row__meta {
  margin-top: 4px;
}

.transfer-cart-row__qty {
  width: 80px;
  padding: 6px 8px;
  border: 2px solid #e2e8f0;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.transfer-cart-row__uom {
  min-width: 30px;
  color: #64748b;
  font-size: 13px;
}

.transfer-cart-row__remove {
  padding: 4px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
}

.transfer-detail-route {
  padding: 20px 24px;
}

.transfer-detail-route__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.transfer-route-node {
  flex: 1;
  min-width: 240px;
  padding: 14px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.transfer-route-node__label,
.transfer-notes__label {
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
}

.transfer-route-node__name {
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
}

.transfer-route-node__sub {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 12px;
}

.transfer-lines-card,
.transfer-notes {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.transfer-lines-table {
  width: 100%;
  border-collapse: collapse;
}

.transfer-lines-table th {
  padding: 12px 20px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-transform: none;
}

.transfer-lines-table td {
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.transfer-lines-table tr:last-child td {
  border-bottom: 0;
}

.transfer-lines-table__qty {
  text-align: right !important;
}

.transfer-lines-table__product {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.transfer-lines-table__code {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 12px;
}

.transfer-lines-table__qty-main {
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
}

.transfer-lines-table__uom {
  margin-left: 4px;
  color: #64748b;
  font-size: 13px;
}

.transfer-notes {
  padding: 16px 20px;
}

.transfer-notes__body {
  color: #0f172a;
  font-size: 14px;
}

.uom-review-guide {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.uom-review-guide__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.uom-review-guide__summary::-webkit-details-marker {
  display: none;
}

.uom-review-guide__chevron {
  margin-left: auto;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.uom-review-guide[open] .uom-review-guide__chevron {
  transform: rotate(180deg);
}

.uom-review-guide__body {
  padding: 0 20px 16px;
  border-top: 1px solid #f1f5f9;
}

.uom-review-card-head {
  gap: 12px;
}

.uom-review-search {
  flex: 1;
  max-width: 360px;
}

.uom-select-col {
  width: 40px;
}

.uom-factor-col {
  width: 130px;
}

.uom-pagination {
  padding: 12px 16px;
  border-top: 1px solid #f1f5f9;
}

.uom-supplier-raw {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
}

.uom-invoice-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--color-primary);
  font-size: 11px;
  text-decoration: none;
}

.uom-invoice-link:hover {
  text-decoration: underline;
}

.uom-sku-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
}

.uom-product-link {
  color: #0f172a;
  font-weight: 800;
  text-decoration: none;
}

.uom-product-link:hover {
  color: var(--color-primary);
}

.uom-grouped-row {
  border-left: 3px solid #93c5fd;
}

.uom-grouped-row-start {
  border-top: 1px solid #e2e8f0;
}

.uom-page-ellipsis {
  padding: 4px 6px;
  color: #94a3b8;
  font-size: 12px;
}

.uom-page-button {
  min-width: 32px;
  padding: 4px 10px;
  font-size: 12px;
}

.uom-page-next {
  padding: 4px 8px;
}

.mv3-day-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

.stock-filter-search {
  width: 220px;
}

.stock-filter-branch {
  min-width: 170px;
}

.stock-filter-date {
  width: 170px;
}

.stock-negative-filter {
  min-width: 132px;
  justify-content: flex-start;
  background: #fff;
  color: var(--gray-700);
  border-color: var(--gray-200);
}

.stock-negative-filter svg,
.stock-negative-filter i {
  color: var(--erp-alert-danger);
}

.stock-negative-filter__count {
  margin-left: auto;
  color: var(--color-danger-dark);
  font-variant-numeric: tabular-nums;
}

.stock-negative-filter.active {
  background: #fff;
  color: var(--color-danger-dark);
  border-color: var(--erp-alert-danger);
  box-shadow: 0 0 0 1px var(--erp-alert-danger);
}

.stock-page-v3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stock-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.stock-stat-card,
.stock-table-card,
.stock-mobile-card {
  border: 1px solid var(--gray-200);
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.stock-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
}

.stock-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.stock-stat-icon.primary { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.stock-stat-icon.success { background: linear-gradient(135deg, #10b981, #14b8a6); }
.stock-stat-icon.warning { background: linear-gradient(135deg, #f59e0b, #f97316); }
.stock-stat-icon.danger { background: linear-gradient(135deg, #ef4444, #f43f5e); }

.stock-stat-value {
  color: var(--gray-900);
  font-size: 28px;
  font-weight: 700;
}

.stock-stat-label {
  color: var(--gray-500);
  font-size: 13px;
}

.stock-table-card {
  overflow: hidden;
  border-radius: 16px;
}

.stock-table-v3 {
  width: 100%;
  border-collapse: collapse;
}

.stock-table-v3 thead {
  background: var(--gray-50);
}

.stock-table-v3 th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  text-transform: none;
}

.stock-table-v3 td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}

.stock-table-v3 tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.stock-table-v3 tbody tr:hover {
  background: var(--gray-50);
}

.stock-table-v3 tbody tr:last-child td {
  border-bottom: 0;
}

.stock-table-v3__qty-col {
  width: 120px;
  text-align: right !important;
}

.stock-table-v3__status-col {
  width: 100px;
  text-align: center !important;
}

.stock-table-v3__history-col {
  width: 132px;
  text-align: center !important;
}

.stock-history-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.stock-product-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-900);
  font-weight: 600;
}

.stock-qty,
.stock-total {
  font-weight: 700;
}

.stock-qty.positive,
.stock-mobile-card-item-value.positive,
.stock-mobile-card-total-value.positive {
  color: var(--success);
}

.stock-qty.zero,
.stock-mobile-card-item-value.zero {
  color: var(--gray-400);
}

.stock-qty.low,
.stock-mobile-card-item-value.low,
.stock-mobile-card-total-value.low {
  color: var(--warning);
}

.stock-qty.out,
.stock-mobile-card-item-value.out,
.stock-mobile-card-total-value.out {
  color: var(--danger);
}

.stock-total,
.stock-mobile-card-total-value {
  color: var(--gray-900);
}

.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.stock-badge.low {
  background: var(--color-warning-50, #fef3c7);
  color: var(--color-warning-dark, #b45309);
}

.stock-badge.out {
  background: var(--color-danger-50, #fee2e2);
  color: var(--danger);
}

.stock-empty-state,
.stock-mobile-empty {
  color: var(--gray-400);
  text-align: center;
}

.stock-mobile-empty {
  padding: 40px;
}

.stock-empty-state__title {
  color: var(--gray-500);
  font-size: 16px;
  font-weight: 500;
}

.stock-empty-state__text {
  margin-top: 4px;
  font-size: 13px;
}

.stock-mobile-cards {
  display: none;
}

.stock-mobile-card {
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.stock-mobile-card:hover {
  background: var(--gray-50);
}

.stock-mobile-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.stock-mobile-card-name {
  flex: 1;
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 600;
}

.stock-mobile-card-unit {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 12px;
}

.stock-mobile-card-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.stock-mobile-card-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--gray-50);
}

.stock-mobile-card-item-label {
  margin-bottom: 2px;
  color: var(--gray-500);
  font-size: 11px;
}

.stock-mobile-card-item-value {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 600;
}

.stock-mobile-card-total {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
}

.stock-mobile-card-total-label {
  color: var(--gray-600);
  font-weight: 500;
}

.stock-mobile-card-total-value {
  font-size: 18px;
}

.stock-mobile-card-actions {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.stock-mobile-history-btn {
  justify-content: center;
  width: 100%;
}

.stock-pagination,
.stock-pagination-actions,
.stock-history-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stock-pagination {
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
}

.stock-pagination-meta,
.stock-pagination-page,
.stock-history-pagination__meta {
  color: var(--gray-500);
  font-size: 13px;
}

.stock-pagination-page,
.stock-history-pagination__meta strong {
  color: var(--gray-700);
  font-weight: 600;
}

.stock-history-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stock-history-period-header,
.stock-history-period-actions,
.stock-history-modal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.stock-history-period-header h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.stock-history-period-header span,
.stock-history-modal-scope { color: var(--text-secondary, #64748b); font-size: 13px; }
.stock-history-modal .erp-dynamic-modal__body { padding: 0 24px 24px; }
.stock-history-modal-scope { margin: 0 0 16px; padding-top: 24px; }
/* Keep scrollport padding inside the opaque sticky panel, including its gutters. */
.stock-history-modal-controls { margin: 0 -24px; position: sticky; top: 0; z-index: 2; background: #fff; padding: 8px 24px 24px; }
.stock-history-modal .stock-history-panel { margin: 0; }
.stock-history-modal .stock-history-table { min-width: 720px; }
.stock-history-table__balance { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-history-daily-balance { font-weight: 600; font-variant-numeric: tabular-nums; }
.stock-history-modal .stock-history-table--daily.erp-data-table--precision th,
.stock-history-modal .stock-history-table--daily.erp-data-table--precision td { padding-inline: 12px; }
.stock-history-modal .stock-history-table--daily.erp-data-table--precision th .erp-table-text { overflow-wrap: normal; word-break: normal; }
.stock-history-day-link { display: inline-flex; align-items: center; min-height: 32px; border: 0; padding: 0; background: none; color: var(--color-primary-hover); font: inherit; text-align: inherit; cursor: pointer; }
.stock-history-day-link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.stock-history-day-link:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 768px) {
  .stock-history-day-link { min-height: 44px; }
}
.stock-history-modal .inv-ov-drill-context .stock-history-table { min-width: 550px; }
.stock-history-modal #stockHistoryModalContent,
.stock-history-modal #stockHistoryModalTable { min-width: 0; max-width: 100%; }
.stock-history-modal #stockHistoryModalTable { position: relative; z-index: 0; }
.stock-history-movement-row { cursor: pointer; }
.stock-history-movement-toggle { min-height: 44px; cursor: pointer; font-family: inherit; }
.stock-history-movement-toggle[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.stock-history-detail-link { min-height: 44px; border: 0; padding: 0; background: none; color: var(--color-primary); font: inherit; cursor: pointer; }
.stock-history-movement-detail-row[hidden] { display: none !important; }
.stock-history-movement-detail-row > td { padding: 0 !important; white-space: normal !important; }
.stock-history-movement-detail { padding: 18px 20px; background: #fff; }
.stock-history-movement-detail h3, .stock-history-movement-detail h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.stock-history-movement-detail p { margin: 6px 0 14px; max-width: 800px; font-size: 13px; color: var(--text-secondary, #64748b); }
.stock-history-movement-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.stock-history-movement-facts dt { font-size: 12px; color: var(--text-secondary, #64748b); }
.stock-history-movement-facts dd { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.stock-history-related { border-top: 1px solid var(--color-gray-200); padding-top: 14px; margin-top: 16px; }
@media (max-width: 640px) {
  .stock-history-movement-detail { max-width: calc(100vw - 72px); padding: 14px; }
  .stock-history-movement-facts { grid-template-columns: 1fr; gap: 10px; }
}
.stock-history-modal .btn,
.stock-history-modal .btn-ghost,
.stock-history-modal .erp-filter-tabs__tab,
.stock-history-modal .pure-dropdown-trigger,
.stock-history-modal .erp-dynamic-modal__close { min-height: 44px; }
.stock-history-modal .erp-dynamic-modal__close { min-width: 44px; }
.stock-history-modal .u-link-blue { display: inline-flex; align-items: center; min-height: 44px; }
.stock-history-modal .stat-card-u--metric { padding: 14px; }
.stock-history-modal .stat-card-u__metric-icon { position: absolute; top: 14px; inset-inline-start: 14px; width: 16px; height: 16px; margin: 0; }
.stock-history-modal .stat-card-u__metric-icon svg { width: 16px; height: 16px; }
.stock-history-modal .stat-card-u--metric .stat-card-u__label { margin-inline-start: 24px; }
.stock-history-modal .stat-card-u--metric .stat-card-u__value { margin-top: 10px; }
@media (max-width: 640px) {
  .stock-history-modal { padding: 0; align-items: stretch; }
  .stock-history-modal .erp-dynamic-modal__content { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .stock-history-modal .erp-dynamic-modal__header { padding: max(10px, env(safe-area-inset-top)) 14px 10px; gap: 10px; }
  .stock-history-modal .erp-dynamic-modal__title { min-width: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
  .stock-history-modal .erp-dynamic-modal__close { flex: 0 0 44px; }
  .stock-history-modal .erp-dynamic-modal__body { padding: 0 14px calc(14px + env(safe-area-inset-bottom)); }
  .stock-history-modal-scope { padding-top: 10px; margin-bottom: 6px; font-size: 12px; line-height: 1.4; }
  .stock-history-modal-controls { margin: 0 -14px; padding: 6px 14px 10px; gap: 8px; }
  .stock-history-modal-controls .erp-filter-tabs { flex: 1; min-width: 0; flex-wrap: nowrap; gap: 4px; }
  .stock-history-modal-controls .erp-filter-tabs__tab { flex: 1; justify-content: center; min-width: 0; padding: 6px; font-size: 12px; }
  .stock-history-modal-controls .stock-history-more-details { flex: 0 0 44px; width: 44px; padding: 0; justify-content: center; }
  .stock-history-more-details > span { display: none; }
  .stock-history-modal-controls .pure-dropdown { flex: 0 0 100%; }
  .stock-history-modal #stockHistoryModalTable > .stock-history-panel { border: 0; border-radius: 0; }
  .stock-history-modal #itemHistoryMovementDetails > .stock-history-panel__header,
  .stock-history-modal #stockHistoryModalTable > .stock-history-panel > .stock-history-panel__header { padding: 4px 0 8px; gap: 0; }
  .stock-history-modal #stockHistoryModalTable > .stock-history-panel > .stock-history-panel__header .stock-history-panel__icon,
  .stock-history-modal #stockHistoryModalTable > .stock-history-panel > .stock-history-panel__header .stock-history-panel__title { display: none; }
  .stock-history-modal .stock-history-table { width: 100% !important; min-width: 0 !important; table-layout: auto; }
  .stock-history-modal .stock-history-table colgroup,
  .stock-history-modal .stock-history-table thead { display: none; }
  .stock-history-modal .stock-history-table,
  .stock-history-modal .stock-history-table tbody { display: block; }
  .stock-history-modal .stock-history-table tr:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-200); }
  .stock-history-modal .stock-history-table tr > td { display: block; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0 !important; white-space: normal; overflow-wrap: anywhere; text-align: start !important; }
  .stock-history-modal .stock-history-table tr > td:first-child,
  .stock-history-modal .stock-history-table tr > td[colspan] { grid-column: 1 / -1; }
  .stock-history-modal .stock-history-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--gray-500); font-size: 11px; font-weight: 400; }
  .stock-history-modal .stock-history-table--movements tr.stock-history-movement-row { grid-template-areas: "datetime quantity" "type document" "warehouse amount"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; }
  .stock-history-modal .stock-history-table--balances tr.stock-history-movement-row { grid-template-areas: "datetime quantity" "type document" "warehouse amount" "balance balance"; }
  .stock-history-modal .stock-history-table__balance { grid-area: balance; text-align: end !important; font-size: 12px; }
  .stock-history-modal .stock-history-table__balance::before { content: "Balance after: "; color: var(--text-secondary, #64748b); font-size: 11px; }
  .stock-history-modal .stock-history-table--movements td[data-label]::before { display: none; }
  .stock-history-modal .stock-history-table--balances td.stock-history-table__balance[data-label]::before { display: inline; content: "Balance after: "; color: var(--text-secondary, #64748b); font-size: 11px; }
  .stock-history-modal .stock-history-table--movements tr > td.stock-history-table__datetime { grid-area: datetime; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 12px; }
  .stock-history-modal .stock-history-table__type { grid-area: type; align-self: center; }
  .stock-history-modal .stock-history-table--movements .stock-history-table__quantity { grid-area: quantity; text-align: end !important; align-self: center; font-size: 16px; font-weight: 600; }
  .stock-history-modal .stock-history-table__document { grid-area: document; text-align: end !important; align-self: center; font-size: 12px; }
  .stock-history-modal .stock-history-table__document .u-link-blue { justify-content: flex-end; white-space: normal; }
  .stock-history-modal .stock-history-table--movements .stock-history-table__warehouse { grid-area: warehouse; font-size: 11px; line-height: 1.4; }
  .stock-history-modal .stock-history-table--movements .stock-history-table__amount { grid-area: amount; text-align: end !important; font-size: 11px; }
  .stock-history-modal .stock-history-table--movements .stock-history-table__amount--empty { display: none; }
  .stock-history-modal .stock-history-movement-toggle { max-width: 100%; padding: 6px 8px; white-space: normal; text-align: start; }
  .stock-history-modal .stock-history-movement-toggle svg { flex-shrink: 0; }
  .stock-history-modal .stock-history-table tr.stock-history-movement-detail-row:not([hidden]) { display: block; padding: 0 0 12px; }
  .stock-history-modal .stock-history-movement-detail { max-width: none; padding: 12px; border: 1px solid var(--gray-200); border-radius: 8px; }
  .stock-history-modal .stock-history-doc-meta { display: block; font-size: 11px; }
  .stock-history-modal .stock-history-table--daily td:last-child { font-weight: 600; }
  .stock-history-modal .stock-history-table--daily .stock-history-table__date { font-size: 14px; }
  .stock-history-period-actions { width: 100%; }
  .stock-history-period-actions .btn { flex: 1; min-height: 44px; }
  .stock-history-modal-controls { align-items: stretch; }
  .stock-history-modal .stock-history-pagination { flex-wrap: wrap; gap: 8px; }
  .stock-history-modal .inv-ov-drill-metrics { gap: 10px; padding: 14px; }
  .stock-history-modal .inv-ov-drill-metrics > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .stock-history-modal .inv-ov-drill-metrics dd { margin: 0; white-space: nowrap; }
}

.stock-history-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stock-history-stat {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: 14px;
  color: #fff;
}

.stock-history-stat--receipt { background: linear-gradient(135deg, #16a34a, #15803d); }
.stock-history-stat--sale { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.stock-history-stat--write-off { background: linear-gradient(135deg, #d97706, #b45309); }
.stock-history-stat--net-positive { background: var(--gradient-primary); }
.stock-history-stat--net-negative { background: linear-gradient(135deg, #dc2626, #b91c1c); }

.stock-history-stat__glow {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.stock-history-stat__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.stock-history-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
}

.stock-history-stat__label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.stock-history-stat__value {
  font-size: 28px;
  font-weight: 700;
}

.stock-history-panel {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
}

.stock-history-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-100);
}

.stock-history-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.stock-history-panel__icon--daily {
  background: var(--color-primary-50, #eff6ff);
}

.stock-history-panel__icon--details {
  background: var(--color-warning-50, #fef3c7);
}

.stock-history-panel__title {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 600;
}

.stock-history-panel__meta {
  margin-left: 4px;
  color: var(--gray-400);
  font-size: 12px;
}

.stock-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stock-history-table thead {
  background: var(--gray-50);
}

.stock-history-table th {
  padding: 10px 14px;
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  text-transform: none;
}

.stock-history-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100);
}

.stock-history-table tbody tr {
  transition: background 0.15s;
}

.stock-history-table tbody tr:hover {
  background: #fafbfd;
}

.stock-history-table__right {
  text-align: right !important;
}

.stock-history-table__nowrap,
.stock-history-table__datetime {
  white-space: nowrap;
}

.stock-history-table__date {
  color: var(--gray-900);
  font-weight: 600;
}

.stock-history-table__warehouse,
.stock-history-doc-label {
  color: var(--gray-600);
}

.stock-history-table__amount,
.stock-history-doc-label {
  font-weight: 500;
}

.stock-history-table__th--receipt { color: var(--success) !important; }
.stock-history-table__th--sale { color: var(--danger) !important; }
.stock-history-table__th--writeoff { color: var(--warning) !important; }
.stock-history-table__th--transfer { color: var(--primary) !important; }
.stock-history-table__th--net { color: var(--gray-900) !important; }

.stock-history-val {
  font-variant-numeric: tabular-nums;
}

.stock-history-val--positive { color: var(--success); }
.stock-history-val--negative { color: var(--danger); }
.stock-history-val--warning { color: var(--warning); }
.stock-history-val--transfer { color: var(--primary); }
.stock-history-val--neutral { color: var(--gray-500); }
.stock-history-val--strong { font-weight: 700; }

.stock-history-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #fff !important;
  border: 1px solid currentColor;
}

.stock-history-type--receipt {
  color: var(--success);
}

.stock-history-type--reversal,
.stock-history-type--sale {
  color: var(--danger);
}

.stock-history-type--write-off {
  color: var(--warning);
}

.stock-history-type--transfer {
  color: var(--primary);
}

.stock-history-type--adjustment {
  color: var(--gray-600);
}

.stock-history-doc-meta {
  color: var(--gray-400);
  font-size: 12px;
}

.stock-history-empty-cell {
  padding: 48px 16px !important;
  text-align: center;
}

.stock-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stock-history-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--gray-100);
}

.stock-history-empty__text {
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 500;
}

.stock-history-pagination {
  justify-content: center;
  padding: 16px;
}

.mv3-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mv3-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.mv3-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
}

.mv3-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
}

.mv3-stat-icon--primary { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.mv3-stat-icon--success { background: linear-gradient(135deg, #10b981, #14b8a6); }
.mv3-stat-icon--danger { background: linear-gradient(135deg, #ef4444, #f43f5e); }
.mv3-stat-icon--transfer { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }

.mv3-stat-val {
  color: var(--gray-900);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.mv3-stat-lbl {
  margin-top: 2px;
  color: var(--gray-500);
  font-size: 12px;
}

.mv3-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
}

.mv3-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-500);
}

.mv3-filter-label span {
  font-size: 13px;
  font-weight: 600;
}

.mv3-reset-btn {
  padding: 6px 10px;
  font-size: 13px;
}

.mv3-day-card {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow 0.2s;
}

.mv3-day-card:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.mv3-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}

.mv3-day-header:hover {
  background: var(--gray-50);
}

.mv3-day-date {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 700;
}

.mv3-day-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mv3-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mv3-day-meta,
.mv3-type-totals {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gray-500);
  font-size: 13px;
}

.mv3-chevron {
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}

.mv3-chevron.open {
  transform: rotate(180deg);
}

.mv3-day-body {
  display: none;
  border-top: 1px solid var(--gray-100);
}

.mv3-day-body.open {
  display: block;
}

.mv3-movement {
  padding: 14px 20px;
  border-bottom: 1px solid var(--gray-50);
}

.mv3-movement:last-child {
  border-bottom: 0;
}

.mv3-mv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.mv3-mv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.mv3-mv-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--gray-400);
  font-size: 12px;
}

.mv3-products-grid,
.mv3-source-products {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.mv3-products-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.mv3-source-products {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.mv3-product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--gray-50);
  font-size: 13px;
}

.mv3-product-name {
  overflow: hidden;
  max-width: 200px;
  color: var(--gray-700);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv3-product-qty,
.mv3-source-qty {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mv3-source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.mv3-source-card {
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
}

.mv3-source-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mv3-source-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.mv3-source-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--gray-500);
  font-size: 12px;
}

.mv3-empty {
  padding: 60px 20px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.mv3-empty-title {
  color: var(--gray-500);
  font-size: 16px;
  font-weight: 600;
}

.mv3-empty-text {
  margin-top: 4px;
  color: var(--gray-400);
  font-size: 13px;
}

.mv3-type-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.mv3-type-section:last-child {
  border-bottom: 0;
}

.mv3-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.mv3-type-count {
  color: var(--gray-400);
  font-size: 12px;
  font-weight: 500;
}

.mv3-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  background: #fff;
}

.mv3-pagination-meta {
  color: var(--gray-500);
  font-size: 13px;
}

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

.mv3-pagination-page {
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 600;
}

.mv3-products-note {
  margin-top: 8px;
  color: var(--gray-500);
  font-size: 12px;
}

.par-levels-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.par-alerts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.par-card,
.alert-card {
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 2px 8px rgba(15, 23, 42, 0.04));
}

.par-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  background: #fff;
}

.par-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 600;
}

.par-card-body {
  padding: 0;
  background: #fff;
}

.par-table {
  width: 100%;
  border-collapse: collapse;
}

.par-table th,
.par-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
}

.par-table th {
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

.par-table tbody tr {
  transition: background 0.15s;
}

.par-table tbody tr:hover {
  background: var(--gray-50);
}

.par-table__actions {
  width: 60px;
}

.par-table__current {
  text-align: right;
  font-weight: 600;
}

.par-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
}

.par-status.critical {
  background: var(--color-danger-50, #fee2e2);
  color: var(--danger);
}

.par-status.reorder {
  background: var(--color-warning-50, #fef3c7);
  color: var(--warning);
}

.par-status.ok {
  background: var(--color-success-50, #dcfce7);
  color: var(--success);
}

.par-status.overstock {
  background: var(--color-primary-50, #dbeafe);
  color: var(--primary);
}

.par-input {
  width: 70px;
  padding: 6px 10px;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  font-size: 13px;
  text-align: right;
}

.par-input:focus {
  border-color: var(--primary);
  outline: none;
}

.alert-card {
  margin-bottom: 16px;
}

.alert-card--critical {
  border-color: var(--erp-alert-danger);
}

.alert-card--warning {
  border-color: var(--erp-alert-warning);
}

.par-alerts-row .alert-card {
  margin-bottom: 0;
}

.alert-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
  font-weight: 600;
}

.alert-header.critical {
  color: var(--danger);
}

.alert-header.reorder {
  color: var(--warning);
}

.alert-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-50);
}

.alert-item:last-child {
  border-bottom: 0;
}

.alert-name {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 500;
}

.alert-qty {
  color: var(--gray-500);
  font-size: 12px;
}

.alert-card--empty {
  padding: 40px 20px;
  text-align: center;
}

.alert-empty-title {
  margin-bottom: 4px;
  font-weight: 600;
}

.alert-empty-text {
  color: var(--text-secondary);
  font-size: 13px;
}

.add-par-row {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) 110px 110px auto auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  background: var(--gray-50);
}

.add-par-row[hidden] {
  display: none;
}

.add-par-row__product {
  position: relative;
  min-width: 0;
}

.add-par-row__field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.add-par-row__field > label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.add-par-row__warehouse {
  width: 100%;
  min-width: 0;
}

.add-par-row__qty {
  width: 100%;
  min-width: 0;
}

.add-par-row .pure-dropdown,
.add-par-row .pure-dropdown-trigger,
.add-par-row .warehouse-action-field,
.add-par-row .form-input,
.add-par-row .form-select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  border-radius: 10px;
}

.add-par-row .pure-dropdown-trigger {
  padding: 0 14px;
}

.warehouse-action-button,
.warehouse-action-icon-btn {
  min-height: 44px;
  height: 44px;
  border-radius: 10px;
  white-space: nowrap;
}

.warehouse-action-button {
  padding: 0 18px;
}

.warehouse-action-icon-btn {
  width: 44px;
  min-width: 44px;
  padding: 0;
}

@media (max-width: 1200px) {
  .add-par-row {
    grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) 100px 100px auto auto;
  }

  .transfer-create-layout {
    grid-template-columns: 1fr;
  }

  .product-detail-v3__general-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-detail-v3__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-detail-v3__bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .writeoff-create-layout {
    grid-template-columns: 1fr;
  }

  .writeoff-table-wrap,
  .writeoff-detail-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .par-levels-page {
    grid-template-columns: 1fr;
  }

  .pod-grid,
  .smart-order-page,
  .po-page {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .po-receive-layout {
    grid-template-columns: 1fr;
  }

  .po-receive-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .po-receive-table-head {
    display: none;
  }

  .po-receive-line {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
  }

  .po-receive-product {
    grid-column: 1 / -1;
  }

  .po-receive-input-wrap {
    justify-content: flex-end;
  }

  .po-receive-difference {
    grid-column: 2;
  }

  .po-receive-side {
    padding: 16px;
  }

  .invoice-po-workflow {
    grid-template-columns: 1fr;
  }

  .invoice-po-workflow.invoice-po-workflow--compact {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .invoice-po-workflow.invoice-po-workflow--candidate {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .invoice-po-workflow__head,
  .invoice-po-workflow__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-po-workflow__head > .badge {
    align-self: flex-start;
  }

  .invoice-po-workflow--candidate .invoice-po-workflow__body {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .invoice-po-candidate {
    grid-template-columns: 1fr;
  }

  .invoice-po-comparison__row--head {
    display: none;
  }

  .invoice-po-comparison__row {
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    padding: 8px 10px;
  }

  .invoice-po-comparison__row > span {
    padding: 5px 0;
  }

  .invoice-po-comparison__row > span::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: #9a3412;
    font-size: 10px;
    font-weight: 600;
  }

  .invoice-po-comparison__product,
  .invoice-po-comparison__row > span:last-child {
    grid-column: 1 / -1;
  }

  .po-orders-grid {
    grid-template-columns: 1fr;
  }

  .po-order-card {
    flex-direction: column;
  }

  .po-order-actions {
    align-items: flex-start;
    width: 100%;
  }

  .product-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .product-row.header {
    display: none;
  }

  .smart-order-cell-label {
    display: block;
  }

  .pod-add-row,
  .po-qty-row {
    flex-wrap: wrap;
  }

  .pod-add-row input,
  .po-qty-row input {
    flex: 1 1 110px;
  }

  .pod-add-row .btn,
  .po-qty-row .btn {
    flex: 1 1 100%;
  }

  .po-status-tabs {
    gap: 6px;
  }

  .po-status-tab {
    flex: 1 1 auto;
    justify-content: center;
  }

  .warehouse-panel__head,
  .warehouse-filter-panel,
  .tr-filters-card,
  .wo-filters-card {
    align-items: stretch;
    flex-direction: column;
  }

  .warehouse-filter-panel__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .warehouse-filter-panel--toolbar .warehouse-filter-panel__controls {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .warehouse-filter-select,
  .warehouse-filter-panel .select-trigger,
  .warehouse-filter-panel .date-range-wrapper {
    width: 100%;
    min-width: 100%;
  }

  .tr-card-v3 {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .tr-main-v3,
  .tr-route-v3 {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .tr-number-v3 {
    min-width: 0;
  }

  .tr-route-wh {
    max-width: 100%;
  }

  .tr-actions-v3 {
    justify-content: space-between;
  }

  .wo-table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wo-table-v3 {
    min-width: 860px;
  }

  .writeoff-detail-info-grid {
    grid-template-columns: 1fr;
  }

  .writeoff-detail-meta-row {
    gap: 12px;
    flex-direction: column;
  }

  .writeoff-lines-table thead,
  .writeoff-detail-lines-table thead {
    display: none;
  }

  .writeoff-lines-table,
  .writeoff-lines-table tbody,
  .writeoff-lines-table tr,
  .writeoff-lines-table td,
  .writeoff-detail-lines-table,
  .writeoff-detail-lines-table tbody,
  .writeoff-detail-lines-table tr,
  .writeoff-detail-lines-table td {
    display: block;
    width: 100%;
  }

  .writeoff-lines-table tbody,
  .writeoff-detail-lines-table tbody {
    padding: 12px;
  }

  .writeoff-lines-table tr,
  .writeoff-detail-lines-table tr {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
  }

  .writeoff-lines-table td,
  .writeoff-detail-lines-table td {
    padding: 0 0 10px;
    border: 0;
    text-align: left !important;
  }

  .writeoff-lines-table td::before,
  .writeoff-detail-lines-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: none;
  }

  .writeoff-lines-table td:last-child,
  .writeoff-detail-lines-table td:last-child {
    padding-bottom: 0;
  }

  .writeoff-lines-table td:last-child::before,
  .writeoff-detail-lines-table td:last-child::before {
    display: none;
  }

  .writeoff-lines-table .btn-sm,
  .writeoff-lines-table .writeoff-add-btn,
  .writeoff-lines-table .writeoff-remove-btn,
  .writeoff-detail-lines-table .btn-sm,
  .writeoff-detail-lines-table .writeoff-add-btn,
  .writeoff-detail-lines-table .writeoff-remove-btn {
    width: 100%;
    height: auto;
    justify-content: center;
  }

  .warehouse-source-card__body,
  .transfer-detail-route__inner,
  .transfer-cart-row {
    align-items: stretch;
    flex-direction: column;
  }

  .warehouse-source-card__amount {
    margin-left: 0;
    text-align: left;
  }

  .transfer-route-grid {
    grid-template-columns: 1fr;
  }

  .transfer-route-arrow {
    padding-bottom: 0;
    transform: rotate(90deg);
  }

  .transfer-lines-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .transfer-lines-table {
    min-width: 620px;
  }

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

  .smg-source-card {
    flex-direction: column;
  }

  .smg-source-side {
    justify-content: flex-start;
  }

  .uom-review-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .uom-review-search {
    max-width: none;
  }

  .product-detail-v3__general-grid,
  .product-detail-v3__pricing-form,
  .product-detail-v3__bottom-grid,
  .product-detail-v3__stats {
    grid-template-columns: 1fr !important;
  }

  .stock-filter-search,
  .stock-filter-branch,
  .stock-filter-date {
    width: 100%;
    min-width: 100%;
  }

  .stock-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stock-stat-card {
    gap: 10px;
    padding: 14px;
  }

  .stock-stat-icon {
    width: 40px;
    height: 40px;
  }

  .stock-stat-value {
    font-size: 22px;
  }

  .stock-stat-label {
    font-size: 11px;
  }

  .stock-table-card {
    display: none;
  }

  .stock-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mv3-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .mv3-stat {
    gap: 10px;
    padding: 14px;
  }

  .mv3-stat-icon {
    width: 38px;
    height: 38px;
  }

  .mv3-stat-val {
    font-size: 22px;
  }

  .mv3-day-header,
  .mv3-type-section {
    padding: 14px 16px;
  }

  .mv3-products-grid,
  .mv3-source-products {
    grid-template-columns: 1fr;
  }

  .mv3-day-meta {
    gap: 8px;
    font-size: 12px;
  }

  .mv3-filters {
    padding: 12px;
  }

  .par-card-header {
    padding: 12px 16px;
  }

  .par-table th,
  .par-table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .par-table th:nth-child(2),
  .par-table td:nth-child(2),
  .par-table th:nth-child(5),
  .par-table td:nth-child(5) {
    display: none;
  }

  .par-input {
    width: 60px;
    padding: 4px 6px;
  }

  .add-par-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .add-par-row__product,
  .add-par-row__warehouse {
    grid-column: 1 / -1;
  }

  .add-par-row .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .stock-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stock-stat-card {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    text-align: center;
  }

  .stock-stat-icon {
    width: 36px;
    height: 36px;
  }

  .stock-stat-value {
    font-size: 20px;
  }

  .mv3-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mv3-stat {
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    text-align: center;
  }

  .mv3-stat-icon {
    width: 36px;
    height: 36px;
  }

  .mv3-stat-val {
    font-size: 20px;
  }

  .mv3-day-date {
    font-size: 14px;
  }

  .mv3-chip {
    padding: 2px 8px;
    font-size: 11px;
  }

  .par-table th:nth-child(3),
  .par-table td:nth-child(3) {
    display: none;
  }
}


/* Inventory home */
.inventory-home {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
  .inventory-section-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .inventory-section-tab {
    min-width: 0;
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }
  .inventory-section-tab:hover {
    background: #ffffff;
    color: #1d4ed8;
  }
  .inventory-section-tab.is-active {
    background: #eff6ff;
    color: #2563eb;
    box-shadow: inset 0 0 0 1px #bfdbfe;
  }
  .inventory-section-tab__label {
    font-size: 13px;
    line-height: 1.15;
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .inventory-home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .inventory-workspace-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .inventory-queue-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .inventory-queue-main,
  .inventory-queue-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
  }
  .inventory-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 18px;
  }
  .inventory-quick-action {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  .inventory-quick-action:hover {
    border-color: #bfdbfe;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
  }
  .inventory-quick-action__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    flex: 0 0 auto;
  }
  .inventory-quick-action__title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
  }
  .inventory-quick-action__meta {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
  }
  .inventory-section-note {
    margin: 14px 18px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
  }
  .inventory-master-board-table .inventory-home-table {
    min-width: 900px;
  }
  .inventory-home-main,
  .inventory-home-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
  }
.inventory-home-section {
  overflow: hidden;
}
.inventory-home-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.inventory-home-section__title {
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
  color: #0f172a;
}
.inventory-home-section__meta {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}
.inventory-home-section__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inventory-home-section__body {
  padding: 0;
}
.inventory-home-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.inventory-home-toolbar__filters,
.inventory-home-toolbar__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.inventory-home-toolbar__summary {
  color: #64748b;
  font-size: 13px;
}
.inventory-home-table-wrap {
  overflow-x: auto;
}
.inventory-home-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.inventory-home-table--sessions {
  min-width: 960px;
  table-layout: fixed;
}
.inventory-home-table--sessions th:nth-child(1),
.inventory-home-table--sessions td:nth-child(1) {
  width: 32%;
}
.inventory-home-table--sessions th:nth-child(2),
.inventory-home-table--sessions td:nth-child(2) {
  width: 16%;
}
.inventory-home-table--sessions th:nth-child(3),
.inventory-home-table--sessions td:nth-child(3) {
  width: 12%;
}
.inventory-home-table--sessions th:nth-child(4),
.inventory-home-table--sessions td:nth-child(4) {
  width: 18%;
}
.inventory-home-table--sessions th:nth-child(5),
.inventory-home-table--sessions td:nth-child(5) {
  width: 10%;
}
.inventory-home-table--sessions th:nth-child(6),
.inventory-home-table--sessions td:nth-child(6) {
  width: 12%;
}
.inventory-report-session-table {
  min-width: 1160px;
  table-layout: fixed;
}
.inventory-report-session-table th:nth-child(1),
.inventory-report-session-table td:nth-child(1) {
  width: 10%;
}
.inventory-report-session-table th:nth-child(2),
.inventory-report-session-table td:nth-child(2) {
  width: 27%;
}
.inventory-report-session-table th:nth-child(3),
.inventory-report-session-table td:nth-child(3) {
  width: 13%;
}
.inventory-report-session-table th:nth-child(4),
.inventory-report-session-table td:nth-child(4) {
  width: 11%;
}
.inventory-report-session-table th:nth-child(5),
.inventory-report-session-table td:nth-child(5) {
  width: 15%;
}
.inventory-report-session-table th:nth-child(6),
.inventory-report-session-table td:nth-child(6) {
  width: 13%;
}
.inventory-report-session-table th:nth-child(7),
.inventory-report-session-table td:nth-child(7) {
  width: 11%;
}
.inventory-home-table thead {
  background: #f8fafc;
}
.inventory-home-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}
.inventory-home-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.inventory-home-table tbody tr {
  transition: background 0.15s ease;
  cursor: pointer;
}
.inventory-home-table tbody tr:hover {
  background: #f8fafc;
}
.inventory-home-table tbody tr:last-child td {
  border-bottom: none;
}
.inventory-home-row-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.inventory-home-row-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.inventory-home-row-tags {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inventory-home-compact-list {
  display: flex;
  flex-direction: column;
}
.inventory-home-compact-item {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease;
}
.inventory-home-compact-item:last-child {
  border-bottom: none;
}
.inventory-home-compact-item:hover {
  background: #f8fafc;
}
.inventory-home-compact-item__top,
.inventory-home-compact-item__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.inventory-home-compact-item__title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.inventory-home-compact-item__meta,
.inventory-home-compact-item__note {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
.inventory-home-compact-item__actions {
  margin-top: 12px;
}
.inv-home-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inv-home-progress-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
.inv-home-progress-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inv-home-progress-track {
  flex: 1;
  min-width: 96px;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.inv-home-progress-track > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.inv-home-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
.inv-home-empty {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}
.inv-home-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #475569;
}
.inv-home-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}
.inv-home-empty-copy {
  max-width: 560px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}
.inv-home-empty-actions {
  margin-top: 4px;
}
.inventory-session-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.inventory-session-actions .btn {
  min-width: 0;
  white-space: nowrap;
}
.inventory-report-session-table .inventory-session-actions {
  min-width: 112px;
}
.inventory-report-session-table .inventory-session-action-btn {
  min-width: 104px;
  justify-content: center;
}
  @media (max-width: 1200px) {
    .inventory-home-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .inventory-queue-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (max-width: 900px) {
    .inventory-section-tabs {
      width: 100%;
    }
    .inventory-section-tab {
      flex: 0 0 auto;
    }
    .inventory-home-table {
      min-width: 640px;
    }
    .inventory-home-table--sessions {
      min-width: 900px;
    }
    .inventory-report-session-table {
      min-width: 1080px;
    }
    .inventory-quick-actions {
      grid-template-columns: minmax(0, 1fr);
    }
    .inventory-home-toolbar,
    .inventory-home-toolbar__filters,
    .inventory-home-toolbar__summary {
      align-items: flex-start;
    }
  }
@media (max-width: 640px) {
  .inventory-home-section__head,
  .inventory-home-toolbar,
  .inventory-home-compact-item {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* Inventory subpage legacy styles moved from app.js */
/* moved from app.js around line 61018 */
.inv-template-page { display:flex; flex-direction:column; gap:24px; }
.inv-template-layout {
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(320px, 380px);
  gap:28px;
}
.inv-template-main,
.inv-template-side {
  display:flex;
  flex-direction:column;
  gap:20px;
}
.inv-template-card,
.inv-template-side-card {
  background:white;
  border-radius:20px;
  border:1px solid #e2e8f0;
  box-shadow:0 8px 30px rgba(15, 23, 42, 0.05);
  overflow:hidden;
}
.inv-template-card-head {
  padding:22px 24px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.inv-template-card-title { font-size:18px; font-weight:700; color:#0f172a; }
.inv-template-card-meta { margin-top:4px; font-size:13px; color:#64748b; line-height:1.5; }
.inv-template-card-body { padding:20px 24px 24px; display:flex; flex-direction:column; gap:18px; }
.inv-template-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.inv-template-field label {
  display:block;
  margin-bottom:8px;
  font-size:12px;
  text-transform: none;
  font-weight:700;
  color:#64748b;
}
.inv-template-field .pure-dropdown,
.inv-template-field .pure-dropdown-trigger {
  width:100%;
}
.inv-template-input,
.inv-template-textarea,
.inv-template-number {
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  font-family:inherit;
  background:white;
}
.inv-template-textarea { min-height:96px; resize:vertical; }
.inv-template-schedule {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.inv-template-schedule label {
  border:1px solid #cbd5e1;
  border-radius:16px;
  padding:14px 16px;
  background:#f8fafc;
  cursor:pointer;
}
.inv-template-schedule input {
  margin-right:8px;
  accent-color:#2563eb;
}
.inv-template-schedule strong {
  display:block;
  font-size:14px;
  color:#0f172a;
}
.inv-template-schedule span {
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#64748b;
  line-height:1.5;
}
.inv-template-inline-grid {
  display:grid;
  grid-template-columns:140px minmax(0, 1fr);
  gap:12px;
}
.inv-template-helper {
  font-size:12px;
  color:#64748b;
  line-height:1.5;
}
.inv-template-prep-preview {
  border:1px solid #bfdbfe;
  border-radius:14px;
  padding:16px;
  background:#eff6ff;
  color:#1e3a8a;
}
.inv-template-prep-preview.is-empty {
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-color:#cbd5e1;
  background:#f8fafc;
  color:#475569;
}
.inv-template-prep-preview.is-clear {
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}
.inv-template-prep-preview.is-error {
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-color:#fecaca;
  background:#fef2f2;
  color:#991b1b;
}
.inv-template-prep-preview strong,
.inv-template-prep-preview span {
  display:block;
}
.inv-template-prep-preview > div > span,
.inv-template-prep-preview-head > div > span {
  margin-top:4px;
  font-size:12px;
  line-height:1.5;
  color:inherit;
  opacity:.82;
}
.inv-template-prep-preview-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.inv-template-prep-preview-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}
.inv-template-prep-preview-row {
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255, 255, 255, .72);
  font-size:13px;
  color:#1e3a8a;
}
.inv-template-prep-preview-row small {
  color:#475569;
  font-size:11px;
  font-weight:700;
}
.inv-template-search-empty,
.inv-template-selected-empty,
.inv-template-run-empty {
  border:1px dashed #cbd5e1;
  border-radius:14px;
  padding:16px;
  background:#f8fafc;
  font-size:13px;
  color:#64748b;
  display:flex;
  align-items:center;
  gap:10px;
}
.inv-template-search-results,
.inv-template-selected-list,
.inv-template-runs {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.inv-template-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  font-size:12px;
  font-weight:800;
  color:#475569;
}
.inv-template-search-row,
.inv-template-selected-row,
.inv-template-run {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:white;
}
.inv-template-run {
  cursor:pointer;
  text-align:left;
}
.inv-template-run:hover {
  background:#f8fafc;
  border-color:#cbd5e1;
}
.inv-template-search-copy,
.inv-template-selected-copy {
  min-width:0;
  flex:1;
}
.inv-template-search-name,
.inv-template-selected-name,
.inv-template-run-title {
  font-size:14px;
  font-weight:700;
  color:#0f172a;
}
.inv-template-search-meta,
.inv-template-selected-meta,
.inv-template-run-meta {
  margin-top:4px;
  font-size:12px;
  color:#64748b;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.inv-template-selected-order {
  width:32px;
  height:32px;
  border-radius:10px;
  background:#eff6ff;
  color:#1d4ed8;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.inv-template-selected-actions {
  display:flex;
  align-items:center;
  gap:8px;
}
.inv-template-icon-btn {
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:white;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#334155;
}
.inv-template-icon-btn:hover:not(:disabled) {
  background:#f8fafc;
}
.inv-template-icon-btn:disabled {
  opacity:0.4;
  cursor:not-allowed;
}
.inv-template-icon-btn.danger {
  color:#dc2626;
}
.inv-template-side-card {
  padding:18px 20px;
  gap:0;
}
.inv-template-side-title {
  font-size:15px;
  font-weight:700;
  color:#0f172a;
}
.inv-template-side-copy {
  margin-top:8px;
  font-size:13px;
  color:#64748b;
  line-height:1.6;
}
.inv-template-side-metric {
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #f1f5f9;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:#64748b;
}
.inv-template-side-metric strong {
  color:#0f172a;
  text-align:right;
}
.inv-template-run-side {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  font-size:12px;
  color:#64748b;
  white-space:nowrap;
}
.inv-template-run-status {
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.inv-template-run-status.open { background:#fef3c7; color:#b45309; }
.inv-template-run-status.submitted { background:#dbeafe; color:#1d4ed8; }
.inv-template-run-status.completed { background:#d1fae5; color:#047857; }
.inv-template-run-status.canceled { background:#fee2e2; color:#dc2626; }
.inv-template-footer {
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:0 0 8px;
}
@media (max-width: 980px) {
  .inv-template-layout { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .inv-template-grid,
  .inv-template-schedule,
  .inv-template-inline-grid {
    grid-template-columns:1fr;
  }
  .inv-template-search-row,
  .inv-template-selected-row,
  .inv-template-run {
    align-items:flex-start;
    flex-direction:column;
  }
  .inv-template-prep-preview-head {
    flex-direction:column;
  }
  .inv-template-prep-preview-row {
    grid-template-columns:auto minmax(0, 1fr);
  }
  .inv-template-prep-preview-row small {
    grid-column:2;
  }
  .inv-template-run-side,
  .inv-template-selected-actions {
    align-items:flex-start;
  }
  .inv-template-footer {
    flex-direction:column-reverse;
  }
  .inv-template-footer .btn {
    width:100%;
  }
}

/* moved from app.js around line 61551 */
.new-inv-v3 {
max-width: 480px;
margin: 40px auto;
      }
      .new-inv-card {
background: white;
border-radius: 20px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
overflow: hidden;
      }
      .new-inv-body { padding: 28px; }
      .new-inv-field { margin-bottom: 20px; }
      .new-inv-label {
display: block;
font-size: 13px;
font-weight: 600;
color: #64748b;
margin-bottom: 8px;
text-transform: none;
      }
      .new-inv-input {
width: 100%;
padding: 14px 16px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 15px;
transition: all 0.2s;
      }
      .new-inv-input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
outline: none;
      }
      .new-inv-checkbox {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #f8fafc;
border-radius: 12px;
cursor: pointer;
      }
      .new-inv-checkbox input { width: 18px; height: 18px; accent-color: #3b82f6; }
      .new-inv-checkbox span { font-size: 14px; color: #475569; }
      .new-inv-footer {
padding: 20px 28px;
background: #f8fafc;
display: flex;
gap: 12px;
      }
      .new-inv-btn {
flex: 1;
padding: 14px 20px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s;
      }
      .new-inv-btn.primary {
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: white;
      }
      .new-inv-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3); }
      .new-inv-btn.secondary {
background: white;
color: #64748b;
border: 2px solid #e2e8f0;
      }
      .new-inv-btn.secondary:hover { background: #f1f5f9; }

/* moved from app.js around line 61741 */
.inv-batch-new { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; }
      .inv-batch-panel {
background: white;
border-radius: 20px;
border: 1px solid #e2e8f0;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
overflow: hidden;
      }
      .inv-batch-panel__hero {
padding: 24px 28px;
background: linear-gradient(135deg, #0f172a, #334155);
color: white;
      }
      .inv-batch-panel__hero h2 { margin: 0; font-size: 22px; font-weight: 700; }
      .inv-batch-panel__hero p { margin: 10px 0 0; color: rgba(255,255,255,0.78); font-size: 14px; line-height: 1.6; }
      .inv-batch-panel__body { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
      .inv-batch-field label { display: block; margin-bottom: 8px; font-size: 12px; text-transform: none; font-weight: 700; color: #64748b; }
      .inv-batch-input, .inv-batch-textarea {
width: 100%;
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 12px 14px;
font-size: 14px;
font-family: inherit;
      }
      .inv-batch-textarea { min-height: 110px; resize: vertical; }
      .inv-batch-switch {
display: flex;
gap: 10px;
flex-wrap: wrap;
      }
      .inv-batch-switch label {
flex: 1;
min-width: 160px;
border: 1px solid #cbd5e1;
border-radius: 14px;
padding: 14px 16px;
cursor: pointer;
background: #f8fafc;
      }
      .inv-batch-switch input { margin-right: 8px; accent-color: #2563eb; }
      .inv-batch-check {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
background: #f8fafc;
      }
      .inv-batch-check input { accent-color: #2563eb; }
      .inv-batch-side-note {
border-radius: 16px;
background: #eff6ff;
border: 1px solid #bfdbfe;
padding: 16px;
color: #1e3a8a;
font-size: 13px;
line-height: 1.6;
      }
      .inv-batch-warehouses {
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 18px;
      }
      .inv-batch-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
      }
      .inv-batch-toolbar h3 { margin: 0; font-size: 18px; color: #0f172a; }
      .inv-batch-toolbar span { font-size: 13px; color: #64748b; }
      .inv-batch-branch {
border: 1px solid #e2e8f0;
border-radius: 18px;
overflow: hidden;
      }
      .inv-batch-branch__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: #f8fafc;
      }
      .inv-batch-branch__title { font-size: 15px; font-weight: 700; color: #0f172a; }
      .inv-batch-branch__meta { font-size: 12px; color: #64748b; }
      .inv-batch-branch__list { padding: 12px 16px 16px; display: grid; gap: 10px; }
      .inv-batch-wh {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 12px 14px;
      }
      .inv-batch-wh__copy { display: flex; flex-direction: column; gap: 4px; }
      .inv-batch-wh__name { font-size: 14px; font-weight: 600; color: #0f172a; }
      .inv-batch-wh__meta { font-size: 12px; color: #64748b; }
      .inv-batch-footer {
display: flex;
gap: 12px;
justify-content: flex-end;
padding: 0 28px 28px;
      }
      @media (max-width: 920px) {
.inv-batch-new { grid-template-columns: 1fr; }
      }

/* Inventory Run creation */
.inventory-run-create {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.inventory-run-create__layout {
  display: grid;
  grid-template-columns: minmax(620px, 1.35fr) minmax(440px, .85fr);
  gap: var(--space-5);
  align-items: start;
}

.inventory-run-create__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.inventory-run-card,
.inventory-run-plan-card {
  --erp-panel-bg: #ffffff;
  padding: 0;
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
}

.inventory-run-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-gray-100);
}

.inventory-run-step {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--color-gray-300);
  background: #ffffff;
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.inventory-run-card__head h2,
.inventory-run-plan-card__head h2 {
  margin: 0;
  color: var(--color-gray-900);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.35;
}

.inventory-run-card__head p {
  margin: var(--space-1) 0 0;
  color: var(--color-gray-500);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.inventory-run-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-5);
}

.inventory-run-purpose {
  min-height: 82px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--color-gray-900);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  gap: var(--space-3);
  align-items: start;
  text-align: left;
  cursor: pointer;
}

.inventory-run-purpose:hover {
  border-color: var(--color-primary-300);
  background: #ffffff;
}

.inventory-run-purpose.is-selected {
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: none;
}

.inventory-run-purpose__icon,
.inventory-run-warehouse__icon,
.inventory-run-task__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}

.inventory-run-purpose.is-selected .inventory-run-purpose__icon {
  color: var(--color-primary);
}

.inventory-run-purpose__icon svg,
.inventory-run-warehouse__icon svg,
.inventory-run-task__icon svg,
.inventory-run-plan-summary__icon svg,
.inventory-run-issue > svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.25;
}

.inventory-run-create svg,
.inventory-posting-readiness svg,
.inv-master svg,
.inv-ov svg {
  stroke-width: 1.25;
}

.inventory-run-create .erp-page-header__icon svg,
.inv-master .erp-page-header__icon svg,
.inv-ov .erp-page-header__icon svg {
  stroke-width: 1.25;
}

.inventory-run-create .checkbox-box svg {
  stroke-width: 2;
}

.inventory-run-purpose strong,
.inventory-run-purpose small {
  display: block;
}

.inventory-run-purpose strong {
  font-size: var(--font-size-base);
  font-weight: 600;
}

.inventory-run-purpose small {
  margin-top: var(--space-1);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.inventory-run-purpose__check {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.inventory-run-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.inventory-run-field > label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.inventory-run-field > label span {
  color: var(--color-gray-400);
  font-weight: 500;
}

.inventory-run-input,
.inventory-run-textarea {
  width: 100%;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--color-gray-900);
  padding: 11px 12px;
  font: inherit;
}

.inventory-run-input {
  min-height: 42px;
}

.inventory-run-textarea {
  min-height: 84px;
  resize: vertical;
}

.inventory-run-input:focus,
.inventory-run-textarea:focus {
  outline: 2px solid var(--color-primary-100);
  border-color: var(--color-primary);
}

.inventory-run-scope-empty,
.inventory-run-auto-note {
  min-height: 64px;
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  line-height: 1.45;
}

.inventory-run-scope-empty svg,
.inventory-run-auto-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.inventory-run-scope-empty.is-warning {
  border-color: var(--color-warning);
  background: #ffffff;
  color: var(--color-warning-dark);
}

.inventory-run-scope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.inventory-run-scope-head > div > strong,
.inventory-run-scope-head > div > span {
  display: block;
}

.inventory-run-scope-head > div > strong {
  color: var(--color-gray-800);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.inventory-run-scope-head > div > span {
  margin-top: 2px;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
}

.inventory-run-select-all,
.inventory-run-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.inventory-run-select-all {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.inventory-run-select-all input,
.inventory-run-check input,
.inventory-run-warehouse input {
  display: none;
}

.inventory-run-warehouse-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.inventory-run-warehouse {
  min-width: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: #ffffff;
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.inventory-run-warehouse.is-selected {
  border-color: var(--color-primary);
  background: #ffffff;
}

.inventory-run-warehouse strong,
.inventory-run-warehouse small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-run-warehouse strong {
  color: var(--color-gray-800);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.inventory-run-warehouse small {
  margin-top: 2px;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
}

.inventory-run-auto-note {
  min-height: auto;
  margin-top: var(--space-3);
  border-style: solid;
  border-color: var(--color-gray-200);
  background: #ffffff;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

.inventory-run-check {
  align-items: flex-start;
  padding: var(--space-1) 0;
}

.inventory-run-check strong,
.inventory-run-check small {
  display: block;
}

.inventory-run-check strong {
  color: var(--color-gray-800);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.inventory-run-check small {
  margin-top: 3px;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.inventory-run-check--danger {
  margin-top: var(--space-3);
  color: var(--color-warning-dark);
}

.inventory-run-advanced {
  border-top: 1px solid var(--color-gray-100);
  padding-top: var(--space-3);
}

.inventory-run-advanced summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.inventory-run-advanced summary::-webkit-details-marker {
  display: none;
}

.inventory-run-advanced summary svg {
  width: 16px;
  height: 16px;
}

.inventory-run-create__plan {
  position: sticky;
  top: var(--space-4);
  min-width: 0;
}

.inventory-run-plan-card__head {
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
}

.inventory-run-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

#inventoryRunPlanStatus {
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  background: #ffffff;
  color: var(--color-gray-600);
  padding: 5px 9px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

#inventoryRunPlanStatus.is-ready {
  border-color: var(--color-success-dark);
  background: #ffffff;
  color: var(--color-success-dark);
}

#inventoryRunPlanStatus.has-blockers {
  border-color: var(--color-danger-dark);
  background: #ffffff;
  color: var(--color-danger-dark);
}

.inventory-run-plan-empty {
  min-height: 260px;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.inventory-run-plan-empty__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  margin-bottom: var(--space-3);
}

.inventory-run-plan-empty strong {
  color: var(--color-gray-800);
  font-size: var(--font-size-base);
  font-weight: 600;
}

.inventory-run-plan-empty small {
  max-width: 300px;
  margin-top: var(--space-2);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.inventory-run-spinner {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-3);
  border: 3px solid var(--color-primary-100);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: inventory-run-spin .8s linear infinite;
}

@keyframes inventory-run-spin {
  to { transform: rotate(360deg); }
}

.inventory-run-plan-summary {
  margin: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.inventory-run-plan-summary.is-ready {
  border-color: var(--color-success);
  background: #ffffff;
  color: var(--color-success-dark);
}

.inventory-run-plan-summary.has-blockers {
  border-color: var(--color-danger);
  background: #ffffff;
  color: var(--color-danger-dark);
}

.inventory-run-plan-summary__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.inventory-run-plan-summary strong,
.inventory-run-plan-summary span {
  display: block;
}

.inventory-run-plan-summary strong {
  font-size: var(--font-size-base);
  font-weight: 600;
}

.inventory-run-plan-summary span {
  margin-top: 2px;
  font-size: var(--font-size-xs);
}

.inventory-run-plan-section {
  padding: 0 var(--space-4) var(--space-4);
}

.inventory-run-plan-section__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--color-gray-800);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.inventory-run-plan-section__title small {
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.inventory-run-task-list,
.inventory-run-issues {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inventory-run-issues {
  padding: 0 var(--space-4) var(--space-4);
}

.inventory-run-plan-section .inventory-run-issues {
  padding: 0;
}

.inventory-run-task {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.inventory-run-task__icon.is-preps {
  color: var(--color-warning-dark);
}

.inventory-run-task__copy {
  min-width: 0;
}

.inventory-run-task__copy strong,
.inventory-run-task__copy span,
.inventory-run-task__copy small {
  display: block;
}

.inventory-run-task__copy strong {
  overflow: hidden;
  color: var(--color-gray-800);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-run-task__copy span,
.inventory-run-task__copy small {
  margin-top: 2px;
  color: var(--color-gray-500);
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.inventory-run-issue {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2);
  border: 1px solid;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.inventory-run-issue > svg {
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.inventory-run-issue.is-blocker {
  border-color: var(--color-danger);
  background: #ffffff;
  color: var(--color-danger-dark);
}

.inventory-run-issue.is-warning {
  border-color: var(--color-warning);
  background: #ffffff;
  color: var(--color-warning-dark);
}

.inventory-run-issue strong,
.inventory-run-issue span {
  display: block;
}

.inventory-run-issue strong {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.inventory-run-issue span {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.inventory-run-issue__action {
  margin-top: var(--space-3);
  min-height: 36px;
}

.inventory-run-issue__action svg {
  width: 14px;
  height: 14px;
}

.inventory-run-plan-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--color-gray-100);
  background: #ffffff;
}

.inventory-run-plan-card__footer .btn {
  min-height: 42px;
}

.inventory-posting-readiness {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: 10px;
  background: #ffffff;
  padding: var(--space-4);
  color: var(--color-danger-dark);
}

.inventory-posting-readiness__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inventory-posting-readiness__icon svg {
  width: 20px;
  height: 20px;
}

.inventory-posting-readiness__copy strong,
.inventory-posting-readiness__copy span,
.inventory-posting-readiness__copy small {
  display: block;
}

.inventory-posting-readiness__copy strong {
  color: var(--color-gray-900);
  font-size: var(--font-size-base);
}

.inventory-posting-readiness__copy span,
.inventory-posting-readiness__copy small {
  margin-top: 3px;
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.inventory-posting-readiness__copy small {
  color: var(--color-gray-600);
}

.inventory-review-column {
  width: 280px;
  text-align: left;
}

.inventory-review-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.inventory-review-approved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-success-dark);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}

.inventory-review-approved svg {
  width: 14px;
  height: 14px;
}

.inventory-review-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inventory-review-editor[hidden],
.inventory-review-summary[hidden] {
  display: none;
}

.inventory-review-editor__row {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 44px 44px;
  gap: var(--space-1);
}

.inventory-review-editor__row .btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

.inventory-review-editor__save {
  border: 1px solid var(--color-success-light);
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.inventory-review-editor__save:hover:not(:disabled) {
  border-color: var(--color-success);
  background: #dcfce7;
  color: #166534;
}

.inventory-review-editor .reviewer-qty-input,
.inventory-review-reason {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--color-gray-900);
  padding: 7px 9px;
  font: inherit;
}

.inventory-review-reason.is-invalid {
  border-color: var(--color-danger);
  outline: 2px solid var(--color-danger-light);
}

.inventory-variance-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 92px;
}

.inventory-ai-row-action {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-300);
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-primary, #2563eb);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.inventory-ai-row-action:hover:not(:disabled),
.inventory-ai-row-action:focus-visible {
  border-color: var(--color-primary, #2563eb);
  background: var(--color-gray-50, #f8fafc);
  color: var(--color-primary-dark, #1d4ed8);
}

.inventory-ai-row-action:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .2);
  outline-offset: 2px;
}

.inventory-ai-row-action:disabled {
  cursor: wait;
  opacity: .58;
}

.inventory-ai-row-action svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.75;
}

.inventory-ai-row-action.has-analysis {
  border-color: rgba(37, 99, 235, .42);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.inventory-ai-row-action.has-analysis::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -22px -22px 0 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--color-primary, #2563eb);
}

.inventory-ai-modal .erp-dynamic-modal__content {
  width: min(1040px, calc(100vw - 32px));
  max-width: min(var(--erp-dynamic-modal-max-width, 1040px), calc(100vw - 32px));
  max-height: calc(100vh - 24px);
}

.inventory-ai-modal .erp-dynamic-modal__header {
  padding: 24px 30px;
}

.inventory-ai-modal .erp-dynamic-modal__title {
  font-size: 24px;
  font-weight: 650;
}

.inventory-ai-modal .erp-dynamic-modal__close {
  width: 44px;
  height: 44px;
  font-size: 24px;
}

.inventory-ai-modal .erp-dynamic-modal__body {
  padding: 24px 30px 30px;
}

.inventory-ai-loading {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-gray-600);
  font-size: 15px;
}

.inventory-ai-loading svg,
.inventory-ai-spin {
  width: 18px;
  height: 18px;
  animation: inventory-ai-spin 900ms linear infinite;
}

@keyframes inventory-ai-spin {
  to { transform: rotate(360deg); }
}

.inventory-ai-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--color-gray-900);
}

.inventory-ai-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.inventory-ai-snapshot > div {
  min-width: 0;
  padding: 17px 20px;
  border-right: 1px solid var(--color-gray-200);
}

.inventory-ai-snapshot > div:last-child {
  border-right: 0;
}

.inventory-ai-snapshot span,
.inventory-ai-snapshot strong {
  display: block;
}

.inventory-ai-snapshot span {
  color: var(--color-gray-500);
  font-size: 13px;
  font-weight: 600;
}

.inventory-ai-snapshot strong {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 650;
}

.inventory-ai-snapshot strong.is-negative { color: var(--color-danger-dark, #b91c1c); }
.inventory-ai-snapshot strong.is-positive { color: var(--color-success-dark, #047857); }

.inventory-ai-record-math,
.inventory-ai-related-records,
.inventory-ai-answer,
.inventory-ai-follow-up,
.inventory-ai-usage {
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: #ffffff;
  padding: 18px 20px;
}

.inventory-ai-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inventory-ai-section-head > div > span,
.inventory-ai-section-head > div > small {
  display: block;
}

.inventory-ai-section-head > div > span {
  font-size: 16px;
  font-weight: 650;
}

.inventory-ai-section-head > div > small,
.inventory-ai-muted {
  margin-top: 3px;
  color: var(--color-gray-500);
  font-size: 13px;
  line-height: 1.5;
}

.inventory-ai-equation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: var(--color-gray-50, #f8fafc);
}

.inventory-ai-equation > span {
  min-width: 0;
  color: var(--color-gray-500);
  font-size: 13px;
}

.inventory-ai-equation strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-gray-900);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-ai-equation svg {
  width: 17px;
  height: 17px;
  color: var(--color-gray-400);
}

.inventory-ai-movement-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.inventory-ai-movement-types > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--color-gray-200);
  border-radius: 7px;
  color: var(--color-gray-700);
  font-size: 13px;
}

.inventory-ai-movement-types b {
  font-weight: 600;
  text-transform: capitalize;
}

.inventory-ai-limit {
  display: flex;
  gap: 7px;
  margin-top: 12px;
  color: var(--color-warning-dark, #92400e);
  font-size: 13px;
  line-height: 1.5;
}

.inventory-ai-limit svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.inventory-ai-record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.inventory-ai-record-row:last-of-type { border-bottom: 0; }
.inventory-ai-record-row > div { min-width: 0; }
.inventory-ai-record-row strong,
.inventory-ai-record-row span,
.inventory-ai-record-row small { display: block; }
.inventory-ai-record-row strong { font-size: 15px; }
.inventory-ai-record-row span,
.inventory-ai-record-row small {
  margin-top: 2px;
  color: var(--color-gray-500);
  font-size: 13px;
  line-height: 1.5;
}

.inventory-ai-what-if {
  padding-top: 11px;
  border-top: 1px solid var(--color-gray-200);
}

.inventory-ai-what-if span,
.inventory-ai-what-if strong,
.inventory-ai-what-if small { display: block; }
.inventory-ai-what-if span { color: var(--color-gray-500); font-size: 13px; }
.inventory-ai-what-if strong { margin-top: 4px; font-size: 15px; }
.inventory-ai-what-if small { margin-top: 4px; color: var(--color-gray-500); font-size: 13px; line-height: 1.5; }

.inventory-ai-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inventory-ai-answer--follow-up { border-left: 3px solid var(--color-primary, #2563eb); }
.inventory-ai-answer__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid currentColor;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 650;
}
.inventory-ai-answer__status svg { width: 13px; height: 13px; }
.inventory-ai-answer__status--blue { color: #1d4ed8; }
.inventory-ai-answer__status--amber { color: #a16207; }
.inventory-ai-answer__status--slate { color: #475569; }
.inventory-ai-answer h4 { margin: 12px 0 0; font-size: 19px; line-height: 1.4; }
.inventory-ai-answer > p { margin: 7px 0 0; color: var(--color-gray-700); font-size: 15px; line-height: 1.65; }

.inventory-ai-question {
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
  font-size: 14px;
  line-height: 1.5;
}
.inventory-ai-question span { display: block; margin-bottom: 4px; color: var(--color-gray-500); font-size: 12px; font-weight: 650; }

.inventory-ai-facts,
.inventory-ai-related-copy {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.inventory-ai-fact,
.inventory-ai-related-copy > .inventory-ai-drilldown {
  padding: 13px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
}

.inventory-ai-fact > span,
.inventory-ai-fact > strong,
.inventory-ai-related-copy strong,
.inventory-ai-related-copy span,
.inventory-ai-related-copy small { display: block; }
.inventory-ai-fact > span { color: var(--color-gray-500); font-size: 13px; }
.inventory-ai-fact > strong,
.inventory-ai-related-copy strong { margin-top: 3px; font-size: 15px; line-height: 1.45; }
.inventory-ai-related-copy span,
.inventory-ai-related-copy small { margin-top: 4px; color: var(--color-gray-600); font-size: 13px; line-height: 1.5; }

.inventory-ai-drilldown {
  display: block;
  width: 100%;
  appearance: none;
  text-align: left;
  font: inherit;
  color: inherit;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.inventory-ai-drilldown:hover,
.inventory-ai-drilldown:focus-visible {
  border-color: rgba(37, 99, 235, .58);
  box-shadow: 0 5px 18px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

.inventory-ai-drilldown:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .16);
  outline-offset: 2px;
}

.inventory-ai-drilldown__hint {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px !important;
  padding-top: 9px;
  border-top: 1px solid var(--color-gray-100);
  color: var(--color-primary, #2563eb) !important;
  font-size: 12px !important;
  font-weight: 650;
}

.inventory-ai-drilldown__hint svg {
  width: 15px;
  height: 15px;
}

.inventory-ai-next-checks { margin-top: 12px; }
.inventory-ai-next-checks > span { color: var(--color-gray-500); font-size: 12px; font-weight: 650; }
.inventory-ai-next-checks ul { margin: 6px 0 0; padding-left: 18px; }
.inventory-ai-next-checks li { margin-top: 6px; color: var(--color-gray-700); font-size: 14px; line-height: 1.55; }

.inventory-ai-follow-up label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 650; }
.inventory-ai-follow-up > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.inventory-ai-follow-up input {
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--color-gray-300);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--color-gray-900);
  font: inherit;
}
.inventory-ai-follow-up > small { display: block; margin-top: 8px; color: var(--color-gray-500); font-size: 12px; line-height: 1.5; }

.inventory-ai-usage {
  display: flex;
  align-items: center;
  gap: 14px;
}
.inventory-ai-usage__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: 10px;
  color: var(--color-primary, #2563eb);
}
.inventory-ai-usage__icon svg { width: 20px; height: 20px; }
.inventory-ai-usage > div { min-width: 0; }
.inventory-ai-usage > div > span,
.inventory-ai-usage > div > strong,
.inventory-ai-usage > div > small { display: block; }
.inventory-ai-usage > div > span { color: var(--color-gray-500); font-size: 13px; }
.inventory-ai-usage > div > strong { margin-top: 3px; font-size: 20px; }
.inventory-ai-usage > div > small { margin-top: 3px; color: var(--color-gray-500); font-size: 12px; line-height: 1.45; }

.inventory-ai-confirmation {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
  padding: 20px 0;
}

.inventory-ai-confirmation--inline {
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}

.inventory-ai-confirmation__head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.inventory-ai-confirmation__icon {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, .28);
  border-radius: 14px;
  color: var(--color-primary, #2563eb);
}

.inventory-ai-confirmation__icon svg { width: 25px; height: 25px; }
.inventory-ai-confirmation__head strong,
.inventory-ai-confirmation__head span { display: block; }
.inventory-ai-confirmation__head strong { font-size: 22px; line-height: 1.3; }
.inventory-ai-confirmation__head span { margin-top: 5px; color: var(--color-gray-600); font-size: 14px; line-height: 1.55; }

.inventory-ai-estimate {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  background: #ffffff;
}

.inventory-ai-estimate__total span,
.inventory-ai-estimate__total strong,
.inventory-ai-estimate__total small { display: block; }
.inventory-ai-estimate__total span { color: var(--color-gray-500); font-size: 13px; }
.inventory-ai-estimate__total strong { margin-top: 4px; font-size: 24px; line-height: 1.25; }
.inventory-ai-estimate__total small { margin-top: 5px; color: var(--color-gray-500); font-size: 12px; }
.inventory-ai-estimate__scope { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.inventory-ai-estimate__scope span {
  padding: 7px 10px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  color: var(--color-gray-700);
  font-size: 12px;
  font-weight: 600;
}

.inventory-ai-confirmation__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--color-gray-600);
  font-size: 13px;
  line-height: 1.5;
}
.inventory-ai-confirmation__note svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--color-success-dark, #047857); }
.inventory-ai-confirmation__actions { display: flex; justify-content: flex-end; gap: 10px; }
.inventory-ai-confirmation__actions .btn { min-height: 44px; padding-inline: 18px; font-size: 14px; }

.inventory-ai-estimate-loading {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  color: var(--color-gray-600);
  font-size: 14px;
}

.inventory-ai-thinking {
  display: grid;
  min-height: 320px;
  grid-template-columns: 112px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 22px;
  max-width: 660px;
  margin: 0 auto;
}

.inventory-ai-thinking__visual {
  position: relative;
  width: 104px;
  height: 104px;
}

.inventory-ai-thinking__orbit,
.inventory-ai-thinking__core {
  position: absolute;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.inventory-ai-thinking__orbit { border: 1px solid rgba(37, 99, 235, .3); }
.inventory-ai-thinking__orbit::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary, #2563eb);
  box-shadow: 0 0 14px rgba(37, 99, 235, .48);
}
.inventory-ai-thinking__orbit--outer { width: 100px; height: 100px; animation: inventory-ai-orbit 2.8s linear infinite; }
.inventory-ai-thinking__orbit--inner { width: 72px; height: 72px; animation: inventory-ai-orbit 2s linear infinite reverse; }
.inventory-ai-thinking__core {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-200);
  background: #ffffff;
  color: var(--color-primary, #2563eb);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
  animation: inventory-ai-breathe 1.8s ease-in-out infinite;
}
.inventory-ai-thinking__core svg { width: 22px; height: 22px; }
.inventory-ai-thinking__copy strong,
.inventory-ai-thinking__copy span { display: block; }
.inventory-ai-thinking__copy strong { font-size: 22px; }
.inventory-ai-thinking__copy span { margin-top: 6px; color: var(--color-gray-600); font-size: 14px; line-height: 1.55; }
.inventory-ai-thinking__steps {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.inventory-ai-thinking__steps span {
  padding: 6px 9px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  color: var(--color-gray-500);
  font-size: 12px;
  animation: inventory-ai-step 2.4s ease-in-out infinite;
}
.inventory-ai-thinking__steps span:nth-child(2) { animation-delay: .4s; }
.inventory-ai-thinking__steps span:nth-child(3) { animation-delay: .8s; }
.inventory-ai-thinking--compact {
  min-height: 92px;
  max-width: none;
  grid-template-columns: 58px minmax(0, 1fr);
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
}
.inventory-ai-thinking--compact .inventory-ai-thinking__visual { width: 54px; height: 54px; }
.inventory-ai-thinking--compact .inventory-ai-thinking__orbit--outer { width: 52px; height: 52px; }
.inventory-ai-thinking--compact .inventory-ai-thinking__orbit--inner { width: 38px; height: 38px; }
.inventory-ai-thinking--compact .inventory-ai-thinking__core { width: 27px; height: 27px; }
.inventory-ai-thinking--compact .inventory-ai-thinking__core svg { width: 14px; height: 14px; }
.inventory-ai-thinking--compact .inventory-ai-thinking__copy strong { font-size: 16px; }
.inventory-ai-thinking--compact .inventory-ai-thinking__copy span { font-size: 12px; }
.inventory-ai-thinking--compact .inventory-ai-thinking__steps { display: none; }

@keyframes inventory-ai-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes inventory-ai-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes inventory-ai-step {
  0%, 100% { border-color: var(--color-gray-200); color: var(--color-gray-500); }
  35% { border-color: rgba(37, 99, 235, .5); color: var(--color-primary, #2563eb); }
}

.inventory-ai-error {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
}
.inventory-ai-error svg { width: 22px; height: 22px; color: var(--color-danger); }
.inventory-ai-error strong { font-size: 14px; }
.inventory-ai-error span { max-width: 420px; color: var(--color-gray-600); font-size: 12px; }

.inventory-ai-inline-error {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--color-danger);
  border-radius: 9px;
  background: #ffffff;
  color: var(--color-danger-dark, #b91c1c);
  font-size: 12px;
}
.inventory-ai-inline-error svg { width: 16px; height: 16px; }

.inventory-ai-batch-modal .erp-dynamic-modal__content {
  width: min(1220px, calc(100vw - 32px));
  max-width: min(var(--erp-dynamic-modal-max-width, 1220px), calc(100vw - 32px));
}

.inventory-ai-batch-action {
  position: relative;
}

.inventory-ai-batch-action.has-analysis {
  border-color: rgba(37, 99, 235, .42);
  color: var(--color-primary-dark, #1d4ed8);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.inventory-ai-batch-confirmation {
  max-width: 940px;
  margin-inline: auto;
}

.inventory-ai-batch-thinking {
  min-height: 410px;
}

.inventory-ai-batch-result {
  display: grid;
  gap: 20px;
}

.inventory-ai-batch-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.inventory-ai-batch-overview > div {
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid var(--color-gray-200);
}

.inventory-ai-batch-overview > div:last-child { border-right: 0; }
.inventory-ai-batch-overview span,
.inventory-ai-batch-overview strong { display: block; }
.inventory-ai-batch-overview span { color: var(--color-gray-500); font-size: 13px; }
.inventory-ai-batch-overview strong { margin-top: 5px; color: var(--color-gray-900); font-size: 25px; line-height: 1.1; }

.inventory-ai-batch-brief,
.inventory-ai-batch-list,
.inventory-ai-batch-detail__head,
.inventory-ai-batch-explanation,
.inventory-ai-batch-evidence {
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  background: #ffffff;
  padding: 22px;
}

.inventory-ai-batch-brief h3,
.inventory-ai-batch-detail__head h3,
.inventory-ai-batch-explanation h4 {
  margin: 11px 0 0;
  color: var(--color-gray-900);
  font-size: 22px;
  line-height: 1.35;
}

.inventory-ai-batch-brief p,
.inventory-ai-batch-explanation p {
  margin: 8px 0 0;
  color: var(--color-gray-700);
  font-size: 16px;
  line-height: 1.65;
}

.inventory-ai-batch-brief ul {
  margin: 13px 0 0;
  padding-left: 20px;
  color: var(--color-gray-700);
  font-size: 14px;
  line-height: 1.6;
}

.inventory-ai-batch-list { padding: 0; overflow: hidden; }
.inventory-ai-batch-list > .inventory-ai-section-head { padding: 20px 22px 15px; }

.inventory-ai-batch-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 64px;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  border: 0;
  border-top: 1px solid var(--color-gray-200);
  background: #ffffff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

.inventory-ai-batch-row:hover,
.inventory-ai-batch-row:focus-visible { background: var(--color-gray-50, #f8fafc); }
.inventory-ai-batch-row:focus-visible { outline: 2px solid rgba(37, 99, 235, .22); outline-offset: -2px; }

.inventory-ai-batch-row__status {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #475569;
  background: #f1f5f9;
}

.inventory-ai-batch-row__status svg { width: 16px; height: 16px; }
.inventory-ai-batch-row__status--emerald { color: #047857; background: #ecfdf5; }
.inventory-ai-batch-row__status--amber { color: #a16207; background: #fffbeb; }
.inventory-ai-answer__status--emerald { color: #047857; }
.inventory-ai-batch-row__copy strong,
.inventory-ai-batch-row__copy small { display: block; }
.inventory-ai-batch-row__copy strong { color: var(--color-gray-900); font-size: 15px; }
.inventory-ai-batch-row__copy small { margin-top: 3px; color: var(--color-gray-600); font-size: 13px; line-height: 1.4; }
.inventory-ai-batch-row__variance { color: var(--color-gray-900); font-size: 14px; font-weight: 650; white-space: nowrap; }

.inventory-ai-batch-detail { display: grid; gap: 18px; }
.inventory-ai-batch-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--color-primary-dark, #1d4ed8);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.inventory-ai-batch-back svg { width: 16px; height: 16px; }

.inventory-ai-batch-quantities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.inventory-ai-batch-quantities span { padding: 12px 14px; border: 1px solid var(--color-gray-200); border-radius: 10px; color: var(--color-gray-500); font-size: 13px; }
.inventory-ai-batch-quantities strong { display: block; margin-top: 4px; color: var(--color-gray-900); font-size: 17px; }

.inventory-ai-batch-explanation > div {
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-200);
}
.inventory-ai-batch-explanation > div span,
.inventory-ai-batch-explanation > div strong { display: block; }
.inventory-ai-batch-explanation > div span { color: var(--color-gray-500); font-size: 13px; }
.inventory-ai-batch-explanation > div strong { margin-top: 4px; font-size: 15px; line-height: 1.55; }
.inventory-ai-batch-records { display: grid; gap: 8px; margin-top: 15px; }
.inventory-ai-batch-records .inventory-ai-drilldown { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.inventory-ai-batch-records .inventory-ai-drilldown small { display: block; margin-top: 3px; color: var(--color-gray-600); font-size: 13px; font-weight: 400; }

@media (max-width: 1180px) {
  .inventory-run-create__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .inventory-run-create__plan {
    position: static;
  }
}

@media (max-width: 620px) {
  .inventory-run-card__head,
  .inventory-run-fields,
  .inventory-run-purpose-grid,
  .inventory-run-plan-card__head {
    padding: var(--space-4);
  }

  .inventory-run-purpose-grid,
  .inventory-run-warehouse-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .inventory-run-purpose {
    min-height: 84px;
  }

  .inventory-run-scope-head,
  .inventory-run-plan-card__head {
    align-items: flex-start;
  }

  .inventory-run-plan-card__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  .inventory-run-plan-card__footer .btn {
    min-height: 44px;
    flex: 1;
  }

  .inventory-run-task {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .inventory-run-task > .ui-badge {
    grid-column: 2;
    justify-self: start;
  }

  .inventory-posting-readiness {
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
  }

  .inventory-posting-readiness__action {
    grid-column: 2;
  }

  .inventory-review-column {
    min-width: 240px;
  }

  .inventory-ai-row-action {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .inventory-ai-modal {
    padding: 0;
  }

  .inventory-ai-modal .erp-dynamic-modal__content {
    max-height: 100dvh;
    border-radius: 16px 16px 0 0;
  }

  .inventory-ai-modal .erp-dynamic-modal__header {
    padding: 17px 18px;
  }

  .inventory-ai-modal .erp-dynamic-modal__title {
    font-size: 19px;
  }

  .inventory-ai-modal .erp-dynamic-modal__body {
    padding: 18px;
  }

  .inventory-ai-snapshot { grid-template-columns: minmax(0, 1fr); }
  .inventory-ai-snapshot > div { border-right: 0; border-bottom: 1px solid var(--color-gray-200); }
  .inventory-ai-snapshot > div:last-child { border-bottom: 0; }
  .inventory-ai-section-head,
  .inventory-ai-record-row { align-items: stretch; flex-direction: column; }
  .inventory-ai-section-head .btn,
  .inventory-ai-record-row .btn { min-height: 44px; width: 100%; justify-content: center; }
  .inventory-ai-equation { grid-template-columns: minmax(0, 1fr); }
  .inventory-ai-equation > svg { transform: rotate(90deg); justify-self: center; }
  .inventory-ai-follow-up > div { grid-template-columns: minmax(0, 1fr); }
  .inventory-ai-follow-up input,
  .inventory-ai-follow-up .btn { min-height: 44px; }
  .inventory-ai-confirmation { min-height: 0; padding: 8px 0; }
  .inventory-ai-confirmation__head { grid-template-columns: 46px minmax(0, 1fr); }
  .inventory-ai-confirmation__icon { width: 46px; height: 46px; }
  .inventory-ai-confirmation__head strong { font-size: 19px; }
  .inventory-ai-estimate { grid-template-columns: minmax(0, 1fr); }
  .inventory-ai-estimate__scope { justify-content: flex-start; }
  .inventory-ai-confirmation__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-ai-confirmation__actions .btn { width: 100%; justify-content: center; }
  .inventory-ai-thinking {
    min-height: 300px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 18px;
    text-align: center;
  }
  .inventory-ai-thinking__steps { grid-column: 1; justify-content: center; }
  .inventory-ai-thinking--compact {
    min-height: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
  }
  .inventory-ai-inline-error { grid-template-columns: 18px minmax(0, 1fr); }
  .inventory-ai-inline-error .btn { grid-column: 1 / -1; min-height: 44px; }
  .inventory-ai-batch-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-ai-batch-overview > div:nth-child(2) { border-right: 0; }
  .inventory-ai-batch-overview > div:nth-child(-n+2) { border-bottom: 1px solid var(--color-gray-200); }
  .inventory-ai-batch-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding-inline: 14px; }
  .inventory-ai-batch-row .inventory-ai-drilldown__hint { display: none; }
  .inventory-ai-batch-quantities { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .inventory-ai-thinking__orbit,
  .inventory-ai-thinking__core,
  .inventory-ai-thinking__steps span,
  .inventory-ai-spin {
    animation: none !important;
  }
}

/* moved from app.js around line 62121 */
.inv-detail-page { display: flex; flex-direction: column; gap: 16px; }
.inv-detail-v3 { display: flex; flex-direction: column; gap: 16px; }
.inv-info-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
}
.inv-info-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
}
.inv-info-title { font-size: 18px; font-weight: 600; color: #1e293b; }
.inv-status-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}
.inv-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 18px 20px;
  gap: 20px 24px;
}
.inv-info-item {
  min-width: 0;
}
.inv-info-item label { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; text-transform: none; }
.inv-info-value { display: block; font-size: 15px; font-weight: 600; color: #1e293b; line-height: 1.45; }
.inv-info-value--badge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-link-section {
  padding: 16px 20px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}
.inv-link-label { font-size: 13px; color: #64748b; margin-bottom: 8px; }
.inv-link-row { display: flex; gap: 8px; }
.inv-link-input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}
.inv-copy-btn {
  padding: 12px 16px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.inv-actions-row {
  padding: 16px 24px;
  background: #f8fafc;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.inv-action-btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.inv-action-btn.success { background: linear-gradient(135deg, #10b981, #14b8a6); color: white; }
.inv-action-btn.secondary { background: white; color: #64748b; border: 1px solid #e2e8f0; }
.inv-action-btn.danger { background: #fee2e2; color: #dc2626; }
.inv-table-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: visible;
}
.inv-table-header {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e2e8f0;
  top: 0;
  z-index: 10;
  background: #ffffff;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 1px 0 #e2e8f0;
}
.inv-table-header__summary,
.inv-table-header__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.inv-table-header__summary {
  justify-content: space-between;
  flex: 1 1 320px;
}
.inv-table-header__tools {
  justify-content: flex-end;
  flex: 0 1 auto;
}
.inventory-review-sort {
  width: 220px;
  min-width: 220px;
}
.inventory-review-sort .pure-dropdown-trigger {
  min-height: 34px;
}
.inv-recount-alert {
  margin: 14px 20px;
  padding: 14px 16px;
  border: 1px solid #fdba74;
  border-radius: 12px;
  background: #fff7ed;
  color: #9a3412;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.inv-recount-alert__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.45;
}
.inv-recount-alert__copy strong { color: #7c2d12; }
.inv-recount-alert__copy span { font-size: 13px; }
.inv-table-title { font-weight: 600; color: #1e293b; }
.inv-variance { font-weight: 600; }
.inv-variance.positive { color: #10b981; }
.inv-variance.negative { color: #ef4444; }
.inv-table-wrap {
  overflow-x: auto;
  border-radius: 0 0 16px 16px;
}
.inv-table-v3 { width: 100%; border-collapse: collapse; }
.inv-table-v3 thead { background: #f8fafc; }
.inv-table-v3 th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 12px; text-transform: none; color: #64748b; }
.inv-table-v3 td { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.inv-table-v3 tbody tr:hover { background: #f8fafc; }
.inv-table-v3 tbody .inv-row--recount { background: #fffaf5; }
.inv-table-v3 tbody .inv-row--recount:hover { background: #fff7ed; }
.reviewer-qty-input {
  width: 110px;
  padding: 7px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  text-align: right;
  font-size: 13px;
  background: #fff;
}
.reviewer-qty-input--recount {
  border-color: #fb923c;
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.12);
}
.reviewer-qty-input--recount:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.16);
}

/* Mobile Responsive */
@media (max-width: 1180px) {
  .inv-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .inv-info-header { padding: 16px; flex-wrap: wrap; gap: 12px; }
  .inv-info-grid { padding: 16px; grid-template-columns: 1fr 1fr; gap: 16px; }
  .inv-link-section { padding: 16px; }
  .inv-link-row { flex-direction: column; }
  .inv-actions-row { padding: 12px 16px; }
  .inv-action-btn { flex: 1; justify-content: center; }
  .inv-table-header { padding: 12px 16px; }
  .inv-table-header__summary,
  .inv-table-header__tools {
    width: 100%;
  }
  .inv-table-header__tools {
    justify-content: stretch;
  }
  .inventory-review-sort {
    flex: 1 1 180px;
    width: auto;
    min-width: 160px;
  }
  .inv-table-header__tools .btn {
    min-height: 40px;
  }
  .inv-recount-alert { margin: 12px 16px; align-items: stretch; flex-direction: column; }
  .inv-table-v3 th, .inv-table-v3 td { padding: 10px 12px; font-size: 13px; }
  .inv-table-v3:not(.inv-table-v3--recount) th:nth-child(4),
  .inv-table-v3:not(.inv-table-v3--recount) td:nth-child(4) { display: none; }
}
@media (max-width: 480px) {
  .inv-info-grid { grid-template-columns: 1fr; }
  .inv-table-v3 th:nth-child(3), .inv-table-v3 td:nth-child(3) { display: none; }
}

/* moved from app.js around line 62424 */
.inv-master { display: flex; flex-direction: column; gap: 20px; }
.inv-master .inv-master-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; }
.inv-master-grid .stat-card-u { min-width: 0; }
.inv-master-grid .stat-card-u__value { word-break: normal; overflow-wrap: anywhere; }
.inv-master .inv-master-section, .inv-master .inv-master-review { margin-block: 0; }
.inv-master-section { min-width: 0; scroll-margin-top: 20px; }
.inv-master-alerts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}
.inv-master-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray-700);
}
.inv-master-alert .erp-icon { flex: 0 0 16px; margin-top: 2px; }
.inv-master-alert.info .erp-icon { color: var(--color-primary-hover); }
.inv-master-alert.warning .erp-icon { color: var(--color-warning-dark); }
.inv-master-alert.danger .erp-icon { color: var(--color-danger-dark); }
@media (max-width: 768px) {
  .inv-master .btn, .inv-ov .btn { min-height: 44px; }
  .inv-ov-card > .erp-panel-card__heading { flex-wrap: wrap; }
  .inv-ov-card > .erp-panel-card__heading > .erp-panel-card__badge { flex: 0 0 100%; margin-inline-start: 0; }
}
.inv-master-progress {
  height: 10px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.inv-master-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
}
.inv-master-table-wrap { overflow-x: auto; }
.inv-master-table { width: 100%; border-collapse: collapse; }
.inv-master-table th {
  text-align: left;
  padding: 12px 16px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.35px;
}
.inv-master-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  color: #0f172a;
  vertical-align: top;
}
.inv-master-table tbody tr:hover td { background: #f8fafc; }

/* moved from app.js around line 62736 */
.count-page-v4 { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.count-header-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.count-header-title { font-size: 18px; font-weight: 600; color: #1e293b; margin-bottom: 4px; }
.count-header-sub { font-size: 14px; color: #64748b; margin-bottom: 8px; }
.count-header-badges {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.count-header-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:#eff6ff;
  color:#1d4ed8;
}
.count-header-badge.mini {
  background:#fef3c7;
  color:#b45309;
}
.count-progress-wrap { display: flex; align-items: center; gap: 12px; }
.count-progress-bar { flex: 1; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.count-progress-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.count-progress-text { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; }
.count-ws-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #94a3b8; margin-top: 8px;
}
.count-ws-dot { width: 8px; height: 8px; border-radius: 50%; }
.count-ws-dot.connected { background: #10b981; }
.count-ws-dot.disconnected { background: #ef4444; }
.count-ws-dot.connecting { background: #f59e0b; animation: pulse 1.5s infinite; }
.count-save-status {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-top: 8px;
  margin-left: 14px;
  font-size: 12px;
  font-weight: 600;
}
.count-save-status.saved { color: #059669; }
.count-save-status.pending,
.count-save-status.saving { color: #b45309; }
.count-save-status.error { color: #dc2626; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.count-list { display: flex; flex-direction: column; gap: 8px; }
.count-item-card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}
.count-item-card.filled { border-color: #86efac; background: #f0fdf4; }
.count-item-card.editing { border-color: #93c5fd; }
.count-item-card.invalid { border-color: #fca5a5; background: #fff; }
.count-item-card.not-found { border-color: #fca5a5; background: #fef2f2; opacity: 0.7; }
.count-item-card.filled-by-other { border-color: #93c5fd; background: #eff6ff; }
.count-item-card.routed { border-style: dashed; border-color: #cbd5e1; background: #fff; }
.count-item-card.routed .count-item-name { color: #64748b; }
.count-item-info { flex: 1; min-width: 0; }
.count-item-name { font-size: 14px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.count-item-meta { font-size: 12px; color: #94a3b8; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.count-item-type-badge {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  text-transform: none; letter-spacing: 0.3px;
}
.count-item-type-badge.recipe { background: #fef3c7; color: #92400e; }
.count-item-type-badge.product { background: #e0f2fe; color: #0369a1; }
.count-item-input-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.count-item-input {
  width: 100px; padding: 10px 12px;
  border: 2px solid #e2e8f0; border-radius: 10px;
  text-align: right; font-size: 16px; font-weight: 500;
  transition: border-color 0.2s;
}
.count-item-input:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.1); }
.count-item-input[aria-invalid="true"] { border-color: #ef4444; }
.count-item-input:disabled { background: #f1f5f9; color: #94a3b8; }
.count-item-uom { font-size: 13px; color: #64748b; min-width: 28px; }
.count-na-btn {
  width: 36px; height: 36px; border-radius: 8px; border: 2px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; background: white; flex-shrink: 0;
}
.count-na-btn.active { background: #ef4444; border-color: #ef4444; color: white; }
.count-na-btn:not(.active) { color: #94a3b8; }
.count-counted-by {
  font-size: 11px; color: #3b82f6; font-weight: 500;
  display: flex; align-items: center; gap: 3px;
}
.count-route-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border: 1px solid #cbd5e1; border-radius: 4px;
  color: #475569; font-size: 10px; font-weight: 600;
}
.count-item-route-note {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px;
  color: #475569; font-size: 12px; text-align: right;
}
.count-item-route-note strong { color: #1e293b; font-weight: 600; }

.count-bottom-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: white; border-top: 1px solid #e2e8f0;
  padding: 16px; display: flex; gap: 12px; align-items: center;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
  border-radius: 16px 16px 0 0;
  z-index: 100;
}
.count-submit-btn {
  flex: 1; padding: 14px 20px;
  background: linear-gradient(135deg, #10b981, #14b8a6);
  color: white; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.count-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
.count-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Category filter tabs */
.count-cat-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.count-cat-tabs::-webkit-scrollbar { display: none; }
.count-cat-tab {
  padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; border: 2px solid #e2e8f0;
  background: white; color: #64748b; transition: all 0.2s;
  display: flex; align-items: center; gap: 5px;
}
.count-cat-tab:hover { border-color: #3b82f6; color: #3b82f6; }
.count-cat-tab.active { background: #3b82f6; border-color: #3b82f6; color: white; }
.count-cat-tab .cat-count {
  font-size: 11px; padding: 1px 6px; border-radius: 10px;
  background: rgba(0,0,0,0.08);
}
.count-cat-tab.active .cat-count { background: rgba(255,255,255,0.25); }

.count-item-type-badge.cold { background: #e0f2fe; color: #0369a1; }
.count-item-type-badge.frozen { background: #ede9fe; color: #6d28d9; }
.count-item-type-badge.dry { background: #fef3c7; color: #92400e; }
.count-item-type-badge.bar { background: #fce7f3; color: #9d174d; }
.count-item-type-badge.prep { background: #d1fae5; color: #065f46; }

/* Mobile optimizations */
@media (max-width: 640px) {
  .count-page-v4 { gap: 10px; padding-bottom: 80px; }
  .count-header-card { padding: 16px; }
  .count-header-title { font-size: 16px; }
  .count-item-card { padding: 12px; gap: 10px; flex-wrap: wrap; }
  .count-item-info { width: 100%; }
  .count-item-input-wrap { width: 100%; justify-content: space-between; }
  .count-item-input { flex: 1; width: auto; min-width: 0; }
  .count-item-route-note { width: 100%; justify-content: flex-start; text-align: left; }
}


/* Inventory overview/report styles moved from app.js */
/* moved from app.js around line 62421 */
.inv-ov { width: 100%; display: flex; flex-direction: column; gap: 16px; }
      .inv-ov .inv-ov-card { margin-block: 0; }
      .inv-ov-card .inv-ov-tools, .inv-ov-card--embedded .inv-ov-tools { padding: 0; }
      .inv-ov-card .inv-ov-card-body, .inv-ov-card--embedded .inv-ov-card-body { padding: 0; margin-top: 16px; }
      .inv-ov-result-meta { margin-bottom: 14px; }
      .inv-ov-card-header { padding: 16px 20px; font-size: 15px; font-weight: 600; color: #1e293b; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 8px; }
      .inv-ov-card-header--result { justify-content: space-between; flex-wrap: wrap; }
      .inv-ov-result-count { color: #64748b; font-size: 12px; font-weight: 500; }
      .inv-ov-card-body { padding: 16px 20px; }
      .inv-ov-preload-note { margin-bottom: 14px; padding: 11px 13px; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffff; color: #475569; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
      .inv-ov-sessions { display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow-y: auto; }
      .inv-ov-session { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f8fafc; border-radius: 10px; cursor: pointer; transition: all 0.15s; }
      .inv-ov-session:hover { background: #f1f5f9; }
      .inv-ov-session input { width: 18px; height: 18px; accent-color: #3b82f6; flex-shrink: 0; }
      .inv-ov-session-info { flex: 1; min-width: 0; }
      .inv-ov-session-name { font-size: 14px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .inv-ov-session-meta { font-size: 12px; color: #94a3b8; }
      .inv-ov-session-badge { font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
      .inv-ov-session-badge.open { background: #fef3c7; color: #92400e; }
      .inv-ov-session-badge.submitted { background: #dbeafe; color: #1e40af; }
      .inv-ov-session-badge.completed { background: #d1fae5; color: #065f46; }
      .inv-ov-btn-load { width: 100%; margin-top: 12px; }
      .inv-ov-tools { padding: 12px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
      .inv-ov-tabs { display: flex; gap: 4px; background: #f1f5f9; border-radius: 10px; padding: 3px; min-width: min(100%, 360px); }
      .inv-ov-tab { flex: 1; min-height: 36px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; border: none; background: transparent; color: #64748b; transition: all 0.15s; }
      .inv-ov-tab.active { background: white; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
      .inv-ov-search { width: min(100%, 340px); }
      .inv-ov-filters { display: flex; align-items: center; gap: 8px; width: min(100%, 520px); margin-inline-start: auto; }
      .inv-ov-filters .inv-ov-search { flex: 1; min-width: 0; width: auto; }
      .inv-ov-zero-filter { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
      .inv-ov-zero-filter[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-primary); background: #fff; }
      @media (max-width: 640px) {
        .inv-ov-filters { width: 100%; }
        .inv-ov-filters .ds-search-input { min-height: 44px; }
      }
      .inv-ov-table { width: 100%; border-collapse: collapse; font-size: 13px; }
      .inv-ov-table th { padding: 10px 12px; text-align: left; font-weight: 600; color: #64748b; font-size: 11px; text-transform: none; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
      .inv-ov-table th.inv-ov-sortable-th { padding: 0; }
      .inv-ov-sort-button { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; font: inherit; font-weight: 600; text-align: start; cursor: pointer; }
      .inv-ov-sort-button:hover { background: #f8fafc; color: #334155; }
      .inv-ov-sort-button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
      .inv-ov-sortable-th.is-active { color: var(--color-primary); }
      .inv-ov-sort-button svg { flex: 0 0 auto; }
      .inv-run-top-table th.inv-ov-sortable-th { padding: 0; }
      .inv-run-top-table .inv-ov-drill-link { font-size: 13px; font-weight: 600; }
      .inv-run-top-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
      .inv-run-top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
      .inv-run-top-count { padding-block: 0 12px; font-size: 12px; color: var(--color-gray-500); }
      .inv-run-top-items .ds-search-input { padding-right: 44px; }
      .inv-run-top-items .ds-search-clear { min-width: 44px; min-height: 44px; right: 0; }
      @media (max-width: 640px) {
        .inv-run-top-items .ds-search-input, .inv-run-top-actions .btn, .inv-ov-zero-filter { min-height: 44px; }
        .inv-run-top-tools { align-items: stretch; }
        .inv-run-top-tools .inv-ov-search { width: 100%; }
        .inv-run-top-actions { width: 100%; }
        .inv-run-top-actions .btn { flex: 1; }
      }
      .inv-ov-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
      .inv-ov-table tr:hover td { background: #f8fafc; }
      .inv-ov-cat-header { background: #f8fafc; }
      .inv-ov-cat-header td { font-weight: 700; color: #475569; font-size: 13px; padding: 8px 12px; }
      .inv-ov-variance-neg { color: #dc2626; font-weight: 600; }
      .inv-ov-variance-pos { color: #16a34a; font-weight: 600; }
      .inv-ov-variance-zero { color: #94a3b8; }
      .inv-ov-prep-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #ede9fe; color: #6d28d9; font-weight: 600; }
      .inv-ov-empty { text-align: center; padding: 40px 20px; color: #94a3b8; font-size: 14px; }
      .inv-ov-filter-empty td { text-align: center; padding: 28px 16px; color: #94a3b8; }
      .inv-ov-totals td { font-weight: 700; border-top: 2px solid #e2e8f0; background: #f8fafc; }
      .inv-ov-sources { font-size: 11px; color: #94a3b8; margin-top: 2px; }
      .inv-ov-prep-row { background: #ffffff; }
      .inv-ov-prep-row td:first-child { border-inline-start: 3px solid #8b5cf6; }
      .inv-ov-prep-arrow { color: #a78bfa; margin: 0 4px; }
      .inv-ov-prep-ingredient { padding-inline-start: 32px !important; }
      .inv-ov-drill-row { cursor: pointer; }
      .inv-ov-drill-link { min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: var(--color-primary, #2563eb); font: inherit; font-weight: 600; text-align: start; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: normal; }
      .inv-ov-drill-link:hover { text-decoration: underline; }
      .inv-ov-drill-link:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; border-radius: 3px; }
      .inv-ov-drill-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 16px; margin: 0; padding: 16px 20px; }
      .inv-ov-drill-metrics dt { color: #64748b; font-size: 12px; }
      .inv-ov-drill-metrics dd { margin: 6px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
      .inv-ov-drill-note { margin: 0; padding: 8px 20px 16px; font-size: 12px; color: #64748b; line-height: 1.5; }
      .inv-ov-drill-composition > summary { min-height: 44px; padding: 14px 20px; cursor: pointer; font-size: 13px; font-weight: 600; border-top: 1px solid #e2e8f0; }
      .inv-ov-drill-context .stock-history-table { min-width: 550px; }
      #itemHistoryMovementDetails { scroll-margin-top: 16px; }
      .inventory-run-breakdown-section { scroll-margin-top: 16px; }
      .inventory-run-breakdown__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
      .inventory-run-breakdown > .inv-ov-card--embedded { border: 0; border-radius: 0; box-shadow: none; }
      .inventory-run-breakdown__loading,
      .inventory-run-breakdown__error { min-height: 132px; padding: 24px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #64748b; font-size: 13px; }
      .inventory-run-breakdown__loading .erp-icon { animation: inventory-breakdown-spin 1s linear infinite; }
      .inventory-run-breakdown__error { flex-direction: column; text-align: center; }
      .inventory-run-breakdown__error strong { color: #0f172a; font-size: 14px; }
      @keyframes inventory-breakdown-spin { to { transform: rotate(360deg); } }
      @media (max-width: 640px) {
        #itemHistTypeDropdown .pure-dropdown-trigger,
        #itemHistWhDropdown .pure-dropdown-trigger,
        #recipeHistWhDropdown .pure-dropdown-trigger { min-height: 44px; }
        .inv-ov-tools { padding: 12px 14px 0; align-items: stretch; }
        .inv-ov-tabs, .inv-ov-search { width: 100%; }
        .inv-ov-card-body { padding: 14px; }
        .inv-ov-table { font-size: 12px; }
        .inv-ov-table--raw { min-width: 760px; }
        .inv-ov-table--preps { min-width: 620px; }
        .inv-ov-table th, .inv-ov-table td { padding: 8px 6px; }
        .inv-ov-table th.inv-ov-sortable-th { padding: 0; }
        .inv-ov-sort-button { min-height: 44px; padding: 8px 6px; }
      }

/* moved from app.js around line 62782 */
.inventory-overview-selector > summary { cursor: pointer; list-style: none; }
.inventory-overview-selector > summary::-webkit-details-marker { display: none; }
.inventory-overview-selector #invOvSelectionCount { margin-inline-start: auto; font-size: 12px; font-weight: 400; color: var(--gray-500); }
.inventory-overview-selector .inv-ov-session[hidden] { display: none; }
.inventory-mobile-sort,
.inventory-mobile-pagination { display: none; }
@media (max-width: 640px) {
  /* Stacked inventory rows own their spacing; the desktop Precision contract
     otherwise forces 40px cells with 20px gutters and clips wrapped content. */
  .inventory-mobile-table.erp-data-table.erp-data-table--precision[data-erp-table-mobile="stacked"] > tbody > tr > td:not(.erp-tree-table__name-cell):not(.erp-data-table__cell--indent) {
    height: auto !important; padding: 0 !important; overflow: visible !important;
    font-size: var(--inventory-mobile-font, 13px) !important;
    line-height: 1.4 !important; font-weight: var(--inventory-mobile-weight, 400) !important;
    text-align: var(--inventory-mobile-align, start) !important;
  }
  .inventory-mobile-table.erp-data-table.erp-data-table--precision td.erp-data-table__cell--actions .erp-table-action--icon-only {
    width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important;
  }
  .stock-history-table__datetime { --inventory-mobile-font: 12px; }
  .stock-history-table__quantity { --inventory-mobile-font: 16px; --inventory-mobile-weight: 600; --inventory-mobile-align: end; }
  .stock-history-table__balance { --inventory-mobile-font: 12px; --inventory-mobile-align: end; }
  .stock-history-table__document { --inventory-mobile-font: 12px; --inventory-mobile-align: end; }
  .stock-history-table__warehouse, .stock-history-table__amount { --inventory-mobile-font: 11px; }
  .stock-history-table__amount { --inventory-mobile-align: end; }

  .inventory-mobile-sort { display: flex; align-items: center; gap: 8px; padding: 8px 0; background: #fff; }
  .inventory-mobile-sort > .pure-dropdown { flex: 1; min-width: 0; }
  .inventory-mobile-sort > .btn { width: 44px; min-height: 44px; padding: 0; flex: 0 0 44px; }
  .inventory-mobile-sort .pure-dropdown-trigger { min-height: 44px; }
  .inventory-mobile-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 13px; }
  .inventory-mobile-pagination .erp-pagination { width: 100%; gap: 8px; padding: 0; }
  .inventory-mobile-pagination .erp-pagination__page { min-width: 44px; min-height: 44px; }
  .inventory-mobile-table:not(.stock-history-table) { display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; border: 0 !important; }
  .inventory-mobile-table:not(.stock-history-table) colgroup,
  .inventory-mobile-table:not(.stock-history-table) thead { display: none; }
  .inventory-mobile-table:not(.stock-history-table) tbody { display: block; }
  .inventory-mobile-table:not(.stock-history-table) tbody > tr:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px; border-bottom: 1px solid var(--gray-200); }
  .inventory-mobile-table:not(.stock-history-table) tbody > tr > td { display: block !important; min-width: 0 !important; max-width: none !important; width: auto !important; padding: 0 !important; border: 0 !important; white-space: normal !important; overflow-wrap: anywhere; text-align: start !important; font-size: 13px; }
  .inventory-mobile-table:not(.stock-history-table) tbody > tr > td:first-child,
  .inventory-mobile-table:not(.stock-history-table) tbody > tr > td[colspan] { grid-column: 1 / -1; }
  .inventory-mobile-table:not(.stock-history-table) td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; color: var(--gray-500); font-size: 11px; line-height: 1.4; margin-bottom: 3px; font-weight: 400; }
  .inventory-mobile-table:not(.stock-history-table) tbody > tr.inventory-mobile-group-row { padding: 8px 12px; }
  .inventory-mobile-table:not(.stock-history-table) tbody > tr.inventory-mobile-row--offpage { display: none; }
  .inv-ov-table--preps tbody > tr[data-inv-ov-prep-group]:not(.inv-ov-prep-row) { display: none !important; }
  .inventory-mobile-table .btn,
  .inventory-mobile-table .btn-ghost,
  .inventory-mobile-table input { min-height: 44px; }
  .inventory-mobile-table .inventory-session-actions { justify-content: flex-start; }
  .inventory-mobile-table .inventory-review-column { grid-column: 1 / -1; }
  .inventory-mobile-table .inventory-review-editor__row { flex-wrap: wrap; }
  .inventory-mobile-table .reviewer-qty-input { width: 100%; flex: 1; min-width: 100px; }
  .inventory-mobile-table .inventory-review-reason { width: 100%; min-height: 44px; }
  .inventory-mobile-table .inv-home-progress-main { flex-direction: column; align-items: stretch; gap: 6px; }
  .inventory-mobile-table .inv-home-progress-track { min-width: 0; flex: none; }
  .inventory-mobile-table .inv-home-progress-text { font-size: 11px; }
  .inventory-home[data-onboarding-warehouse="inventory-report"] > .erp-grid--auto-200 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 0 !important; }
  .inventory-home[data-onboarding-warehouse="inventory-report"] > .erp-grid--auto-200 > .card { min-width: 0; padding: 8px !important; margin: 0; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
  .inventory-home[data-onboarding-warehouse="inventory-report"] > .erp-grid--auto-200 > .card > div:first-child { font-size: 18px !important; font-weight: 600 !important; }
  .inventory-home .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .inventory-home .stat-card-u { position: relative; padding: 10px 12px; min-width: 0; }
  .inventory-home .stat-card-u__icon { position: absolute; inset-inline-end: 10px; top: 10px; width: 16px; height: 16px; margin: 0; }
  .inventory-home .stat-card-u__icon svg { width: 16px; height: 16px; }
  .inventory-home .stat-card-u__label { margin-inline-end: 22px; font-size: 11px; }
  .inventory-home .stat-card-u__sub { font-size: 11px; line-height: 1.3; }
  .inventory-home .erp-page-header__badges { display: none; }
  .inventory-home .erp-page-header { padding: 12px; }
  .inventory-home .erp-page-header__main { gap: 8px; }
  .inventory-home .erp-page-header__meta { font-size: 12px; }
  .inventory-home .inventory-section-tabs { margin-top: 0; }
  .inventory-home-section__title { font-size: 16px; font-weight: 600; }
  .inventory-home .stat-card-u__value { font-size: 22px; }
  .inventory-home, .inv-master, .inv-detail-page, .inv-ov { gap: 12px; }
  .inv-master .inv-master-grid { gap: 10px; }
  .inv-master-grid .stat-card-u:first-child { grid-column: 1 / -1; }
  .inv-master-grid .stat-card-u__value { font-size: 20px; }
  .inv-master-alerts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .inv-master .inv-master-review { align-items: stretch; }
  .inv-master-review .erp-action-card__actions .btn { width: 100%; }
  .inventory-home-section__head { padding: 12px; gap: 8px; }
  .inventory-home-section__meta { font-size: 12px; line-height: 1.4; }
  .inventory-home-section__body { padding: 0; }
  .inv-ov-card-header, .inv-ov-tools, .inv-ov-card-body { padding: 10px 12px; }
  .inv-ov-card-header { font-size: 13px; }
  .inv-ov-result-count { font-size: 11px; }
  .inv-ov-tabs { gap: 4px; padding: 3px; }
  .inv-ov-tab { min-height: 44px; padding: 8px; font-size: 12px; }
  .inv-ov-search { min-width: 0; }
  .inv-ov-drill-link { font-size: 13px; font-weight: 600; }
  .inv-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
  .inv-info-header, .inv-table-header { padding: 10px 12px; }
  .inv-table-header__tools { gap: 8px; flex-wrap: wrap; }
  .inv-table-header__tools .btn, .inventory-review-sort .pure-dropdown-trigger { min-height: 44px; }
  .inventory-overview-selector > summary { cursor: pointer; min-height: 44px; }
  .inventory-overview-selector .inv-ov-sessions { max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; }
  .inventory-overview-selector .inv-ov-session { min-height: 44px; padding: 10px; }
  .inventory-overview-selector .inv-ov-card-body > .ds-search-wrap { margin-bottom: 10px; }
  .inventory-run-breakdown__actions { gap: 6px; }
  .inventory-run-breakdown__actions .btn { padding: 8px 10px; font-size: 12px; }
}

.inventory-report-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.inventory-report-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .inventory-report-filters {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==================== UI LAB (hidden dev page: /app/{org}/{product}/ui-lab) ==================== */
.uilab-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.uilab-nav { position: sticky; top: 12px; background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 10px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; gap: 8px; }
.uilab-nav__search { width: 100%; }
.uilab-nav__list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.uilab-nav__group-title { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0.04em; color: var(--color-gray-500); padding: 10px 8px 4px; }
.uilab-nav__item { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: none; background: transparent; border-radius: var(--radius-md); padding: 6px 8px; cursor: pointer; font-size: 13px; color: var(--color-gray-700); }
.uilab-nav__item:hover { background: var(--color-gray-100); }
.uilab-nav__item.is-active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; }
.uilab-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uilab-nav__fn { font-size: 10px; color: var(--color-gray-400); font-family: ui-monospace, monospace; }
.uilab-nav__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.uilab-nav__dot--planned { background: var(--color-gray-300); }
.uilab-nav__dot--draft { background: var(--color-warning); }
.uilab-nav__dot--candidate { background: var(--color-primary); }
.uilab-nav__dot--prod { background: var(--color-success); }
.uilab-nav__dot--deprecated { background: var(--color-danger); }
.uilab-nav__empty { padding: 16px 8px; font-size: 13px; color: var(--color-gray-500); }
.uilab-main { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 20px; min-height: 420px; }
.uilab-mod__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uilab-mod__title { margin: 0; font-size: 20px; }
.uilab-mod__fn { font-size: 12px; background: var(--color-gray-100); border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm); padding: 2px 8px; color: var(--color-gray-700); }
.uilab-mod__meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--color-gray-500); }
.uilab-mod__desc { margin: 10px 0 0; font-size: 13px; color: var(--color-gray-600); max-width: 720px; }
.uilab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 12px; }
.uilab-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.uilab-presets__label { font-size: 12px; color: var(--color-gray-500); }
.uilab-play { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.uilab-play--wide { grid-template-columns: minmax(0, 1fr); }
.uilab-canvas-wrap { border: 1px dashed var(--color-gray-300); border-radius: var(--radius-lg); background: var(--color-gray-50); padding: 24px; overflow-x: auto; }
.uilab-canvas-wrap--mobile { max-width: 375px; }
.uilab-knobs { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.uilab-knobs__title { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0.04em; color: var(--color-gray-500); }
.uilab-knob { display: flex; flex-direction: column; gap: 5px; }
.uilab-knob--check { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.uilab-knob__label { font-size: 12px; font-weight: 500; color: var(--color-gray-700); }
.uilab-knob__chips { display: flex; gap: 4px; flex-wrap: wrap; }
.uilab-knob__chip { border: 1px solid var(--color-gray-300); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--color-gray-700); }
.uilab-knob__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.uilab-knob__chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.uilab-code-wrap { margin-top: 16px; }
.uilab-code__title { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0.04em; color: var(--color-gray-500); margin-bottom: 6px; }
.uilab-code { background: var(--color-gray-900); color: var(--color-gray-100); border-radius: var(--radius-md); padding: 12px 14px; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.uilab-html-details { margin-top: 10px; }
.uilab-html-details summary { font-size: 12px; color: var(--color-gray-500); cursor: pointer; margin-bottom: 6px; }
.uilab-echo { margin-top: 10px; font-size: 13px; color: var(--color-primary-dark); font-family: ui-monospace, monospace; min-height: 18px; }
.uilab-helper-out { font-size: 14px; color: var(--color-gray-800); }
.uilab-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 320px; text-align: center; }
.uilab-placeholder__title { font-weight: 600; color: var(--color-gray-700); }
.uilab-placeholder__text { font-size: 13px; color: var(--color-gray-500); }
.uilab-w-200 { max-width: 200px; }
.uilab-w-280 { max-width: 280px; }
.uilab-w-320 { max-width: 320px; }
@media (max-width: 900px) {
  .uilab-shell { grid-template-columns: 1fr; }
  .uilab-nav { position: static; max-height: 260px; }
  .uilab-play { grid-template-columns: 1fr; }
}

/* Copilot subscription prototype — ERP UI Lab only. */
.ai-subscription-lab {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 22px;
  background: #f3f5fb;
  color: var(--color-gray-900);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}
.ai-subscription-lab *,
.ai-subscription-lab *::before,
.ai-subscription-lab *::after { box-sizing: border-box; }
.ai-subscription-lab::before {
  content: '';
  position: absolute;
  inset: 56px 0 auto;
  height: 430px;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(59, 130, 246, .22), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, .18), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent);
}
.ai-subscription-lab__nav {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(203, 213, 225, .76);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
}
.ai-subscription-lab__brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; font-size: 12px; }
.ai-subscription-lab__brand > span {
  display: inline-flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #0f4cbd);
  color: #fff;
  font-weight: 800;
}
.ai-subscription-lab__links { display: flex; min-width: 0; align-items: center; gap: 3px; }
.ai-subscription-lab__links > span {
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--color-gray-500);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.ai-subscription-lab__links > .is-active { background: var(--color-primary-light); color: var(--color-primary-dark); }
.ai-subscription-lab__draft {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--color-gray-600);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.ai-subscription-lab__hero { position: relative; z-index: 1; padding: 52px 32px 32px; text-align: center; }
.ai-subscription-lab__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ai-subscription-lab__hero h2 { max-width: 720px; margin: 0 auto; font-size: clamp(30px, 3.5cqw, 44px); line-height: 1.04; letter-spacing: -.045em; }
.ai-subscription-lab__hero > p { max-width: 650px; margin: 14px auto 0; color: var(--color-gray-600); font-size: 13px; line-height: 1.6; }
.ai-subscription-lab__promises { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 18px; color: var(--color-gray-600); font-size: 9px; font-weight: 700; }
.ai-subscription-lab__promises > span { display: inline-flex; align-items: center; }
.ai-subscription-lab__promises > span + span::before { content: '·'; margin: 0 9px; color: var(--color-gray-400); }
.ai-subscription-lab__cycle-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.ai-subscription-lab__cycle-row > span { color: var(--color-gray-500); font-size: 11px; font-weight: 650; }
.ai-subscription-lab__cycle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
.ai-subscription-lab__cycle button {
  min-height: 44px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-gray-500);
  font: 700 11px/1 inherit;
  cursor: pointer;
}
.ai-subscription-lab__cycle button[aria-checked="true"] { background: linear-gradient(135deg, #2563eb, #0f4cbd); color: #fff; box-shadow: 0 7px 18px rgba(37, 99, 235, .25); }
.ai-subscription-lab__cycle button b { margin-left: 5px; color: var(--color-success); font-size: 9px; }
.ai-subscription-lab__cycle button[aria-checked="true"] b { color: #bbf7d0; }
.ai-subscription-lab__plans {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 14px 24px 30px;
}
.ai-plan-lab {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 570px;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #d7dee8;
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .07);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ai-plan-lab:hover { transform: translateY(-4px); border-color: #b8c7dc; box-shadow: 0 20px 42px rgba(15, 23, 42, .12); }
.ai-plan-lab.is-recommended { z-index: 2; transform: translateY(-8px); border-color: #d7dee8; background: #fff; box-shadow: 0 22px 50px rgba(15, 23, 42, .12); }
.ai-plan-lab.is-recommended:hover { transform: translateY(-12px); }
.ai-plan-lab.is-recommended::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: #2563eb; }
.ai-plan-lab--scale { background: #fff; }
.ai-plan-lab.is-selected { border-color: #cbd5e1; box-shadow: 0 20px 44px rgba(15, 23, 42, .12); }
.ai-plan-lab__head { position: relative; min-height: 86px; }
.ai-plan-lab__identity { min-width: 0; }
.ai-plan-lab__head h3 { margin: 0; font-size: 28px; line-height: 1.08; letter-spacing: -.04em; }
.ai-plan-lab__head-copy { margin-top: 9px; }
.ai-plan-lab__head p { max-width: 92%; margin: 0; color: var(--color-gray-500); font-size: 10px; line-height: 1.45; }
.ai-plan-lab__capacity { position: relative; min-height: 116px; padding: 16px; overflow: hidden; border: 0; border-radius: 16px; background: #f1f4f8; }
.ai-plan-lab__capacity::after { content: ''; position: absolute; width: 105px; height: 105px; right: -48px; top: -58px; border-radius: 50%; background: rgba(37, 99, 235, .12); }
.ai-plan-lab__capacity > span { display: block; color: #526785; font-size: 9px; font-weight: 750; }
.ai-plan-lab__capacity strong { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; font-size: 33px; line-height: 1; letter-spacing: -.045em; }
.ai-plan-lab__capacity strong small { font-size: 10px; font-weight: 700; letter-spacing: 0; opacity: .64; }
.ai-plan-lab[data-plan="team"] .ai-plan-lab__capacity { border-color: transparent; background: linear-gradient(135deg, #0f4cbd, #2563eb 68%, #0ea5e9); color: #fff; box-shadow: 0 14px 30px rgba(37, 99, 235, .22); }
.ai-plan-lab[data-plan="team"] .ai-plan-lab__capacity::after { background: rgba(255, 255, 255, .12); }
.ai-plan-lab[data-plan="team"] .ai-plan-lab__capacity > span { color: rgba(255, 255, 255, .72); }
.ai-plan-lab[data-plan="scale"] .ai-plan-lab__capacity { border-color: transparent; background: linear-gradient(135deg, #111827, #26364d); color: #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, .17); }
.ai-plan-lab[data-plan="scale"] .ai-plan-lab__capacity::after { background: rgba(255, 255, 255, .08); }
.ai-plan-lab[data-plan="scale"] .ai-plan-lab__capacity > span { color: rgba(255, 255, 255, .68); }
.ai-plan-lab__meter { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ai-plan-lab__meter > i { height: 4px; border-radius: 999px; background: rgba(37, 99, 235, .13); }
.ai-plan-lab__meter > .is-active { background: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, .28); }
.ai-plan-lab[data-plan="team"] .ai-plan-lab__meter > i,
.ai-plan-lab[data-plan="scale"] .ai-plan-lab__meter > i { background: rgba(255, 255, 255, .16); }
.ai-plan-lab[data-plan="team"] .ai-plan-lab__meter > .is-active { background: #bfdbfe; box-shadow: none; }
.ai-plan-lab[data-plan="scale"] .ai-plan-lab__meter > .is-active { background: #93c5fd; box-shadow: none; }
.ai-plan-lab__price { min-height: 106px; padding-top: 20px; }
.ai-plan-lab__price-line { display: flex; align-items: baseline; gap: 6px; }
.ai-plan-lab__price-line > span { font-size: 12px; font-weight: 800; }
.ai-plan-lab__price-line > strong { font-size: 38px; line-height: 1; letter-spacing: -.05em; }
.ai-plan-lab__price-line > small { color: var(--color-gray-500); font-size: 10px; }
.ai-plan-lab__billing { display: flex; min-height: 26px; align-items: baseline; gap: 5px 9px; margin-top: 8px; color: var(--color-gray-500); font-size: 9px; line-height: 1.4; flex-wrap: wrap; }
.ai-plan-lab__billing b { color: #15803d; font-size: 8px; white-space: nowrap; }
.ai-plan-lab__unit { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border: 1px solid var(--color-gray-100); border-radius: 13px; background: var(--color-gray-50); color: var(--color-gray-500); font-size: 9px; }
.ai-plan-lab__unit strong { display: block; color: var(--color-gray-900); font-size: 11px; }
.ai-plan-lab__unit em { color: var(--color-success); font-size: 9px; font-style: normal; font-weight: 750; text-align: right; }
.ai-plan-lab__equivalents { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 14px; color: var(--color-gray-600); font-size: 10px; line-height: 1.4; }
.ai-plan-lab__equivalents strong { color: var(--color-gray-900); }
.ai-plan-lab__equivalents > b { color: var(--color-gray-400); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ai-plan-lab > ul { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 20px; padding: 0; list-style: none; }
.ai-plan-lab > ul li { position: relative; padding-left: 13px; color: var(--color-gray-600); font-size: 10px; line-height: 1.4; }
.ai-plan-lab > ul li::before { content: ''; position: absolute; width: 4px; height: 4px; left: 0; top: .48em; border-radius: 50%; background: var(--color-primary); }
.ai-plan-lab__cta { display: inline-flex; width: 100%; min-height: 48px; margin-top: auto; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--color-gray-300); border-radius: 13px; background: #fff; color: var(--color-gray-900); font: 750 11px/1 inherit; cursor: pointer; box-shadow: 0 7px 16px rgba(15, 23, 42, .05); }
.ai-plan-lab__cta:hover { border-color: var(--color-gray-500); }
.ai-plan-lab.is-selected .ai-plan-lab__cta { border-color: #2563eb; background: linear-gradient(135deg, #2563eb, #0f4cbd); color: #fff; }
.ai-plan-lab[data-plan="scale"] .ai-plan-lab__cta { border-color: #253248; background: #111827; color: #fff; }
.ai-plan-lab[data-plan="scale"].is-selected .ai-plan-lab__cta { background: linear-gradient(135deg, #111827, #334155); }
.ai-plan-lab__cta svg { width: 15px; height: 15px; }
.ai-subscription-lab__comparison { position: relative; z-index: 1; margin: 0 24px 22px; overflow: hidden; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 32px rgba(15, 23, 42, .07); }
.ai-subscription-lab__comparison-head { display: flex; min-width: 680px; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 20px 14px; }
.ai-subscription-lab__comparison-head strong { font-size: 16px; letter-spacing: -.02em; }
.ai-subscription-lab__comparison-head span { color: var(--color-gray-500); font-size: 10px; }
.ai-subscription-lab__table { display: grid; min-width: 680px; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 6px 8px; padding: 0 14px 14px; }
.ai-subscription-lab__table > div { display: flex; min-width: 0; min-height: 54px; flex-direction: column; justify-content: center; padding: 10px 12px; border-radius: 12px; background: #f7f9fc; color: var(--color-gray-600); font-size: 9px; line-height: 1.35; }
.ai-subscription-lab__table strong { display: block; color: var(--color-gray-900); font-size: 13px; }
.ai-subscription-lab__table small { display: block; margin-top: 3px; color: var(--color-success); font-size: 8px; }
.ai-subscription-lab__table .is-corner { background: transparent; color: var(--color-gray-400); font-size: 9px; font-weight: 700; }
.ai-subscription-lab__table .is-plan { position: relative; min-height: 64px; padding-top: 15px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #e8edf4; }
.ai-subscription-lab__table .is-plan::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: #cbd5e1; }
.ai-subscription-lab__table .is-plan strong { font-size: 14px; }
.ai-subscription-lab__table .is-plan span { margin-top: 3px; color: var(--color-gray-500); font-size: 9px; }
.ai-subscription-lab__table .is-plan.is-team { background: #edf4ff; box-shadow: none; }
.ai-subscription-lab__table .is-plan.is-team::before { background: #2563eb; }
.ai-subscription-lab__table .is-plan.is-scale::before { background: #111827; }
.ai-subscription-lab__table .is-label { background: transparent; color: var(--color-gray-500); font-weight: 700; }
.ai-subscription-lab__foot { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 0 24px 24px; color: var(--color-gray-500); font-size: 9px; line-height: 1.5; }
.ai-subscription-lab__foot > span { display: inline-flex; max-width: 48%; align-items: flex-start; }
@container (max-width: 900px) {
  .ai-subscription-lab__nav { flex-wrap: wrap; gap: 8px 14px; }
  .ai-subscription-lab__links { order: 3; width: 100%; overflow-x: auto; }
  .ai-subscription-lab__plans { gap: 10px; padding-inline: 16px; }
  .ai-plan-lab { min-height: 500px; padding: 16px; }
  .ai-plan-lab__head { min-height: 96px; }
  .ai-subscription-lab__comparison { margin-inline: 16px; }
  .ai-subscription-lab__foot { padding-inline: 16px; }
}
@container (max-width: 700px) {
  .ai-subscription-lab__hero { padding: 38px 20px 26px; }
  .ai-subscription-lab__hero h2 { font-size: 29px; }
  .ai-subscription-lab__plans {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 30px);
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ai-subscription-lab__plans::-webkit-scrollbar { display: none; }
  .ai-plan-lab { min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .ai-plan-lab.is-recommended,
  .ai-plan-lab.is-recommended:hover { transform: none; }
  .ai-plan-lab__head { min-height: 86px; }
  .ai-subscription-lab__comparison-head { min-width: 0; align-items: flex-start; flex-direction: column; gap: 3px; padding: 18px 16px 12px; }
  .ai-subscription-lab__table { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; }
  .ai-subscription-lab__table .is-corner { display: none; }
  .ai-subscription-lab__table .is-label { grid-column: 1 / -1; min-height: 0; margin-top: 5px; padding: 8px 3px 1px; border-radius: 0; font-size: 10px; }
  .ai-subscription-lab__table > div { min-height: 62px; padding: 9px 7px; }
  .ai-subscription-lab__table .is-plan { min-height: 64px; }
  .ai-subscription-lab__table strong { font-size: 13px; }
  .ai-subscription-lab__foot { flex-direction: column; gap: 10px; }
  .ai-subscription-lab__foot > span { max-width: none; }
}
@container (max-width: 430px) {
  .ai-subscription-lab__draft { margin-left: auto; }
  .ai-subscription-lab__links { overflow: visible; }
  .ai-subscription-lab__links > span { display: none; }
  .ai-subscription-lab__links > .is-active { display: inline-flex; }
  .ai-subscription-lab__cycle-row { flex-direction: column; gap: 8px; }
  .ai-subscription-lab__promises { flex-wrap: wrap; }
  .ai-subscription-lab__cycle { width: 100%; }
  .ai-subscription-lab__cycle button { flex: 1; padding-inline: 9px; }
  .ai-subscription-lab__plans { padding-inline: 10px; scroll-padding-inline: 10px; }
  .ai-subscription-lab__comparison { margin-inline: 10px; }
  .ai-subscription-lab__foot { padding-inline: 10px; }
}

/* Meal Plans guided setup prototype: Stripe-style guide + focused questions. */
.meal-plan-stripe-demo {
  container-type: inline-size;
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 18px;
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}
.meal-plan-stripe-demo *,
.meal-plan-stripe-demo *::before,
.meal-plan-stripe-demo *::after { box-sizing: border-box; }
.meal-plan-stripe-demo__notice {
  position: absolute;
  z-index: 5;
  top: 16px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--color-gray-600);
  font-size: 11px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transform: translateX(-50%);
}
.meal-plan-stripe-demo__notice svg { width: 14px; height: 14px; }
.meal-plan-stripe-demo__workspace { padding: 74px 40px 40px; }
.meal-plan-stripe-demo__workspace-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
}
.meal-plan-stripe-demo__eyebrow { color: var(--color-primary); font-size: 12px; font-weight: 700; }
.meal-plan-stripe-demo__workspace-head h3 { margin: 4px 0 0; font-size: 26px; line-height: 1.2; }
.meal-plan-stripe-demo__workspace-head p { margin: 6px 0 0; color: var(--color-gray-600); font-size: 13px; }
.meal-plan-stripe-demo__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  background: #fff;
}
.meal-plan-stripe-demo__stats > div { min-width: 0; padding: 18px 20px; }
.meal-plan-stripe-demo__stats > div + div { border-left: 1px solid var(--color-gray-200); }
.meal-plan-stripe-demo__stats span,
.meal-plan-stripe-demo__stats strong,
.meal-plan-stripe-demo__stats small { display: block; }
.meal-plan-stripe-demo__stats span { color: var(--color-gray-500); font-size: 11px; font-weight: 600; }
.meal-plan-stripe-demo__stats strong { margin-top: 5px; font-size: 24px; }
.meal-plan-stripe-demo__stats small { margin-top: 3px; color: var(--color-gray-500); font-size: 10px; }
.meal-plan-stripe-demo__calendar {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  background: #fff;
}
.meal-plan-stripe-demo__calendar-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--color-gray-200); }
.meal-plan-stripe-demo__calendar-head strong { font-size: 14px; }
.meal-plan-stripe-demo__calendar-head span { color: var(--color-gray-500); font-size: 11px; }
.meal-plan-stripe-demo__calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.meal-plan-stripe-demo__calendar-grid span {
  min-height: 74px;
  padding: 10px;
  border-right: 1px solid var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-500);
  font-size: 11px;
}
.meal-plan-stripe-demo__calendar-grid span.has-plan { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; }

.onboarding-guide {
  position: absolute;
  z-index: 10;
  right: 28px;
  bottom: 28px;
  display: flex;
  width: min(390px, calc(100% - 56px));
  max-height: calc(100% - 56px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 54px rgba(15, 23, 42, .18);
  transition: width .18s ease;
}
.onboarding-guide--production {
  position: fixed;
  z-index: 180;
  right: 24px;
  bottom: 24px;
  display: flex;
  max-height: calc(100vh - 48px);
  flex-direction: column;
}
.onboarding-guide.is-expanded { width: min(520px, calc(100% - 56px)); }
.onboarding-guide__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 0 20px;
}
.onboarding-guide__header > strong { color: var(--color-gray-900); font-size: 21px; line-height: 1.2; }
.onboarding-guide__actions { display: flex; align-items: center; gap: 4px; }
.onboarding-guide__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-gray-600);
  font: inherit;
  cursor: pointer;
}
.onboarding-guide__actions button:hover { background: var(--color-gray-100); }
.onboarding-guide__actions button svg { width: 20px; height: 20px; }
.onboarding-guide__actions .onboarding-guide__edit,
.onboarding-guide__actions .onboarding-guide__all { width: auto; padding: 0 7px; color: var(--color-primary); font-size: 14px; }
.onboarding-guide__progress { height: 7px; margin: 0 20px 14px; flex: 0 0 auto; overflow: hidden; border-radius: 999px; background: var(--color-gray-200); }
.onboarding-guide__progress span { display: block; width: var(--onboarding-progress); height: 100%; border-radius: inherit; background: var(--color-primary); transition: width .22s ease; }
.onboarding-guide__summary { display: flex; flex: 0 0 auto; align-items: baseline; gap: 8px; padding: 0 20px 10px; color: var(--color-gray-500); font-size: 11px; }
.onboarding-guide__summary strong { color: var(--color-gray-800); font-size: 12px; }
.onboarding-guide__body { min-height: 0; padding: 0 8px 9px; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.onboarding-guide__section { padding: 0 12px; }
.onboarding-guide__section.is-open { margin-bottom: 6px; padding: 14px 14px 10px; border-radius: 14px; background: var(--color-gray-50); }
.onboarding-guide__section-title { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 47px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.onboarding-guide__section-title:hover strong { color: var(--color-primary-dark); }
.onboarding-guide__section-title strong { min-width: 0; color: var(--color-gray-900); font-size: 16px; line-height: 1.3; }
.onboarding-guide__section-title svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--color-gray-500); }
.onboarding-guide__tasks { display: grid; gap: 2px; padding-bottom: 3px; }
.onboarding-guide__task {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 54px;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-gray-900);
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
}
.onboarding-guide__task:not(:disabled) { cursor: pointer; }
.onboarding-guide__task:not(:disabled):hover { background: #fff; }
.onboarding-guide__task.is-locked { color: var(--color-gray-400); cursor: not-allowed; }
.onboarding-guide__task-copy { display: grid; gap: 3px; min-width: 0; }
.onboarding-guide__task-copy strong { color: inherit; font-size: inherit; font-weight: 500; }
.onboarding-guide__task-copy small { color: var(--color-gray-500); font-size: 11px; font-weight: 400; line-height: 1.42; }
.onboarding-guide__task.is-locked .onboarding-guide__task-copy small { color: var(--color-gray-400); }
.onboarding-guide__task-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-200);
  color: var(--color-gray-400);
  margin-top: 1px;
}
.onboarding-guide__task-state svg { width: 16px; height: 16px; }
.onboarding-guide__task.is-current .onboarding-guide__task-state { color: var(--color-gray-500); }
.onboarding-guide__task.is-complete .onboarding-guide__task-state { background: var(--color-primary); color: #fff; }
.onboarding-guide__section.is-locked .onboarding-guide__section-title strong { color: var(--color-gray-700); }
.onboarding-guide-launcher {
  position: absolute;
  z-index: 10;
  right: 28px;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--color-gray-900);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.onboarding-guide-launcher svg { width: 17px; height: 17px; color: var(--color-primary); }
.onboarding-guide-launcher small { color: var(--color-gray-500); font-size: 10px; font-weight: 700; }
.onboarding-guide-launcher--production { position: fixed; z-index: 180; right: 24px; bottom: 24px; }

html.onboarding-tour-open .onboarding-guide--production,
html.onboarding-tour-open .onboarding-guide-launcher--production {
  visibility: hidden;
  pointer-events: none;
}

/* Blocking application dialogs own the viewport. Setup and Help return in
   their previous state as soon as the dialog is removed. */
html.application-dialog-open .onboarding-guide--production,
html.application-dialog-open .onboarding-guide-launcher--production,
html.application-dialog-open .hx-help-launcher {
  visibility: hidden;
  pointer-events: none;
}

.core-context-section-heading,
.core-context-inline-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray-800);
  font-size: 14px;
  font-weight: 650;
}
.core-context-section-heading { margin-bottom: 16px; }
.core-context-inline-heading { flex: 1 0 100%; margin-bottom: 2px; }
.core-context-help {
  position: relative;
  display: inline-grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 50%;
  background: #fff;
  color: var(--color-gray-500);
  cursor: pointer;
  vertical-align: middle;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.core-context-help:hover {
  border-color: var(--color-primary-200);
  background: var(--color-primary-light);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.core-context-help svg { width: 14px; height: 14px; }
.core-context-field-label,
.recipe-toggle-title > .core-context-help,
.recipe-card-heading > .core-context-help,
.recipe-nutrition-cell__label > .core-context-help,
.card-title > .core-context-help {
  vertical-align: middle;
}
.core-context-field-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.core-context-help--field {
  display: inline-grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-inline-start: 3px;
  border: 0;
  background: transparent;
  color: var(--color-gray-400);
}
.core-context-help--field:hover {
  background: var(--color-primary-50);
  transform: none;
}
.core-context-help--field svg { width: 13px; height: 13px; }
.recipe-ingredients-table th .core-context-field-label {
  gap: 2px;
  white-space: nowrap;
}
.recipe-ingredients-table th .core-context-help--field {
  flex-basis: 16px;
  width: 16px;
  height: 16px;
  margin-inline-start: 1px;
}
.recipe-ingredients-table th .core-context-help--field svg { width: 12px; height: 12px; }
.core-context-help.is-intro-highlight::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(59, 130, 246, .42);
  border-radius: inherit;
  animation: core-context-help-pulse 1.05s ease-out infinite;
  pointer-events: none;
}
.core-context-help.is-intro-highlight {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
@keyframes core-context-help-pulse {
  0% { opacity: .8; transform: scale(.88); }
  72%, 100% { opacity: 0; transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .core-context-help.is-intro-highlight::after { animation: none; opacity: .7; }
}

.onboarding-tour-layer { position: fixed; z-index: 2200; inset: 0; pointer-events: none; }
.onboarding-tour__veil {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.onboarding-tour__veil [data-tour-veil-fill] { fill: rgba(30, 41, 59, .34); }
.onboarding-tour__dimmer {
  position: fixed;
  pointer-events: auto;
  background: transparent;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.onboarding-tour__ring {
  position: fixed;
  border: 1.5px solid rgba(59, 130, 246, .92);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12), 0 8px 24px rgba(15, 23, 42, .16);
  pointer-events: none;
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.onboarding-tour__ring.is-actionable {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .16), 0 8px 24px rgba(15, 23, 42, .16);
}
.onboarding-tour__card {
  position: fixed;
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--color-gray-200);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
  color: var(--color-gray-900);
  pointer-events: auto;
}
.onboarding-tour__step { position: absolute; top: 17px; right: 52px; color: var(--color-gray-500); font-size: 11px; font-weight: 700; }
.onboarding-tour__close { position: absolute; top: 10px; right: 10px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--color-gray-500); cursor: pointer; }
.onboarding-tour__close:hover { background: var(--color-gray-100); }
.onboarding-tour__close svg { width: 18px; height: 18px; }
.onboarding-tour__eyebrow { width: fit-content; padding: 5px 9px; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 11px; font-weight: 750; }
.onboarding-tour__card h3 { max-width: 270px; margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.onboarding-tour__card > p { margin: 0; color: var(--color-gray-600); font-size: 13px; line-height: 1.52; }
.onboarding-tour__appears { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 12px; background: var(--color-gray-50); color: var(--color-gray-600); font-size: 12px; line-height: 1.42; }
.onboarding-tour__appears svg { width: 18px; height: 18px; color: var(--color-primary); }
.onboarding-tour__appears span { display: grid; gap: 2px; }
.onboarding-tour__appears strong { color: var(--color-gray-900); font-size: 11px; }
.onboarding-tour__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.onboarding-tour__actions .btn { min-width: 0; min-height: 44px; justify-content: center; white-space: normal; }
.onboarding-tour__click-hint { display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 11px 12px; border-radius: 12px; background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 12px; font-weight: 700; line-height: 1.4; }
.onboarding-tour__click-hint svg { flex: 0 0 18px; width: 18px; height: 18px; }

html.onboarding-flow-open { overflow: hidden; }
.onboarding-flow-layer {
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(71, 85, 105, .28);
  backdrop-filter: blur(2px);
}
.onboarding-flow-layer--production { position: fixed; z-index: 2100; }
.onboarding-flow-layer--embedded { position: absolute; z-index: 30; }
.onboarding-flow {
  display: flex;
  width: min(960px, 100%);
  max-height: min(760px, calc(100dvh - 64px));
  min-height: min(620px, calc(100dvh - 64px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 32px 80px rgba(15, 23, 42, .28);
}
.onboarding-flow-layer--embedded .onboarding-flow {
  max-height: calc(100% - 32px);
  min-height: min(620px, calc(100% - 32px));
}
.onboarding-flow__top {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 24px;
  padding: 34px 40px 0;
}
.onboarding-flow__segments { display: grid; grid-template-columns: repeat(var(--onboarding-flow-steps, 7), minmax(0, 1fr)); gap: 10px; }
.onboarding-flow__segments span { height: 7px; border-radius: 999px; background: var(--color-gray-200); }
.onboarding-flow__segments span.is-current,
.onboarding-flow__segments span.is-complete { background: var(--color-primary); }
.onboarding-flow__close {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-gray-600);
  cursor: pointer;
}
.onboarding-flow__close:hover { background: var(--color-gray-100); }
.onboarding-flow__close svg { width: 25px; height: 25px; }
.onboarding-flow__body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 38px 60px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.onboarding-flow__step-label { margin-bottom: 10px; color: var(--color-primary); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.onboarding-flow__body h2 { max-width: 760px; margin: 0; color: var(--color-gray-900); font-size: clamp(28px, 4cqi, 40px); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }
.onboarding-flow__body > p { max-width: 760px; margin: 14px 0 0; color: var(--color-gray-700); font-size: 17px; line-height: 1.5; }
.onboarding-flow__content { display: grid; gap: 22px; margin-top: 34px; }
.onboarding-flow__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.onboarding-flow__field { display: grid; gap: 8px; }
.onboarding-flow__field--wide { grid-column: 1 / -1; }
.onboarding-flow__field label,
.onboarding-flow__legend { color: var(--color-gray-900); font-size: 13px; font-weight: 700; }
.onboarding-flow__field small { color: var(--color-gray-500); font-size: 11px; line-height: 1.4; }
.onboarding-flow__field .form-input { min-height: 40px; font-size: 14px; }
.onboarding-flow__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.onboarding-flow__choice { position: relative; display: flex; min-height: 92px; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--color-gray-200); border-radius: 14px; background: #fff; cursor: pointer; }
.onboarding-flow__choice:hover { border-color: var(--color-gray-400); }
.onboarding-flow__choice:has(input:checked) { border: 2px solid var(--color-primary); padding: 15px; background: var(--color-primary-light); }
.onboarding-flow__choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.onboarding-flow__choice-mark { display: inline-flex; flex: 0 0 22px; width: 22px; height: 22px; align-items: center; justify-content: center; border: 1px solid var(--color-gray-300); border-radius: 50%; background: #fff; }
.onboarding-flow__choice:has(input:checked) .onboarding-flow__choice-mark { border: 6px solid var(--color-primary); }
.onboarding-flow__choice-copy { display: grid; gap: 4px; min-width: 0; }
.onboarding-flow__choice-copy strong { color: var(--color-gray-900); font-size: 14px; line-height: 1.35; }
.onboarding-flow__choice-copy small { color: var(--color-gray-600); font-size: 12px; line-height: 1.4; }
.onboarding-flow__selected {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  background: var(--color-gray-50);
}
.onboarding-flow__selected-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: #fff; color: var(--color-primary); }
.onboarding-flow__selected-icon svg { width: 20px; height: 20px; }
.onboarding-flow__selected-copy { display: grid; gap: 3px; min-width: 0; }
.onboarding-flow__selected-copy strong { color: var(--color-gray-900); font-size: 14px; }
.onboarding-flow__selected-copy small { color: var(--color-gray-500); font-size: 11px; }
.onboarding-flow__connection { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--color-gray-500); font-size: 12px; }
.onboarding-flow__connection svg { width: 16px; height: 16px; }
.onboarding-flow__error { margin-top: 20px; padding: 11px 13px; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: 12px; line-height: 1.45; }
.onboarding-flow__error[hidden] { display: none; }
.onboarding-flow__notice { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 16px; border: 1px solid var(--color-gray-200); border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.5; }
.onboarding-flow__notice > svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--color-gray-600); }
.onboarding-flow__notice strong { color: var(--color-gray-900); font-weight: 600; }
.onboarding-flow__notice p { margin: 6px 0 0; color: var(--color-gray-600); }
.onboarding-flow__footer { display: flex; flex: 0 0 auto; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 20px 60px 32px; border-top: 1px solid var(--color-gray-100); background: #fff; }
.onboarding-flow__footer-left { display: grid; gap: 8px; color: var(--color-gray-500); }
.onboarding-flow__footer-left small { max-width: 560px; font-size: 11px; line-height: 1.4; }
.onboarding-flow__back { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--color-primary); font: inherit; font-size: 13px; cursor: pointer; }
.onboarding-flow__back svg { width: 15px; height: 15px; }
.onboarding-flow__continue { min-width: 148px; min-height: 44px; justify-content: center; border-radius: 12px; font-size: 15px; }
.onboarding-flow__continue:disabled { cursor: not-allowed; opacity: .52; }
.onboarding-flow__spinner { animation: onboarding-flow-spin .8s linear infinite; }
@keyframes onboarding-flow-spin { to { transform: rotate(360deg); } }

.meal-plan-stripe-modal-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 44px;
  background: rgba(71, 85, 105, .20);
  backdrop-filter: blur(1px);
}
.meal-plan-stripe-modal {
  display: flex;
  width: min(960px, 100%);
  height: min(700px, calc(100% - 32px));
  min-height: 0;
  max-height: calc(100% - 32px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(15, 23, 42, .24);
}
.meal-plan-stripe-modal__top { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 24px; padding: 38px 42px 0; }
.meal-plan-stripe-modal__segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.meal-plan-stripe-modal__segments span { height: 7px; border-radius: 999px; background: var(--color-gray-200); }
.meal-plan-stripe-modal__segments span.is-current,
.meal-plan-stripe-modal__segments span.is-complete { background: var(--color-primary); }
.meal-plan-stripe-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-gray-600);
  cursor: pointer;
}
.meal-plan-stripe-modal__close:hover { background: var(--color-gray-100); }
.meal-plan-stripe-modal__close svg { width: 25px; height: 25px; }
.meal-plan-stripe-modal__body { min-height: 0; flex: 1 1 auto; padding: 52px 64px 24px; overflow-y: auto; overscroll-behavior: contain; }
.meal-plan-stripe-modal__body h2 { max-width: 760px; margin: 0; color: var(--color-gray-900); font-size: clamp(30px, 4cqi, 42px); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }
.meal-plan-stripe-modal__body > p { max-width: 740px; margin: 16px 0 0; color: var(--color-gray-700); font-size: 18px; line-height: 1.5; }
.meal-plan-stripe-modal__choices { margin-top: 44px; }
.meal-plan-stripe-options.erp-choice-cards--2 { grid-template-columns: 1fr; gap: 18px; }
.meal-plan-stripe-options .erp-choice-card { min-height: 116px; align-items: flex-start; gap: 20px; padding: 24px 26px; border-radius: 16px; box-shadow: none; transform: none; }
.meal-plan-stripe-options .erp-choice-card:hover { border-color: var(--color-gray-400); box-shadow: none; transform: none; }
.meal-plan-stripe-options .erp-choice-card__status {
  order: -1;
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  margin: 2px 0 0;
  border-color: var(--color-gray-300);
  opacity: 1;
  transform: none;
}
.meal-plan-stripe-options .erp-choice-card__status svg { display: none; }
.meal-plan-stripe-options .erp-choice-card:has(.erp-choice-card__control:checked) .erp-choice-card__status { border-color: var(--color-primary); background: #fff; }
.meal-plan-stripe-options .erp-choice-card:has(.erp-choice-card__control:checked) .erp-choice-card__status::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--color-primary); }
.meal-plan-stripe-options .erp-choice-card__copy { gap: 7px; }
.meal-plan-stripe-options .erp-choice-card__title { font-size: 18px; line-height: 1.3; }
.meal-plan-stripe-options .erp-choice-card__description { color: var(--color-gray-700); font-size: 16px; line-height: 1.55; }
.meal-plan-stripe-modal__footer { display: flex; flex: 0 0 auto; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 20px 64px 36px; }
.meal-plan-stripe-modal__help { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--color-gray-900); font-size: 15px; }
.meal-plan-stripe-modal__help button { padding: 0; border: 0; background: transparent; color: var(--color-primary); font: inherit; cursor: pointer; }
.meal-plan-stripe-modal__back { display: inline-flex; align-items: center; gap: 6px; }
.meal-plan-stripe-modal__back svg { width: 15px; height: 15px; }
.meal-plan-stripe-modal__next {
  min-width: 138px;
  min-height: 58px;
  padding: 0 30px;
  border: 0;
  border-radius: 13px;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.meal-plan-stripe-modal__next:disabled { background: var(--color-primary-300); cursor: not-allowed; opacity: .68; }

@container (max-width: 600px) {
  .meal-plan-stripe-demo { min-height: 720px; border-radius: 14px; }
  .meal-plan-stripe-demo__notice { top: 10px; max-width: calc(100% - 20px); white-space: nowrap; }
  .meal-plan-stripe-demo__workspace { padding: 60px 14px 20px; }
  .meal-plan-stripe-demo__workspace-head { align-items: flex-start; }
  .meal-plan-stripe-demo__workspace-head .btn { display: none; }
  .meal-plan-stripe-demo__workspace-head h3 { font-size: 22px; }
  .meal-plan-stripe-demo__stats { grid-template-columns: 1fr; }
  .meal-plan-stripe-demo__stats > div + div { border-top: 1px solid var(--color-gray-200); border-left: 0; }
  .meal-plan-stripe-demo__stats > div:nth-child(n+3) { display: none; }
  .meal-plan-stripe-demo__calendar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .meal-plan-stripe-demo__calendar-grid span { min-height: 56px; }
  .onboarding-guide,
  .onboarding-guide.is-expanded { right: 12px; bottom: 12px; width: calc(100% - 24px); max-height: calc(100% - 24px); }
  .onboarding-guide__header { min-height: 60px; padding: 0 14px; }
  .onboarding-guide__header > strong { font-size: 18px; }
  .onboarding-guide__actions button { min-width: 36px; min-height: 36px; }
  .onboarding-guide__actions .onboarding-guide__edit,
  .onboarding-guide__actions .onboarding-guide__all { display: none; }
  .onboarding-guide__progress { margin-inline: 14px; }
  .onboarding-guide__section-title strong { font-size: 14px; }
  .onboarding-guide__task { min-height: 50px; font-size: 13px; }
  .onboarding-guide-launcher { right: 12px; bottom: 12px; }
  .meal-plan-stripe-modal-layer { padding: 0; place-items: stretch; }
  .meal-plan-stripe-modal { width: 100%; height: 100%; min-height: 0; max-height: 100%; border: 0; border-radius: 0; }
  .meal-plan-stripe-modal__top { gap: 14px; padding: 22px 20px 0; }
  .meal-plan-stripe-modal__segments { gap: 7px; }
  .meal-plan-stripe-modal__segments span { height: 5px; }
  .meal-plan-stripe-modal__body { padding: 34px 22px 18px; }
  .meal-plan-stripe-modal__body h2 { font-size: 28px; }
  .meal-plan-stripe-modal__body > p { margin-top: 12px; font-size: 15px; }
  .meal-plan-stripe-modal__choices { margin-top: 28px; }
  .meal-plan-stripe-options .erp-choice-card { min-height: 0; gap: 14px; padding: 18px; }
  .meal-plan-stripe-options .erp-choice-card__status { width: 24px; height: 24px; flex-basis: 24px; }
  .meal-plan-stripe-options .erp-choice-card:has(.erp-choice-card__control:checked) .erp-choice-card__status::after { width: 12px; height: 12px; }
  .meal-plan-stripe-options .erp-choice-card__title { font-size: 16px; }
  .meal-plan-stripe-options .erp-choice-card__description { font-size: 13px; }
  .meal-plan-stripe-modal__footer { align-items: stretch; padding: 16px 22px 24px; flex-direction: column; }
  .meal-plan-stripe-modal__help { font-size: 13px; }
  .meal-plan-stripe-modal__next { width: 100%; min-height: 52px; }
}

@media (max-width: 620px) {
  .onboarding-tour__card {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto !important;
    max-height: min(52dvh, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    border-radius: 16px;
  }
  .onboarding-tour__card.is-mobile-top {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto;
  }
  .onboarding-tour__card h3 { font-size: 18px; }
  .onboarding-flow-layer { padding: 0; place-items: stretch; }
  .onboarding-flow { width: 100%; min-height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .onboarding-flow__top { gap: 12px; padding: 18px 16px 0; }
  .onboarding-flow__segments { gap: 5px; }
  .onboarding-flow__segments span { height: 5px; }
  .onboarding-flow__body { padding: 26px 18px 20px; }
  .onboarding-flow__body h2 { font-size: 27px; }
  .onboarding-flow__body > p { font-size: 14px; }
  .onboarding-flow__content { margin-top: 26px; }
  .onboarding-flow__fields { grid-template-columns: minmax(0, 1fr); }
  .onboarding-flow__field--wide { grid-column: auto; }
  .onboarding-flow__choices { grid-template-columns: minmax(0, 1fr); }
  .onboarding-flow__choice { min-height: 74px; }
  .onboarding-flow__footer { align-items: stretch; padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0px)); flex-direction: column; }
  .onboarding-flow__continue { width: 100%; min-height: 52px; }
  .onboarding-guide--production,
  .onboarding-guide--production.is-expanded {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
  }
  .onboarding-guide--production .onboarding-guide__header { min-height: 60px; padding: 0 14px; }
  .onboarding-guide--production .onboarding-guide__header > strong { font-size: 18px; }
  .onboarding-guide--production .onboarding-guide__actions button { min-width: 36px; min-height: 36px; }
  .onboarding-guide--production .onboarding-guide__actions .onboarding-guide__edit,
  .onboarding-guide--production .onboarding-guide__actions .onboarding-guide__all { display: none; }
  .onboarding-guide--production .onboarding-guide__progress { margin-inline: 14px; }
  .onboarding-guide--production .onboarding-guide__summary { padding-inline: 14px; }
  .onboarding-guide--production .onboarding-guide__section-title strong { font-size: 14px; }
  .onboarding-guide--production .onboarding-guide__task { min-height: 50px; font-size: 13px; }
  .onboarding-guide-launcher--production { right: 12px; bottom: 12px; }
}

/* ==================== BACKLOG MODULES (spec §2, draft — approved via UI Lab) ==================== */

/* --- renderToggle (§2.7) --- */
/* Keep the focusable checkbox inside its visual control. An unanchored
   absolute input can scroll the clipped application shell on focus. */
.erp-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.erp-toggle input { position: absolute; top: 0; inset-inline-start: 0; opacity: 0; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: 0; border: 0; padding: 0; }
.erp-toggle__track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--color-gray-300); transition: background 0.15s; flex: none; }
.erp-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.erp-toggle input:checked + .erp-toggle__track { background: var(--color-primary); }
.erp-toggle input:checked + .erp-toggle__track .erp-toggle__thumb { transform: translateX(18px); }
.erp-toggle input:focus-visible + .erp-toggle__track { outline: 2px solid var(--color-primary-200); outline-offset: 1px; }
.erp-toggle--sm .erp-toggle__track { width: 32px; height: 18px; }
.erp-toggle--sm .erp-toggle__thumb { width: 14px; height: 14px; }
.erp-toggle--sm input:checked + .erp-toggle__track .erp-toggle__thumb { transform: translateX(14px); }
.erp-toggle.is-disabled { opacity: 0.5; cursor: not-allowed; }
.erp-toggle__label { font-size: 13px; color: var(--color-gray-700); }

/* --- renderSkeleton (§2.8) --- */
.erp-skeleton-group { display: flex; flex-direction: column; gap: 10px; }
.erp-skeleton { background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%); background-size: 200% 100%; animation: erp-skeleton-shimmer 1.4s ease infinite; border-radius: 6px; }
@keyframes erp-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.erp-skeleton--line { height: 12px; width: 100%; }
.erp-skeleton--short { width: 40%; }
.erp-skeleton--pill { height: 22px; width: 84px; border-radius: 999px; }
.erp-skeleton--heading { height: 20px; width: 55%; }
.erp-skeleton--card { height: 96px; border-radius: 12px; }
.erp-skeleton-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 14px; align-items: center; }
.erp-skeleton-metric-card { display: grid; align-content: center; gap: 10px; min-height: 110px; padding: 18px 20px; border: 1px solid var(--color-gray-200); border-radius: 12px; background: #fff; }
.erp-skeleton-metric-card .erp-skeleton--heading { width: 68%; height: 24px; }
.erp-data-table-skeleton { overflow: hidden; width: 100%; border: 1px solid var(--color-gray-200); border-radius: 10px; background: #fff; }
.erp-data-table-skeleton__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 16px; border-bottom: 1px solid var(--color-gray-200); }
.erp-data-table-skeleton__search { width: min(220px, 48%); height: 36px; border-radius: 9px; }
.erp-data-table-skeleton__meta { width: 92px; height: 10px; }
.erp-data-table-skeleton__viewport { overflow: hidden; }
.erp-data-table-skeleton__header,
.erp-data-table-skeleton__row { display: grid; min-width: max-content; }
.erp-data-table-skeleton--cols-1 .erp-data-table-skeleton__header,
.erp-data-table-skeleton--cols-1 .erp-data-table-skeleton__row { grid-template-columns: minmax(220px, 1fr); }
.erp-data-table-skeleton--cols-2 { --erp-data-table-skeleton-columns: 1; }
.erp-data-table-skeleton--cols-3 { --erp-data-table-skeleton-columns: 2; }
.erp-data-table-skeleton--cols-4 { --erp-data-table-skeleton-columns: 3; }
.erp-data-table-skeleton--cols-5 { --erp-data-table-skeleton-columns: 4; }
.erp-data-table-skeleton--cols-6 { --erp-data-table-skeleton-columns: 5; }
.erp-data-table-skeleton--cols-7 { --erp-data-table-skeleton-columns: 6; }
.erp-data-table-skeleton--cols-8 { --erp-data-table-skeleton-columns: 7; }
.erp-data-table-skeleton:not(.erp-data-table-skeleton--cols-1) .erp-data-table-skeleton__header,
.erp-data-table-skeleton:not(.erp-data-table-skeleton--cols-1) .erp-data-table-skeleton__row { grid-template-columns: minmax(170px, 1.45fr) repeat(var(--erp-data-table-skeleton-columns), minmax(118px, 1fr)); }
.erp-data-table-skeleton__header { background: var(--color-gray-50); }
.erp-data-table-skeleton__cell { display: flex; align-items: center; min-width: 0; min-height: 40px; padding: 0 16px; border-inline-end: 1px solid var(--color-gray-200); border-bottom: 1px solid var(--color-gray-200); }
.erp-data-table-skeleton__cell:last-child { border-inline-end: 0; }
.erp-data-table-skeleton__cell .erp-skeleton { width: 58%; height: 11px; }
.erp-data-table-skeleton__header .erp-skeleton { width: 46%; height: 12px; }
.erp-data-table-skeleton__cell:not(:first-child) .erp-skeleton { width: 54%; margin-inline-start: auto; }
.erp-data-table-skeleton__row:nth-child(3n) .erp-data-table-skeleton__cell:first-child .erp-skeleton { width: 72%; }
.erp-data-table-skeleton__row:nth-child(3n + 1) .erp-data-table-skeleton__cell:first-child .erp-skeleton { width: 48%; }
.erp-data-table-skeleton__total { background: var(--color-gray-50); }
.erp-data-table-skeleton__total .erp-skeleton { height: 13px; }
.erp-skeleton-chart { display: grid; grid-template-rows: auto minmax(280px, 1fr); gap: 20px; min-height: 380px; padding: 20px; border: 1px solid var(--color-gray-200); border-radius: 10px; background: #fff; }
.erp-skeleton-chart__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.erp-skeleton-chart__plot { position: relative; overflow: hidden; border-inline-start: 1px solid var(--color-gray-200); border-bottom: 1px solid var(--color-gray-200); background: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, var(--color-gray-100) 56px); }
.erp-skeleton-chart__bars { position: absolute; inset: 28px 20px 0 24px; display: flex; align-items: end; justify-content: space-around; gap: 12px; }
.erp-skeleton-chart__bars span { width: min(44px, 8%); min-height: 24%; border-radius: 6px 6px 0 0; }
.erp-skeleton-chart__bars span:nth-child(2n) { height: 48%; }
.erp-skeleton-chart__bars span:nth-child(3n) { height: 72%; }
.erp-skeleton-chart__bars span:nth-child(4n) { height: 58%; }
@media (prefers-reduced-motion: reduce) { .erp-skeleton { animation: none; } }

/* --- renderAvatar (§2.9) --- */
.erp-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--erp-avatar-size, 32px); height: var(--erp-avatar-size, 32px); border-radius: 50%; overflow: hidden; flex: none; vertical-align: middle; }
.erp-avatar--square { border-radius: var(--radius-md); }
.erp-avatar img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.erp-avatar__initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: calc(var(--erp-avatar-size, 32px) * 0.38); font-weight: 600; letter-spacing: 0.02em; }
.erp-avatar--blue .erp-avatar__initials, .erp-avatar__initials.erp-avatar--blue { background: var(--color-primary-light); color: var(--color-primary-dark); }
.erp-avatar--green .erp-avatar__initials, .erp-avatar__initials.erp-avatar--green { background: var(--color-success-light); color: var(--color-success-dark); }
.erp-avatar--yellow .erp-avatar__initials, .erp-avatar__initials.erp-avatar--yellow { background: var(--color-warning-light); color: var(--color-warning-dark); }
.erp-avatar--purple .erp-avatar__initials, .erp-avatar__initials.erp-avatar--purple { background: #ede9fe; color: #6d28d9; }
.erp-avatar--rose .erp-avatar__initials, .erp-avatar__initials.erp-avatar--rose { background: var(--color-danger-light); color: var(--color-danger-dark); }
.erp-avatar--slate .erp-avatar__initials, .erp-avatar__initials.erp-avatar--slate { background: var(--color-gray-100); color: var(--color-gray-600); }

/* --- renderPagination (§2.4) --- */
.erp-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.erp-pagination--center { justify-content: center; }
.erp-pagination__controls { display: flex; align-items: center; gap: 4px; }
.erp-pagination__meta { font-size: 12px; color: var(--color-gray-500); }
.erp-pagination__page { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-gray-200); background: #fff; border-radius: 8px; font-size: 13px; color: var(--color-gray-700); cursor: pointer; }
.erp-pagination__page:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.erp-pagination__page.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
.erp-pagination__page:disabled { opacity: 0.45; cursor: default; }
.erp-pagination__ellipsis { padding: 0 4px; color: var(--color-gray-400); font-size: 13px; }

/* --- renderFilterChips (§2.5) --- */
.erp-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.erp-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--color-gray-200); background: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--color-gray-700); cursor: pointer; transition: all 0.15s; }
.erp-filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.erp-filter-chip.is-active { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); }
.erp-filter-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.erp-filter-chip__count { font-size: 11px; color: var(--color-gray-400); }
.erp-filter-chip.is-active .erp-filter-chip__count { color: var(--color-primary); }

/* --- renderDataTable extras (§2.3) --- */
.erp-data-table__row--link { cursor: pointer; }
.erp-data-table__row--link:hover,
.erp-data-table__row--clickable:hover { background: var(--color-gray-50); }
.erp-data-table__th--sortable { cursor: pointer; user-select: none; }
.erp-data-table__th--sortable:hover { color: var(--color-gray-700); }
.erp-data-table__sort-caret { color: var(--color-gray-400); }
.erp-data-table__th--sorted .erp-data-table__sort-caret { color: inherit; }
.erp-data-table--compact th, .erp-data-table--compact td { padding: 5px 14px; }
.erp-data-table--sticky thead th { position: sticky; top: 0; background: #fff; z-index: 2; }

/* --- confirmDialog (§2.6) --- */
.erp-confirm__text { margin: 0 0 16px; font-size: 14px; color: var(--color-gray-700); line-height: 1.5; }
.erp-confirm__body { margin: -4px 0 16px; }
.erp-confirm__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.erp-confirm__row { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--color-gray-200); border-radius: 10px; background: var(--color-gray-50); font-size: 13px; color: var(--color-gray-700); }
.erp-confirm__row strong { color: var(--color-gray-900); }
.erp-confirm__row span { font-variant-numeric: tabular-nums; }
.erp-confirm__row.is-negative b { color: #b91c1c; }
.erp-confirm__actions { display: flex; justify-content: flex-end; gap: 10px; }
.erp-confirm-modal .erp-dynamic-modal__close { width: 44px; height: 44px; }
.erp-confirm-modal .erp-confirm__actions .btn { min-height: 44px; }

/* --- renderProgressBar (§2.10) --- */
.erp-progress-row { display: flex; align-items: center; gap: 10px; }
.erp-progress-row .erp-progress { flex: 1; min-width: 0; margin-top: 0; }
.erp-progress-label { font-size: 12px; color: var(--color-gray-600); white-space: nowrap; }
.erp-progress--lg { height: 8px; }

/* --- renderKanbanBoard (§2.11) --- */
.erp-kanban { display: grid; grid-template-columns: repeat(var(--erp-kanban-cols, 4), minmax(220px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.erp-kanban__column { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 10px; min-height: 120px; }
.erp-kanban__column.is-dragover { border-color: var(--color-primary); background: var(--color-primary-light); }
.erp-kanban__column-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 10px; }
.erp-kanban__column-title { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0.04em; color: var(--color-gray-600); }
.erp-kanban__column-count { font-size: 11px; font-weight: 600; background: var(--color-gray-200); color: var(--color-gray-600); border-radius: 999px; padding: 1px 8px; }
.erp-kanban__cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.erp-kanban__card { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); padding: 10px 12px; cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.erp-kanban__card:active { cursor: grabbing; }
.erp-kanban__card-title { font-size: 13px; font-weight: 600; color: var(--color-gray-800); }
.erp-kanban__card-sub { font-size: 12px; color: var(--color-gray-500); margin-top: 2px; }
@media (max-width: 900px) { .erp-kanban { grid-template-columns: repeat(var(--erp-kanban-cols, 4), 240px); } }

/* --- renderDetailGrid (§2.12) --- */
.erp-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--erp-detail-aside, 360px); gap: 20px; align-items: start; }
@media (max-width: 1024px) { .erp-detail-grid { grid-template-columns: 1fr; } }

/* --- renderChoiceCards: clear single/multi selection without visible native controls --- */
.erp-choice-cards {
  display: grid;
  gap: 12px;
}
.erp-choice-cards--1 { grid-template-columns: minmax(0, 1fr); }
.erp-choice-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.erp-choice-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.erp-choice-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.erp-choice-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--color-gray-900);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.erp-choice-card:hover {
  border-color: var(--color-gray-400);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.erp-choice-card:has(.erp-choice-card__control:focus-visible) {
  outline: 3px solid rgba(var(--color-primary-rgb), .18);
  outline-offset: 2px;
}
.erp-choice-card:has(.erp-choice-card__control:checked) {
  border: 2px solid var(--color-primary);
  box-shadow: none;
  outline: none;
}
.erp-choice-card.is-disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
  box-shadow: none;
}
.erp-choice-card__control {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
.erp-choice-card__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.erp-choice-card__icon svg { width: 19px; height: 19px; stroke-width: 1.8; }
.erp-choice-card__copy { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; }
.erp-choice-card__title {
  color: var(--color-gray-900);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.erp-choice-card__description {
  color: var(--color-gray-700);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.erp-choice-card__status {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .15s ease, transform .15s ease;
}
.erp-choice-card__status svg { width: 13px; height: 13px; stroke-width: 2.5; }
.erp-choice-card:has(.erp-choice-card__control:checked) .erp-choice-card__status {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  opacity: 1;
  transform: scale(1);
}
.erp-choice-cards--compact .erp-choice-card {
  min-height: 76px;
  padding: 14px;
}
.erp-choice-cards--compact .erp-choice-card__icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}
/* Stacked choices keep the entire card width available to descriptive copy. */
.erp-choice-cards--stacked .erp-choice-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  grid-template-rows: auto 1fr;
  align-content: start;
  column-gap: 12px;
  row-gap: 16px;
  border-width: 2px;
  padding: 18px;
}
.erp-choice-cards--stacked .erp-choice-card__icon { grid-area: 1 / 1; }
.erp-choice-cards--stacked .erp-choice-card__status { grid-area: 1 / 2; align-self: center; }
.erp-choice-cards--stacked .erp-choice-card__copy { grid-area: 2 / 1 / 3 / -1; gap: 8px; }
.erp-choice-cards--stacked.erp-choice-cards--compact .erp-choice-card { padding: 14px; row-gap: 12px; }
@media (max-width: 960px) {
  .erp-choice-cards--3, .erp-choice-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .erp-choice-cards--2, .erp-choice-cards--3, .erp-choice-cards--4 { grid-template-columns: 1fr; }
  .erp-choice-card { min-height: 0; }
}

/* Reusable state-aware onboarding wizard */
.integration-content,
#whatsappSetupWizardHost,
.erp-onboarding { min-width: 0; max-width: 100%; }
.erp-onboarding,
.erp-onboarding *,
.erp-onboarding *::before,
.erp-onboarding *::after { box-sizing: border-box; }
.erp-onboarding { display: flex; flex-direction: column; gap: 20px; }
.erp-onboarding__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.erp-onboarding__title { margin: 0; color: var(--gray-900); font-size: 20px; font-weight: 700; line-height: 1.3; }
.erp-onboarding__description { margin: 6px 0 0; color: var(--gray-700); font-size: 14px; line-height: 1.5; }
.erp-onboarding__counter { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); font-size: 12px; font-weight: 600; }
.erp-onboarding__progress { width: 100%; max-width: 100%; min-width: 0; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 2px 0 8px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.erp-onboarding__step { min-width: 126px; display: flex; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--gray-700); text-align: left; cursor: pointer; }
.erp-onboarding__step:hover:not(:disabled) { background: var(--gray-50); }
.erp-onboarding__step:disabled { cursor: not-allowed; opacity: .58; }
.erp-onboarding__step-index { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gray-300); border-radius: 50%; background: #fff; }
.erp-onboarding__step-index svg { width: 14px; height: 14px; }
.erp-onboarding__step-copy { min-width: 0; display: flex; flex-direction: column; }
.erp-onboarding__step-kicker { color: var(--gray-500); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: .02em; }
.erp-onboarding__step-title { max-width: 112px; overflow: hidden; color: inherit; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.erp-onboarding__step.is-current { background: var(--primary-light); color: var(--primary); }
.erp-onboarding__step.is-current .erp-onboarding__step-index { border-color: var(--primary); background: var(--primary); color: #fff; }
.erp-onboarding__step.is-complete { color: var(--color-success-dark); }
.erp-onboarding__step.is-complete .erp-onboarding__step-index { border-color: var(--color-success-light); background: var(--color-success-light); color: var(--color-success-dark); }
.erp-onboarding__connector { min-width: 20px; height: 1px; flex: 1 1 32px; background: var(--gray-200); }
.erp-onboarding__panel { overflow: hidden; border: 1px solid var(--gray-200); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.erp-onboarding__panel-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--gray-100); }
.erp-onboarding__panel-icon { width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--primary-light); color: var(--primary); }
.erp-onboarding__panel-icon svg { width: 20px; height: 20px; }
.erp-onboarding__panel-kicker { margin-bottom: 3px; color: var(--primary); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: .02em; }
.erp-onboarding__panel-title { margin: 0; color: var(--gray-900); font-size: 20px; font-weight: 700; line-height: 1.35; }
.erp-onboarding__panel-description { margin: 6px 0 0; color: var(--gray-700); font-size: 14px; line-height: 1.5; }
.erp-onboarding__content { min-height: 280px; padding: 24px; }
.erp-onboarding__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--gray-100); background: #fff; }
.erp-onboarding__footer-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.erp-onboarding__choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.erp-onboarding__choice { padding: 18px; border: 1px solid var(--gray-200); border-radius: 12px; background: #fff; }
.erp-onboarding__choice-icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; color: var(--gray-600); box-shadow: var(--shadow-xs); }
.erp-onboarding__choice-icon svg { width: 18px; height: 18px; stroke-width: 1.4; }
.erp-onboarding__choice-title { margin: 0 0 6px; color: var(--gray-900); font-size: 15px; font-weight: 700; line-height: 1.35; }
.erp-onboarding__choice-text { margin: 0; color: var(--gray-700); font-size: 13px; line-height: 1.55; }

@media (max-width: 768px) {
  .erp-onboarding__header { align-items: center; }
  .erp-onboarding__progress { margin: 0 -4px; }
  .erp-onboarding__step { min-width: 62px; justify-content: center; }
  .erp-onboarding__step-copy, .erp-onboarding__connector { display: none; }
  .erp-onboarding__panel-head, .erp-onboarding__content { padding: 18px; }
  .erp-onboarding__footer { padding: 14px 18px; }
  .erp-onboarding__choice-grid { grid-template-columns: 1fr; }

  .integration-layout { display: block !important; min-height: 0 !important; }
  .integration-sidebar { width: 100% !important; padding: 8px !important; border-right: 0 !important; border-bottom: 1px solid var(--gray-200); }
  .integration-sidebar > div:first-child { display: none; }
  .integration-nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
  .integration-nav > .int-folder { display: none; }
  .integration-nav > #aggregatorsContent,
  .integration-nav > #menuMappingContent { display: contents !important; }
  .integration-nav .int-nav-item { flex: 0 0 auto; padding: 9px 11px !important; border-left: 0 !important; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; }
  .integration-nav .int-nav-item.active { border-bottom-color: var(--primary); }
  .integration-content { padding: 16px !important; overflow-y: visible !important; }
}

/* --- renderAggregatorSettingsTab (§2.15) --- */
.erp-aggregator-tab__head { display: flex; align-items: center; gap: 14px; }
.erp-aggregator-tab__title { font-size: 16px; font-weight: 600; color: var(--color-gray-900); }
.erp-aggregator-tab__desc { font-size: 13px; color: var(--color-gray-500); margin-top: 2px; }

/* --- renderCheckbox (module over canonical .checkbox-wrapper) --- */
.checkbox-wrapper__label { font-size: 13px; color: var(--color-gray-700); }
.checkbox-wrapper.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* Employee detail: consistent Waiter / Hostess / Courier access cards */
.employee-app-access-list { display: grid; gap: 10px; }
.employee-app-access {
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.employee-app-access.is-enabled { border-color: #cbdcf8; background: #f7faff; }
.employee-app-access__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 7px 16px rgba(37, 99, 235, .18);
}
.employee-app-access.is-disabled .employee-app-access__icon {
  background: var(--gray-100);
  color: var(--gray-500);
  box-shadow: none;
}
.employee-app-access__icon svg { width: 21px; height: 21px; stroke-width: 1.4; }
.employee-app-access__body { min-width: 0; }
.employee-app-access__heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.employee-app-access__heading strong { color: var(--text-primary); font-size: 14px; font-weight: 650; }
.employee-app-access__status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.employee-app-access__status.is-active { background: var(--success-100); color: var(--success-700); }
.employee-app-access__status.is-invited { background: var(--warning-100); color: var(--warning-700); }
.employee-app-access__status.is-off { background: var(--gray-100); color: var(--gray-600); }
.employee-app-access__meta { margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 1.35; }
.employee-app-access__action {
  min-width: 104px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.employee-app-access__action svg { width: 14px; height: 14px; }
.employee-app-access__action.is-primary { background: var(--gradient-primary); color: #fff; }
.employee-app-access__action.is-danger { border-color: var(--danger-200); background: #fff; color: var(--danger-700); }
.employee-app-access__action.is-danger:hover { background: var(--danger-50); }
@media (max-width: 560px) {
  .employee-app-access { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; }
  .employee-app-access__icon { width: 40px; height: 40px; }
  .employee-app-access__action { grid-column: 1 / -1; width: 100%; min-height: 42px; }
}

/* Sentence-case ERP typography: hierarchy comes from weight and size, not caps. */
#app :where(h1, h2, h3, h4, h5, h6, label, legend, th, [class*="title"], [class*="heading"], [class*="label"], [class*="kicker"], [class*="eyebrow"]),
.erp-dynamic-modal :where(h1, h2, h3, h4, h5, h6, label, legend, th, [class*="title"], [class*="heading"], [class*="label"], [class*="kicker"], [class*="eyebrow"]),
#app [style*="text-transform: uppercase"],
#app [style*="text-transform:uppercase"],
.app [style*="text-transform: none"],
.erp-dynamic-modal [style*="text-transform: uppercase"],
.erp-dynamic-modal [style*="text-transform:uppercase"],
.erp-dynamic-modal [style*="text-transform: none"] {
  text-transform: none !important;
  letter-spacing: normal !important;
}

.invoice-ai-confirmation {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.invoice-ai-confirmation__icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}
.invoice-ai-confirmation p {
  margin: 2px 0 0;
  color: var(--color-gray-700);
  font-size: 14px;
  line-height: 1.6;
}

.invoice-discrepancy-callout {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #f0a24a;
  border-radius: 12px;
  background: #fff;
  color: #8a3b0a;
}
.invoice-discrepancy-callout__icon {
  width: 28px;
  height: 28px;
  margin: 0;
  place-self: center;
  stroke-width: 1.4;
  color: #d97706;
}
.invoice-discrepancy-callout__body { min-width: 0; }
.invoice-discrepancy-callout--supplier-trn {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}
.invoice-discrepancy-callout--supplier-trn .btn {
  white-space: nowrap;
}
.invoice-discrepancy-callout__title {
  margin: 0 0 6px;
  color: #8a3b0a;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}
.invoice-discrepancy-callout ul {
  margin: 0;
  padding-left: 19px;
}
.invoice-discrepancy-callout li,
.invoice-discrepancy-callout p {
  margin: 0;
  color: #9a4610;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .invoice-discrepancy-callout--supplier-trn {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .invoice-discrepancy-callout--supplier-trn .btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* Invoice AI extraction story */
.invoice-ai-experience {
  position: fixed;
  z-index: 15000;
  display: grid;
  place-items: center;
  padding: 32px;
  overflow: auto;
  background: rgba(246, 249, 253, .94);
  backdrop-filter: blur(14px) saturate(.9);
  opacity: 0;
  transition: opacity .24s ease;
  isolation: isolate;
}

.invoice-ai-experience.is-visible { opacity: 1; }

.invoice-ai-experience__shell {
  width: min(1040px, 100%);
  min-height: 560px;
  padding: 34px 38px 30px;
  border: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(28, 44, 70, .16), 0 3px 14px rgba(28, 44, 70, .06);
  transform: translateY(8px) scale(.99);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.invoice-ai-experience.is-visible .invoice-ai-experience__shell { transform: translateY(0) scale(1); }

.invoice-ai-experience__hero,
.invoice-ai-experience__brand,
.invoice-ai-experience__panel-label,
.invoice-ai-experience__story,
.invoice-ai-experience__cues {
  display: flex;
  align-items: center;
}

.invoice-ai-experience__hero {
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.invoice-ai-experience__brand {
  gap: 15px;
  min-width: 0;
}

.invoice-ai-experience__mark { flex: 0 0 auto; width: 36px; height: 36px; }
.invoice-ai-experience__brand h1 {
  margin: 0;
  color: #0d1729;
  font-size: clamp(27px, 3vw, 34px);
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.invoice-ai-experience__brand p {
  margin: 6px 0 0;
  color: #40516a;
  font-size: 13px;
  line-height: 1.35;
}

.invoice-ai-experience__cancel {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d8e0ea;
  border-radius: 50%;
  background: #fff;
  color: #152238;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.invoice-ai-experience__cancel svg { width: 17px; height: 17px; }
.invoice-ai-experience__cancel:hover { border-color: #aebccc; background: #f7f9fc; transform: scale(1.03); }
.invoice-ai-experience__cancel:disabled { cursor: default; opacity: .4; transform: none; }

.invoice-ai-experience__workbench {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, .86fr) 46px minmax(330px, 1.14fr);
  gap: 16px;
  align-items: stretch;
  min-height: 326px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #f8faff;
}

.invoice-ai-experience__document-panel,
.invoice-ai-experience__draft-panel {
  min-width: 0;
  border: 1px solid #dce3ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(32, 52, 82, .055);
  overflow: hidden;
}

.invoice-ai-experience__panel-label {
  justify-content: space-between;
  min-height: 50px;
  padding: 0 18px;
  border-bottom: 1px solid #e5eaf0;
  color: #162238;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.invoice-ai-experience__panel-label small { color: #566780; font-size: 12px; font-weight: 500; }
.invoice-ai-experience__panel-label svg { width: 17px; height: 17px; color: #2867f0; }

.invoice-ai-experience__document {
  position: relative;
  height: 276px;
  margin: 0;
  overflow: hidden;
  background: #f4f6f8;
}

.invoice-ai-experience__document-image {
  width: auto;
  max-width: calc(100% - 52px);
  height: calc(100% - 28px);
  display: block;
  margin: 14px auto;
  object-fit: contain;
  filter: saturate(.82) contrast(.98);
  opacity: .94;
  border-radius: 3px;
  box-shadow: 0 7px 22px rgba(20, 33, 53, .16);
}

.invoice-ai-experience__document-skeleton {
  width: 78%;
  height: 84%;
  margin: 22px auto;
  padding: 26px 22px;
  border: 1px solid #d9e0e9;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 54, 88, .07);
}

.invoice-ai-experience__document-skeleton span {
  display: block;
  height: 7px;
  margin-bottom: 14px;
  background: #e1e6ec;
}

.invoice-ai-experience__document-skeleton span:nth-child(1) { width: 44%; height: 11px; margin-bottom: 28px; }
.invoice-ai-experience__document-skeleton span:nth-child(2) { width: 72%; }
.invoice-ai-experience__document-skeleton span:nth-child(3) { width: 58%; margin-bottom: 30px; }
.invoice-ai-experience__document-skeleton span:nth-child(n+4) { width: 100%; height: 24px; margin-bottom: 5px; }

.invoice-ai-experience__scan {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 11%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2476ff, #5146e5);
  box-shadow: 0 0 14px rgba(36, 118, 255, .45), 0 6px 20px rgba(36, 118, 255, .12);
  animation: invoice-ai-scan 3.2s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.invoice-ai-experience__transfer {
  position: relative;
  align-self: center;
  height: 34px;
  overflow: hidden;
}

.invoice-ai-experience__transfer::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(40, 103, 240, .08), rgba(40, 103, 240, .5), rgba(81, 70, 229, .08));
}

.invoice-ai-experience__transfer svg {
  position: absolute;
  top: 7px;
  left: 0;
  width: 20px;
  height: 20px;
  color: #3267ee;
  fill: currentColor;
  filter: drop-shadow(0 2px 5px rgba(40, 103, 240, .25));
  animation: invoice-ai-transfer 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

.invoice-ai-experience__fields { padding: 2px 18px 0; }

.invoice-ai-experience__field {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 68px;
  padding: 10px 3px;
  border-bottom: 1px solid #e5eaf0;
  transition: color .3s ease;
}

.invoice-ai-experience__field:last-child { border-bottom: 0; }
.invoice-ai-experience__field > svg { width: 19px; height: 19px; color: #667792; transition: color .3s ease; }
.invoice-ai-experience__field > span { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.invoice-ai-experience__field small { color: #172238; font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.invoice-ai-experience__field strong { min-height: 16px; color: #0d1729; font-size: 14px; font-weight: 650; }
.invoice-ai-experience__field strong b { display: block; width: 72%; height: 7px; border-radius: 999px; background: #e1e6ec; animation: invoice-ai-breathe 1.8s ease-in-out infinite; }
.invoice-ai-experience__field:nth-child(2) strong b { width: 50%; }
.invoice-ai-experience__field:nth-child(3) strong b { width: 64%; }
.invoice-ai-experience__field:nth-child(4) strong b { width: 38%; }
.invoice-ai-experience__field.is-active > svg { color: #2867f0; }
.invoice-ai-experience__field.is-active small { color: #245fd9; }

.invoice-ai-experience__footer {
  margin-top: 20px;
  padding: 18px 20px 17px;
  border: 1px solid #e2e8f0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(32, 52, 82, .045);
}

.invoice-ai-experience__story {
  min-height: 62px;
}
.invoice-ai-experience__story > div { min-width: 0; }
.invoice-ai-experience__story h2 { margin: 0 0 7px; color: #0d1729; font-size: 22px; font-weight: 680; letter-spacing: -.03em; }
.invoice-ai-experience__story p { max-width: 720px; margin: 0; color: #40516a; font-size: 14px; line-height: 1.5; }

.invoice-ai-experience__cues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.invoice-ai-experience__cues span {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e9f0;
  color: transparent;
  font-size: 0;
  transition: background .3s ease;
}
.invoice-ai-experience__cues span.is-active,
.invoice-ai-experience__cues span.is-complete { background: linear-gradient(90deg, #2476ff, #5146e5); }
.invoice-ai-experience__cues span.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-100%);
  animation: invoice-ai-progress-shine 1.5s ease-in-out infinite;
}

.invoice-ai-experience.is-success .invoice-ai-experience__scan { animation-play-state: paused; opacity: 0; }
.invoice-ai-experience.is-success .invoice-ai-experience__transfer svg { color: #059669; }
.invoice-ai-experience.is-success .invoice-ai-experience__field > svg { color: #059669; }
.invoice-ai-experience.is-error .invoice-ai-experience__mark,
.invoice-ai-experience.is-error .invoice-ai-experience__story h2 { color: #dc2626; }
.invoice-ai-experience.is-cancelling .invoice-ai-experience__scan,
.invoice-ai-experience.is-cancelling .invoice-ai-experience__transfer svg { animation-play-state: paused; }

@keyframes invoice-ai-scan {
  from { transform: translateY(0); }
  to { transform: translateY(230px); }
}

@keyframes invoice-ai-transfer {
  0% { transform: translateX(-4px) scale(.72) rotate(-12deg); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(32px) scale(1) rotate(12deg); opacity: 0; }
}

@keyframes invoice-ai-progress-shine {
  to { transform: translateX(100%); }
}

@keyframes invoice-ai-breathe {
  0%, 100% { opacity: .45; }
  50% { opacity: .95; }
}

@media (max-width: 820px) {
  .invoice-ai-experience { align-items: start; padding: 14px; }
  .invoice-ai-experience__shell { min-height: 0; padding: 22px; border-radius: 22px; }
  .invoice-ai-experience__hero { align-items: flex-start; margin-bottom: 22px; }
  .invoice-ai-experience__brand { gap: 11px; }
  .invoice-ai-experience__mark { width: 30px; height: 30px; }
  .invoice-ai-experience__brand h1 { font-size: 27px; }
  .invoice-ai-experience__brand p { font-size: 12px; }
  .invoice-ai-experience__cancel { width: 36px; height: 36px; }
  .invoice-ai-experience__workbench { grid-template-columns: 1fr; min-height: 0; padding: 12px; border-radius: 19px; }
  .invoice-ai-experience__document-panel { display: none; }
  .invoice-ai-experience__transfer { display: none; }
  .invoice-ai-experience__footer { margin-top: 14px; padding: 16px; }
  .invoice-ai-experience__story { align-items: flex-start; }
  .invoice-ai-experience__story h2 { font-size: 18px; }
  .invoice-ai-experience__cues { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .invoice-ai-experience,
  .invoice-ai-experience__shell,
  .invoice-ai-experience__field,
  .invoice-ai-experience__field > svg,
  .invoice-ai-experience__cues span,
  .invoice-ai-experience__cues span::after { transition: none; }
  .invoice-ai-experience__scan,
  .invoice-ai-experience__transfer svg,
  .invoice-ai-experience__cues span::after,
  .invoice-ai-experience__field strong b { animation: none; }
}

/* Hostess landscape workspace */
.hostess-workspace{min-height:calc(100vh - 96px);background:#0b0d12;color:#f8fafc;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.hostess-toolbar{min-height:68px;padding:10px 16px;display:flex;align-items:center;gap:12px;background:#11141b;border-bottom:1px solid rgba(255,255,255,.08)}
.hostess-toolbar>div:first-of-type{display:flex;flex-direction:column;min-width:112px}.hostess-toolbar>div:first-of-type strong{font-size:18px}.hostess-toolbar>div:first-of-type span{font-size:11px;color:#94a3b8}
.hostess-back,.hostess-dates>button{width:44px;height:44px;border:0;border-radius:12px;background:#1b2029;color:#cbd5e1;display:grid;place-items:center;cursor:pointer}
.hostess-back svg,.hostess-dates svg{width:18px}.hostess-halls{display:flex;gap:6px;overflow-x:auto}.hostess-halls button{min-height:42px;padding:0 14px;border:1px solid #29303b;border-radius:12px;background:#171b22;color:#94a3b8;font-weight:600;white-space:nowrap}.hostess-halls button.is-active{background:var(--gradient-primary);border-color:var(--primary);color:white}.hostess-search{margin-left:auto;min-width:210px;max-width:280px}.hostess-search input{background:#171b22!important;border-color:#29303b!important;color:#f8fafc!important;caret-color:#60a5fa!important;-webkit-text-fill-color:#f8fafc!important}.hostess-search input::placeholder{color:#64748b!important;-webkit-text-fill-color:#64748b!important}.hostess-reservation-modal .form-control,.hostess-reservation-modal input,.hostess-reservation-modal textarea{color:#f8fafc!important;background:#171b22!important;border-color:#374151!important;caret-color:#60a5fa!important;-webkit-text-fill-color:#f8fafc!important}.hostess-reservation-modal input::placeholder,.hostess-reservation-modal textarea::placeholder{color:#94a3b8!important;-webkit-text-fill-color:#94a3b8!important}
.hostess-reservation-modal{--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-tertiary:#94a3b8;--border-primary:#29303b}.hostess-reservation-modal .erp-dynamic-modal__content{background:#11141b;color:#f8fafc;border:1px solid #29303b;box-shadow:0 30px 80px #000b}.hostess-reservation-modal .erp-dynamic-modal__header{background:#11141b;border-color:#29303b}.hostess-reservation-modal .erp-dynamic-modal__title{color:#f8fafc}.hostess-reservation-modal .erp-dynamic-modal__close{background:#1b2029;color:#94a3b8}.hostess-reservation-modal .erp-dynamic-modal__close:hover{background:#252b35;color:#fff}.hostess-reservation-modal .erp-dynamic-modal__body{background:#0f1218;color:#f8fafc}.hostess-reservation-modal .res-chip{background:#171b22!important;border-color:#374151!important;color:#cbd5e1!important}.hostess-reservation-modal .res-chip[style*="border-color:#3b82f6"]{background:#172554!important;border-color:#3b82f6!important;color:#93c5fd!important}.hostess-reservation-modal .pure-dropdown-trigger,.hostess-reservation-modal .date-picker-trigger{background:#171b22;color:#f8fafc;border-color:#374151}.hostess-reservation-modal .pure-dropdown-trigger:hover,.hostess-reservation-modal .date-picker-trigger:hover{border-color:#60a5fa}.hostess-reservation-modal .pure-dropdown-menu,.hostess-reservation-modal .calendar-popup{background:#171b22;color:#f8fafc;border-color:#374151;box-shadow:0 18px 45px #000a}.hostess-reservation-modal .pure-dropdown-option{color:#e2e8f0}.hostess-reservation-modal .pure-dropdown-option:hover,.hostess-reservation-modal .pure-dropdown-option.selected{background:#172554;color:#bfdbfe}.hostess-reservation-modal .calendar-header-title,.hostess-reservation-modal .calendar-day{color:#e2e8f0}.hostess-reservation-modal .calendar-day:hover{background:#1e293b}.hostess-reservation-modal .calendar-day.inactive{color:#475569}.hostess-reservation-modal .calendar-day.selected{background:#2563eb;color:#fff}.hostess-reservation-modal #reservation-form>div:last-child{border-color:#29303b!important}.hostess-reservation-modal .btn-outline-secondary{background:#1b2029;border-color:#374151;color:#e2e8f0}.hostess-reservation-modal .u-text-slate-400{color:#94a3b8!important}@media(max-width:640px){.hostess-reservation-modal{padding:8px}.hostess-reservation-modal .erp-dynamic-modal__content{max-height:calc(100dvh - 16px);border-radius:16px}.hostess-reservation-modal .erp-dynamic-modal__header{padding:16px}.hostess-reservation-modal .erp-dynamic-modal__body{padding:16px}.hostess-reservation-modal #reservation-form>div:last-child{position:sticky;bottom:-16px;background:#0f1218;padding:12px 0 calc(8px + env(safe-area-inset-bottom))!important}.hostess-reservation-modal .btn{min-height:46px}}
.hostess-branch-lock{min-height:42px;padding:9px 12px;border:1px solid #374151;border-radius:10px;background:#171b22;color:#e2e8f0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.hostess-branch-lock svg{color:#60a5fa}
.res-guest-search-hint{min-height:28px;padding:6px 8px;color:var(--text-tertiary,#94a3b8);font-size:12px;display:flex;align-items:center;gap:6px}.res-guest-results{display:grid;gap:5px;padding:7px;border:1px solid var(--border-primary,#e2e8f0);border-radius:12px;background:var(--surface-secondary,#f8fafc);max-height:250px;overflow:auto}.res-guest-results__title{padding:2px 4px 5px;color:var(--text-tertiary,#94a3b8);font-size:10px;font-weight:700;text-transform: none;letter-spacing:.06em}.res-guest-match{width:100%;min-height:55px;padding:7px 9px;border:1px solid transparent;border-radius:10px;background:var(--surface-primary,#fff);color:var(--text-primary,#0f172a);display:grid;grid-template-columns:36px 1fr 18px;align-items:center;gap:9px;text-align:left;cursor:pointer}.res-guest-match:hover{border-color:#93c5fd;background:#eff6ff}.res-guest-match.is-blocked{border-color:#fecaca;background:#fff1f2}.res-guest-match__avatar{width:34px;height:34px;border-radius:10px;background:var(--gradient-primary);color:#fff;display:grid;place-items:center;font-weight:700}.res-guest-match__body{display:flex;flex-direction:column;min-width:0}.res-guest-match__body strong{font-size:13px}.res-guest-match__body small{color:var(--text-secondary,#64748b);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.res-guest-match>svg{color:#94a3b8}.res-guest-new,.res-guest-selected{min-height:58px;padding:9px 10px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;display:flex;align-items:center;gap:9px;color:#1e3a8a}.res-guest-new>span{display:flex;flex-direction:column}.res-guest-new small{color:#64748b}.res-guest-selected .res-guest-match__body{color:var(--text-primary,#0f172a)}.res-guest-selected button{margin-left:auto;border:0;border-radius:8px;background:#dbeafe;color:#1d4ed8;padding:7px 9px;font-size:12px;font-weight:600}.hostess-reservation-modal .res-guest-results{background:#11141b;border-color:#29303b}.hostess-reservation-modal .res-guest-match{background:#171b22;color:#f8fafc}.hostess-reservation-modal .res-guest-match:hover{background:#172554;border-color:#3b82f6}.hostess-reservation-modal .res-guest-match.is-blocked{background:#2b1518;border-color:#7f1d1d}.hostess-reservation-modal .res-guest-new,.hostess-reservation-modal .res-guest-selected{background:#101c2e;border-color:#1e3a5f;color:#dbeafe}.hostess-reservation-modal .res-guest-selected .res-guest-match__body{color:#f8fafc}.hostess-reservation-modal .res-guest-selected button{background:#1e3a5f;color:#93c5fd}
.hostess-dates{display:grid;grid-template-columns:44px repeat(9,minmax(58px,1fr)) 44px;gap:7px;padding:9px 14px;background:#0f1218;border-bottom:1px solid rgba(255,255,255,.08)}
.hostess-date{height:58px;border:1px solid #252b35;border-radius:12px;background:#171b22;color:#94a3b8;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:7px 9px;text-align:left;cursor:pointer}.hostess-date span{font-size:10px;text-transform: none}.hostess-date strong{font-size:18px;color:#e2e8f0}.hostess-date small{grid-column:2;grid-row:1/3;align-self:center;background:#252b35;border-radius:8px;padding:3px 6px}.hostess-date.is-active{background:var(--gradient-primary);border-color:var(--primary);color:#dbeafe}.hostess-date.is-active strong{color:#fff}.hostess-date.is-active small{background:rgba(255,255,255,.18)}
.hostess-main{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:0;flex:1;min-height:480px}.hostess-floor{padding:14px 18px 18px;min-width:0}.hostess-floor__legend{height:30px;display:flex;align-items:center;gap:16px;color:#94a3b8;font-size:11px}.hostess-floor__legend span{display:flex;align-items:center;gap:6px}.hostess-floor__legend i{width:9px;height:9px;border-radius:50%}.hostess-floor__legend .is-free{background:#64748b}.hostess-floor__legend .is-booked{background:#3b82f6}.hostess-floor__legend .is-upcoming{background:#f59e0b}.hostess-floor__legend .is-reserved{background:#06b6d4}.hostess-floor__legend .is-occupied{background:#22c55e}
.hostess-canvas{position:relative;width:100%;max-height:calc(100vh - 320px);margin:auto;background-color:#10141b;background-image:radial-gradient(circle,rgba(148,163,184,.16) 1px,transparent 1px);background-size:20px 20px;border:1px solid #29303b;border-radius:18px;overflow:hidden}.hostess-table{position:absolute;z-index:2;min-width:54px;min-height:54px;transform:translate(-16px,-16px);border:0;background:transparent!important;color:#fff;padding:0;overflow:visible;cursor:pointer}.hostess-table .horex-floor-table-svg{display:block;overflow:visible}.hostess-table--reserved{animation:fpPulseWaiting 2s infinite}
.hostess-fixture{position:absolute;z-index:1;border:1px solid #374151;background:#202631;color:#94a3b8;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;overflow:hidden;transform-origin:center;pointer-events:none}.hostess-fixture--wall{background:#475569;border-color:#64748b;border-radius:2px}.hostess-fixture--divider{background:transparent;border-style:dashed}.hostess-fixture--bar,.hostess-fixture--kitchen{background:#2b2415;border-color:#6b5420;color:#fbbf24}.hostess-fixture--plant{background:#16372c;border-color:#267357;border-radius:50%}.hostess-fixture--entrance{background:transparent;border-color:#0891b2;border-style:dashed;color:#67e8f9}.hostess-fixture--label{background:transparent;border:0;color:#cbd5e1;font-size:11px}
.hostess-fixture--sofa{background:repeating-linear-gradient(90deg,#273244 0,#273244 22px,#334155 23px,#334155 25px);border-color:#64748b;border-radius:14px;color:#cbd5e1}.hostess-fixture--counter{background:linear-gradient(180deg,#52525b,#3f3f46);border-color:#71717a;border-radius:7px;color:#f4f4f5}
.hostess-sidebar{border-left:1px solid rgba(255,255,255,.08);background:#11141b;min-width:0}.hostess-sidebar__title{height:52px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700}.hostess-sidebar__title strong{font-size:12px;background:var(--gradient-primary);padding:4px 8px;border-radius:9px}.hostess-arrivals{padding:8px;display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 280px);overflow:auto}.hostess-arrival{width:100%;min-height:62px;border:1px solid #252b35;border-radius:12px;background:#171b22;color:#fff;display:grid;grid-template-columns:48px 1fr 8px;align-items:center;gap:8px;padding:8px;text-align:left;cursor:pointer}.hostess-arrival time{font-size:15px;font-weight:700}.hostess-arrival span{display:flex;flex-direction:column;min-width:0}.hostess-arrival span strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hostess-arrival small{font-size:10px;color:#94a3b8;margin-top:3px}.hostess-arrival>i{width:7px;height:28px;border-radius:8px;background:var(--hostess-status)}.hostess-empty{padding:32px 12px;text-align:center;color:#64748b}
.hostess-ribbon{display:none;gap:8px;padding:8px 12px;background:#11141b;border-top:1px solid rgba(255,255,255,.08);overflow-x:auto}.hostess-ribbon .hostess-arrival{min-width:230px;width:230px}
@media(max-width:1100px){.hostess-workspace{min-height:calc(100vh - 72px);border-radius:0}.hostess-main{grid-template-columns:minmax(0,1fr) 280px}.hostess-search{min-width:180px}.hostess-toolbar{gap:8px}.hostess-dates{grid-template-columns:44px repeat(7,minmax(52px,1fr)) 44px}.hostess-date:nth-of-type(2),.hostess-date:nth-last-of-type(2){display:none}}
@media(max-width:900px) and (orientation:landscape){.hostess-sidebar{display:none}.hostess-ribbon{display:flex}.hostess-canvas{max-height:calc(100vh - 300px)}.hostess-toolbar>div:first-of-type{display:none}}

/* Floor-plan constructor palette */
.fp-constructor-shell{display:grid;grid-template-columns:172px minmax(0,1fr) 260px;gap:14px;align-items:stretch;height:calc(100vh - 260px);min-height:560px}.fp-palette,.fp-properties{background:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e2e8f0);border-radius:14px;padding:12px;overflow:auto}.fp-palette__title{font-size:11px;font-weight:700;text-transform: none;letter-spacing:.06em;color:var(--text-tertiary,#94a3b8);margin:4px 2px 8px}.fp-palette__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.fp-palette-card{min-height:78px;border:1px solid var(--border-primary,#e2e8f0);border-radius:12px;background:var(--surface-secondary,#f8fafc);color:var(--text-primary,#0f172a);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:600;cursor:pointer;touch-action:manipulation}.fp-palette-card:hover{border-color:var(--primary);background:var(--primary-light)}.fp-palette-card svg{width:20px;height:20px}.fp-palette-table-preview{width:42px;height:32px;border-radius:8px;background:#4a5568;box-shadow:-8px 0 0 -3px #718096,8px 0 0 -3px #718096}.fp-palette-table-preview.is-round{width:36px;height:36px;border-radius:50%;box-shadow:-8px 0 0 -3px #718096,8px 0 0 -3px #718096,0 -8px 0 -3px #718096,0 8px 0 -3px #718096}
.fp-table-presets{display:grid;gap:8px;margin-bottom:16px}.fp-table-preset{min-height:86px;padding:8px;border:1px solid var(--border-primary,#e2e8f0);border-radius:13px;background:#0f131a;color:#f8fafc;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:8px;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s,background .15s}.fp-table-preset:hover{border-color:var(--primary,#3b82f6);background:#151d2a;transform:translateY(-1px)}.fp-table-preset__visual{width:72px;height:64px;display:grid;place-items:center}.fp-table-preset__visual svg{max-width:72px;max-height:64px}.fp-table-preset>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}.fp-table-preset strong{font-size:12px}.fp-table-preset small{font-size:10px;color:#94a3b8}
@media(max-width:1100px){.fp-constructor-shell{grid-template-columns:144px minmax(0,1fr) 230px}.fp-palette__grid{grid-template-columns:1fr}.fp-palette-card{min-height:62px}}

/* Floor-plan editor workspace */
.fp-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.fp-toolbar__group{display:inline-flex;align-items:center;min-height:38px;padding:2px;border:1px solid var(--border-primary,#e2e8f0);border-radius:10px;background:var(--surface-primary,#fff)}
.fp-tool-btn{width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-secondary,#64748b);display:grid;place-items:center;cursor:pointer}
.fp-tool-btn:hover:not(:disabled){background:var(--primary-light,#eff6ff);color:var(--primary,#2563eb)}
.fp-tool-btn:disabled{opacity:.35;cursor:not-allowed}.fp-tool-btn svg{width:16px;height:16px}.fp-tool-btn--text{width:auto;min-width:38px;padding:0 8px;font-size:12px;font-weight:700}
.fp-toolbar__value{min-width:46px;color:var(--text-secondary,#64748b);font-size:12px;font-variant-numeric:tabular-nums;text-align:center}
.fp-background-dot{width:7px;height:7px;margin-left:2px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.fp-background-editor{display:grid;gap:16px}.fp-background-preview{position:relative;height:300px;overflow:hidden;border:1px solid var(--border-primary,#e2e8f0);border-radius:14px;background-color:#11141b;background-image:radial-gradient(circle,rgba(148,163,184,.18) 1px,transparent 1px);background-size:15px 15px}.fp-background-preview img{position:absolute;inset:0;width:100%;height:100%;transform-origin:center;pointer-events:none}.fp-background-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:24px;text-align:center;color:#94a3b8}.fp-background-empty.is-hidden{display:none}.fp-background-empty svg{width:34px;height:34px}.fp-background-empty strong{color:#e2e8f0;font-size:14px}.fp-background-empty span{max-width:380px;font-size:12px;line-height:1.5}.fp-background-upload{min-height:66px;padding:12px 14px;border:1px dashed var(--border-primary,#cbd5e1);border-radius:12px;background:var(--surface-secondary,#f8fafc);display:flex;align-items:center;gap:12px;cursor:pointer}.fp-background-upload:hover{border-color:var(--primary,#3b82f6)}.fp-background-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.fp-background-upload>svg{width:22px;height:22px;color:var(--primary,#3b82f6)}.fp-background-upload>span{display:flex;flex-direction:column;gap:3px}.fp-background-upload strong{font-size:13px;color:var(--text-primary,#0f172a)}.fp-background-upload small{font-size:11px;color:var(--text-secondary,#64748b)}.fp-background-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.fp-background-controls>label{display:grid;gap:7px;font-size:12px;font-weight:600;color:var(--text-secondary,#64748b)}.fp-background-controls>label>span{display:flex;justify-content:space-between;gap:10px}.fp-background-controls output{color:var(--text-primary,#0f172a);font-variant-numeric:tabular-nums}.fp-background-controls input[type=range]{width:100%;accent-color:var(--primary,#3b82f6)}.fp-background-remove{justify-self:start}.fp-background-image{will-change:transform}
.fp-save-state{min-height:32px;padding:0 9px;border-radius:9px;color:var(--success,#16a34a);display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;white-space:nowrap}
.fp-save-state.is-dirty{background:var(--color-warning-50,#fffbeb);color:var(--color-warning-700,#b45309)}.fp-save-state svg{width:13px;height:13px}.fp-save-state.is-dirty svg{fill:currentColor}
.fp-grid-toggle{min-height:38px;padding:0 4px}.fp-canvas-wrap{min-width:0;overflow:auto;border:1px solid #2b3140;border-radius:16px;background:#0b0d12;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);overscroll-behavior:contain;scrollbar-color:#475569 #11141b}
.fp-canvas-stage{position:relative;min-width:1px;min-height:1px;margin:auto}
.fp-palette__title--layers{display:flex;align-items:center;justify-content:space-between}.fp-palette__title--layers span{padding:1px 6px;border-radius:999px;background:var(--surface-secondary,#f8fafc);font-size:10px}
.fp-layer-list{display:grid;gap:5px;padding-bottom:4px}.fp-layer-list__empty{padding:10px;border:1px dashed var(--border-primary,#e2e8f0);border-radius:10px;color:var(--text-tertiary,#94a3b8);font-size:11px;line-height:1.45}
.fp-layer-item{width:100%;min-height:42px;padding:7px 8px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-primary,#0f172a);display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;text-align:left;cursor:pointer}
.fp-layer-item:hover{background:var(--surface-secondary,#f8fafc);border-color:var(--border-primary,#e2e8f0)}.fp-layer-item.is-active{background:var(--primary-light,#eff6ff);border-color:var(--primary,#2563eb);color:var(--primary,#2563eb)}.fp-layer-item>svg{grid-row:1/3;width:16px;height:16px;align-self:center}.fp-layer-item span{overflow:hidden;font-size:12px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.fp-layer-item small{color:var(--text-tertiary,#94a3b8);font-size:10px}
.fp-number-input{width:100%;min-height:38px;padding:7px 9px;border:1px solid var(--border-primary,#e2e8f0);border-radius:8px;background:var(--surface-primary,#fff);color:var(--text-primary,#0f172a);font-size:13px;box-sizing:border-box}
.fp-number-input:focus{border-color:var(--primary,#2563eb);outline:2px solid color-mix(in srgb,var(--primary,#2563eb) 18%,transparent)}
.fp-rotation-control{display:grid;grid-template-columns:38px minmax(0,1fr) 42px 38px;gap:6px}.fp-rotation-control button{min-height:38px;padding:0;border:1px solid var(--border-primary,#e2e8f0);border-radius:8px;background:var(--surface-secondary,#f8fafc);color:var(--text-secondary,#64748b);display:grid;place-items:center;font-size:11px;font-weight:700;cursor:pointer}.fp-rotation-control button:hover{border-color:var(--primary,#2563eb);color:var(--primary,#2563eb)}.fp-rotation-control svg{width:15px;height:15px}
.fp-delete-confirm{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start}.fp-delete-confirm>svg{width:38px;height:38px;padding:9px;border:1px solid var(--danger,#ef4444);border-radius:11px;color:var(--danger,#ef4444)}.fp-delete-confirm strong{display:block;margin-bottom:5px;color:var(--text-primary,#0f172a)}.fp-delete-confirm p{margin:0;color:var(--text-secondary,#64748b);font-size:13px;line-height:1.5}
@media(max-width:900px){.fp-constructor-shell{height:auto;min-height:0;grid-template-columns:minmax(0,1fr)}.fp-palette{max-height:260px}.fp-palette__grid{grid-template-columns:repeat(4,minmax(92px,1fr));overflow-x:auto}.fp-palette-card{min-height:58px}.fp-table-presets{grid-template-columns:repeat(4,minmax(150px,1fr));overflow-x:auto}.fp-canvas-wrap{height:62vh;min-height:420px}.fp-properties{min-height:180px}.fp-toolbar{justify-content:flex-start}.fp-save-state{order:-1}}
@media(max-width:640px){.fp-toolbar{width:100%;gap:6px}.fp-save-state{width:100%;justify-content:center}.fp-grid-toggle{display:none}.fp-toolbar .btn{min-height:44px}.fp-toolbar #fpSaveBtn{margin-left:auto}.fp-canvas-wrap{height:58vh;min-height:360px}.fp-palette{max-height:230px}.fp-palette__grid{grid-template-columns:repeat(4,96px)}.fp-table-presets{grid-template-columns:repeat(4,150px)}.fp-tool-btn{width:40px;height:40px}.fp-rotation-control button,.fp-number-input{min-height:44px}.fp-background-preview{height:220px}.fp-background-controls{grid-template-columns:minmax(0,1fr)}}
/* Employee offboarding: connected case, employee review, and signature flow */
.hr-exit-case {
    border: 1px solid color-mix(in srgb, var(--primary-500) 18%, var(--gray-200));
    overflow: hidden;
}

.hr-exit-case__summary,
.hr-exit-detail-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.hr-exit-case__summary > div,
.hr-exit-detail-meta > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-50);
}

.hr-exit-case__summary span,
.hr-exit-detail-meta span,
.hr-exit-note span {
    display: block;
    margin-bottom: 4px;
    color: var(--gray-500);
    font-size: 12px;
}

.hr-exit-case__summary strong,
.hr-exit-detail-meta strong,
.hr-exit-note strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--gray-900);
    font-size: 14px;
}

.hr-exit-note {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--primary-500);
    border-radius: 0 10px 10px 0;
    background: var(--primary-50);
}

.hr-exit-case__body,
.hr-exit-self-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.hr-exit-case__body h4 {
    margin: 0 0 10px;
    color: var(--gray-800);
    font-size: 13px;
}

.hr-exit-case__actions {
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.hr-exit-residence {
    align-items: center;
}

.hr-exit-residence > div:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
}

.hr-exit-residence--attached {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.hr-exit-residence--attached span {
    color: #15803d;
}

.hr-exit-residence--pending {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

.hr-exit-residence--pending span {
    color: #c2410c;
}

.hr-exit-residence--not_required {
    border-color: var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-700);
}

.hr-exit-residence--not_required span {
    color: var(--gray-600);
}

.hr-exit-residence__actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    margin-left: auto;
}

.hr-exit-timeline {
    display: grid;
    gap: 12px;
}

.hr-exit-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
}

.hr-exit-timeline__item:not(:last-child)::after {
    position: absolute;
    top: 13px;
    bottom: -13px;
    left: 5px;
    width: 1px;
    background: var(--gray-200);
    content: "";
}

.hr-exit-timeline__dot {
    z-index: 1;
    width: 11px;
    height: 11px;
    margin-top: 3px;
    border: 2px solid white;
    border-radius: 999px;
    background: var(--primary-500);
    box-shadow: 0 0 0 1px var(--primary-300);
}

.hr-exit-timeline__item strong,
.hr-exit-timeline__item span {
    display: block;
    overflow-wrap: anywhere;
}

.hr-exit-timeline__item strong {
    color: var(--gray-800);
    font-size: 13px;
}

.hr-exit-timeline__item span,
.hr-exit-empty {
    margin-top: 2px;
    color: var(--gray-500);
    font-size: 12px;
}

.hr-exit-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: white;
}

.hr-exit-hero > div:first-child span,
.hr-exit-hero > div:first-child strong,
.hr-exit-hero > div:first-child em {
    display: block;
}

.hr-exit-hero > div:first-child span {
    color: #bfdbfe;
    font-size: 13px;
}

.hr-exit-hero > div:first-child strong {
    margin: 4px 0;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.1;
}

.hr-exit-hero > div:first-child em {
    color: #dbeafe;
    font-size: 13px;
    font-style: normal;
}

.hr-exit-hero__status {
    display: grid;
    justify-items: end;
    gap: 8px;
    color: #dbeafe;
    font-size: 13px;
}

.hr-detail-list--large > div {
    padding-block: 11px;
}

.hr-detail-list__total {
    margin-top: 6px;
    border-top: 2px solid var(--primary-500) !important;
    background: var(--primary-50);
    font-size: 16px;
}

.hr-exit-decision p,
.hr-exit-signature p {
    color: var(--gray-600);
    line-height: 1.6;
}

.hr-signature-pad {
    position: relative;
    overflow: hidden;
    margin: 16px 0;
    border: 1px dashed var(--gray-400);
    border-radius: 12px;
    background: white;
    touch-action: none;
}

.hr-signature-pad canvas {
    display: block;
    width: 100%;
    height: 180px;
    cursor: crosshair;
    touch-action: none;
}

.hr-signature-pad > span {
    position: absolute;
    right: 12px;
    bottom: 8px;
    pointer-events: none;
    color: var(--gray-400);
    font-size: 11px;
}

.hr-exit-cutoff-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--primary-200);
    border-radius: 12px;
    background: var(--primary-50);
    cursor: pointer;
}

.hr-exit-cutoff-option input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary-600);
}

.hr-exit-cutoff-option strong,
.hr-exit-cutoff-option small {
    display: block;
}

.hr-exit-cutoff-option strong {
    color: var(--gray-900);
    font-size: 14px;
}

.hr-exit-cutoff-option small {
    margin-top: 4px;
    color: var(--gray-600);
    line-height: 1.45;
}

@media (max-width: 760px) {
    .hr-exit-case__summary,
    .hr-exit-detail-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hr-exit-case__body,
    .hr-exit-self-grid {
        grid-template-columns: 1fr;
    }

    .hr-exit-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .hr-exit-hero__status {
        justify-items: start;
    }

    .hr-exit-case__actions .btn,
    .hr-exit-decision .hr-workspace-actions .btn,
    .hr-exit-signature .hr-workspace-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hr-exit-residence {
        align-items: flex-start;
        flex-direction: column;
    }

    .hr-exit-residence__actions {
        width: 100%;
        margin-left: 0;
    }

    .hr-exit-residence__actions .btn {
        min-height: 44px;
        flex: 1 1 140px;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .hr-exit-case__summary,
    .hr-exit-detail-meta {
        grid-template-columns: 1fr;
    }

    .hr-signature-pad canvas {
        height: 155px;
    }
}

/* ==================== ACCOUNTING HUB ==================== */
.accounting-hub {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accounting-hub__entity-filter {
    width: min(320px, 100%);
}

.accounting-hub__providers {
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.accounting-provider-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.07);
}

.accounting-provider-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.accounting-provider-card__title {
    margin: 0;
    color: var(--color-gray-900);
    font-size: 17px;
    font-weight: 700;
}

.accounting-provider-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.accounting-provider-card__identity {
    min-width: 0;
}

.accounting-provider-logo {
    display: block;
    width: auto;
    max-width: 150px;
    height: 28px;
    object-fit: contain;
    object-position: left center;
}

.accounting-provider-logo--zoho {
    height: 32px;
}

.accounting-provider-logo--xero {
    height: 27px;
}

.accounting-provider-logo--quickbooks {
    height: 26px;
}

.accounting-provider-card__description {
    max-width: 360px;
    margin-top: 10px;
    color: var(--color-gray-500);
    font-size: 13px;
    line-height: 1.5;
}

.accounting-provider-card .accounting-provider-card__status {
    padding-inline: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.accounting-provider-card__empty,
.accounting-provider-card__notice {
    color: var(--color-gray-600);
    font-size: 13px;
    line-height: 1.5;
}

.accounting-provider-card__empty {
    padding: 4px 0;
}

.accounting-provider-card__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 3px 0 3px 12px;
    border: 0;
    border-left: 2px solid #d97706;
    border-radius: 0;
    background: transparent;
    color: #854d0e;
}

.accounting-provider-card__notice > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 2px;
}

.accounting-provider-card__notice--error {
    border-left-color: #dc2626;
    background: transparent;
    color: #b91c1c;
}

.accounting-provider-card__callback {
    overflow-wrap: anywhere;
    color: var(--color-gray-700);
}

.accounting-provider-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.accounting-provider-card__details div {
    min-width: 0;
}

.accounting-provider-card__details dt {
    margin-bottom: 3px;
    color: var(--color-gray-500);
    font-size: 11px;
}

.accounting-provider-card__details dd {
    overflow: hidden;
    margin: 0;
    color: var(--color-gray-800);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-provider-card__selection {
    padding-top: 4px;
}

.accounting-provider-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 4px 20px 20px;
    border-top: 0;
    background: transparent;
}

.accounting-inbound-inbox {
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.07);
}

.accounting-inbound-inbox__header {
    padding: 20px 20px 14px;
}

.accounting-inbound-inbox__header h2 {
    margin: 0;
    color: var(--color-gray-900);
    font-size: 17px;
}

.accounting-inbound-inbox__header svg {
    width: 18px;
    height: 18px;
    color: var(--color-gray-600);
}

.accounting-inbound-inbox__header p {
    max-width: 800px;
    margin: 8px 0 0;
    color: var(--color-gray-500);
    font-size: 13px;
    line-height: 1.5;
}

.accounting-inbound-table {
    margin: 0;
}

.accounting-inbound-table td:first-child strong,
.accounting-inbound-table td:first-child span {
    display: block;
}

.accounting-inbound-table td:first-child span {
    margin-top: 3px;
    color: var(--color-gray-500);
    font-size: 11px;
}

.accounting-setup {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.accounting-setup__toolbar,
.accounting-setup__activation,
.accounting-setup__section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.accounting-setup__toolbar {
    padding: 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    background: var(--color-gray-50);
}

.accounting-setup__toolbar strong,
.accounting-setup__toolbar span,
.accounting-setup__section-title strong,
.accounting-setup__section-title small {
    display: block;
}

.accounting-setup__toolbar span,
.accounting-setup__section-title small,
.accounting-setup__mapping small,
.accounting-setup__flow small {
    margin-top: 3px;
    color: var(--color-gray-500);
    font-size: 12px;
    line-height: 1.45;
}

.accounting-setup__section {
    padding: 16px;
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    background: white;
}

.accounting-setup__flow {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
}

.accounting-setup__flow input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary-600);
}

.accounting-setup__flow strong,
.accounting-setup__flow small {
    display: block;
}

.accounting-setup__mapping-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.accounting-setup__mapping {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.accounting-setup__mapping > span,
.accounting-setup__date > span {
    color: var(--color-gray-700);
    font-size: 12px;
    font-weight: 650;
}

.accounting-setup__activation {
    padding: 16px;
    border: 1px solid var(--color-primary-200);
    border-radius: 12px;
    background: var(--color-primary-50);
}

.accounting-setup__date {
    display: flex;
    min-width: 150px;
    flex-direction: column;
    gap: 6px;
}

.accounting-setup__deliveries {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    border-top: 1px solid var(--color-gray-200);
}

.accounting-delivery-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.accounting-delivery-row > div:first-child {
    min-width: 0;
}

.accounting-delivery-row strong,
.accounting-delivery-row small,
.accounting-delivery-row__error {
    display: block;
}

.accounting-delivery-row strong {
    color: var(--color-gray-800);
    font-size: 13px;
    text-transform: capitalize;
}

.accounting-delivery-row small {
    margin-top: 3px;
    color: var(--color-gray-500);
    font-size: 11px;
}

.accounting-delivery-row__error {
    margin-top: 5px;
    color: var(--color-red-700);
    font-size: 12px;
    line-height: 1.4;
}

.accounting-delivery-row__status {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
}

.accounting-vendor-summary {
    color: var(--color-gray-500);
    font-size: 12px;
    white-space: nowrap;
}

.accounting-vendor-workbench__axis,
.accounting-vendor-workbench__filters {
    margin-top: 14px;
    overflow-x: auto;
}

.accounting-vendor-workbench__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.accounting-vendor-workbench__search {
    flex: 1 1 360px;
    max-width: 520px;
}

.accounting-vendor-list {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    gap: 12px;
}

.accounting-vendor-row {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.18fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.accounting-vendor-row[data-workflow="conflict"],
.accounting-vendor-row[data-workflow="stale"] {
    border-color: var(--color-red-400);
}

.accounting-vendor-row[data-workflow="safe_match"] {
    border-color: var(--color-green-300);
}

.accounting-vendor-row__identity,
.accounting-vendor-row__mapping {
    min-width: 0;
    padding: 16px;
}

.accounting-vendor-row__identity {
    border-inline-end: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

.accounting-vendor-row__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.accounting-vendor-row__identity strong,
.accounting-vendor-row__identity small,
.accounting-vendor-row__warning,
.accounting-vendor-row__suggestion {
    display: block;
}

.accounting-vendor-row__identity strong {
    color: var(--color-gray-800);
    font-size: 13px;
}

.accounting-vendor-row__identity small {
    margin-top: 4px;
    color: var(--color-gray-500);
    font-size: 11px;
}

.accounting-vendor-identity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 12px 0 0;
}

.accounting-vendor-identity-grid div {
    min-width: 0;
}

.accounting-vendor-identity-grid dt {
    margin: 0 0 2px;
    color: var(--color-gray-500);
    font-size: 10px;
    font-weight: 600;
}

.accounting-vendor-identity-grid dd {
    overflow: hidden;
    margin: 0;
    color: var(--color-gray-700);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-vendor-row__activity {
    margin-top: 10px !important;
}

.accounting-vendor-row__warning,
.accounting-vendor-row__suggestion {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
}

.accounting-vendor-row__warning {
    color: var(--color-amber-700);
}

.accounting-vendor-row__suggestion {
    color: var(--color-blue-700);
}

.accounting-vendor-row__review {
    margin-top: 12px;
}

.accounting-vendor-row__mapping-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
    color: var(--color-gray-600);
    font-size: 11px;
    font-weight: 600;
}

.accounting-vendor-compare {
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

.accounting-vendor-compare__head,
.accounting-vendor-compare__row {
    display: grid;
    grid-template-columns: minmax(96px, 0.75fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(72px, 0.6fr);
    gap: 8px;
    align-items: center;
    padding: 7px 9px;
}

.accounting-vendor-compare__head {
    border-bottom: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    color: var(--color-gray-500);
    font-size: 10px;
    font-weight: 600;
}

.accounting-vendor-compare__row {
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: 11px;
}

.accounting-vendor-compare__row:last-child {
    border-bottom: 0;
}

.accounting-vendor-compare__row strong,
.accounting-vendor-compare__row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-vendor-compare__row strong {
    color: var(--color-gray-700);
    font-size: 11px;
    font-weight: 600;
}

.accounting-vendor-compare__row small {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 10px;
    font-weight: 600;
}

.accounting-vendor-compare__row small svg {
    width: 12px;
    height: 12px;
}

.accounting-vendor-compare__row.is-match small {
    color: var(--color-green-700);
}

.accounting-vendor-compare__row.is-similar small {
    color: var(--color-blue-700);
}

.accounting-vendor-compare__row.is-conflict small {
    color: var(--color-red-700);
}

.accounting-vendor-compare__row.is-missing small,
.accounting-vendor-compare__empty {
    color: var(--color-gray-500);
}

.accounting-vendor-compare__empty {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 11px;
    line-height: 1.45;
}

.accounting-vendor-row__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.accounting-vendor-row__reasons span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: var(--radius-full);
    background: var(--color-green-50);
    color: var(--color-green-700);
    font-size: 10px;
    font-weight: 600;
}

.accounting-vendor-row__reasons svg {
    width: 11px;
    height: 11px;
}

.accounting-vendor-row__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.accounting-vendor-row__mapping-note {
    margin-top: 9px;
    color: var(--color-amber-700);
    font-size: 11px;
    line-height: 1.45;
}

.accounting-vendor-auto-create {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-gray-200);
}

@media (max-width: 640px) {
    .accounting-hub__providers {
        grid-template-columns: 1fr;
    }

    .accounting-provider-card__details {
        grid-template-columns: 1fr;
    }

    .accounting-provider-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .accounting-provider-card__footer .btn {
        flex: 1;
        justify-content: center;
    }

    .accounting-setup__toolbar,
    .accounting-setup__activation,
    .accounting-delivery-row {
        align-items: stretch;
        flex-direction: column;
    }

    .accounting-setup__mapping-grid {
        grid-template-columns: 1fr;
    }

    .accounting-delivery-row__status {
        align-items: flex-start;
    }

    .accounting-vendor-summary {
        white-space: normal;
    }

    .accounting-vendor-workbench__toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .accounting-vendor-workbench__search {
        flex-basis: auto;
        max-width: none;
    }

    .accounting-vendor-row {
        grid-template-columns: 1fr;
    }

    .accounting-vendor-row__identity {
        border-inline-end: 0;
        border-bottom: 1px solid var(--color-gray-200);
    }

    .accounting-vendor-identity-grid {
        grid-template-columns: 1fr;
    }

    .accounting-vendor-compare__head {
        display: none;
    }

    .accounting-vendor-compare__row {
        grid-template-columns: minmax(74px, 0.7fr) minmax(0, 1fr);
        gap: 4px 8px;
    }

    .accounting-vendor-compare__row span {
        grid-column: 2;
        white-space: normal;
    }

    .accounting-vendor-compare__row span::before {
        display: inline;
        color: var(--color-gray-400);
        font-size: 9px;
    }

    .accounting-vendor-compare__row span:nth-of-type(1)::before {
        content: "HoreX: ";
    }

    .accounting-vendor-compare__row span:nth-of-type(2)::before {
        content: "Provider: ";
    }

    .accounting-vendor-compare__row small {
        grid-column: 2;
    }

    .accounting-vendor-row__actions {
        justify-content: flex-start;
    }

    .accounting-vendor-row__actions .btn,
    .accounting-vendor-row__review {
        min-height: 44px;
    }
}

/* ==================== CANONICAL PRECISION TABLE CONTRACT ====================
   This final layer intentionally wins over legacy module selectors and inline
   presentation styles. Domain hierarchy remains in descendants (`strong`,
   hints, badges and semantic money tones); the grid itself always shares one
   neutral reading system. Specialist matrix/native tables and POS opt out
   before they receive the Precision classes. */
.erp-data-table.erp-data-table--precision > thead > tr > th,
.erp-data-table.erp-data-table--precision > tbody > tr > td,
.erp-data-table.erp-data-table--precision > tfoot > tr > td {
    background: #fff !important;
    color: #262626 !important;
    font-family: Inter, var(--font-data), sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* The canonical white cell surface must not cover the row interaction state.
   Paint hover on the cells themselves because every Precision cell owns an
   explicit important background and therefore hides a background on <tr>. */
.erp-data-table.erp-data-table--precision > tbody > tr:hover > td {
    background: var(--erp-precision-hover, #f7f7f7) !important;
}

/* Cells and layout wrappers never paint ellipses. The shared text leaf
   below owns its one visible truncation marker; icons and utility rails
   therefore cannot gain detached dots from nested legacy overflow rules. */
.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td),
.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td) :not(.erp-table-text) {
    text-overflow: clip !important;
}

.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td):not(.erp-tree-table__name-cell):not(.erp-data-table__cell--indent):not(.erp-data-table__cell--index) {
    padding: 8px 20px !important;
}

/* A clickable value is still readable table content, not a separate layout
   surface. Full-cell links/buttons inherit the column reading edge so a body
   value cannot align differently from its header or footer total. Action and
   utility rails keep their dedicated alignment contract below. */
.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td):not(.erp-data-table__cell--actions):not(.erp-data-table__cell--utility)
> :is(a, button, [role="button"]) {
    text-align: inherit !important;
}

/* All readable cells share one 20px inset. Checkbox, drag-handle and row
   disclosure rails are structural rather than readable columns, so they use
   one compact centered 48px slot instead of adding a second left indent. */
.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).erp-data-table__cell--utility {
    box-sizing: border-box !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 8px 0 !important;
    text-align: center !important;
    text-overflow: clip !important;
}

/* Compound values such as money + a semantic warning icon are atomic. The
   generic Precision ellipsis belongs to readable text cells; applying it to
   an inline icon can paint a detached dot beside the SVG at tight widths. */
.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).erp-data-table__cell--inline-icon {
    text-overflow: clip !important;
}

.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).erp-data-table__cell--inline-icon
> .u-inline-icon-text {
    max-width: 100%;
    vertical-align: middle;
}

/* Structural rails never contain readable text. Native checkbox/radio
   margins can exceed the 24px content box and make the cell paint a stray
   text-overflow ellipsis beside the control, especially at browser zoom. */
.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).erp-data-table__cell--utility
> :is(input[type="checkbox"], input[type="radio"]) {
    display: block;
    margin-block: 0 !important;
    margin-inline: auto !important;
}

.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).erp-data-table__cell--utility
> .checkbox-wrapper {
    display: flex;
    width: max-content;
    margin-inline: auto !important;
    justify-content: center !important;
}

.erp-data-table.erp-data-table--precision
> colgroup
> col.erp-data-table__cell--utility {
    width: 48px !important;
}

.erp-data-table.erp-data-table--precision
> thead
> tr
> th.erp-data-table__cell--utility
> .erp-data-table__th-content {
    justify-content: center !important;
}

.erp-data-table.erp-data-table--precision
> tbody
> tr.erp-data-table__row--child
> td:first-child {
    padding-inline-start: 32px !important;
}

.erp-data-table.erp-data-table--precision
> tbody
> tr.pnl-statement-row-v2--depth-2
> td:first-child {
    padding-inline-start: 50px !important;
}

.erp-data-table-wrap--precision > .erp-data-table__toolbar,
.erp-data-table-wrap--precision-auto > .erp-data-table__toolbar {
    padding-inline: 20px !important;
}

/* Tree tables keep drag and disclosure controls inside the semantic Name
   cell. Reserve the same 14px + 8px + 16px + 8px leading rail in the header
   so its label aligns with root row names rather than with the drag handle. */
.erp-data-table.erp-data-table--precision
> thead
> tr
> :is(th.catalog-table__name, th.erp-tree-table__name-header) {
    padding-inline-start: 54px !important;
}

.erp-data-table.erp-data-table--precision
> tbody
> tr.tree-row
> .erp-tree-table__name-cell
.tree-name {
    font-weight: 400 !important;
}

.erp-data-table.erp-data-table--precision
> tbody
> tr.tree-row.tree-group
> .erp-tree-table__name-cell
.tree-name {
    font-weight: 500 !important;
}

.erp-data-table.erp-data-table--precision > thead > tr > th.erp-data-table__th--sorted {
    font-weight: 500 !important;
}

.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).erp-table-align--center,
.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).erp-data-table__cell--actions:not(.erp-data-table__cell--actions-variable) {
    text-align: center !important;
}

.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).erp-data-table__cell--actions-variable {
    text-align: left !important;
}

.erp-data-table.erp-data-table--precision
> thead
> tr
> th.erp-data-table__cell--actions:not(.erp-data-table__cell--actions-variable)
> .erp-data-table__th-content,
.erp-data-table.erp-data-table--precision
> :is(tbody, tfoot)
> tr
> td.erp-data-table__cell--actions:not(.erp-data-table__cell--actions-variable)
> :is(.erp-data-table__actions, .u-flex, [class*="actions"]) {
    justify-content: center !important;
    margin-inline: auto !important;
}

.erp-data-table.erp-data-table--precision
> thead
> tr
> th.erp-data-table__cell--actions-variable
> .erp-data-table__th-content,
.erp-data-table.erp-data-table--precision
> :is(tbody, tfoot)
> tr
> td.erp-data-table__cell--actions-variable
> :is(.erp-data-table__actions, .u-flex, [class*="actions"]) {
    justify-content: flex-start !important;
    margin-inline: 0 !important;
}

/* Table Actions are icon-only across the shared Precision contract. The UI
   module preserves every original label as aria-label + title and keeps the
   semantic text-first ordering in the DOM before hiding its visible copy. */
.erp-data-table.erp-data-table--precision
td.erp-data-table__cell--actions
.erp-table-action--icon-only {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

.erp-data-table.erp-data-table--precision
td.erp-data-table__cell--actions
.erp-table-action--icon-only :is(span, strong, em):empty {
    display: none !important;
}

.erp-data-table.erp-data-table--precision
td.erp-data-table__cell--actions
.erp-table-action--icon-only .erp-icon {
    flex: 0 0 auto;
    margin: 0 !important;
}

.erp-data-table.erp-data-table--precision
td.erp-data-table__cell--actions
input.erp-table-action--input-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    color: transparent !important;
}

.erp-data-table.erp-data-table--precision
td.erp-data-table__cell--actions
[data-erp-action-kind="text"] {
    order: 0 !important;
}

.erp-data-table.erp-data-table--precision
td.erp-data-table__cell--actions
[data-erp-action-kind="icon"] {
    order: 1 !important;
}

.erp-data-table.erp-data-table--precision > tfoot > tr > td,
.erp-data-table.erp-data-table--precision > tbody > tr > td:first-child > strong,
.erp-data-table.erp-data-table--precision > tbody > tr > td > .erp-data-table__primary {
    font-weight: 600 !important;
}

/* Compound UOM controls need a real content rail: the shared 20px readable-cell
   inset is appropriate for text, but it can collapse `kg + chevron + info` to
   one visible character. Keep the complete control inside one protected column. */
.erp-data-table.erp-data-table--precision.invoice-line-items-table
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).invoice-line-items-table__uom-cell {
    padding-inline: 8px !important;
    overflow: visible;
}

.invoice-line-items-table .invoice-line-uom-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: none;
}

.invoice-line-items-table .invoice-line-uom-control--with-info {
    grid-template-columns: minmax(0, 1fr) 26px;
}

.invoice-line-items-table .invoice-line-uom-control .pure-dropdown,
.invoice-line-items-table .invoice-line-uom-control .pure-dropdown-trigger {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.invoice-line-items-table .invoice-line-uom-control .pure-dropdown-trigger {
    gap: 4px;
    padding-inline: 6px;
}

/* The terminal delete rail is structural, not leftover table space. The late
   Precision cell inset must not widen it or push its only action to an edge. */
.erp-data-table.erp-data-table--precision.invoice-line-items-table
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).invoice-line-actions {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle;
}

.erp-data-table.erp-data-table--precision.invoice-line-items-table
> :is(tbody, tfoot)
> tr
> td.invoice-line-actions
> .invoice-line-delete-action:only-child {
    display: flex !important;
    margin-inline: auto !important;
}

/* A direct, single icon action is a block-level rail item. This preserves the
   shared rule: equal action sets are centered, variable sets keep a left edge. */
.erp-data-table.erp-data-table--precision
> :is(tbody, tfoot)
> tr
> td.erp-data-table__cell--actions:not(.erp-data-table__cell--actions-variable)
> .erp-table-action--icon-only:only-child {
    display: flex !important;
    margin-inline: auto !important;
}

/* Order Types: capability-driven sales flows and POS terminal assignments. */
.order-types-page {
    display: grid;
    gap: 24px;
}

.order-types-section {
    padding: 28px;
    border: 1px solid #dfe6f0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055);
}

.order-types-section__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.order-types-section__heading h2 {
    margin: 0 0 6px;
    color: #162036;
    font-size: 22px;
    line-height: 1.25;
}

.order-types-section__heading p,
.order-type-editor__layout > div > p,
.order-type-assignment > p {
    margin: 0;
    color: #71809a;
    font-size: 14px;
    line-height: 1.55;
}

.order-types-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.order-type-card {
    display: flex;
    min-width: 0;
    min-height: 294px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #dfe6f0;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff 58%, #f7fbff);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.order-type-card:hover {
    border-color: #b7cdfc;
    box-shadow: 0 14px 32px rgba(37, 99, 235, .09);
    transform: translateY(-1px);
}

.order-type-card.is-inactive {
    background: #f8fafc;
    opacity: .76;
}

.order-type-card__top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.order-type-card__icon,
.order-type-terminal__icon,
.order-type-assignment__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    color: #2e63e8;
    background: #edf3ff;
}

.order-type-card__icon svg,
.order-type-terminal__icon svg,
.order-type-assignment__icon svg {
    width: 21px;
    height: 21px;
}

.order-type-card__identity {
    min-width: 0;
}

.order-type-card__identity h3 {
    overflow: hidden;
    margin: 0 0 3px;
    color: #172036;
    font-size: 17px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-type-card__identity span {
    color: #8491a8;
    font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.order-type-status {
    padding: 5px 9px;
    border-radius: 999px;
    color: #738098;
    background: #eef2f7;
    font-size: 11px;
    font-weight: 700;
}

.order-type-status.is-active {
    color: #13745c;
    background: #e9f8f3;
}

.order-type-card__summary {
    margin: 17px 0 14px;
    color: #52617a;
    font-size: 13px;
    line-height: 1.55;
}

.order-type-card__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.order-type-signal {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid #dbe7fb;
    border-radius: 999px;
    color: #365171;
    background: #f7faff;
    font-size: 11px;
    font-weight: 650;
}

.order-type-signal svg {
    width: 13px;
    height: 13px;
    color: #3970e8;
}

.order-type-card__meta {
    display: grid;
    gap: 7px;
    margin: auto 0 16px;
    padding-top: 18px;
}

.order-type-card__meta span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    color: #728098;
    font-size: 12px;
}

.order-type-card__meta svg {
    width: 14px;
    height: 14px;
}

.order-type-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #e7ecf3;
}

.order-type-card__actions .btn {
    min-width: 0;
    min-height: 42px;
    justify-content: center;
    padding-inline: 10px;
}

.order-type-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 18px;
}

.order-type-presets > span {
    margin-right: 2px;
    color: #687790;
    font-size: 13px;
    font-weight: 700;
}

.order-type-presets button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #dce5f2;
    border-radius: 10px;
    color: #34435d;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
}

.order-type-presets button:hover {
    border-color: #9db9f4;
    background: #f5f9ff;
}

.order-type-presets svg {
    width: 15px;
    height: 15px;
    color: #3569e6;
}

.order-type-editor-page {
    display: grid;
    gap: 20px;
}

.order-type-editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 20px;
}

.order-type-editor-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.order-type-editor-section {
    padding: 24px;
    border: 1px solid #dfe6ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(33, 48, 75, .04);
}

.order-type-editor-section__heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.order-type-editor-section__heading > span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 9px;
    color: #2f63dc;
    background: #edf3ff;
    font-size: 13px;
    font-weight: 750;
}

.order-type-editor-section__heading h2 {
    margin: 1px 0 4px;
    color: #1d293f;
    font-size: 17px;
    line-height: 1.35;
}

.order-type-editor-section__heading p {
    margin: 0;
    color: #718097;
    font-size: 13px;
    line-height: 1.5;
}

.order-type-name-field {
    max-width: 560px;
}

.order-type-icon-field {
    margin-top: 20px;
}

.order-type-icon-field > .form-label {
    display: block;
    margin-bottom: 8px;
}

.order-type-icon-field .erp-choice-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-type-setting-list {
    overflow: hidden;
    border: 1px solid #e1e7ef;
    border-radius: 14px;
    background: #fff;
}

.order-type-setting-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 16px;
    border-bottom: 1px solid #edf1f6;
}

.order-type-setting-row:last-child {
    border-bottom: 0;
}

.order-type-setting-row__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: #526780;
    background: #f0f4f8;
}

.order-type-setting-row__icon svg {
    width: 18px;
    height: 18px;
}

.order-type-setting-row__copy {
    display: grid;
    min-width: 0;
    gap: 3px;
    cursor: pointer;
}

.order-type-setting-row__copy strong {
    color: #26334a;
    font-size: 13px;
    font-weight: 650;
}

.order-type-setting-row__copy small {
    color: #7a889d;
    font-size: 12px;
    line-height: 1.4;
}

.order-type-advanced {
    margin-top: 12px;
    border: 1px solid #e1e7ef;
    border-radius: 14px;
    background: #fbfcfe;
}

.order-type-advanced summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    min-height: 64px;
    padding: 12px 16px;
    color: #34435a;
    cursor: pointer;
    list-style: none;
}

.order-type-advanced summary::-webkit-details-marker {
    display: none;
}

.order-type-advanced summary > span {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
}

.order-type-advanced summary > span svg,
.order-type-advanced summary > svg {
    width: 17px;
    height: 17px;
}

.order-type-advanced summary > small {
    grid-column: 1;
    padding-left: 26px;
    color: #7a889d;
    font-size: 11px;
}

.order-type-advanced[open] summary > svg {
    transform: rotate(180deg);
}

.order-type-advanced .order-type-setting-list {
    margin: 0 10px 10px;
}

.order-type-payment-options {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e7ecf3;
}

.order-type-payment-options.is-visible {
    display: block;
}

.order-type-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px 0 24px;
}

.order-type-editor-preview {
    position: sticky;
    top: 20px;
    padding: 22px;
    border: 1px solid #d7e1ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(33, 48, 75, .07);
}

.order-type-editor-preview__eyebrow {
    color: #4970cf;
    font-size: 12px;
    font-weight: 750;
}

.order-type-editor-preview > h2 {
    margin: 6px 0 18px;
    color: #1c2940;
    font-size: 18px;
}

.order-type-live-preview__selector {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #8babef;
    border-radius: 14px;
    background: #f5f8ff;
}

.order-type-live-preview__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #2f63dc;
    background: #e5edff;
}

.order-type-live-preview__icon svg {
    width: 20px;
    height: 20px;
}

.order-type-live-preview__selector > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.order-type-live-preview__selector strong,
.order-type-live-preview__selector small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-type-live-preview__selector strong {
    color: #1c2940;
    font-size: 14px;
}

.order-type-live-preview__selector small {
    color: #708098;
    font-size: 11px;
}

.order-type-live-preview__check {
    width: 18px;
    height: 18px;
    color: #2f63dc;
}

#otBehaviorPreview > p {
    margin: 14px 0;
    color: #65758d;
    font-size: 12px;
    line-height: 1.55;
}

.order-type-live-preview__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.order-type-live-preview__signals span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 999px;
    color: #50617a;
    background: #f1f4f8;
    font-size: 10px;
    font-weight: 650;
}

.order-type-live-preview__signals svg {
    width: 12px;
    height: 12px;
}

.order-type-editor-preview__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e8edf4;
    color: #708098;
    font-size: 11px;
    line-height: 1.5;
}

.order-type-editor-preview__note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #5478ce;
}

.order-type-editor__intro {
    display: grid;
    grid-template-columns: 1.25fr 1fr .8fr 1fr;
    gap: 14px;
    padding: 20px;
    border: 1px solid #e0e7f0;
    border-radius: 16px;
    background: #f9fbfe;
}

.order-type-editor .form-group {
    min-width: 0;
    margin-bottom: 0;
}

.order-type-editor .form-group small,
.order-type-terminal-field-heading small {
    display: block;
    margin-top: 6px;
    color: #8190a7;
    font-size: 11px;
    line-height: 1.45;
}

.order-type-editor__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, .75fr);
    gap: 22px;
    margin-top: 22px;
}

.order-type-editor__layout h4,
.order-type-payment-box h4 {
    margin: 0 0 5px;
    color: #26334b;
    font-size: 14px;
}

.order-type-capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.order-type-capability {
    position: relative;
    display: grid;
    min-height: 92px;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 14px;
    border: 1px solid #dfe6f0;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.order-type-capability:hover {
    border-color: #a9c0ee;
}

.order-type-capability:has(input:checked) {
    border-color: #7da4f3;
    background: #f5f9ff;
    box-shadow: inset 0 0 0 1px #d5e3ff;
}

.order-type-capability > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.order-type-capability__check {
    position: absolute;
    top: 9px;
    right: 9px;
    display: none;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #2e63e8;
}

.order-type-capability:has(input:checked) .order-type-capability__check {
    display: grid;
}

.order-type-capability__check svg {
    width: 12px;
    height: 12px;
}

.order-type-capability__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: #54708e;
    background: #eef3f9;
}

.order-type-capability:has(input:checked) .order-type-capability__icon {
    color: #2f63dc;
    background: #e6efff;
}

.order-type-capability__icon svg {
    width: 19px;
    height: 19px;
}

.order-type-capability strong,
.order-type-capability small {
    display: block;
    padding-right: 20px;
}

.order-type-capability strong {
    color: #233048;
    font-size: 13px;
    line-height: 1.35;
}

.order-type-capability small {
    margin-top: 4px;
    color: #78869d;
    font-size: 11px;
    line-height: 1.4;
}

.order-type-preview,
.order-type-payment-box {
    padding: 17px;
    border: 1px solid #dee6f0;
    border-radius: 15px;
    background: #fff;
}

.order-type-preview {
    margin-bottom: 12px;
    border-color: #bed1f7;
    background: linear-gradient(145deg, #f7faff, #edf5ff);
}

.order-type-preview__eyebrow {
    display: block;
    margin-bottom: 12px;
    color: #557092;
    font-size: 11px;
    font-weight: 750;
}

#otBehaviorPreview {
    display: grid;
    gap: 6px;
}

#otBehaviorPreview strong {
    color: #17233a;
    font-size: 17px;
}

#otBehaviorPreview span,
.order-type-payment-box p {
    color: #677791;
    font-size: 12px;
    line-height: 1.5;
}

.order-type-payment-box p {
    margin: 0 0 12px;
}

.order-type-payment-box .checkbox-wrapper {
    min-height: 40px;
}

.order-type-terminal-list,
.order-type-assignment__list {
    display: grid;
    gap: 10px;
}

.order-type-terminal {
    display: grid;
    width: 100%;
    min-height: 74px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid #dfe6ef;
    border-radius: 15px;
    color: inherit;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.order-type-terminal:hover {
    border-color: #a9c2f4;
    background: #f8fbff;
}

.order-type-terminal__text {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.order-type-terminal__text strong {
    overflow: hidden;
    color: #1c2941;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-type-terminal__text small {
    color: #7d8aa0;
    font-size: 12px;
}

.order-type-terminal__action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #436088;
    font-size: 12px;
    font-weight: 700;
}

.order-type-terminal__action svg {
    width: 16px;
    height: 16px;
}

.order-type-assignment > p {
    margin-bottom: 16px;
}

.order-type-assignment__row {
    display: grid;
    min-height: 76px;
    grid-template-columns: 22px 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #dfe6ef;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.order-type-assignment__row.is-selected {
    border-color: #89abef;
    background: #f7faff;
    box-shadow: inset 0 0 0 1px #dae6ff;
}

.order-type-assignment__row--payment {
    grid-template-columns: 22px 44px minmax(0, 1fr);
}

.order-type-assignment__row > [data-terminal-payment-method],
.order-type-assignment__row > [data-terminal-order-type] {
    width: 18px;
    height: 18px;
    accent-color: #2f63dc;
}

.order-type-assignment__choice {
    display: contents;
    cursor: pointer;
}

.order-type-assignment__identity {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.order-type-assignment__identity strong {
    color: #1d2940;
    font-size: 14px;
}

.order-type-assignment__identity small {
    display: -webkit-box;
    overflow: hidden;
    color: #74829a;
    font-size: 11px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.order-type-assignment__default {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid #e0e6ef;
    border-radius: 999px;
    color: #66758c;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
}

.order-type-assignment__default input {
    margin: 0;
    accent-color: #2f63dc;
}

.order-type-assignment__default:has(input:checked) {
    border-color: #9ab6ef;
    color: #2756c8;
    background: #eaf1ff;
}

.order-type-terminal-preview {
    margin-top: 17px;
    padding: 14px;
    border-radius: 14px;
    background: #f5f8fc;
}

.order-type-terminal-preview > span {
    display: block;
    margin-bottom: 10px;
    color: #697991;
    font-size: 11px;
    font-weight: 700;
}

#orderTypeTerminalPreview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.order-type-terminal-preview__item {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #dbe4f1;
    border-radius: 10px;
    color: #34455f;
    background: #fff;
    font-size: 12px;
    font-weight: 650;
}

.order-type-terminal-preview__item.is-default {
    border-color: #7fa5f1;
    color: #214fbf;
    background: #edf3ff;
}

.order-type-terminal-preview__item svg {
    width: 15px;
    height: 15px;
}

.order-type-terminal-field-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.order-type-terminal-field-heading .form-label {
    margin-bottom: 0;
}

.order-type-assignment__list--terminal-form {
    max-height: 330px;
    overflow-y: auto;
    padding: 2px;
}

.order-type-assignment__empty {
    display: flex;
    min-height: 70px;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px dashed #d5deea;
    border-radius: 13px;
    color: #748198;
    background: #f8fafc;
    font-size: 13px;
}

.order-type-assignment__empty svg {
    width: 19px;
    height: 19px;
}

.order-type-routing-list {
    display: grid;
    gap: 10px;
}

.order-type-routing-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(180px, .65fr) 38px 38px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #fff;
}

.order-type-routing-row__icon,
.order-type-route-editor__intro > svg {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #eef4ff;
    color: #4169e1;
}

.order-type-routing-row__icon svg,
.order-type-route-editor__intro > svg {
    width: 20px;
    height: 20px;
}

.order-type-routing-row > span:nth-child(2),
.order-type-routing-row__destination,
.order-type-route-editor__intro div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.order-type-routing-row strong,
.order-type-routing-empty strong,
.order-type-route-editor__intro strong {
    color: #1b263d;
    font-size: 14px;
}

.order-type-routing-row small,
.order-type-routing-empty span,
.order-type-route-editor__intro span {
    overflow: hidden;
    color: #78869d;
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-type-routing-row__destination {
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.order-type-routing-row__destination svg {
    width: 17px;
    color: #9aa8bd;
}

.order-type-routing-empty,
.order-type-shadow-note,
.order-type-route-editor__intro {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px dashed #cad6e7;
    border-radius: 16px;
    background: #f9fbfe;
}

.order-type-routing-empty > svg,
.order-type-shadow-note > svg {
    width: 24px;
    flex: 0 0 auto;
    color: #71809a;
}

.order-type-routing-empty > div,
.order-type-shadow-note > span {
    display: grid;
    gap: 4px;
}

.order-type-shadow-note {
    margin-top: 16px;
    border-style: solid;
    border-color: #cceade;
    background: #f1fbf7;
    color: #457463;
    font-size: 13px;
}

.order-type-shadow-note > svg { color: #2da67c; }

.order-type-route-editor {
    display: grid;
    gap: 20px;
}

.order-type-route-editor__intro {
    align-items: flex-start;
    border-style: solid;
    border-color: #dce7f8;
    background: #f6f9ff;
}

.order-type-route-editor__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1180px) {
    .order-types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-type-editor__intro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-type-editor-shell { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 760px) {
    .order-types-page { gap: 16px; }
    .order-types-section { padding: 18px; border-radius: 18px; }
    .order-types-grid,
    .order-type-editor__intro,
    .order-type-editor__layout,
    .order-type-capability-grid { grid-template-columns: minmax(0, 1fr); }
    .order-type-card { min-height: 0; }
    .order-type-card__actions { grid-template-columns: minmax(0, 1fr); }
    .order-type-editor__intro { padding: 15px; }
    .order-type-terminal { grid-template-columns: 42px minmax(0, 1fr); }
    .order-type-terminal__action { grid-column: 2; }
    .order-type-assignment__row { grid-template-columns: 20px 40px minmax(0, 1fr); }
    .order-type-assignment__default { grid-column: 2 / -1; justify-self: start; }
    .order-type-terminal-field-heading { align-items: stretch; flex-direction: column; }
    .order-type-terminal-field-heading .btn { width: 100%; justify-content: center; }
    .order-type-routing-row { grid-template-columns: 42px minmax(0, 1fr) 38px 38px; }
    .order-type-routing-row__destination { grid-column: 2 / -1; }
    .order-type-route-editor__grid { grid-template-columns: minmax(0, 1fr); }
    .order-type-editor-shell { grid-template-columns: minmax(0, 1fr); }
    .order-type-editor-preview { position: static; grid-row: 1; }
    .order-type-editor-section { padding: 18px; border-radius: 16px; }
    .order-type-editor-section__heading { margin-bottom: 16px; }
    .order-type-editor-actions { display: grid; grid-template-columns: 1fr; padding-bottom: 16px; }
    .order-type-editor-actions .btn { width: 100%; justify-content: center; }
    .order-type-setting-row { min-height: 68px; padding: 11px 13px; }
}

@media (max-width: 480px) {
    .order-type-editor-section { padding: 15px; }
    .order-type-editor-section__heading > span { width: 28px; height: 28px; flex-basis: 28px; }
    .order-type-icon-field .erp-choice-card {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
    }
    .order-type-icon-field .erp-choice-card__icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }
    .order-type-icon-field .erp-choice-card__status {
        position: absolute;
        top: 7px;
        right: 7px;
    }
    .order-type-setting-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; }
    .order-type-setting-row__icon { width: 34px; height: 34px; }
    .order-type-setting-row__copy small { font-size: 11px; }
    .order-type-editor-preview { padding: 18px; }
}

/* ==================== TABLE ROW ISSUE RAIL ==================== */
.erp-table-row-issue-host:not(.erp-data-table__cell--frozen) {
    position: relative;
}

.erp-table-row-issue-host > .erp-table-row-issue {
    --erp-table-row-issue-color: var(--color-warning-dark);
    position: absolute !important;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 6;
    display: block !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: help;
}

.erp-table-row-issue-host > .erp-table-row-issue--danger {
    --erp-table-row-issue-color: var(--color-danger-dark);
}

.erp-table-row-issue-host > .erp-table-row-issue--info {
    --erp-table-row-issue-color: var(--color-info-strong);
}

.erp-table-row-issue-host > .erp-table-row-issue::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--erp-table-row-issue-color);
    transition: width 0.12s ease;
}

.erp-table-row-issue-host > .erp-table-row-issue:hover::before,
.erp-table-row-issue-host > .erp-table-row-issue:focus-visible::before {
    width: 5px;
}

.erp-table-row-issue-host > .erp-table-row-issue:focus-visible {
    outline: 2px solid var(--erp-table-row-issue-color) !important;
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .erp-table-row-issue-host > .erp-table-row-issue::before {
        transition: none;
    }
}

/* ==================== SHIFT REPORTS ==================== */
.shift-report-page {
    display: grid;
    gap: 20px;
}

.shift-report-page > .erp-page-header,
.shift-report-page > .stat-grid {
    margin-bottom: 0;
}

.shift-report-summary {
    margin: 0;
}

.shift-report-journal,
.shift-report-panel {
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    color: var(--gray-700);
}

.shift-report-journal__header,
.shift-report-panel > .erp-panel__header {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gray-200);
}

.shift-report-panel > .erp-panel__content {
    padding: 18px 20px 20px;
}

.shift-report-panel > .erp-panel__content--flush,
.shift-report-journal > .erp-panel__content {
    padding: 0;
    gap: 0;
}

.shift-report-panel > .erp-panel__footer {
    margin: 0;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--gray-200);
    opacity: 1;
}

.shift-report-panel .erp-panel__title,
.shift-report-journal .erp-panel__title {
    margin: 0;
    color: var(--gray-900);
    font-size: 16px;
}

.shift-report-panel .erp-field-hint,
.shift-report-journal .erp-field-hint {
    margin-top: 4px;
}

.shift-report-record-count {
    padding: 5px 9px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    color: var(--gray-600);
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.shift-report-brands {
    max-width: 220px;
    white-space: normal;
    line-height: 1.4;
}

.shift-report-difference--warning,
.shift-money--negative {
    color: var(--color-danger-dark) !important;
}

.shift-money--positive {
    color: var(--color-success-dark) !important;
}

.shift-report-id-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--gray-900);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.shift-report-mobile-card {
    padding: 16px;
    cursor: pointer;
}

.shift-report-primary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.shift-reconciliation {
    gap: 0 !important;
}

.shift-reconciliation__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-200);
}

.shift-reconciliation__row--total {
    color: var(--gray-900);
    font-weight: 700;
}

.shift-reconciliation__result,
.shift-reconciliation__open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: #fff;
    font-weight: 700;
}

.shift-reconciliation__result--ok {
    color: var(--color-success-dark);
}

.shift-reconciliation__result--warning {
    color: var(--color-danger-dark);
}

.shift-reconciliation__open {
    color: var(--color-primary);
}

.shift-report-note {
    margin: 0 20px 18px;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    color: var(--gray-600);
    background: #fff;
}

.shift-report-operators {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    color: var(--gray-600);
    font-size: 12px;
}

.shift-hour-chart {
    gap: 5px !important;
}

.shift-hour-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) minmax(170px, auto);
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 8px;
}

.shift-hour-row:hover {
    background: var(--gray-50);
}

.shift-hour-row__time {
    color: var(--gray-500);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.shift-hour-row__track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--gray-100);
}

.shift-hour-row__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.shift-hour-row__value {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--gray-500);
    font-size: 12px;
}

.shift-hour-row__value strong {
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

.shift-payment-method,
.shift-exception-card {
    padding: 14px;
    border-color: var(--gray-200);
}

.shift-brand-card {
    padding: 0;
    overflow: hidden;
}

.shift-brand-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--gray-200);
}

.shift-brand-card__marker {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
}

.shift-brand-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--gray-200);
}

.shift-brand-card__stats > * + * {
    border-left: 1px solid var(--gray-200);
}

.shift-report-empty-inline {
    padding: 32px;
    color: var(--gray-400);
    text-align: center;
}

.shift-drilldown-trigger:hover {
    border-color: var(--color-primary-200) !important;
}

@media (max-width: 980px) {
    .shift-report-primary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .shift-report-page {
        gap: 16px;
    }

    .shift-report-mobile-list.show-on-mobile.mobile-card-list {
        display: grid !important;
        gap: 10px;
    }

    .shift-report-journal__header,
    .shift-report-panel > .erp-panel__header {
        padding: 15px 16px;
    }

    .shift-report-panel > .erp-panel__content {
        padding: 16px;
    }

    .shift-report-panel > .erp-panel__content--flush {
        padding: 0;
    }

    .shift-report-panel > .erp-panel__footer {
        padding: 12px 16px 16px;
    }

    .shift-report-note {
        margin: 0 16px 16px;
    }

    .shift-hour-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .shift-hour-row__value {
        grid-column: 2;
    }
}
/* ============================================================
   HELP v2 — drawer, document blocks, help center
   Help opens over the screen instead of pushing its data down the page.
   All three surfaces share one set of block styles so a guide reads the
   same in the drawer and on its own page.
   ============================================================ */

.hx-help-launcher {
  position: fixed;
  z-index: 179;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--color-gray-900);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, right .18s ease, bottom .18s ease;
}
.hx-help-launcher[hidden] { display: none; }
.hx-help-launcher:hover {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-gray-200));
  box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
  transform: translateY(-1px);
}
.hx-help-launcher:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  outline-offset: 2px;
}
.hx-help-launcher svg,
.hx-help-launcher i {
  width: 17px;
  height: 17px;
  color: var(--color-primary);
}

.header-right > .hx-help-launcher--header,
[data-page-help-slot] > .hx-help-launcher--header {
  position: static;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-md);
  box-shadow: none;
}
.header-right > .hx-help-launcher--header span,
[data-page-help-slot] > .hx-help-launcher--header span { display: none; }

/* Setup and Help share one bottom-right dock. When both compact controls are
   present, Help becomes a 48px icon button and the setup pill moves beside it.
   An open desktop guide reserves its whole width. */
html:has(.onboarding-guide-launcher--production) .hx-help-launcher,
html:has(.onboarding-guide--production) .hx-help-launcher {
  justify-content: center;
  width: 48px;
  padding: 0;
}
html:has(.onboarding-guide-launcher--production) .hx-help-launcher span,
html:has(.onboarding-guide--production) .hx-help-launcher span { display: none; }
html:has(.onboarding-guide-launcher--production) .onboarding-guide-launcher--production { right: 84px; }
html:has(.onboarding-guide--production) .hx-help-launcher { right: 426px; }
html:has(.onboarding-guide--production.is-expanded) .hx-help-launcher { right: 556px; }
html.onboarding-tour-open .hx-help-launcher,
html.onboarding-flow-open .hx-help-launcher,
body.hx-help-open .hx-help-launcher,
body.hx-help-open .onboarding-guide--production,
body.hx-help-open .onboarding-guide-launcher--production {
  visibility: hidden;
  pointer-events: none;
}

.hx-help {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1200;
  width: min(460px, 100vw);
  padding: var(--space-3);
  pointer-events: none;
}
.hx-help[hidden] { display: none; }

.hx-help__panel {
  pointer-events: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 48px -24px rgb(15 23 42 / 0.35), 0 2px 8px rgb(15 23 42 / 0.06);
  overflow: hidden;
}

.hx-help__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}
.hx-help__heading { min-width: 0; }
.hx-help__eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-help__title {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-help__icon {
  border: 0;
  background: transparent;
  color: var(--color-gray-500);
  border-radius: var(--radius-md);
  padding: 6px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.hx-help__icon:hover { background: transparent; color: var(--color-gray-900); }
.hx-help__icon--close { margin-left: auto; }
.hx-help__icon i { width: 16px; height: 16px; }
.hx-help__search-toggle { display: none; }

.hx-help__search { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-gray-200); }
.hx-help__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
}
.hx-help__field:focus-within { border-color: var(--color-primary); }
.hx-help__field i { width: 15px; height: 15px; color: var(--color-gray-400); flex: none; }
.hx-help__field input {
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 13.5px;
  color: var(--color-gray-900);
}
.hx-help__field input::-webkit-search-cancel-button { display: none; }

.hx-help__body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.hx-help__training {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  margin-bottom: var(--space-4);
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-gray-200));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary) 5%, #fff);
}
.hx-help__training-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 11%, #fff);
}
.hx-help__training-icon i { width: 18px; height: 18px; }
.hx-help__training-copy { min-width: 0; }
.hx-help__training-copy strong {
  display: block;
  color: var(--color-gray-900);
  font-size: 13.5px;
  line-height: 1.35;
}
.hx-help__training-copy span {
  display: block;
  margin-top: 4px;
  color: var(--color-gray-600);
  font-size: 12.5px;
  line-height: 1.45;
}
.hx-help__training .btn {
  grid-column: 1 / -1;
  justify-content: center;
  width: 100%;
}
.hx-help__foot {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-gray-200);
  background: #fff;
}
.hx-help__foot .btn { flex: 1; justify-content: center; }

.hx-help__skeleton {
  height: 10px;
  border-radius: 2px;
  background: var(--color-gray-200);
  margin-bottom: 10px;
}
.hx-help__skeleton--short { width: 60%; }

.hx-help__notice { text-align: center; padding: var(--space-6) var(--space-3); }
.hx-help__notice-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}
.hx-help__notice-icon i { width: 18px; height: 18px; }
.hx-help__notice-title { font-size: 14.5px; font-weight: 620; color: var(--color-gray-900); }
.hx-help__notice-text { margin: 6px 0 0; font-size: 13px; color: var(--color-gray-600); }

.hx-help__hit {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-gray-200);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  margin-bottom: var(--space-2);
  cursor: pointer;
}
.hx-help__hit:hover { border-color: var(--color-gray-900); }
.hx-help__hit-path {
  display: block;
  font-size: 11.5px;
  color: var(--color-gray-400);
  margin-bottom: 2px;
}
.hx-help__hit-title { display: block; font-size: 13.6px; font-weight: 600; color: var(--color-gray-900); }
.hx-help__hit-text { display: block; margin-top: 4px; font-size: 12.8px; color: var(--color-gray-800); }
.hx-help__hit mark { background: transparent; color: var(--color-gray-900); font-weight: 700; box-shadow: inset 0 -2px 0 var(--color-primary); }

/* ── shared document blocks ── */
.hx-doc__lead { margin: 0 0 var(--space-6); }
.hx-doc__h {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-900);
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-gray-900);
  font-weight: 700;
}
.hx-doc__block { margin-bottom: var(--space-4); }
.hx-doc__text { margin: 0; }

.hx-doc__task {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.hx-doc__task-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.hx-doc__task-index {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-gray-900);
  color: var(--color-gray-900);
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 600;
  flex: none;
}
.hx-doc__task-title { font-size: 14px; font-weight: 650; color: var(--color-gray-900); }
.hx-doc__task-chevron { width: 15px; height: 15px; margin-left: auto; color: var(--color-gray-400); transition: transform 0.15s ease; }
.hx-doc__task.is-open .hx-doc__task-chevron { transform: rotate(180deg); }
.hx-doc__task-body { display: none; padding: 0 12px 12px 46px; }
.hx-doc__task.is-open .hx-doc__task-body { display: block; }
.hx-doc__steps { margin: 0; padding-left: 22px; }
.hx-doc__steps li { margin-bottom: 8px; padding-left: 2px; }
.hx-doc__step-note { color: var(--color-gray-500); }
.hx-doc__result {
  margin: var(--space-3) 0 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--color-gray-900);
  color: var(--color-gray-900);
  font-size: 13px;
}
.hx-doc__result b {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-900);
  font-weight: 700;
  margin-bottom: 2px;
}

.hx-doc__rows {
  margin: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hx-doc__row {
  display: grid;
  grid-template-columns: minmax(110px, 34%) 1fr;
  gap: var(--space-3);
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: 13.2px;
}
.hx-doc__row:last-child { border-bottom: 0; }
.hx-doc__row dt { font-weight: 600; color: var(--color-gray-900); margin: 0; }
.hx-doc__row dd { margin: 0; color: var(--color-gray-800); }

.hx-doc__list { margin: 0; padding-left: 22px; }
.hx-doc__list li { margin-bottom: 8px; }

.hx-doc__next {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-gray-200);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 9px 12px;
  margin-bottom: var(--space-2);
  font-size: 13.4px;
  color: var(--color-gray-800);
  cursor: pointer;
  text-align: left;
}
.hx-doc__next:hover { border-color: var(--color-gray-900); }
.hx-doc__next i { width: 15px; height: 15px; margin-left: auto; color: var(--color-gray-400); }

@media (max-width: 860px) {
  .hx-help-launcher {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  html:has(.onboarding-guide-launcher--production) .onboarding-guide-launcher--production {
    right: 72px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  html:has(.onboarding-guide--production) .hx-help-launcher { display: none; }
  .hx-help {
    inset: auto 0 0 0;
    width: 100%;
    height: 82vh;
    padding: 0;
  }
  .hx-help__panel {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: 0;
  }
  .hx-help__search-toggle { display: inline-grid; margin-left: auto; }
  .hx-help__search-toggle.is-active { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, #fff); }
  .hx-help__icon--close { margin-left: 0; }
  .hx-help__search { display: none; }
  .hx-help__search.is-mobile-open { display: block; }
  .hx-doc__task-body { padding-left: 12px; }
  .hx-doc__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Help Center ── */
.hx-hc {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.hx-hc__nav {
  position: sticky;
  top: var(--space-4);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--color-gray-200);
  padding: var(--space-2) var(--space-4) var(--space-8) 0;
}
.hx-hc__nav-title {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  padding: 0 var(--space-2) var(--space-2);
}
.hx-hc__nav-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 6px 8px;
  font-size: 13.2px;
  color: var(--color-gray-600);
  cursor: pointer;
  text-align: left;
}
.hx-hc__nav-item:hover { background: transparent; color: var(--color-gray-900); text-decoration: underline; }
.hx-hc__nav-item.is-active { background: transparent; color: var(--color-gray-900); font-weight: 700; box-shadow: inset 2px 0 0 var(--color-primary); }
.hx-hc__nav-item em { font-style: normal; font-size: 11.5px; color: var(--color-gray-400); }

.hx-hc__hero { max-width: 720px; margin: 0 auto var(--space-8); text-align: center; }
.hx-hc__hero h1 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-4);
}
.hx-hc__ask {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-xl);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.hx-hc__ask:focus-within { border-color: var(--color-primary); }
.hx-hc__ask > i { width: 17px; height: 17px; color: var(--color-gray-400); flex: none; }
.hx-hc__ask input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--color-gray-900);
}
.hx-hc__ask input::-webkit-search-cancel-button { display: none; }
.hx-hc__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-3); }
.hx-hc__chip {
  border: 1px solid var(--color-gray-300);
  background: #fff;
  color: var(--color-gray-800);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.hx-hc__chip:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }

.hx-hc__section { margin-bottom: var(--space-8); }
.hx-hc__section-head { margin-bottom: var(--space-3); }
.hx-hc__section-head h2 { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; margin: 0; color: var(--color-gray-900); }
.hx-hc__section-head p { margin: 4px 0 0; font-size: 15px; color: var(--color-gray-500); }
.hx-hc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 var(--space-8); border-top: 1px solid var(--color-gray-200); }
.hx-hc__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-gray-200);
  border-radius: 0;
  padding: 14px 0;
  cursor: pointer;
}
.hx-hc__card:hover .hx-hc__card-title { color: var(--color-primary-hover); text-decoration: underline; }
.hx-hc__card-title { font-size: 16px; font-weight: 620; color: var(--color-gray-900); }
.hx-hc__card-text { font-size: 14px; line-height: 1.5; color: var(--color-gray-600); }
.hx-hc__card-meta { margin-top: 4px; font-size: 12.5px; color: var(--color-gray-400); }

.hx-hc__results { display: flex; flex-direction: column; gap: var(--space-2); }
.hx-hc__result {
  text-align: left;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  cursor: pointer;
}
.hx-hc__result:hover { border-color: var(--color-gray-900); }
.hx-hc__result-path { display: block; font-size: 11.5px; color: var(--color-gray-400); margin-bottom: 2px; }
.hx-hc__result-title { display: block; font-size: 14px; font-weight: 600; color: var(--color-gray-900); }
.hx-hc__result-text { display: block; margin-top: 4px; font-size: 13px; color: var(--color-gray-800); }
.hx-hc__result mark, .hx-hc__result-title mark { background: transparent; color: var(--color-gray-900); font-weight: 700; box-shadow: inset 0 -2px 0 var(--color-primary); }

.hx-hc__empty { text-align: center; padding: var(--space-8) var(--space-4); border: 1px dashed var(--color-gray-300); border-radius: var(--radius-xl); }
.hx-hc__empty-title { font-size: 15px; font-weight: 620; color: var(--color-gray-900); }
.hx-hc__empty p { margin: 6px auto var(--space-4); font-size: 13.5px; color: var(--color-gray-600); max-width: 52ch; }

/* ── Article page ── */
.hx-doc {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 236px;
  gap: var(--space-6);
  align-items: start;
}
.hx-doc__nav, .hx-doc__side { position: sticky; top: var(--space-4); }
.hx-doc__nav {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--color-gray-200);
  padding: var(--space-2) var(--space-4) var(--space-8) 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.hx-doc__nav-back {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--color-gray-500);
  font-size: 12.5px;
  padding: 4px 8px 10px;
  cursor: pointer;
}
.hx-doc__nav-back i { width: 14px; height: 14px; }
.hx-doc__nav-title {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  padding: 0 var(--space-2) var(--space-2);
}
.hx-doc__nav-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 6px 8px;
  font-size: 13.2px;
  color: var(--color-gray-600);
  text-align: left;
  cursor: pointer;
}
.hx-doc__nav-item:hover { background: transparent; color: var(--color-gray-900); text-decoration: underline; }
.hx-doc__nav-item.is-active { background: transparent; color: var(--color-gray-900); font-weight: 700; box-shadow: inset 2px 0 0 var(--color-primary); }

.hx-doc__main {
  background: transparent;
  border: 0;
  padding: var(--space-2) 0 var(--space-12);
  min-width: 0;
}
.hx-doc__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-gray-400); margin-bottom: var(--space-3); }
.hx-doc__crumb button { border: 0; background: transparent; color: var(--color-gray-500); cursor: pointer; padding: 0; font-size: 12.5px; }
.hx-doc__crumb button:hover { color: var(--color-gray-900); text-decoration: underline; }
.hx-doc__crumb b { color: var(--color-gray-700); font-weight: 500; }
.hx-doc__title { font-size: 34px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 680; color: var(--color-gray-900); margin: 0 0 var(--space-3); max-width: 22ch; }
.hx-doc__intent { font-size: 18px; line-height: 1.6; color: var(--color-gray-600); margin: 0 0 var(--space-5); max-width: 62ch; }
.hx-doc__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-6); }
.hx-doc__content { font-size: 16px; line-height: 1.72; color: var(--color-gray-900); }
/* Text keeps a reading measure; screenshots use the whole column. */
.hx-doc__content > * { max-width: 78ch; }
.hx-doc__content > .hx-doc__figure { max-width: none; }
.hx-doc__content .hx-doc__lead { font-size: 15px; color: var(--color-gray-700); }
.hx-doc__content .hx-doc__task { border-color: var(--color-gray-200); }
.hx-doc__content .hx-doc__h { margin-top: var(--space-6); }

.hx-doc__side { display: flex; flex-direction: column; gap: var(--space-2); }
.hx-doc__cta { width: 100%; justify-content: center; }
.hx-doc__side-title {
  font-size: 12px;
  color: var(--color-gray-400);
  margin-top: var(--space-6);
  margin-bottom: 2px;
}
.hx-doc__toc { display: flex; flex-direction: column; }
.hx-doc__toc a {
  border-left: 2px solid transparent;
  padding: 4px 0 4px 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--color-gray-600);
  text-decoration: none;
}
.hx-doc__toc a:hover { border-left-color: var(--color-primary); color: var(--color-gray-900); }

@media (max-width: 1100px) {
  .hx-doc { grid-template-columns: 190px minmax(0, 1fr); }
  .hx-doc__side { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hx-doc__cta { width: auto; }
  .hx-doc__side-title { display: none; }
  .hx-doc__toc { flex-direction: row; flex-wrap: wrap; }
  .hx-doc__toc a { border-left: 0; border-bottom: 2px solid var(--color-gray-200); }
}
@media (max-width: 860px) {
  .hx-hc, .hx-doc { grid-template-columns: minmax(0, 1fr); }
  .hx-hc__nav, .hx-doc__nav { position: static; }
  .hx-doc__main { padding: var(--space-5); }
  .hx-doc__title { font-size: 22px; }
}

.hx-doc__nav-group {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  padding: var(--space-3) var(--space-2) 4px;
}
.hx-doc__nav-group:first-of-type { padding-top: 0; }

/* Strict by default: one dark action, everything else is type and rules. */
.hx-doc__cta--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.hx-doc__cta--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
.hx-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
  font-size: 13px;
  color: var(--color-gray-500);
}
.hx-doc__meta span:not(:last-child)::after { content: '·'; margin-left: 6px; color: var(--color-gray-300); }
.hx-doc__meta b { color: var(--color-gray-700); font-weight: 600; }

/* Document surface: headings, not panels. */
.hx-doc__section { margin: var(--space-10) 0 0; }
.hx-doc__section:first-child { margin-top: 0; }
.hx-doc__task-heading,
.hx-doc__section-heading {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 650;
  color: var(--color-gray-900);
  margin: var(--space-10) 0 var(--space-3);
}
.hx-doc__section .hx-doc__task-heading { margin-top: 0; }
.hx-doc__task-num {
  display: inline-block;
  min-width: 26px;
  color: var(--color-gray-400);
  font-weight: 600;
}
.hx-doc__task-num::after { content: '.'; }
.hx-doc__content .hx-doc__result {
  border-left: 0;
  padding: 0;
  margin: var(--space-3) 0 0;
  font-size: 16px;
  color: var(--color-gray-700);
}
.hx-doc__content .hx-doc__result b {
  display: inline;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-gray-900);
  font-weight: 650;
  margin: 0;
}
.hx-doc__content .hx-doc__rows {
  border: 0;
  border-top: 1px solid var(--color-gray-200);
  border-radius: 0;
  margin-top: var(--space-3);
}
.hx-doc__content .hx-doc__row {
  grid-template-columns: minmax(150px, 26%) 1fr;
  gap: var(--space-5);
  padding: 12px 0;
  font-size: 15.5px;
  border-bottom: 1px solid var(--color-gray-200);
}
.hx-doc__content .hx-doc__row dd { color: var(--color-gray-700); }
.hx-doc__content .hx-doc__next {
  border: 0;
  border-bottom: 1px solid var(--color-gray-200);
  border-radius: 0;
  padding: 12px 0;
  margin: 0;
  font-size: 16px;
  color: var(--color-gray-900);
}
.hx-doc__content .hx-doc__next:hover { border-color: var(--color-gray-200); color: var(--color-primary-hover); }
.hx-doc__content .hx-doc__block { margin-bottom: 0; }

/* Screenshots read as figures in the text, not as gallery tiles. */
.hx-doc__figure { margin: var(--space-6) 0; }
.hx-doc__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}
.hx-doc__figure figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-gray-500);
}
.hx-doc__figure-zoom { display: block; position: relative; }
.hx-doc__figure-zoom img { transition: border-color 120ms ease; }
.hx-doc__figure-zoom:hover img { border-color: var(--color-gray-400); }
.hx-doc__figure-zoom::after {
  content: 'Open full size';
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: var(--color-gray-700);
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 120ms ease;
}
.hx-doc__figure-zoom:hover::after { opacity: 1; }
.hx-doc__figure-zoom:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ==================== MEAL PLANS ==================== */
/* Uses the shared HoreX cards, controls and buttons; only product layout lives here. */
.meal-plan-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:stretch}
.meal-plan-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.meal-plan-card-grid>.meal-plan-card{display:flex;flex-direction:column}
.meal-plan-kbju{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0}
.meal-plan-kbju>div{background:#f8fafc;border-radius:10px;padding:9px 7px;text-align:center}
.meal-plan-kbju strong{display:block;color:#0f172a;font-size:15px}
.meal-plan-kbju span{font-size:10px;color:#64748b;text-transform:uppercase}
.meal-plan-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:#e2e8f0;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden}
.meal-plan-calendar-cell{background:#fff;min-height:132px;padding:9px}
.meal-plan-calendar-cell.is-actionable{cursor:pointer}
.meal-plan-calendar-cell.is-actionable:hover{background:#f8fafc}
.meal-plan-calendar-cell.is-readonly{cursor:default}
.meal-plan-calendar-event{display:block;width:100%;border:0;text-align:left;background:#eff6ff;color:#1e3a8a;border-radius:9px;padding:7px;margin-top:6px;cursor:pointer;font-size:11px}
.meal-plan-calendar-event.is-confirmed{background:#ecfdf5;color:#065f46}
.meal-plan-calendar-event.is-cancelled{background:#f8fafc;color:#64748b;text-decoration:line-through}
.meal-plan-mobile-days{display:none}
.meal-plan-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.meal-plan-menu-item{display:grid;grid-template-columns:minmax(240px,1.55fr) minmax(180px,1fr) 90px 40px;gap:14px;align-items:end;margin-bottom:10px}
.meal-plan-menu-item>.form-group{min-width:0;margin:0}
.meal-plan-menu-item__remove{align-self:end;width:40px;height:37px;min-height:37px;padding:0}
.meal-plan-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px}
.meal-plan-sticky{position:sticky;top:16px}
.meal-plan-client-row.has-danger{background:#fff1f2}
.meal-plan-client-row.has-warning{background:#fffbeb}
.meal-plan-checks{display:flex;gap:8px;flex-wrap:wrap}
.meal-plan-check{display:inline-flex;align-items:center;gap:6px;border:1px solid #dbe3ee;border-radius:9px;padding:8px 10px;background:#fff;font-size:12px;font-weight:700}
.meal-plan-period{padding:16px;margin-bottom:16px;border:1px solid #dbeafe;background:#f8fbff;border-radius:14px}
.meal-plan-table-card>.table-header{padding:10px 16px}
.meal-plan-table-card>.erp-data-table-wrap,.meal-plan-table-card>#mealPlanBatchCandidates>.erp-data-table-wrap{border:0;border-radius:0;box-shadow:none;overflow-x:auto}
#mealPlanCandidateTable table,#mealPlanConfirmedRecipients table,#mealPlanServings table{min-width:0}
#mealPlanDayIngredients table{min-width:760px}
.meal-plan-candidate-client{min-width:0;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.meal-plan-candidate-chips{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.meal-plan-candidate-warning{display:flex;align-items:flex-start;gap:5px;flex-direction:column;min-width:0;line-height:1.25}
.meal-plan-candidate-warning>span:last-child{max-width:100%;color:#b91c1c;font-size:11px;white-space:normal;overflow-wrap:anywhere}
.meal-plan-nutrition-value{color:#334155;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.meal-plan-menu-preview__intro{padding-bottom:4px}
.meal-plan-menu-preview__intro h3{margin:0;color:var(--color-gray-900);font-size:15px;line-height:1.3}
.meal-plan-menu-preview__intro p{margin:3px 0 0;color:var(--color-gray-500);font-size:12px;line-height:1.45}
.meal-plan-menu-preview__state{margin:4px 0;color:var(--color-gray-500);font-size:11px}
.meal-plan-menu-dish{padding:15px 0;border-bottom:1px solid var(--color-gray-200)}
.meal-plan-menu-dish:last-of-type{border-bottom:0}
.meal-plan-menu-dish__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.meal-plan-menu-dish__head small{display:block;margin-bottom:3px;color:var(--color-gray-500);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.meal-plan-menu-dish__head strong{color:var(--color-gray-900);font-size:14px;line-height:1.35}
.meal-plan-dish-kbju{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px;overflow:hidden;border:1px solid var(--color-gray-100);border-radius:8px;background:var(--color-gray-50)}
.meal-plan-dish-kbju>span{min-width:0;padding:8px 4px;text-align:center}
.meal-plan-dish-kbju>span+span{border-left:1px solid var(--color-gray-200)}
.meal-plan-dish-kbju strong,.meal-plan-dish-kbju small{display:block}
.meal-plan-dish-kbju strong{color:var(--color-gray-900);font-size:12px;font-variant-numeric:tabular-nums}
.meal-plan-dish-kbju small{margin-top:2px;color:var(--color-gray-500);font-size:9px;text-transform:uppercase}
.meal-plan-dish-allergens{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:9px;line-height:1.35}
.meal-plan-dish-allergens>span:first-child{margin-right:1px;color:var(--color-gray-500);font-size:11px}
.meal-plan-dish-allergens__empty{color:var(--color-gray-500);font-size:11px}
.meal-plan-dish-quality{display:inline-flex;align-items:center;gap:5px;color:var(--color-warning-dark);font-size:10px;font-weight:600}
.meal-plan-dish-quality::before{content:'';flex:0 0 4px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.75}
.meal-plan-nutrition-warnings{display:grid;gap:4px;margin-top:10px;padding-left:10px;border-left:2px solid var(--color-warning);color:var(--color-warning-dark);font-size:11px;line-height:1.4}
.meal-plan-menu-summary{margin-top:4px;padding-top:15px;border-top:1px solid var(--color-gray-200)}
.meal-plan-menu-summary__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.meal-plan-menu-summary__head h4{margin:0;color:var(--color-gray-900);font-size:13px}
.meal-plan-section-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.meal-plan-section-head>span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#eef4ff;color:#315fe9}
.meal-plan-section-head svg{width:17px;height:17px}
.meal-plan-section-head h3{margin:0;font-size:15px}
.meal-plan-section-head p{margin:2px 0 0;color:#64748b;font-size:12px}
.meal-plan-schedule-shortcuts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.meal-plan-schedule-shortcuts .btn.is-active{color:#1d4ed8;border-color:#93b4ff;background:#eff6ff}
.meal-plan-package-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 14px}
.meal-plan-package-summary>div{padding:10px;border-radius:10px;background:#f8fafc}
.meal-plan-package-summary span,.meal-plan-package-summary strong{display:block}
.meal-plan-package-summary span{color:#64748b;font-size:10px}
.meal-plan-package-summary strong{margin-top:2px;font-size:14px}
.meal-plan-confirmed-layout{display:grid;min-width:0;gap:14px}
.meal-plan-confirmed-layout>div,.meal-plan-confirmed-layout>.meal-plan-card,.meal-plan-confirmed-layout .meal-plan-table-card{min-width:0;width:100%}
.meal-plan-progress{display:grid;margin-top:12px}
.meal-plan-progress-step{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding-bottom:16px}
.meal-plan-progress-step:last-child{padding-bottom:0}
.meal-plan-progress-step:not(:last-child)::before{content:'';position:absolute;left:9px;top:20px;bottom:0;width:2px;background:#e2e8f0}
.meal-plan-progress-dot{position:relative;z-index:1;width:20px;height:20px;border:5px solid #fff;border-radius:50%;background:#cbd5e1;box-shadow:0 0 0 1px #cbd5e1}
.meal-plan-progress-step.is-done .meal-plan-progress-dot{background:#16a085;box-shadow:0 0 0 1px #16a085}
.meal-plan-progress-step.is-current .meal-plan-progress-dot{background:#315fe9;box-shadow:0 0 0 1px #315fe9}
.meal-plan-progress-step.is-danger .meal-plan-progress-dot{background:#dc2626;box-shadow:0 0 0 1px #dc2626}
.meal-plan-progress-step h4{margin:0;color:#0f172a;font-size:13px}
.meal-plan-progress-step p{margin:2px 0 0;color:#64748b;font-size:11px;line-height:1.35}
.meal-plan-progress--horizontal{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.meal-plan-progress--horizontal .meal-plan-progress-step{grid-template-columns:1fr;align-content:start;gap:7px;padding:0 16px 0 0}
.meal-plan-progress--horizontal .meal-plan-progress-step:not(:last-child)::before{left:20px;right:-16px;top:9px;bottom:auto;width:auto;height:2px}
.meal-plan-progress-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid #eef2f7}
.meal-plan-progress-toolbar__branch{grid-column:1;display:flex;align-items:center;gap:9px;min-height:40px;color:#475569}
.meal-plan-progress-toolbar__branch>span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#f1f5f9;color:#315fe9}
.meal-plan-progress-toolbar__branch svg{width:17px;height:17px}
.meal-plan-progress-toolbar__branch small,.meal-plan-progress-toolbar__branch strong{display:block;line-height:1.25}
.meal-plan-progress-toolbar__branch small{color:#64748b;font-size:10px}
.meal-plan-progress-toolbar__branch strong{color:#0f172a;font-size:12px}
.meal-plan-progress-toolbar__kitchen{grid-column:2}
.meal-plan-progress-toolbar__packing{grid-column:3}
.meal-plan-progress-toolbar__packing.is-next{grid-column:2}
.meal-plan-progress-toolbar .btn{min-height:40px}
.meal-plan-mini-month{margin-top:12px;padding-top:12px;border-top:1px solid #eef2f7}
.meal-plan-mini-month h4{margin:0 0 8px;font-size:12px}
.meal-plan-mini-weekdays,.meal-plan-mini-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.meal-plan-mini-weekdays span{color:#94a3b8;font-size:9px;font-weight:700;text-align:center}
.meal-plan-mini-day{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:7px;color:#94a3b8;font-size:10px}
.meal-plan-mini-day.is-service{color:#17765f;background:#e9f8f3;font-weight:800}
.meal-plan-mini-day.is-today{box-shadow:inset 0 0 0 1px #315fe9}
.meal-plan-mini-day.is-blank{visibility:hidden}
.meal-plan-optional{margin-top:14px;border-top:1px solid #eef2f7;padding-top:12px}

/* Client operations are action rows, not generic equal-width form grids. */
.meal-plan-operation-card{padding:18px 20px}
.meal-plan-operation-stack{display:grid;gap:12px;max-width:960px}
.meal-plan-operation-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.meal-plan-operation-field{min-width:0;margin:0}
.meal-plan-operation-field--wide{flex:1 1 420px}
.meal-plan-operation-field--date{flex:0 1 240px}
.meal-plan-operation-field--type{flex:0 1 180px}
.meal-plan-operation-field--reason{flex:1 1 280px}
.meal-plan-operation-field--days{flex:0 1 150px}
.meal-plan-operation-field--money{flex:0 1 190px}
.meal-plan-operation-field--payment{flex:0 1 230px}
.meal-plan-operation-field--note{flex:1 1 280px}
.meal-plan-operation-action{flex:0 0 auto;align-self:flex-end}
.meal-plan-operation-note{display:flex;align-items:flex-start;gap:7px;margin-top:11px;color:#64748b;font-size:12px;line-height:1.45}
.meal-plan-operation-note svg{flex:0 0 15px;width:15px;height:15px;margin-top:1px}
.meal-plan-restriction-list{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #eef2f7}
.meal-plan-restriction-item{display:inline-flex;align-items:center;gap:3px}
.meal-plan-restriction-item .btn{min-height:28px;padding:4px 6px}
.meal-plan-restriction-empty{color:#94a3b8;font-size:12px}
.meal-plan-payment-hint{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;color:#64748b;font-size:12px;line-height:1.45}
.meal-plan-payment-hint svg{flex:0 0 15px;width:15px;height:15px;margin-top:1px}
.meal-plan-cutoff{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px 12px;border:1px solid #dbe3ee;border-radius:10px;color:#475569;background:#f8fafc;font-size:12px;line-height:1.4}
.meal-plan-cutoff svg{flex:0 0 17px;width:17px;height:17px;margin-top:1px;color:#b45309}
.meal-plan-cutoff strong{display:block;color:#334155;font-size:11px}
.meal-plan-status-tabs{display:flex;align-items:center;gap:4px}
.meal-plan-status-tabs .btn.is-active{border-color:#93b4ff;background:#eff6ff;color:#1d4ed8}
.meal-plan-mobile-day{display:grid;gap:10px}
.meal-plan-empty-day{padding-top:9px;border-top:1px dashed #dbe3ee;color:#94a3b8;font-size:12px}
.meal-plan-exception-item{display:inline-flex;align-items:center;gap:2px}
.meal-plan-exception-item .btn{width:28px;height:28px;min-height:28px;padding:4px}
.meal-plan-client-title-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.meal-plan-client-title-link:hover{color:#315fe9}
.meal-plan-client-title-link svg{width:16px;height:16px}
.meal-plan-client-layout{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:18px;align-items:start}
.meal-plan-client-primary{min-width:0}
.meal-plan-client-rail{display:grid;min-width:0;gap:14px}
.meal-plan-client-rail>.meal-plan-card{margin:0}
.meal-plan-client-plan-section{display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr);column-gap:22px;row-gap:9px;padding:17px 0;border-top:1px solid #eef2f7}
.meal-plan-client-plan-section:first-of-type{padding-top:2px;border-top:0}
.meal-plan-client-plan-label{grid-row:1 / span 2}
.meal-plan-client-plan-label strong,.meal-plan-client-plan-label span{display:block}
.meal-plan-client-plan-label strong{color:#0f172a;font-size:13px}
.meal-plan-client-plan-label span{margin-top:3px;color:#64748b;font-size:11px;line-height:1.4}
.meal-plan-client-plan-section .meal-plan-schedule-shortcuts{margin:0}
.meal-plan-client-plan-section .meal-plan-checks{align-self:start}
.meal-plan-client-delivery-fields{margin-top:4px;padding-top:17px;border-top:1px solid #eef2f7}
.meal-plan-restriction-list--primary{min-height:36px;margin:0 0 12px;padding:0;border:0}
.meal-plan-restriction-list--primary .meal-plan-restriction-empty{display:flex;align-items:center;min-height:34px;padding:0 11px;border:1px dashed #d7e0eb;border-radius:9px;background:#fafcff}
.meal-plan-empty-note{padding:16px;border:1px dashed #d7e0eb;border-radius:11px;color:#64748b;background:#fafcff;font-size:12px;line-height:1.45}
.meal-plan-upcoming-exceptions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #eef2f7}
.meal-plan-upcoming-exceptions>span:first-child{width:100%;color:#64748b;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.meal-plan-client-settings{padding:0;overflow:visible}
.meal-plan-client-settings>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer}
.meal-plan-client-settings>summary::-webkit-details-marker{display:none}

.meal-plan-client-settings__title{display:flex;align-items:center;min-width:0;gap:10px}
.meal-plan-client-settings__title>svg{flex:0 0 18px;width:18px;height:18px;color:#64748b}
.meal-plan-client-settings__title>span,.meal-plan-client-settings__title strong,.meal-plan-client-settings__title small{display:block;min-width:0}
.meal-plan-client-settings__title strong{color:#334155;font-size:13px}
.meal-plan-client-settings__title small{margin-top:2px;color:#64748b;font-size:11px;font-weight:400}
.meal-plan-client-settings>summary>svg{flex:0 0 16px;width:16px;height:16px;color:#94a3b8;transition:transform .16s ease}
.meal-plan-client-settings[open]>summary>svg{transform:rotate(180deg)}
.meal-plan-client-settings__body{padding:18px;border-top:1px solid #eef2f7;background:#fbfcfe}
.meal-plan-action-details{border-top:1px solid #eef2f7}
.meal-plan-action-details:first-of-type{margin-top:4px}
.meal-plan-action-details__body{padding:14px;border:1px solid #e5eaf1;border-radius:11px;background:#f8fafc}
.meal-plan-action-details[open]{padding-bottom:14px}
.meal-plan-action-form{display:grid;gap:11px}
.meal-plan-action-form .btn{width:100%;justify-content:center}
.meal-plan-client-actions .meal-plan-section-head{margin-bottom:4px}

@media(max-width:1280px){
  .meal-plan-detail-grid{grid-template-columns:1fr}
  .meal-plan-sticky{position:static}
  .meal-plan-client-layout{grid-template-columns:1fr}
  .meal-plan-client-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meal-plan-progress--horizontal{grid-template-columns:1fr;gap:0}
  .meal-plan-progress--horizontal .meal-plan-progress-step{grid-template-columns:20px minmax(0,1fr);gap:10px;padding:0 0 16px}
  .meal-plan-progress--horizontal .meal-plan-progress-step:last-child{padding-bottom:0}
  .meal-plan-progress--horizontal .meal-plan-progress-step:not(:last-child)::before{left:9px;right:auto;top:20px;bottom:0;width:2px;height:auto}
  .meal-plan-progress-toolbar{grid-template-columns:1fr;gap:8px}
  .meal-plan-progress-toolbar__branch,.meal-plan-progress-toolbar__kitchen,.meal-plan-progress-toolbar__packing{grid-column:1}
}

@media(max-width:900px){
  .meal-plan-client-rail{grid-template-columns:1fr}
}

@media(max-width:620px){
  .meal-plan-card-grid{grid-template-columns:1fr}
  .meal-plan-form-grid{grid-template-columns:1fr}
  .meal-plan-menu-item{grid-template-columns:minmax(0,1fr) 90px 40px;gap:10px}
  .meal-plan-menu-item__recipe{grid-column:1/-1}
  .meal-plan-calendar-grid{display:none}
  .meal-plan-mobile-days{display:grid;gap:9px}
  .meal-plan-mobile-day .btn{min-height:44px}
  .meal-plan-table-card>.table-header{align-items:flex-start;gap:10px;flex-direction:column}
  .meal-plan-table-card>.table-header>.u-flex{width:100%;flex-wrap:wrap}
  .meal-plan-table-card>.table-header>.u-flex .btn{flex:1;min-height:44px}
  .meal-plan-kbju{grid-template-columns:repeat(2,1fr)}
  .meal-plan-card{padding:14px}
  .meal-plan-operation-field,.meal-plan-operation-action{flex:1 1 100%}
  .meal-plan-operation-action{width:100%}
  .meal-plan-client-plan-section{grid-template-columns:1fr;gap:10px}
  .meal-plan-client-plan-label{grid-row:auto}
  .meal-plan-client-settings__body{padding:14px}
}

/* Personal first-entry welcome. It sits above setup/help and owns the first
   decision: the language in which the user will learn the product. */
html.first-entry-welcome-open,
html.first-entry-welcome-open body{overflow:hidden}
.first-entry-welcome-layer{
  position:fixed;
  z-index:3200;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(15,23,42,.56);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px)
}
.first-entry-welcome{
  width:min(940px,calc(100vw - 48px));
  max-height:calc(100dvh - 48px);
  overflow:auto;
  overscroll-behavior:contain;
  background:#fff;
  color:#0f172a;
  border:1px solid rgba(226,232,240,.9);
  border-radius:28px;
  box-shadow:0 36px 100px rgba(15,23,42,.28);
  padding:30px;
  text-align:start
}
.first-entry-welcome__brand{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.02em}
.first-entry-welcome__brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#fff;background:linear-gradient(145deg,#60a5fa,#245de4);box-shadow:0 8px 20px rgba(37,99,235,.24)}
.first-entry-welcome__brand-mark svg{width:17px;height:17px}
.first-entry-welcome__intro{max-width:720px;margin-block:28px 24px}
.first-entry-welcome__eyebrow{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eff6ff;color:#2563eb;font-size:12px;font-weight:750}
.first-entry-welcome__intro h1{margin:12px 0 8px;font-size:clamp(32px,4vw,47px);line-height:1.04;letter-spacing:-.045em}
.first-entry-welcome__intro p{margin:0;color:#52627a;font-size:17px;line-height:1.55}
.first-entry-welcome__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:16px}
.first-entry-welcome__profile,.first-entry-welcome__languages{min-width:0;border:1px solid #e4eaf2;border-radius:20px;background:#fff;padding:19px}
.first-entry-welcome__profile{background:linear-gradient(155deg,#f8fbff 0%,#fff 62%)}
.first-entry-welcome__profile header{display:flex;align-items:center;gap:13px;padding-block-end:15px;border-block-end:1px solid #e8edf4}
.first-entry-welcome__profile header>div:last-child{min-width:0;display:flex;flex-direction:column;gap:3px}
.first-entry-welcome__profile header span{font-size:12px;color:#718096}
.first-entry-welcome__profile header strong{font-size:17px;overflow-wrap:anywhere}
.first-entry-welcome__avatar{flex:0 0 48px;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;overflow:hidden;color:#fff;background:linear-gradient(145deg,#4f8cff,#245de4);font-size:20px;font-weight:800}
.first-entry-welcome__avatar img{width:100%;height:100%;object-fit:cover}
.first-entry-welcome__profile dl{display:grid;gap:0;margin:9px 0 0}
.first-entry-welcome__profile dl>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:8px 0;align-items:baseline}
.first-entry-welcome__profile dt{font-size:12px;color:#77859a}
.first-entry-welcome__profile dd{margin:0;font-size:13px;font-weight:650;overflow-wrap:anywhere}
.first-entry-welcome__profile-hint{display:flex;gap:8px;margin:10px 0 0;padding:11px;border-radius:12px;background:#f3f7fc;color:#607089;font-size:11px;line-height:1.45}
.first-entry-welcome__profile-hint svg{flex:0 0 15px;width:15px;height:15px;margin-block-start:1px;color:#3b82f6}
.first-entry-welcome__languages-heading{display:flex;flex-direction:column;gap:4px;margin-block-end:13px}
.first-entry-welcome__languages-heading span{font-weight:780;font-size:17px}
.first-entry-welcome__languages-heading small{font-size:12px;color:#75849a}
.first-entry-welcome__language-list{display:grid;gap:9px}
.first-entry-welcome__language{appearance:none;width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:11px 13px;border:1px solid #dfe6ef;border-radius:14px;background:#fff;color:#172033;text-align:start;cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s,transform .18s}
.first-entry-welcome__language:hover{border-color:#9ebeff;transform:translateY(-1px)}
.first-entry-welcome__language.is-selected{border-color:#3b82f6;background:#f7faff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.first-entry-welcome__language-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eef4ff;color:#245de4;font-size:16px;font-weight:850}
.first-entry-welcome__language>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}
.first-entry-welcome__language strong{font-size:14px}
.first-entry-welcome__language small{font-size:11px;color:#77859a;overflow-wrap:anywhere}
.first-entry-welcome__language>svg{width:18px;height:18px;color:#3b82f6;opacity:0}
.first-entry-welcome__language.is-selected>svg{opacity:1}
.first-entry-welcome__error{margin-block-start:12px;padding:10px 12px;border-radius:10px;background:#fff1f2;color:#be123c;font-size:13px}
.first-entry-welcome footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-block-start:20px;padding-block-start:18px;border-block-start:1px solid #e8edf4}
.first-entry-welcome footer>span{min-width:0;color:#8491a4;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.first-entry-welcome footer .btn{min-height:48px;padding-inline:20px;border-radius:14px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.first-entry-welcome footer .btn svg{width:17px;height:17px}
[dir="rtl"] .first-entry-welcome footer .lucide-arrow-right{transform:scaleX(-1)}

@media(max-width:700px){
  .first-entry-welcome-layer{padding:0;place-items:stretch;background:#fff}
  .first-entry-welcome{width:100vw;max-width:100vw;min-height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none;padding:calc(16px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
  .first-entry-welcome__brand{font-size:17px}
  .first-entry-welcome__intro{margin-block:22px 18px}
  .first-entry-welcome__intro h1{font-size:31px;line-height:1.08;margin-block:10px 7px}
  .first-entry-welcome__intro p{font-size:15px;line-height:1.45}
  .first-entry-welcome__grid{grid-template-columns:1fr;gap:12px}
  .first-entry-welcome__profile,.first-entry-welcome__languages{padding:15px;border-radius:17px}
  .first-entry-welcome__profile header{padding-block-end:11px}
  .first-entry-welcome__profile dl{grid-template-columns:1fr 1fr;column-gap:12px}
  .first-entry-welcome__profile dl>div{display:block;padding:7px 0}
  .first-entry-welcome__profile dd{margin-block-start:2px;font-size:12px}
  .first-entry-welcome__profile dl>div:first-child{grid-column:1/-1}
  .first-entry-welcome__profile-hint{display:none}
  .first-entry-welcome__languages-heading{margin-block-end:10px}
  .first-entry-welcome__language-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .first-entry-welcome__language{position:relative;grid-template-columns:1fr;justify-items:center;text-align:center;padding:10px 5px;gap:6px;min-height:88px}
  .first-entry-welcome__language-mark{width:34px;height:34px;border-radius:10px;font-size:14px}
  .first-entry-welcome__language small{display:none}
  .first-entry-welcome__language>svg{position:absolute;opacity:0}
  .first-entry-welcome footer{position:sticky;bottom:0;margin-block-start:auto;padding-block-start:14px;background:#fff}
  .first-entry-welcome footer>span{display:none}
  .first-entry-welcome footer .btn{width:100%;justify-content:center;min-height:52px}
}

@media(max-width:380px){
  .first-entry-welcome{padding-inline:12px}
  .first-entry-welcome__intro h1{font-size:27px}
  .first-entry-welcome__profile,.first-entry-welcome__languages{padding:12px}
}
/* Trial lifecycle: compact, product-neutral access state below the main header. */
.trial-access-banner {
    margin: 12px 24px 0;
    padding: 10px 14px;
    border: 1px solid #bfd3ff;
    border-left: 3px solid var(--primary, #356df3);
    border-radius: 10px;
    background: #fff;
    color: #17213a;
    display: flex;
    align-items: center;
    gap: 11px;
    box-shadow: 0 2px 8px rgba(23, 33, 58, .04);
}
.trial-access-banner[hidden] { display: none; }
.trial-access-banner > svg { width: 18px; height: 18px; color: var(--primary, #356df3); flex: 0 0 auto; }
.trial-access-banner > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trial-access-banner strong { font-size: 13px; line-height: 1.3; }
.trial-access-banner span { font-size: 12px; line-height: 1.4; color: #64748b; }
.trial-access-banner__contact { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--primary, #356df3); white-space: nowrap; }
.trial-access-banner.is-expired { border-color: #f0c7c7; border-left-color: #b74b4b; }
.trial-access-banner.is-expired > svg { color: #b74b4b; }
@media (max-width: 720px) {
    .trial-access-banner { margin: 8px 12px 0; align-items: flex-start; flex-wrap: wrap; }
    .trial-access-banner__contact { margin-left: 29px; }
}

/* Menu price lists — shared menu, compact branch and sales-flow editing. */
.menu-pricing-page { min-width: 0; }
.menu-pricing-page .card { background: #fff; box-shadow: none; border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; }
.mpl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.mpl-empty { padding: 56px 24px; text-align: center; background: #fff; border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; }
.mpl-empty__icon { display: inline-flex; margin-bottom: 16px; }
.mpl-empty__icon svg { width: 28px; height: 28px; color: var(--primary, #2563eb); }
.mpl-empty h2 { font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.mpl-empty p { max-width: 440px; margin: 0 auto 20px; color: var(--text-secondary, #6b7280); line-height: 1.6; font-size: 14px; }
.mpl-empty__steps { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 26px 0; font-size: 13px; }
.mpl-empty__steps span { display: flex; gap: 8px; align-items: center; }
.mpl-empty__steps b { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid #d1d5db; border-radius: 50%; font-size: 12px; font-weight: 500; }
.mpl-list { overflow: hidden; }
.mpl-list-row { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1fr) 95px 90px; align-items: center; gap: 20px; padding: 20px; border-bottom: 1px solid #eee; }
.mpl-list-row:last-child { border-bottom: 0; }
.mpl-list-identity { display: flex; flex-direction: column; gap: 6px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; min-width: 0; color: inherit; }
.mpl-list-identity strong { font-size: 14px; font-weight: 600; }
.mpl-list-identity span, .mpl-list-meta small, .mpl-caption, .mpl-field small, .mpl-save-state { font-size: 12px; color: var(--text-secondary, #6b7280); line-height: 1.5; }
.mpl-list-meta { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.mpl-status { font-size: 12px; border: 1px solid #d1d5db; border-radius: 5px; padding: 4px 8px; width: fit-content; }
.mpl-caption { margin: 14px 0; }
.mpl-editor-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.mpl-setup, .mpl-prices, .mpl-preview { padding: 20px; margin-bottom: 20px; min-width: 0; }
.mpl-setup-top { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.mpl-setup-top > .mpl-field { flex: 1; max-width: 500px; }
.mpl-list-actions { display: flex; gap: 8px; }
.mpl-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mpl-field > label { font-size: 12px; font-weight: 600; margin: 0; color: var(--text-secondary, #6b7280); }
.mpl-field .pure-dropdown, .mpl-field .pure-dropdown-trigger { width: 100%; }
.mpl-section-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 16px; }
.mpl-section-heading strong { font-size: 14px; font-weight: 600; }
.mpl-section-heading span { font-size: 12px; color: var(--text-secondary, #6b7280); }
.mpl-assignment { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-top: 1px solid #eee; }
.mpl-assignment-flow > .btn { margin-top: 8px; }
.mpl-branch-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-secondary, #6b7280); margin-bottom: 8px; }
.mpl-branch-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.mpl-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; margin: 0; }
.mpl-check input { width: 16px; height: 16px; accent-color: #2563eb; flex-shrink: 0; }
.mpl-branch-choice { border: 1px solid #e5e7eb; border-radius: 6px; padding: 9px 12px; min-height: 44px; }
.mpl-branch-choice:has(input:checked) { border-color: #2563eb; }
.mpl-branch-choice span { display: flex; flex-direction: column; gap: 2px; }
.mpl-branch-choice small { font-size: 10px; color: var(--text-secondary, #6b7280); }
.mpl-schedule { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; }
.mpl-schedule summary, .mpl-history summary { cursor: pointer; font-size: 13px; font-weight: 500; min-height: 32px; }
.mpl-schedule summary span { color: var(--text-secondary, #6b7280); font-size: 12px; font-weight: 400; margin-left: 10px; }
.mpl-dates { display: grid; grid-template-columns: 220px 220px; gap: 16px; margin: 12px 0; }
.mpl-schedule > small { display: flex; align-items: center; gap: 10px; color: var(--text-secondary, #6b7280); }
.mpl-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.mpl-toolbar .ds-search-wrap { flex: 1; min-width: 200px; max-width: 380px; }
.mpl-toolbar > .pure-dropdown { flex: 0 1 240px; width: 240px; min-width: 160px; max-width: 100%; }
.mpl-toolbar > .mpl-caption { margin: 0 0 0 auto; white-space: nowrap; }
.mpl-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.mpl-bulk strong { font-size: 12px; font-weight: 500; min-width: 78px; }
.mpl-bulk-value { max-width: 90px; min-height: 36px; }
.mpl-table-scroll { overflow: auto; max-height: 64vh; min-width: 0; }
.mpl-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 610px; font-size: 13px; }
.mpl-table th, .mpl-table td { padding: 12px 14px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; background: #fff; }
.mpl-table th { position: sticky; top: 0; z-index: 1; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 500; color: #6b7280; white-space: nowrap; }
.mpl-table td strong { font-size: 13px; font-weight: 500; display: block; }
.mpl-table td small { display: block; color: #6b7280; font-size: 11px; margin-top: 5px; }
.mpl-table td:nth-child(3), .mpl-table td:last-child { white-space: nowrap; }
.mpl-table input[type=checkbox] { width: 17px; height: 17px; accent-color: #2563eb; }
.mpl-select-col { width: 42px; }
.mpl-price-input { display: flex; align-items: center; max-width: 164px; min-width: 140px; gap: 4px; }
.mpl-price-input input { width: 100%; min-width: 0; min-height: 38px; border: 1px solid #d1d5db; border-radius: 5px; padding: 8px 10px; text-align: right; background: #fff; font: inherit; }
.mpl-price-input input:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.mpl-price-input button { width: 32px; height: 38px; padding: 6px; border: 0; background: none; color: #6b7280; cursor: pointer; flex-shrink: 0; }
.mpl-price-input svg { width: 14px; height: 14px; }
.mpl-table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; font-size: 12px; color: #6b7280; }
.mpl-no-results { padding: 32px !important; text-align: center !important; color: #6b7280; }
.mpl-history { padding: 16px 20px; }
.mpl-history > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 0; border-top: 1px solid #eee; font-size: 12px; }
.mpl-preview-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mpl-visibility { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.mpl-visibility svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 760px) {
  .mpl-list-row { grid-template-columns: 1fr auto; gap: 12px; padding: 16px; }
  .mpl-list-meta { grid-column: 1; grid-row: 2; }
  .mpl-list-row > .mpl-status { grid-column: 2; grid-row: 1; }
  .mpl-assignment { grid-template-columns: 1fr; gap: 12px; }
  .mpl-setup, .mpl-prices, .mpl-preview { padding: 16px; }
  .mpl-setup-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .mpl-setup-top > .mpl-field { max-width: none; }
  .mpl-preview-filters, .mpl-dates { grid-template-columns: 1fr; }
  .mpl-bulk .btn, .mpl-tabs .btn, .menu-pricing-page .btn, .mpl-price-input button, .mpl-price-input input { min-height: 44px; }
  .mpl-price-input button { min-width: 44px; }
  .mpl-empty { padding: 32px 16px; }
  .mpl-empty__steps { gap: 12px; }
  .mpl-toolbar > .ds-search-wrap, .mpl-toolbar > .pure-dropdown { flex-basis: 100%; max-width: none; }
  .mpl-check { min-height: 44px; }
}
.mpl-matrix { padding: 20px; min-width: 0; }
.mpl-matrix-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.mpl-matrix-context { display:flex; gap:16px; flex-wrap:wrap; }
.mpl-matrix-context .mpl-field { width:230px; }
.mpl-matrix-tools { display:flex; gap:8px; flex-wrap:wrap; }
.mpl-matrix-table { width:max-content; min-width:100%; table-layout:fixed; }
.mpl-matrix-table td, .mpl-matrix-table th { width:180px; min-width:180px; }
.mpl-matrix-table th small { display:block; margin-top:5px; font-weight:400; font-size:10px; text-transform:none; }
.mpl-matrix-table td:first-child, .mpl-matrix-table th:first-child { width:44px; min-width:44px; padding:12px; }
.mpl-matrix-table .mpl-matrix-name { position:sticky; left:0; width:230px; min-width:230px; z-index:2; border-right:1px solid #e5e7eb; }
.mpl-matrix-table th.mpl-matrix-name { z-index:3; }
.mpl-matrix-table .mpl-matrix-base { min-width:100px; width:100px; }
.mpl-matrix-scroll { contain:inline-size; }
.mpl-text-link { border:0; background:none; padding:0; font:inherit; color:#2563eb; cursor:pointer; text-align:left; }
.mpl-adjust-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.mpl-adjust-summary { display:flex; flex-direction:column; gap:6px; margin:16px 0; font-size:13px; }
.mpl-adjust-summary span { font-size:12px; color:#6b7280; }
@media(max-width:760px) {
  .mpl-matrix { padding:16px; }
  .mpl-matrix-context, .mpl-matrix-context .mpl-field, .mpl-matrix-tools { width:100%; }
  .mpl-matrix-context .mpl-field { flex:1 1 100%; }
  .mpl-matrix-table .mpl-matrix-name { position:static; min-width:170px; width:170px; }
  .mpl-adjust-fields { grid-template-columns:1fr; }
}

@media(max-width:760px) {
  .menu-pricing-page .erp-page-header__controls--actions-only { flex-wrap:wrap; overflow:visible; }
  .menu-pricing-page .erp-page-header__back { min-width:44px; min-height:44px; }
  .mpl-toolbar > .pure-dropdown { flex-basis:100%; width:100%; }
  .mpl-toolbar > .mpl-caption { margin-left:0; }
}

/* Visibility is an editing matrix, not an invoice table with mobile cards. */
.menu-availability-scroll { display:block; background:#fff; border:1px solid var(--border-color,#e5e7eb); border-radius:10px; min-width:0; contain:inline-size; }
@media(max-width:760px) {
  .menu-availability-page .erp-page-header__controls--actions-only { flex-wrap:wrap; overflow:visible; }
  .menu-availability-page .btn, .menu-availability-page .erp-page-header__back { min-height:44px; min-width:44px; }
  .menu-availability-scroll .vm-name-col { min-width:170px !important; max-width:170px; }
}

.mpl-history-page { padding:20px; min-width:0; }
.mpl-history-batch { border-top:1px solid #e5e7eb; padding:12px 0; }
.mpl-history-batch > summary { cursor:pointer; min-height:44px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; font-size:13px; }
.mpl-history-batch > summary span { color:#6b7280; font-size:12px; }
.mpl-history-batch > summary strong { font-weight:600; }
.mpl-history-entry { padding:16px 0; }
@media(max-width:760px) { .mpl-history-page { padding:16px; } }

/* Shared onboarding extension: optional contextual preview, used by Google Marketing. */
.onboarding-flow__workspace { min-height: 0; flex: 1 1 auto; display: flex; overflow: hidden; }
.onboarding-flow__workspace > .onboarding-flow__body { width: 100%; }
.onboarding-flow--with-preview { width: min(1140px, 100%); }
.onboarding-flow--with-preview .onboarding-flow__body { flex: 1 1 0; min-width: 0; padding-inline: 40px; }
.onboarding-flow__preview { flex: 0 0 300px; min-width: 0; margin-block: 28px; padding: 24px 28px; overflow-y: auto; border-inline-start: 1px solid var(--color-gray-200); background: #fff; }
.onboarding-flow__preview h3 { margin-top: 0; font-size: 15px; }
.onboarding-flow__preview p { color: var(--color-gray-600); font-size: 13px; line-height: 1.6; }
.onboarding-flow--wide-preview { width: min(1280px,100%); }
.onboarding-flow--wide-preview .onboarding-flow__preview { flex-basis: 390px; padding-inline: 24px; }
.onboarding-preview-summary__label { margin-bottom: 24px; color: var(--color-gray-600); font-size: 12px; }
.onboarding-preview-summary__identity { display: flex; align-items: center; gap: 12px; }
.onboarding-preview-summary__identity > svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--color-primary); }
.onboarding-preview-summary__identity strong { font-size: 18px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.onboarding-preview-summary dl { margin: 24px 0 0; font-size: 12px; }
.onboarding-preview-summary dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-gray-200); }
.onboarding-preview-summary dt { color: var(--color-gray-600); }
.onboarding-preview-summary dd { margin: 0; max-width: 60%; text-align: end; overflow-wrap: anywhere; }
.onboarding-search-preview { margin: 0; }
.onboarding-search-preview-demo { max-width: 360px; }
.onboarding-search-preview figcaption { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--color-gray-600); font-size: 12px; }
.onboarding-search-preview figcaption svg { width: 16px; height: 16px; }
.onboarding-search-preview__surface { padding: 20px 16px 24px; border: 1px solid #dadce0; border-radius: 16px; background: #fff; }
/* Google Search typography belongs to this provider preview, not the HoreX theme. */
.onboarding-search-ad { font-family: Arial, sans-serif; color: #202124; text-align: left; }
.onboarding-search-ad__sponsored { margin-bottom: 16px; font-size: 14px; font-weight: 700; line-height: 20px; }
.onboarding-search-ad__identity { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-width: 0; }
.onboarding-search-ad__favicon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #dadce0; border-radius: 50%; }
.onboarding-search-ad__favicon svg { width: 18px; height: 18px; color: #5f6368; }
.onboarding-search-ad__site { min-width: 0; flex: 1; font-size: 14px; line-height: 20px; }
.onboarding-search-ad__site > div, .onboarding-search-ad__site small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-search-ad__site small { font-size: 12px; color: #4d5156; }
.onboarding-search-ad__menu { width: 16px; height: 16px; flex: 0 0 16px; }
.onboarding-search-ad__headline { margin: 0 0 8px; color: #1a0dab; font-size: 20px; line-height: 26px; font-weight: 400; overflow-wrap: anywhere; }
.onboarding-search-ad__description { color: #4d5156; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.onboarding-search-preview .onboarding-search-preview__caption { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--color-gray-500); }
.onboarding-search-ad__skeleton { display: block; height: 9px; margin-block: 7px; border-radius: 3px; background: #e8eaed; }
.onboarding-search-ad__skeleton--site { width: 65%; }
.onboarding-search-ad__skeleton--url { width: 80%; height: 7px; }
.onboarding-search-ad__skeleton--headline, .onboarding-search-ad__skeleton--headline-short { height: 14px; margin-block: 10px; background: #d2d8f6; }
.onboarding-search-ad__skeleton--headline-short { width: 70%; }
.onboarding-search-ad__skeleton--description-short { width: 55%; }
.onboarding-flow--map { width: min(1140px,100%); }
.onboarding-flow--map .onboarding-flow__body { padding: 24px 32px; }
.onboarding-flow--map .onboarding-flow__body h2 { font-size: 30px; }
.onboarding-flow--map .onboarding-flow__body > p { font-size: 14px; margin-top: 8px; }
.onboarding-flow--map .onboarding-flow__content { margin-top: 20px; }
.onboarding-area-picker { position: relative; height: 430px; min-width: 0; border: 1px solid var(--color-gray-200); border-radius: 16px; overflow: hidden; }
.onboarding-area-picker__top, .onboarding-area-picker__bottom { position: absolute; left: 16px; right: 16px; z-index: 1; padding: 12px; background: #fff; border: 1px solid var(--color-gray-200); border-radius: 12px; box-shadow: 0 3px 12px rgba(15,23,42,.12); }
.onboarding-area-picker__top { z-index: 3; top: 16px; display: grid; gap: 8px; max-width: 440px; }
.onboarding-area-picker__bottom { bottom: 28px; left: 50%; right: auto; transform: translateX(-50%); width: min(600px,calc(100% - 32px)); display: grid; grid-template-columns: auto minmax(64px,1fr) auto auto; align-items: center; gap: 12px; padding: 6px 10px; }
.onboarding-area-picker__sources { display: flex; gap: 8px; }
.onboarding-area-picker__sources > * { flex: 1; min-width: 0; }
.onboarding-area-picker__radius-label { margin: 0; color: var(--color-gray-700); font-size: 13px; font-weight: 500; }
.onboarding-area-picker__radius-value { min-width: 4ch; color: var(--color-gray-900); font-size: 15px; font-weight: 600; white-space: nowrap; text-align: end; font-variant-numeric: tabular-nums; }
.onboarding-area-picker__search { display: flex; align-items: center; gap: 8px; }
.onboarding-area-picker__search > :first-child { flex: 1; min-width: 0; }
.onboarding-area-picker__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.onboarding-area-picker__status { margin: 0; color: var(--color-gray-600); font-size: 12px; line-height: 1.5; }
.onboarding-area-picker__tools { display: flex; gap: 4px; padding-inline-start: 8px; border-inline-start: 1px solid var(--color-gray-200); }
.onboarding-area-picker__tools .btn { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-color: transparent; box-shadow: none; }
.onboarding-area-picker__tools .btn svg { width: 18px; height: 18px; }
/* Area chips: one per circle, the active one is being edited by the radius bar and pin. */
.onboarding-area-picker__areas { display: flex; flex-wrap: wrap; gap: 6px; }
.onboarding-area-picker__areas:empty { display: none; }
.onboarding-area-chip { display: inline-flex; align-items: center; border: 1px solid var(--color-gray-200); border-radius: 999px; background: #fff; color: var(--color-gray-700); font-size: 12px; }
.onboarding-area-chip > button { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.onboarding-area-chip > button[data-area-remove] { padding: 0 8px 0 0; color: var(--color-gray-500); }
.onboarding-area-chip > button[data-area-remove] svg { width: 14px; height: 14px; }
.onboarding-area-chip.is-active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-800); font-weight: 600; }
.onboarding-area-picker__results { display: grid; }
.onboarding-area-picker__results:empty { display: none; }
.onboarding-area-picker__results button { min-height: 36px; padding: 8px 12px; border: 1px solid var(--color-gray-200); background: #fff; color: var(--color-gray-900); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.onboarding-area-picker__results button:hover { border-color: var(--color-primary); }
.onboarding-range { display: block; width: 100%; height: 32px; margin: 8px 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; border: 0; box-shadow: none; cursor: pointer; }
.onboarding-area-picker__bottom .onboarding-range { min-width: 0; height: 36px; margin: 0; }
.onboarding-range:focus { outline: none; border: 0; box-shadow: none; }
.onboarding-range::-webkit-slider-runnable-track { height: 4px; border: 0; border-radius: 2px; background: var(--color-gray-300); }
.onboarding-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--color-primary); }
.onboarding-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.onboarding-range::-moz-range-track { height: 4px; border: 0; border-radius: 2px; background: var(--color-gray-300); }
.onboarding-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--color-primary); }
.onboarding-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 4px; }
@media (max-width: 760px) {
  .onboarding-flow--map .onboarding-flow__body { padding: 22px 16px; }
  .onboarding-flow--map .onboarding-flow__body h2 { font-size: 26px; }
  .onboarding-area-picker { height: 470px; }
  .onboarding-area-picker__top { top: 10px; left: 10px; right: 10px; padding: 10px; }
  .onboarding-area-picker__bottom { width: calc(100% - 20px); padding: 6px 8px; gap: 8px; }
}
.onboarding-flow__close, .onboarding-flow__back { min-height: 36px; min-width: 36px; }
@media (max-width: 760px) {
  .onboarding-flow__workspace { display: block; overflow-y: auto; }
  .onboarding-flow__workspace > .onboarding-flow__body { overflow: visible; }
  .onboarding-flow--with-preview .onboarding-flow__body { padding: 26px 22px; }
  .onboarding-flow__preview { margin: 0 22px 22px; padding: 22px 0 0; border-inline-start: 0; border-top: 1px solid var(--color-gray-200); overflow: visible; }
}

/* Google Marketing composes the ERP shell, fields, stats and shared onboarding. */
/* Reusable action cards: concise copy, compact actions and a single surface. */
.erp-action-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; margin-block: 18px; min-width: 0; border: 1px solid var(--color-gray-200); border-radius: var(--surface-radius); background: #fff; box-shadow: var(--surface-shadow); }
.erp-action-card__content { flex: 1 1 auto; min-width: 0; }
/* Body rhythm: every block in a card body keeps a 12px beat; heading, copy and meta keep their own tighter spacing below. */
.erp-action-card__content > * + * { margin-top: 12px; }
.erp-action-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.erp-action-card__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.erp-action-card__heading h3 { margin: 0; color: var(--color-gray-900); font-size: 15px; font-weight: 600; line-height: 1.4; }
/* Tinted icon tile: the same tile language as choice cards, never a second solid surface. */
.erp-action-card__icon { display: flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 10px; background: var(--color-primary-light); color: var(--color-primary-hover); }
.erp-action-card__icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
.erp-action-card__icon--emerald { background: var(--color-success-light); color: var(--color-success-dark); }
.erp-action-card__icon--amber { background: #fef3c7; color: #b45309; }
.erp-action-card__icon--violet { background: #ede9fe; color: #6d28d9; }
.erp-action-card__icon--rose { background: #ffe4e6; color: #be123c; }
.erp-action-card__icon--slate { background: var(--color-gray-100); color: var(--color-gray-600); }
/* Brand logos sit on a white tile with a hairline so the mark keeps its own colours. */
.erp-action-card__icon--logo, .hgm-panel__icon--logo { padding: 7px; border: 1px solid var(--color-gray-200); background: #fff; }
.erp-action-card__icon--logo img, .hgm-panel__icon--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hgm-panel__icon--logo { padding: 6px; }
.onboarding-search-preview__brand { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.erp-action-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--color-gray-600); font-size: 12px; line-height: 1.5; }
.erp-action-card__meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.erp-action-card__meta svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--color-gray-400); }
.erp-action-card--link { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.erp-action-card--link:hover { border-color: var(--color-primary-300); box-shadow: var(--surface-shadow-hover); }
.erp-action-card--link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.erp-action-card__content > p { margin: 8px 0 0; color: var(--color-gray-600); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.erp-action-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.erp-action-card__actions .btn { min-height: 36px; padding: 6px 12px; font-size: 12px; line-height: 20px; border-radius: 8px; }
.erp-action-card--stacked { flex-direction: column; align-items: stretch; gap: 20px; }
.erp-action-card--stacked .erp-action-card__actions { padding-top: 16px; border-top: 1px solid var(--color-gray-200); }
.hgm-grid > .erp-action-card { margin-block: 16px 0; }
@media (max-width: 767px) {
  .erp-action-card { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .erp-action-card__actions .btn { min-height: 44px; white-space: normal; }
}
.hgm { min-width: 0; }
.booking-links { display: grid; gap: 18px; margin-top: 20px; }
.booking-links > .erp-action-card { margin: 0; }
.booking-links__setup { display: grid; grid-template-columns: minmax(180px,320px) minmax(0,1fr); gap: 24px; margin-top: 20px; align-items: start; }
.booking-links__restaurant, .booking-links__destination { min-width: 0; }
.booking-links__field { display: grid; gap: 8px; }
.booking-links__field .form-label { margin: 0; }
.booking-links__hint { margin: 0; color: var(--color-gray-500); font-size: 12px; line-height: 1.5; }
.booking-links__option { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-gray-200); }
.booking-links__destination { display: flex; flex-direction: column; gap: 8px; }
.booking-links__destination > a { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 32px; color: var(--color-primary); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.booking-links__destination .hgm-note { margin: 0; }
.booking-links__steps { padding-left: 20px; margin: 12px 0 18px; font-size: 13px; line-height: 1.7; color: var(--color-gray-600); }
.booking-links__steps li { padding: 3px 0 3px 5px; }
.booking-links__manual { margin-top: 16px; }
.booking-links__message { border-left: 2px solid var(--color-gray-400); padding: 8px 12px; margin: 16px 0 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .booking-links__setup { grid-template-columns: minmax(0,1fr); gap: 16px; }
}
.erp-panel-card, .hgm-panel { padding: 24px; margin-block: 18px; border: 1px solid var(--color-gray-200); border-radius: var(--surface-radius); background: #fff; min-width: 0; box-shadow: var(--surface-shadow); }
.erp-panel-card__heading { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.erp-panel-card__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-gray-900); }
.erp-panel-card__badge { margin-inline-start: auto; }
.erp-panel-card__icon { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border-radius: 9px; background: var(--color-primary-light); color: var(--color-primary-hover); }
.erp-panel-card__icon svg { width: 17px; height: 17px; stroke-width: 1.7; }
.erp-panel-card__icon--logo { padding: 6px; border: 1px solid var(--color-gray-200); background: #fff; }
.erp-panel-card__icon--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.erp-panel-card__text { margin: -6px 0 16px; color: var(--color-gray-600); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.erp-panel-card > * + * { margin-top: 12px; }
.erp-panel-card > .erp-panel-card__heading + * { margin-top: 0; }
.erp-panel-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
/* Section heading with an icon tile: added inside existing <h3> so surrounding layouts stay as they are. */
.erp-section-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.erp-section-heading__icon { display: inline-flex; width: 28px; height: 28px; flex: 0 0 28px; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-primary-light); color: var(--color-primary-hover); }
.erp-section-heading__icon svg { width: 15px; height: 15px; stroke-width: 1.8; }
.erp-summary-rows, .hgm-summary { margin: 20px 0; font-size: 13px; }
.erp-summary-rows > div, .hgm-summary > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--color-gray-200); }
.erp-summary-rows dt, .hgm-summary dt { color: var(--color-gray-600); }
.erp-summary-rows dd, .hgm-summary dd { margin: 0; text-align: end; max-width: 64%; overflow-wrap: anywhere; }
.erp-summary-rows--compact > div { padding: 8px 0; }
.erp-panel-card > .erp-summary-rows:last-child { margin-bottom: 0; }
.erp-panel-card > .erp-summary-rows:first-of-type, .erp-panel-card > .erp-panel-card__heading + .erp-summary-rows { margin-top: 0; }
@media (max-width: 760px) { .erp-panel-card { padding: 18px; } .erp-panel-card__actions > .btn { flex: 1 1 100%; } }
.hgm-panel h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.hgm-panel__icon { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border-radius: 9px; background: var(--color-primary-light); color: var(--color-primary-hover); }
.hgm-panel__icon svg { width: 17px; height: 17px; stroke-width: 1.7; }
.hgm-note, .hgm-campaign-row p { color: var(--color-gray-600); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.hgm-actions, .hgm-panel-heading, .hgm-period { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hgm-panel-heading { justify-content: space-between; }
.hgm-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.hgm-grid > .hgm-panel { margin-block: 16px 0; }
.hgm-summary { margin: 20px 0; font-size: 13px; }
.hgm-summary > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--color-gray-200); }
.hgm-summary dt { color: var(--color-gray-600); }
.hgm-summary dd { margin: 0; text-align: end; max-width: 64%; overflow-wrap: anywhere; }
.hgm-radius { display: block; width: 100%; height: auto; margin-block: 18px; color: var(--color-gray-500); }
.hgm-preview-amount { font-size: 30px; font-weight: 600; letter-spacing: -.03em; margin-top: 26px; }
.hgm-ad-preview { padding: 18px 0; border-block: 1px solid var(--color-gray-200); }
.hgm-ad-preview strong { color: var(--color-primary); font-size: 18px; overflow-wrap: anywhere; }
.hgm-location-choice { display: grid; gap: 18px; }
.hgm-profile-preview { margin-top: 26px; }
.hgm-profile-preview > svg { width: 28px; height: 28px; margin-bottom: 14px; }
.hgm-campaign-list { border: 1px solid var(--color-gray-200); border-radius: 12px; background: #fff; overflow: hidden; margin-block: 18px; }
.hgm-panel .hgm-campaign-list { border: 0; border-radius: 0; }
.hgm-campaign-row { display: grid; grid-template-columns: minmax(180px,2fr) minmax(110px,1fr) repeat(3,minmax(90px,1fr)); gap: 20px; align-items: center; padding: 18px; border-bottom: 1px solid var(--color-gray-200); }
.hgm-campaign-row:last-child { border-bottom: 0; }
.hgm-campaign-row > div { min-width: 0; }
.hgm-campaign-row small { display: block; color: var(--color-gray-500); font-size: 11px; margin: 5px 0; }
.hgm-campaign-row strong { font-size: 13px; font-weight: 600; }
.hgm-campaign-row p { margin: 3px 0 0; font-size: 12px; }
.hgm-title-link { border: 0; padding: 0; background: transparent; color: var(--color-primary); text-align: start; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.hgm .btn { white-space: normal; }
.hgm-period { margin: 18px 0; }
.hgm-period .hgm-note { margin: 0; }
.hgm-panel > .hgm-summary:last-child { margin-bottom: 0; }
/* Draft next-step checklist: done, current and pending rows share one quiet list. */
.hgm-checklist { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.hgm-checklist li { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--color-gray-600); font-size: 13px; }
.hgm-checklist li > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--color-gray-400); }
.hgm-checklist li.is-done { color: var(--color-gray-900); }
.hgm-checklist li.is-done > svg { color: var(--color-success-dark); }
.hgm-checklist li.is-current { color: var(--color-gray-900); font-weight: 600; }
.hgm-checklist li.is-current > svg { color: var(--color-primary); }
.hgm-checklist small { margin-inline-start: auto; color: var(--color-gray-500); font-size: 11px; font-weight: 400; white-space: nowrap; }
/* The area map must leave room for its radius bar without inner scrolling. */
.onboarding-area-picker { height: clamp(320px, calc(100dvh - 380px), 430px); }
/* Campaign list: status tabs above the shared data table, campaign name as the drill-down. */
.hgm-list-tabs { margin: 18px 0 12px; }
.meal-plan-client-disclosure.erp-disclosure > .erp-disclosure__body { padding: 0; }
.meal-plan-client-disclosure.erp-disclosure > summary { min-height: 48px; padding: 10px 16px; font-size: 14px; }
.erp-disclosure.card { box-shadow: var(--surface-shadow); border-radius: var(--surface-radius); }
.erp-disclosure.card > summary { border-radius: var(--surface-radius); }
.erp-disclosure.card[open] > summary { border-radius: var(--surface-radius) var(--surface-radius) 0 0; }
.tax-source-months.erp-disclosure { border-radius: 12px; }
.corporate-tax-history.erp-disclosure { margin-top: 16px; }
.meal-plan-action-details.erp-disclosure > summary { min-height: 48px; padding-inline: 2px; }
.meal-plan-action-details.erp-disclosure > .erp-disclosure__body { padding: 4px 0 0; }
.soa-supplier-change.erp-disclosure > summary { color: var(--color-primary); }
/* Disclosure: a quiet collapsible row with a rotating chevron tile; the native marker never shows. */
/* Doubled class keeps the module ahead of legacy page rules on migrated <details> that still carry their old class. */
.erp-disclosure.erp-disclosure { border: 1px solid var(--color-gray-200); border-radius: 12px; background: #fff; padding: 0; margin-block: 0; }
.erp-disclosure.erp-disclosure > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 6px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--color-gray-900); font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; width: auto; }
.erp-disclosure.erp-disclosure > summary::-webkit-details-marker { display: none; }
.erp-disclosure.erp-disclosure > summary::marker { content: ''; }
.erp-disclosure.erp-disclosure > summary::before, .erp-disclosure.erp-disclosure > summary::after { content: none; }
.erp-disclosure.erp-disclosure > summary:hover { background: var(--color-gray-50); }
.erp-disclosure.erp-disclosure > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.erp-disclosure__chevron { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; border-radius: 7px; background: var(--color-gray-100); color: var(--color-gray-600); transition: transform .15s ease; }
.erp-disclosure__chevron svg { width: 14px; height: 14px; }
.erp-disclosure[open] > summary .erp-disclosure__chevron { transform: rotate(90deg); }
.erp-disclosure.erp-disclosure[open] > summary { border-bottom: 1px solid var(--color-gray-200); border-radius: 12px 12px 0 0; }
.erp-disclosure__icon { width: 16px; height: 16px; color: var(--color-gray-500); }
.erp-disclosure__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.erp-disclosure__title > small, .erp-disclosure__title > span { font-weight: 500; color: var(--color-gray-500); }
.erp-disclosure__title > strong { font-weight: 600; color: var(--color-gray-900); }
.erp-disclosure__title > svg { width: 16px; height: 16px; color: var(--color-gray-500); }
.erp-disclosure__subtitle { flex-basis: 100%; color: var(--color-gray-500); font-size: 11px; font-weight: 500; }
.erp-disclosure__meta:empty { display: none; }
.erp-disclosure__meta { margin-inline-start: auto; color: var(--color-gray-500); font-size: 12px; font-weight: 400; }
.erp-disclosure__body { padding: 12px 14px 14px; font-size: 13px; color: var(--color-gray-700); }
.erp-disclosure.erp-disclosure--compact { border: 0; border-radius: 0; background: transparent; }
.erp-disclosure.erp-disclosure--compact > summary { padding: 6px 0; border-radius: 8px; }
.erp-disclosure.erp-disclosure--compact[open] > summary { border-bottom: 0; }
.erp-disclosure--compact > .erp-disclosure__body { padding: 4px 0 0 34px; }
/* Panel rhythm: every block inside a panel keeps the same 12px beat; buttons live in an actions row. */
.hgm-panel > * + * { margin-top: 12px; }
.hgm-panel > h3 + * { margin-top: 0; }
.hgm-panel > .hgm-actions { margin-top: 16px; }
.hgm-panel > .hgm-note + .hgm-note { margin-top: 6px; }
.hgm-grid { align-items: start; }
/* Page skeleton: header, tabs, totals and a table in the page's own rhythm. */
.hgm-skeleton-header { display: flex; align-items: center; gap: 16px; }
.hgm-skeleton-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; }
.hgm-skeleton-copy { flex: 1 1 auto; display: grid; gap: 8px; }
.hgm-skeleton-copy .erp-skeleton-group { gap: 8px; }
.hgm-skeleton-btn { width: 140px; height: 36px; border-radius: 8px; }
.hgm-skeleton-tabs { margin: 0 0 18px; }
.hgm-skeleton-tabs .erp-skeleton-group { flex-direction: row; gap: 8px; }
.hgm-skeleton-tabs .erp-skeleton--pill { width: 110px; height: 32px; }
.hgm-skeleton-table { margin-top: 18px; }
@media (max-width: 760px) { .hgm-skeleton-btn { display: none; } }
.hgm-cell-title { display: grid; gap: 2px; min-width: 0; }
.hgm-cell-title strong { color: var(--color-primary); font-weight: 600; }
.hgm-cell-title small { color: var(--color-gray-500); font-size: 11px; }
/* Campaign page: sections stacked in the main column, live preview and readiness in the aside. */
.hgm-campaign .erp-detail-grid { margin-top: 18px; }
.hgm-campaign .hgm-panel { margin: 0 0 16px; }
.hgm-campaign .hgm-panel > .hgm-note:first-of-type { margin: -6px 0 16px; }
.hgm-campaign .hgm-panel > .onboarding-flow__field, .hgm-campaign .hgm-panel > .onboarding-flow__fields, .hgm-campaign .hgm-panel > .erp-choice-cards, .hgm-campaign .hgm-panel > #hgmPageScope { margin-top: 16px; }
.hgm-campaign .hgm-panel > .hgm-summary:first-of-type { margin-top: 0; }
.hgm-campaign .onboarding-flow__fields { align-items: start; }
.hgm-campaign .onboarding-flow__fields + .hgm-note { margin-top: 14px; }
.hgm-area-summary { margin: 12px 0 0; color: var(--color-gray-700); font-size: 13px; }
/* Districts and cities: Google territories added by name, shown as chips next to the map circles. */
.hgm-geo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-gray-200); display: grid; gap: 10px; }
.hgm-geo__head { display: grid; gap: 4px; }
.hgm-geo__head .form-label { margin: 0; }
.hgm-geo__head small { color: var(--color-gray-500); font-size: 12px; }
.hgm-geo__results { display: grid; }
.hgm-geo__results:empty { display: none; }
.hgm-geo__results button { display: grid; gap: 2px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--color-gray-200); background: #fff; color: var(--color-gray-900); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.hgm-geo__results button + button { border-top: 0; }
.hgm-geo__results button:first-child { border-radius: 10px 10px 0 0; }
.hgm-geo__results button:last-child { border-radius: 0 0 10px 10px; }
.hgm-geo__results button:only-child { border-radius: 10px; }
.hgm-geo__results button:hover { border-color: var(--color-primary); }
.hgm-geo__results small { color: var(--color-gray-500); font-size: 11px; }
.hgm-geo__status { margin: 0; }
.hgm-geo__status:empty { display: none; }
.onboarding-area-chip.is-static > button:first-child { cursor: default; }
.hgm-page-binding { margin-top: 16px; display: grid; gap: 12px; justify-items: start; }
.hgm-page-binding > .onboarding-flow__fields { width: 100%; }
.hgm-save-state { display: inline-flex; align-items: center; gap: 6px; color: var(--color-gray-500); font-size: 12px; font-weight: 500; white-space: nowrap; }
.hgm-save-state > svg { width: 14px; height: 14px; }
.hgm-save-state--saving > svg { animation: onboarding-flow-spin .8s linear infinite; }
.hgm-save-state--unsaved, .hgm-save-state--blank { color: #b45309; }
.hgm-save-state--error { color: #b91c1c; }
@media (min-width: 1025px) {
  .hgm-campaign .erp-detail-grid__aside { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; }
}
@media (max-width: 760px) {
  .hgm-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .hgm-panel { padding: 18px; }
  .hgm-campaign-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; }
  .hgm-campaign-row > div:first-child { grid-column: 1 / -1; }
  .hgm-actions > .btn, .hgm-period > div { flex: 1 1 100%; }
  .onboarding-area-picker { height: clamp(320px, calc(100dvh - 330px), 470px); }
  .hgm-page-binding > .btn { width: 100%; }
  .hgm .btn, .hgm-geo__results button, .onboarding-area-picker__results button, .onboarding-area-picker__tools .btn, .onboarding-flow__close, .onboarding-flow__back { min-height: 44px; }
  .onboarding-area-picker__tools .btn { width: 44px; height: 44px; }
  .onboarding-flow__field .form-input, .onboarding-flow .pure-dropdown-trigger { min-height: 44px; }
}

.onboarding-flow .pure-dropdown-trigger { min-height: 40px; }

/* Pre-check evidence inside Operations Audit. */
.precheck-audit-controls { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:16px 0; }
.precheck-audit-controls label { display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; }

/* Pre-check report: standard metric cards, compact filters and one table surface. */
.precheck-audit-panel { min-width: 0; }
.precheck-audit-overview { padding: 0 0 16px; }
.precheck-audit-stats.stat-grid { gap: 16px; margin: 0 0 16px; }
.precheck-audit-page .precheck-audit-controls { margin: 0 0 12px; gap: 24px; }
.precheck-audit-branch { flex: 0 1 280px; min-width: 0; }
.precheck-audit-overview p { margin: 4px 0; line-height: 1.5; }
@media (max-width: 640px) {
  .precheck-audit-stats.stat-grid { grid-template-columns: 1fr; }
  .precheck-audit-page .precheck-audit-controls { gap: 8px; }
  .precheck-audit-branch { flex-basis: 100%; }
}

/* Shared acquisition evidence: booking, guest CRM and campaign results. */
.acquisition-evidence { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px 20px; }
.acquisition-evidence > div { display:flex; flex-direction:column; min-width:0; gap:4px; overflow-wrap:anywhere; }
.acquisition-evidence .form-label { margin:0; }
.acquisition-record { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }

.acquisition-history > summary { min-height:44px; padding:12px 0; cursor:pointer; font-size:13px; }

.reservation-detail-fields > div { min-width:0; overflow-wrap:anywhere; }

/* SOA matching shares the Bank Matching table and page primitives. */
.bank-soa-page { padding-bottom: 108px; }
.bank-soa-payment { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 20px; margin: 16px 0; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.bank-soa-payment > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bank-soa-payment span { color: #64748b; font-size: 12px; }
.bank-soa-payment strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.bank-soa-payment .bank-soa-narration { grid-column: 1 / -1; }
.bank-soa-source, .bank-soa-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.bank-soa-source > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.bank-soa-actions, .bank-soa-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.bank-soa-controls { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); gap: 20px; align-items: center; margin: 20px 0; }
.bank-soa-recognize { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 12px 0 16px; padding: 14px 16px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.bank-soa-history { max-width: 480px; }
.bank-soa-status { margin: 8px 0; padding: 4px 0; color: #475569; }
.bank-soa-error:not(:empty) { padding: 12px 16px; border: 1px solid #b91c1c; border-radius: 6px; color: #991b1b; margin: 12px 0; }
.bank-soa-rows { overflow-x: auto; }
.bank-soa-rows input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 0; flex: 0 0 auto; cursor: pointer; }
.bank-soa-rows details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 12px; white-space: normal; }
.bank-soa-source-row { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 340px; font-size: 12px; color: #475569; }
.bank-soa-rows .form-label { display: grid; gap: 6px; margin-top: 8px; }
.bank-soa-rows .form-input { min-height: 44px; width: 160px; }
.bank-soa-hud { position: sticky; bottom: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 10px 16px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 -3px 14px rgba(15,23,42,.07); }
.bank-soa-hud > div { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.bank-soa-hud span { color: #475569; }
.bank-soa-page .btn { min-height: 32px; padding: 6px 12px; font-size: 13px; line-height: 18px; white-space: normal; }
@media (max-width: 640px) {
  .bank-soa-payment { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; }
  .bank-soa-controls { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bank-soa-rows > .erp-data-table-wrap { min-width: 950px; }
  .bank-soa-hud { position: fixed; left: 16px; right: 16px; padding: 12px; gap: 10px; bottom: env(safe-area-inset-bottom, 0px); }
  .bank-soa-hud .btn { width: 100%; }
  .bank-soa-source .bank-soa-actions { width: 100%; }
}
.bank-match-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:12px; align-items:end; padding:0 24px 16px; }
.bank-match-filters .form-label { display:block; margin-bottom:6px; font-size:12px; }
.bank-match-filters .btn,.bank-match-filters .pure-dropdown-trigger,.bank-match-filters .date-range-trigger { min-height:44px; }
.bank-match-payroll-note { padding:12px 24px; margin:0; font-size:12px; color:#475569; border-block:1px solid #e2e8f0; }
#bankMatchPagination { padding:8px 24px; }
@media(max-width:800px){.bank-match-filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 16px 12px;}}
@media(max-width:440px){.bank-match-filters{grid-template-columns:minmax(0,1fr);}.bank-match-modal__search{padding:12px 16px;}}

@media(max-width:640px) { body:has(#bankSoaPage) #hxHelpLauncher { bottom: 140px; } }

/* Employee exit tables: the workspace gap owns spacing; headings stay inside cards. */
[data-onboarding-hr="employee-exit"] > .hr-info-panel,
[data-onboarding-hr="employee-exit"] > .hr-workspace-panel--table { margin: 0; }
[data-onboarding-hr="employee-exit"] .hr-workspace-panel--table .hr-workspace-panel__head { padding: 20px 24px; margin: 0; }
[data-onboarding-hr="employee-exit"] .hr-workspace-panel--table .hr-workspace-panel__head em { flex-shrink: 0; }
[data-onboarding-hr="employee-exit"] .hr-workspace-panel--table .erp-data-table-wrap { border: 0; border-radius: 0 0 14px 14px; }
@media(max-width:640px) {
  [data-onboarding-hr="employee-exit"] .hr-workspace-panel--table .hr-workspace-panel__head { padding: 16px; }
}
[data-onboarding-hr="employee-exit"] .hr-workspace-panel--table col:not([aria-hidden="true"]),
[data-onboarding-hr="employee-exit"] .hr-workspace-panel--table th:not([aria-hidden="true"]),
[data-onboarding-hr="employee-exit"] .hr-workspace-panel--table td:not([aria-hidden="true"]) { width: auto !important; max-width: none !important; }

.bank-soa-recognize-copy { flex: 1 1 320px; min-width: 0; }
.bank-soa-recognize-copy strong { font-size: 13px; }
.bank-soa-recognize-copy p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #64748b; }
.bank-soa-source .erp-field-hint { margin: 4px 0 0; }
@media(max-width:640px) { .bank-soa-page .btn { min-height: 44px; } }

.bank-soa-rows td[data-erp-table-col-key="select"] { padding: 0 !important; vertical-align: middle; }
.bank-soa-select-cell { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; }
.bank-soa-unavailable { color: #94a3b8; font-size: 14px; }
.bank-soa-row-reason { margin-top: 4px; color: #64748b; font-size: 12px; line-height: 16px; white-space: normal; }
@media(min-width:641px) { body:has(#bankSoaPage) #hxHelpLauncher { bottom: 100px; } }

/* SOA inbox keeps the same compact operational density as invoice review. */
.bank-soa-queue-progress,.bank-soa-queue-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.bank-soa-queue-progress{border-bottom:1px solid var(--border-color,#e2e8f0);font-size:13px}
.bank-soa-queue-list{border:1px solid var(--border-color,#e2e8f0);border-radius:10px;background:#fff;overflow:hidden}
.bank-soa-queue-item{padding:14px 16px;border-bottom:1px solid var(--border-color,#e2e8f0)}
.bank-soa-queue-item:last-child{border-bottom:0}
.bank-soa-queue-item>div:first-child{min-width:0;flex:1}
.bank-soa-queue-item strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.bank-soa-queue-item p,.bank-soa-suggestions p{font-size:12px;line-height:1.45;color:var(--text-secondary,#64748b);margin:5px 0;overflow-wrap:anywhere}
.bank-soa-queue-item>.btn{flex-shrink:0}
.bank-soa-suggestions{margin:12px 0;display:grid;gap:12px}
.bank-soa-suggestions>div{padding:10px;border:1px solid var(--border-color,#e2e8f0);border-radius:6px}
#bankSoaInbox .bank-soa-controls{margin:16px 0}
@media(max-width:640px){.bank-soa-queue-item{align-items:flex-start;flex-wrap:wrap}.bank-soa-queue-item>div:first-child{flex-basis:100%}.bank-soa-queue-progress{flex-wrap:wrap}}
.bank-soa-rows details,.bank-soa-rows .bank-soa-suggestions{white-space:normal;overflow-wrap:anywhere}
.bank-soa-suggestions .btn{margin:4px 6px 0 0;max-width:100%;white-space:normal}
.bank-soa-queue-list>.bank-soa-status{padding:20px;margin:0}


/* SOA workspace: one upload surface, then one stable review surface. */
#bankSoaInbox{display:flex;flex-direction:column;gap:20px;padding-bottom:0}
/* Anchor the review footer to the scrollport edge, not above its bottom padding. */
#mainContent:has(#bankSoaInbox .soa-review-footer){padding-bottom:0}
#bankSoaInbox> :first-child{margin-bottom:0}
.bank-soa-upload-panel{border:1px solid #dce2e9;border-radius:12px;background:#fff;overflow:hidden}
.bank-soa-upload-panel.is-dragging{border-color:#2563eb;outline:2px solid #2563eb;outline-offset:2px}
.bank-soa-upload-content{min-height:292px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px 16px}
.bank-soa-upload-icon{width:28px;height:28px;stroke-width:1.5;color:#64748b;margin-bottom:16px;flex-shrink:0}
.bank-soa-upload-content h2{font-size:18px;line-height:26px;font-weight:600;color:#172033;margin:0 0 8px}
.bank-soa-upload-content>p{max-width:470px;margin:0;color:#64748b;font-size:13px;line-height:20px}
.bank-soa-upload-action{min-height:40px;margin:20px 0 10px;display:flex;gap:12px;align-items:center;justify-content:center;font-size:13px;color:#64748b}
.bank-soa-upload-content small{font-size:12px;line-height:18px;color:#64748b}
.bank-soa-upload-feedback{min-height:20px;margin-top:8px;font-size:12px;line-height:20px;max-width:600px;overflow-wrap:anywhere}
.bank-soa-upload-footer{border-top:1px solid #e2e8f0;display:flex;justify-content:center;gap:40px;padding:16px 24px;font-size:12px;line-height:18px;color:#64748b}
.bank-soa-inbox-workspace{padding:0 20px 20px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;min-width:0}
#bankSoaInbox .bank-soa-queue-progress{min-height:64px;box-sizing:border-box;padding:16px 0;margin-bottom:16px;gap:12px;justify-content:flex-end;flex-wrap:wrap}
#bankSoaInbox .bank-soa-queue-progress>span{margin-right:auto}
#bankSoaInbox .bank-soa-inbox-workspace>.bank-soa-queue-item{padding:0 0 16px;min-height:64px;box-sizing:border-box}
#bankSoaInbox .bank-soa-inbox-workspace>.erp-field-hint{margin:0 0 12px;line-height:18px}
@media(max-width:640px){
 #bankSoaInbox{gap:16px}
 .bank-soa-upload-content{padding:28px 20px 12px;min-height:304px}
 .bank-soa-upload-content h2{font-size:16px;line-height:24px}
 .bank-soa-upload-action{flex-direction:column;gap:8px;min-height:70px}
 .bank-soa-upload-footer{gap:12px;padding:14px 12px;justify-content:space-between;font-size:11px}
 .bank-soa-inbox-workspace{padding:0 16px 16px}
 #bankSoaInbox .bank-soa-queue-progress>span{flex-basis:100%}
}

/* Supplier statement review: a quiet comparison canvas and one clear recommendation. */
#bankSoaInbox .btn { font-size:12px; }
#bankSoaInbox .btn-sm { min-height:34px; padding:7px 12px; gap:6px; }
.soa-review-document { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 0; }
.soa-review-document>div:first-child { min-width:0; }
.soa-review-document strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.soa-review-document .erp-field-hint { margin:4px 0 0; font-size:12px; }
.soa-review-feedback { min-height:24px; padding:4px 0; box-sizing:border-box; font-size:12px; line-height:16px; color:#64748b; white-space:pre-line; }
.soa-review-feedback.is-error { color:#b91c1c; }
.soa-review-supplier { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 0 24px; }
.soa-review-supplier>div:first-child { min-width:0; max-width:65%; }
.soa-eyebrow { display:block; color:#64748b; font-size:11px; line-height:16px; font-weight:500; }
.soa-review-supplier h2 { font-size:20px; line-height:28px; font-weight:600; letter-spacing:-.3px; margin:4px 0; overflow-wrap:anywhere; }
.soa-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:18px 0; border-top:1px solid #e2e8f0; }
.soa-total { display:flex; flex-direction:column; gap:5px; min-width:0; }
.soa-total>span,.soa-total>small { font-size:12px; line-height:18px; color:#64748b; }
.soa-total>strong { font-size:18px; line-height:26px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.soa-total>.soa-total-pending { font-size:15px; font-weight:500; color:#64748b; }
.soa-total>.soa-total-incomplete { color:#a16207; }
.soa-amount-match { display:flex; flex-direction:column; gap:8px; margin:0 0 20px; color:#64748b; }
.soa-amount-match__heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; }
.soa-amount-match__heading strong { display:inline-flex; align-items:center; gap:6px; font-size:13px; line-height:20px; font-weight:600; }
.soa-amount-match__heading svg { flex-shrink:0; }
.soa-amount-match__heading>span,.soa-amount-match>small { color:#64748b; font-size:12px; line-height:18px; }
.soa-amount-match__track { height:6px; overflow:hidden; background:#e2e8f0; border-radius:3px; }
.soa-amount-match__track>span { display:block; height:100%; background:currentColor; border-radius:inherit; }
.soa-amount-match--exact { color:#15803d; }
.soa-amount-match--difference { color:#b45309; }
.soa-totals--compact+.soa-amount-match { margin-bottom:14px; }
.soa-queue-document { padding:4px 20px; border-bottom:1px solid #e2e8f0; }
.soa-queue-document:last-child { border-bottom:0; }
.soa-queue-document>.bank-soa-queue-item { border:0; padding-inline:0; }
.soa-totals--compact { padding:12px 0; border:0; }
.soa-totals--compact .soa-total>strong { font-size:15px; line-height:22px; }
.soa-supplier-change { margin-top:6px; font-size:12px; }
.soa-supplier-change .pure-dropdown { width:420px; max-width:100%; margin-top:10px; }
#soaReviewSummary { display:flex; gap:24px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
#soaReviewSummary>div { display:flex; flex-direction:column; gap:5px; }
#soaReviewSummary strong { color:#172033; font-size:24px; line-height:28px; font-weight:600; font-variant-numeric:tabular-nums; }
#soaReviewSummary span { color:#64748b; font-size:12px; }
.soa-review-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 14px; }
.soa-review-toolbar> :last-child { max-width:280px; flex:1; }
.soa-review-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
#soaReviewTable { min-width:0; overflow-x:auto; }
#soaReviewTable .erp-data-table-wrap { border-radius:10px; }
#soaReviewTable td { height:88px; box-sizing:border-box; vertical-align:middle; }
#soaReviewTable strong { font-size:13px; font-weight:600; }
#soaReviewTable td, #soaReviewTable th { border-inline:0; }
.soa-cell-note { font-size:12px; line-height:18px; color:#64748b; }
.soa-cell-amount { font-size:12px; font-weight:500; line-height:18px; margin-top:4px; font-variant-numeric:tabular-nums; }
#soaReviewTable .soa-review-row-active>td:first-child { box-shadow:inset 3px 0 #2563eb; }
.soa-result-button { display:inline-flex; align-items:center; text-align:left; font-size:12px!important; padding:4px 0!important; white-space:normal; }
.soa-result--matched { color:#15803d!important; }
.soa-result--suggested { color:#2563eb!important; }
.soa-result--difference,.soa-result--missing { color:#a16207!important; }
.soa-result--excluded { color:#64748b!important; }
.soa-exclusion-action { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border-color,#e2e8f0); }
.soa-exclusion-action small { color:#64748b; font-size:12px; }
.soa-review-inspector { position:sticky; top:88px; max-height:calc(100vh - 180px); overflow:auto; min-width:0; padding:18px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; font-size:13px; box-sizing:border-box; }
.soa-review-inspector strong { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.soa-review-inspector h3 { font-size:16px; line-height:22px; font-weight:600; margin:8px 0; overflow-wrap:anywhere; }
.soa-review-inspector p { font-size:12px; line-height:18px; color:#64748b; margin:8px 0; overflow-wrap:anywhere; }
.soa-inspector-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.soa-inspector-empty { display:flex; flex-direction:column; align-items:flex-start; padding:12px 0; gap:10px; }
.soa-inspector-empty>svg { width:22px; height:22px; color:#64748b; }
.soa-inspector-empty p { margin:0; }
.soa-source-details summary,.soa-invoice-search summary,.soa-payment-narration summary,.soa-payment-search summary,.soa-payment-more summary { cursor:pointer; color:#64748b; font-size:12px; line-height:20px; }
.soa-source-text { margin:8px 0 0; padding:8px 0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:18px; }
.soa-linked-invoice,.soa-suggestion-list,.soa-invoice-search { margin:16px 0 0; }
.soa-invoice-search[open]>summary { margin-bottom:10px; }
.soa-invoice-option { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 0; border-bottom:1px solid #e2e8f0; }
.soa-invoice-option>div { min-width:0; }
.soa-invoice-option:last-child { border-bottom:0; }
.soa-invoice-option.soa-recommendation { border:1px solid #cbd5e1; border-left:3px solid #2563eb; border-radius:8px; padding:14px; }
.soa-suggestion-label { display:inline-flex; align-items:center; gap:6px; color:#2563eb; font-size:11px; line-height:18px; font-weight:600; }
.soa-match-reasons { color:#475569!important; }
.soa-review-footer { position:sticky; bottom:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid #e2e8f0; margin-top:20px; background:#fff; }
.soa-review-footer>span { color:#64748b; font-size:12px; }
.soa-queue-status { color:#64748b; font-size:12px; }
body:has(#bankSoaInbox) #hxHelpLauncher { bottom:90px; }
.bank-soa-upload-footer svg { width:14px; height:18px; flex-shrink:0; }
.soa-payments { scroll-margin-top:90px; border-top:1px solid #e2e8f0; padding:20px 0; margin-bottom:16px; }
.soa-payments[hidden], .soa-invoice-comparison[hidden] { display:none; }
.soa-invoice-comparison { scroll-margin-top:90px; }
.soa-review-workspace:has(.soa-payments:not([hidden])) .soa-choose-payment { display:none; }
body:has(#soaPaymentSuggestions:not([hidden])) #hxHelpLauncher { bottom:20px; }
.soa-choose-payment { justify-self:start; align-self:start; width:fit-content; margin-top:4px; }
.soa-payment-next { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #e2e8f0; margin-top:20px; padding-top:14px; }
.soa-payment-next>span { color:#64748b; font-size:12px; }
.soa-payments-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:flex-start; }
.soa-payments-heading p { font-size:12px; color:#64748b; margin:6px 0 0; }
.soa-payment-search { margin:16px 0; }
.soa-payment-search-controls { display:flex; align-items:center; gap:12px; margin-top:10px; }
.soa-payment-search-controls>.erp-search { flex:1; }
.soa-payment-top { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; }
.soa-payment-card { display:flex; flex-direction:column; gap:14px; min-width:0; border:1px solid #e2e8f0; border-radius:12px; padding:18px; background:#fff; }
.soa-payment-card.is-recommended { border-top:3px solid #2563eb; padding-top:16px; }
.soa-payment-card-heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px; }
.soa-payment-card-heading strong { display:block; white-space:nowrap; font-size:18px; line-height:24px; font-weight:600; margin-top:5px; font-variant-numeric:tabular-nums; }
.soa-payment-card>.btn { margin-top:auto; align-self:flex-start; }
.soa-payment-evidence { display:flex; flex-direction:column; gap:6px; font-size:12px; line-height:18px; color:#475569; }
.soa-payment-evidence>span { display:flex; align-items:flex-start; gap:6px; }
.soa-payment-evidence svg { flex-shrink:0; margin-top:2px; }
.soa-payment-narration p { font-size:11px; line-height:18px; overflow-wrap:anywhere; color:#64748b; margin:8px 0 0; }
.soa-payment-narration mark { background:#eaf1ff; color:#1d4ed8; font-weight:600; border-radius:2px; padding:0 2px; }
.soa-payment-empty { padding:16px 0; font-size:13px; color:#64748b; }
.soa-payment-more { margin-top:14px; }
.soa-payment-more[open]>summary { margin-bottom:12px; }
@media(max-width:1100px) {
 .soa-review-layout { grid-template-columns:minmax(0,1fr) 280px; gap:14px; }
 .soa-review-supplier { flex-wrap:wrap; }
 .soa-review-supplier>div:first-child { max-width:100%; }
}
@media(max-width:800px) {
 .soa-review-layout { grid-template-columns:minmax(0,1fr); }
 .soa-review-inspector { position:static; order:-1; max-height:55vh; }
 .soa-review-document,.soa-review-toolbar { flex-wrap:wrap; }
 .soa-review-toolbar> :last-child { max-width:none; flex-basis:100%; }
 .soa-review-footer { flex-wrap:wrap; }
 .soa-review-footer .bank-soa-actions { margin-left:auto; }
 .soa-queue-status { flex:1; }
 .soa-payment-search-controls { flex-wrap:wrap; }
 .soa-payment-search-controls>:not(input) { flex:1 1 100%; }
}
@media(max-width:640px) {
 .soa-totals { grid-template-columns:minmax(0,1fr); gap:14px; }
 .soa-total { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; align-items:baseline; }
 .soa-total>strong { font-size:16px; line-height:24px; text-align:right; }
 .soa-total>small, .soa-total>.soa-choose-payment { grid-column:1/-1; }
 .soa-payment-next { flex-wrap:wrap; }
 #bankSoaInbox .btn-sm, #soaReviewFilters .erp-filter-tabs__tab { min-height:44px; }
 .soa-review-supplier h2 { font-size:18px; line-height:26px; }
 #soaReviewSummary { gap:22px; }
 #soaReviewSummary strong { font-size:22px; }
 .soa-review-footer>span { flex-basis:100%; }
 .soa-review-footer .bank-soa-actions { width:100%; justify-content:space-between; }
}

/* Keep audit values readable; spare width is shared across the report columns. */
#precheckAuditPanel [data-erp-table-col-key="changes"],
#precheckAuditPanel [data-erp-table-col-key="branch"] { white-space: normal !important; overflow-wrap: anywhere; }
#precheckAuditPanel [data-erp-table-col-key="changes"] > div { white-space: normal; }
.precheck-audit-modal p { line-height: 1.5; overflow-wrap: anywhere; }


/* One comparison surface, with aligned before/after values. */
.precheck-discount-name { display:block; font-size:13px; line-height:1.45; font-weight:600; white-space:normal; }
.precheck-report-method { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--gray-500); }
.precheck-comparison-identity { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; margin-bottom:8px; font-size:13px; }
.precheck-comparison-identity strong { font-size:16px; font-weight:600; }
.precheck-comparison-identity span { color:var(--gray-600); }
.precheck-comparison-copy { display:flex; align-items:center; min-height:28px; margin-bottom:16px; font-size:12px; color:var(--gray-500); }
.precheck-comparison-copy .pure-dropdown { max-width:100%; }
.precheck-comparison-totals { margin-bottom:20px; }
.precheck-compare-value { display:block; font-variant-numeric:tabular-nums; }
#precheckComparisonTable td, #precheckComparisonTable th { white-space:normal !important; overflow-wrap:anywhere; }
#precheckComparisonTable small { display:block; margin-top:3px; font-size:12px; line-height:1.4; color:var(--gray-500); }
.precheck-compare-label { font-size:13px; font-weight:600; }
.precheck-comparison-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; margin-top:16px; font-size:12px; line-height:1.5; color:var(--gray-500); }
.precheck-comparison-foot strong { font-weight:500; }
.precheck-comparison-note { font-size:12px; color:var(--gray-500); margin:8px 0 0; }
@media (max-width:640px) {
  .precheck-audit-modal .precheck-comparison-totals { grid-template-columns:1fr !important; gap:8px; }
  .precheck-comparison-totals .stat-card-u { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px 12px; padding:12px; }
  .precheck-comparison-totals .stat-card-u__sub { grid-column:1/-1; margin:0; }
  #precheckComparisonTable table, #precheckComparisonTable tbody { display:block; width:100% !important; min-width:0 !important; }
  #precheckComparisonTable colgroup, #precheckComparisonTable thead { display:none; }
  #precheckComparisonTable tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-bottom:1px solid var(--color-gray-200); }
  #precheckComparisonTable tr:last-child { border-bottom:0; }
  #precheckComparisonTable td { height:auto !important; max-height:none !important; overflow:visible !important; width:auto !important; min-width:0 !important; max-width:none !important; border:0 !important; padding:8px 12px !important; }
  #precheckComparisonTable td:first-child, #precheckComparisonTable td:last-child { grid-column:1/-1; }
  #precheckComparisonTable td:first-child { padding-bottom:0 !important; }
  #precheckComparisonTable td:last-child { font-size:12px; padding-top:0 !important; }
  #precheckComparisonTable td[data-erp-table-col-key="before"]::before { content:'Pre-check'; }
  #precheckComparisonTable td[data-erp-table-col-key="after"]::before { content:'Final bill'; }
  #precheckComparisonTable td[data-erp-table-col-key="before"]::before, #precheckComparisonTable td[data-erp-table-col-key="after"]::before { display:block; font-size:11px; color:var(--gray-500); margin-bottom:4px; }
}

.precheck-payment-method { display:block; font-size:13px; line-height:1.45; }
.precheck-payment-method small { display:block; color:var(--gray-500); font-size:12px; }
.precheck-comparison-copy { justify-content:space-between; flex-wrap:wrap; gap:8px 20px; }
.precheck-comparison-payment { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.precheck-comparison-payment .precheck-payment-method { display:flex; align-items:baseline; gap:6px; color:var(--gray-700); }

.precheck-comparison-times { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; font-size:12px; line-height:1.5; }
.precheck-comparison-times dt { color:var(--gray-500); }
.precheck-comparison-times dd { margin:2px 0 0; font-variant-numeric:tabular-nums; }
@media(max-width:640px) { .precheck-comparison-times { grid-template-columns:1fr; gap:6px; } .precheck-comparison-times>div { display:flex; justify-content:space-between; gap:12px; } }

.precheck-entity-link { display:inline-flex; align-items:center; gap:6px; color:var(--primary); text-decoration:none; min-height:24px; overflow-wrap:anywhere; }
.precheck-entity-link:hover { text-decoration:underline; }
.precheck-entity-link svg { flex-shrink:0; }
.precheck-list-customer { margin:4px 0; font-size:13px; line-height:1.4; color:var(--gray-500); white-space:normal; overflow-wrap:anywhere; }
.precheck-list-customer .precheck-entity-link { max-width:100%; }
.precheck-comparison-customer { margin-bottom:12px; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
@media(max-width:640px) { .precheck-entity-link { min-height:44px; } }

/* WhatsApp's own mark identifies the provider in the connection flow. */
.whatsapp-meta-connect .erp-page-header__icon { background:#25D366; box-shadow:none; }
.whatsapp-meta-connect .btn { min-height:44px; white-space:normal; }
.whatsapp-meta-connect #whatsappMetaConnectBody p { margin:0 0 12px; }

/* Marketing journey workspace: composed from existing cards, fields and dropdowns. */
.mj-page .mj-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; align-items:start; }
.mj-page .card { margin-bottom:16px; min-width:0; }
.mj-page .card-body { padding:20px; }
.mj-page .mj-card-title { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; }
.mj-page .mj-card-title strong { font-size:14px; font-weight:600; flex:1; min-width:120px; overflow-wrap:anywhere; }
.mj-page .mj-card-title .btn { margin-left:auto; }
.mj-page .mj-section-title { font-size:17px; font-weight:600; margin:24px 0 16px; }
.mj-page .mj-note { font-size:13px; color:var(--text-secondary); line-height:1.6; margin:12px 0; overflow-wrap:anywhere; }
.mj-page .mj-step-id { font-size:12px; color:var(--text-secondary); }
.mj-page .mj-number { border:1px solid var(--border-color); border-radius:50%; width:28px; height:28px; display:grid; place-items:center; font-size:12px; }
.mj-page .mj-message-preview { white-space:pre-wrap; border:1px solid var(--border-color); padding:16px; margin:12px 0; border-radius:8px; font-size:13px; overflow-wrap:anywhere; }
.mj-page .form-group { display:flex; flex-direction:column; gap:6px; min-width:0; margin-bottom:14px; }
.mj-page .form-input { width:100%; min-height:44px; }
.mj-page .btn { min-height:44px; white-space:normal; }
.mj-page .mj-actions { display:flex; flex-wrap:wrap; gap:10px; }
.mj-page .mj-trace { padding-left:24px; }
.mj-page .mj-trace li { padding:12px; border-left:1px solid var(--border-color); }
.mj-page .mj-trace span { display:block; color:var(--text-secondary); font-size:12px; margin-top:6px; }
.mj-page .mj-trace p { font-size:13px; }
.mj-page .mj-customer { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:12px 0; font-size:13px; }
@media(max-width:600px) { .mj-page .card-body { padding:14px; } .mj-page .mj-actions .btn { width:100%; } .mj-page .mj-grid { grid-template-columns:1fr; } }

.mj-page .mj-step-summary { display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; min-height:60px; list-style:none; }
.mj-page .mj-step-summary::-webkit-details-marker { display:none; }
.mj-page .mj-step-summary > span:nth-child(2) { flex:1; min-width:0; }
.mj-page .mj-step-summary strong { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.mj-page .mj-step-kind { display:block; font-size:12px; color:var(--text-secondary); margin-top:4px; }
.mj-page .mj-step:not([open]) .mj-step-summary > svg { transform:rotate(-90deg); }
.mj-page .mj-step[open] .mj-step-summary { border-bottom:1px solid var(--border-color); }

/* Marketing journeys: neutral foundations, a bounded palette for action categories. */
.mj-page { --mj-ink:var(--color-gray-900); --mj-body:var(--color-gray-700); --mj-secondary:var(--color-gray-600); --mj-muted:var(--color-gray-500); --mj-line:var(--color-gray-200); --mj-accent:var(--color-primary-hover); --mj-tint:var(--color-primary-light); color:var(--mj-body); }
.mj-page .mj-type-message { --mj-accent:var(--color-success-700); --mj-tint:var(--color-success-50); }
.mj-page .mj-type-condition { --mj-accent:var(--color-warning-700); --mj-tint:var(--color-warning-50); }
.mj-page .mj-type-benefit { --mj-accent:var(--color-violet); --mj-tint:#f5f3ff; }
.mj-page .mj-type-pause,.mj-page .mj-type-end { --mj-accent:var(--color-gray-600); --mj-tint:var(--color-gray-100); }
.mj-page .mj-type-icon { display:inline-flex; flex:0 0 32px; width:32px; height:32px; align-items:center; justify-content:center; color:#fff; background:var(--mj-accent); border-radius:9px; }
.mj-page .mj-type-icon svg { width:18px; height:18px; stroke-width:1.8; flex:none; }
.mj-page .mj-note { color:var(--mj-secondary); }
.mj-page .mj-builder-toolbar,.mj-page .mj-canvas-tools,.mj-page .mj-builder-mode { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.mj-page .mj-builder-toolbar { gap:12px; margin:0 0 12px; }
.mj-page .mj-builder-mode { padding:3px; border:1px solid var(--mj-line); border-radius:12px; background:var(--color-gray-50); }
.mj-page .mj-builder-mode .btn { border:0; min-height:40px; border-radius:9px; box-shadow:none; padding:8px 12px; }
.mj-page .mj-builder-mode .btn-secondary { background:transparent; color:var(--mj-secondary); }
.mj-page .mj-canvas-tools { margin-left:auto; }
.mj-page .mj-icon-button { width:44px; min-width:44px; padding:10px; }
.mj-page .mj-step-jump { min-width:180px; max-width:280px; flex:1; }
.mj-page .mj-step-jump .form-group { margin:0; }
.mj-page .mj-step-jump .form-label { display:none; }
.mj-page .mj-step-jump .pure-dropdown-trigger { min-height:44px; }
.mj-page .mj-entry-rule { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 16px; background:#fff; border:1px solid var(--mj-line); border-bottom:0; border-radius:14px 14px 0 0; font-size:12px; color:var(--mj-secondary); }
.mj-page .mj-entry-rule > svg { color:var(--color-primary-hover); }
.mj-page .mj-entry-rule > span { display:flex; align-items:center; gap:6px; margin-left:auto; }
.mj-page .mj-text-button { background:none; border:0; color:var(--mj-body); font:inherit; font-weight:600; min-height:32px; cursor:pointer; text-align:left; }
.mj-page .mj-text-button:hover { color:var(--color-primary-hover); }
.mj-page .mj-builder { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--mj-line); border-radius:0 0 14px 14px; overflow:hidden; background:#fff; }
.mj-page .mj-builder.has-selection { grid-template-columns:minmax(0,1fr) 360px; }
.mj-page .mj-canvas { height:clamp(360px,calc(100dvh - 420px),880px); overflow:hidden; position:relative; touch-action:none; cursor:grab; background-color:var(--color-gray-50); background-image:radial-gradient(var(--color-gray-300) .8px,transparent .8px); background-size:20px 20px; outline-offset:-3px; }
.mj-page .mj-canvas.is-panning { cursor:grabbing; }
.mj-page .mj-canvas-world { position:absolute; top:0; left:0; width:1px; height:1px; transform-origin:0 0; }
.mj-page .mj-canvas-lines { position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none; color:var(--color-gray-400); }
.mj-page .mj-connection { fill:none; stroke:var(--color-gray-400); stroke-width:2; }
.mj-page .mj-connection.mj-edge-yes { stroke:var(--color-success-700); color:var(--color-success-700); }
.mj-page .mj-connection.mj-edge-fallback { stroke-dasharray:5 4; }
.mj-page .mj-connection.is-selected { stroke:var(--color-primary-hover); color:var(--color-primary-hover); stroke-width:2.8; }
.mj-page .mj-connection-pending { stroke:var(--color-primary-hover); stroke-dasharray:5 4; }
.mj-page .mj-canvas-node { position:absolute; left:var(--node-x); top:var(--node-y); width:272px; height:184px; border:1px solid var(--color-gray-300); border-radius:12px; background:#fff; box-shadow:0 3px 8px #0f172a0a; transition:box-shadow .15s,border-color .15s; }
.mj-page .mj-canvas-node:hover { border-color:var(--mj-accent); box-shadow:0 5px 16px #0f172a12; }
.mj-page .mj-canvas-node.is-selected { border-color:var(--color-primary-hover); box-shadow:0 0 0 2px var(--color-primary-hover),0 6px 18px #0f172a12; }
.mj-page .mj-canvas-node.is-disconnected { border-style:dashed; }
.mj-page .mj-node-content { width:100%; height:138px; background:none; border:0; padding:0; text-align:left; display:flex; flex-direction:column; font:inherit; color:var(--mj-ink); cursor:grab; border-radius:11px 11px 0 0; overflow:hidden; }
.mj-page .mj-node-kind { display:flex; flex:none; align-items:center; gap:9px; height:44px; padding:6px 12px; background:var(--mj-tint); color:var(--mj-body); font-size:12px; font-weight:600; }
.mj-page .mj-node-kind .mj-type-icon { width:28px; height:28px; flex-basis:28px; border-radius:7px; }
.mj-page .mj-node-kind .mj-type-icon svg { width:16px; height:16px; }
.mj-page .mj-node-kind small { margin-left:auto; color:var(--mj-muted); font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; }
.mj-page .mj-node-content strong { margin:10px 14px 5px; font-size:14px; line-height:19px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-height:38px; flex-shrink:0; }
.mj-page .mj-node-description { height:34px; flex-shrink:0; margin:0 14px; font-size:12px; color:var(--mj-secondary); line-height:17px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-height:34px; }
.mj-page .mj-out-ports { height:44px; display:flex; border-top:1px solid var(--mj-line); }
.mj-page .mj-out-port { flex:1; min-height:44px; font-size:12px; font-weight:500; color:var(--mj-secondary); background:none; border:0; position:relative; padding:0 8px; cursor:crosshair; border-radius:0 0 10px 10px; }
.mj-page .mj-out-port + .mj-out-port { border-left:1px solid var(--mj-line); }
.mj-page .mj-out-port.mj-edge-yes { color:var(--color-success-700); }
.mj-page .mj-out-port:hover { background:var(--color-gray-50); color:var(--color-primary-hover); }
.mj-page .mj-in-port span { display:block; width:12px; height:12px; border:2px solid var(--color-gray-400); border-radius:50%; background:#fff; }
.mj-page .mj-port-label { display:block; line-height:18px; }
.mj-page .mj-port-handle { position:absolute; bottom:-12px; left:calc(50% - 12px); width:24px; height:24px; display:grid; place-items:center; border:1.5px solid var(--color-gray-300); border-radius:50%; background:#fff; color:var(--mj-secondary); box-shadow:0 1px 3px #0f172a0a; z-index:2; transition:background .15s,border-color .15s,color .15s; }
.mj-page .mj-port-handle svg { width:14px; height:14px; stroke-width:2; }
.mj-page .mj-out-port.mj-edge-yes .mj-port-handle { border-color:var(--color-success-700); color:var(--color-success-700); }
.mj-page .mj-out-port:hover .mj-port-handle,.mj-page .mj-out-port:focus-visible .mj-port-handle,.mj-page .mj-in-port:hover span { background:var(--color-primary-hover); border-color:var(--color-primary-hover); color:#fff; }
.mj-page .mj-in-port { position:absolute; width:44px; height:44px; top:-23px; left:calc(50% - 22px); display:grid; place-items:center; background:none; border:0; cursor:crosshair; padding:0; z-index:2; }
.mj-page .mj-entry-label { position:absolute; left:0; top:-27px; padding:3px 8px; border-radius:5px; background:var(--color-primary-hover); color:#fff; font-size:11px; font-weight:600; }
.mj-page .mj-terminal-label { display:flex; align-items:center; justify-content:center; width:100%; font-size:12px; color:var(--mj-muted); }
.mj-page .mj-canvas-hint { position:absolute; left:16px; top:12px; max-width:calc(100% - 32px); pointer-events:none; color:var(--mj-secondary); font-size:11px; line-height:16px; margin:0; padding:5px 8px; background:var(--color-gray-50); border-radius:6px; }
.mj-page .mj-view-tools { position:absolute; bottom:16px; left:16px; display:flex; align-items:center; background:#fff; border:1px solid var(--mj-line); border-radius:11px; box-shadow:0 3px 12px #0f172a0d; padding:3px; cursor:default; }
.mj-page .mj-view-tools button { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:8px; background:#fff; color:var(--mj-body); cursor:pointer; }
.mj-page .mj-view-tools button:hover { color:var(--color-primary-hover); background:var(--color-primary-light); }
.mj-page .mj-view-tools svg { width:18px; height:18px; }
.mj-page .mj-zoom-value { min-width:42px; text-align:center; font-size:12px; color:var(--mj-secondary); font-variant-numeric:tabular-nums; }
.mj-page .mj-overview-note { position:absolute; right:16px; bottom:22px; max-width:230px; padding:8px 10px; font-size:12px; line-height:18px; background:#fff; border:1px solid var(--mj-line); border-radius:8px; color:var(--mj-secondary); pointer-events:none; }
.mj-page .mj-inspector { min-width:0; border-left:1px solid var(--mj-line); background:#fff; height:clamp(360px,calc(100dvh - 420px),880px); display:flex; flex-direction:column; }
.mj-page .mj-inspector-head { display:flex; align-items:center; padding:14px 16px; gap:10px; border-bottom:1px solid var(--mj-line); }
.mj-page .mj-inspector-head > span:not(.mj-type-icon) { flex:1; min-width:0; }
.mj-page .mj-inspector-head small { display:block; color:var(--mj-muted); font-size:10px; letter-spacing:.06em; font-weight:600; margin-bottom:5px; }
.mj-page .mj-inspector-head strong { display:block; color:var(--mj-ink); font-size:14px; font-weight:600; }
.mj-page .mj-inspector-body { overflow-y:auto; padding:16px; flex:1; }
.mj-page .mj-inspector-body > .mj-note:first-child { margin:0 0 18px; }
.mj-page .mj-inspector .mj-grid { grid-template-columns:1fr; gap:0; }
.mj-page .mj-inspector .form-label { font-size:12px; color:var(--mj-secondary); }
.mj-page .mj-inspector .btn { font-size:12px; }
.mj-page .mj-config-section h3 { display:flex; align-items:center; gap:8px; margin:0 0 16px; color:var(--mj-ink); font-size:13px; font-weight:600; }
/* Conditions share a compact layout in Audience, phone views and the step inspector. */
.mj-page .mj-conditions { min-width:0; }
.mj-page .mj-rule { padding:12px 0; }
.mj-page .mj-rule + .mj-rule { border-top:1px solid var(--mj-line); }
.mj-page .mj-rule-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; grid-template-areas:"fact fact remove" "comparison value value"; align-items:end; gap:12px; }
.mj-page .mj-rule-fact { grid-area:fact; min-width:0; }
.mj-page .mj-rule-comparison { grid-area:comparison; min-width:0; }
.mj-page .mj-rule-value { grid-area:value; min-width:0; }
.mj-page .mj-rule-remove { grid-area:remove; align-self:end; }
.mj-page .mj-rule .form-group,.mj-page .mj-audience-scope .form-group { margin:0; }
.mj-page .mj-rule .form-label { margin:0; line-height:18px; font-size:12px; }
.mj-page .mj-rule .form-input,.mj-page .mj-rule .pure-dropdown-trigger,.mj-page .mj-rule .date-picker-trigger,.mj-page .mj-audience .form-input,.mj-page .mj-audience-scope .pure-dropdown-trigger { height:44px; min-height:44px; box-sizing:border-box; padding:10px 12px; font-size:13px; line-height:22px; }
.mj-page .mj-rule-remove .btn { height:44px; border-color:transparent; box-shadow:none; color:var(--mj-muted); }
.mj-page .mj-rule-remove .btn:hover { color:var(--color-danger-dark); background:var(--color-danger-light); }
.mj-page .mj-rule-remove .btn:focus-visible { outline:2px solid var(--color-primary-hover); outline-offset:2px; }
.mj-page .mj-rule-dates { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:12px; }
.mj-page .mj-rule-add { padding-top:8px; }
.mj-page .mj-rule-add .btn { display:inline-flex; align-items:center; gap:8px; width:auto; }
.mj-page .mj-audience-section { border-top:1px solid var(--mj-line); margin-top:20px; padding-top:20px; }
.mj-page .mj-audience-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:12px; }
.mj-page .mj-audience-heading h2 { margin:0; color:var(--mj-ink); font-size:15px; font-weight:600; line-height:22px; }
.mj-page .mj-audience-heading p { margin:0; color:var(--mj-secondary); font-size:13px; line-height:20px; }
.mj-page .mj-audience-scope { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mj-page .mj-counting-help { margin-top:16px; color:var(--mj-secondary); font-size:12px; }
.mj-page .mj-counting-help summary { cursor:pointer; padding:12px 0; min-height:44px; box-sizing:border-box; }
.mj-page .mj-counting-help .mj-note { margin:0 0 4px; }
@media(min-width:1100px) {
  .mj-page .mj-audience .mj-rule-fields { grid-template-columns:minmax(240px,2fr) minmax(160px,1fr) minmax(140px,1fr) 44px; grid-template-areas:"fact comparison value remove"; }
  .mj-page .mj-audience .mj-rule-dates { width:calc(100% - 56px); }
}
@media(max-width:600px) {
  .mj-page .mj-audience-scope { grid-template-columns:1fr; }
  .mj-page .mj-audience-section { margin-top:16px; padding-top:16px; }
}
.mj-page .mj-next-section { border-top:1px solid var(--mj-line); padding-top:18px; margin-top:20px; }
.mj-page .mj-step-actions { border-top:1px solid var(--mj-line); padding-top:18px; margin-top:8px; }
.mj-page .mj-message-preview { background:#fff; border:1px solid var(--mj-line); border-radius:12px; padding:0; margin:16px 0; overflow:hidden; white-space:normal; }
.mj-page .mj-preview-heading { display:flex; align-items:center; gap:8px; padding:10px 12px; font-size:11px; color:var(--mj-secondary); background:var(--color-gray-50); border-bottom:1px solid var(--mj-line); }
.mj-page .mj-message-preview p { margin:0; padding:14px; white-space:pre-wrap; font-size:13px; line-height:1.65; color:var(--mj-body); }
.mj-page .mj-preview-buttons { display:flex; flex-direction:column; }
.mj-page .mj-preview-buttons span { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; border-top:1px solid var(--mj-line); color:var(--color-primary-hover); font-size:12px; }
.mj-page .mj-setup-strip { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:10px 16px; margin-bottom:12px; border:1px solid var(--color-warning-200); border-left:3px solid var(--color-warning-700); border-radius:8px; background:#fff; font-size:12px; color:var(--mj-secondary); }
.mj-page .mj-setup-strip strong { color:var(--mj-ink); font-weight:600; }
.mj-page .mj-step-library { display:grid; gap:10px; }
.mj-page .mj-library-action { display:flex; align-items:center; gap:12px; width:100%; min-height:84px; padding:12px; background:#fff; border:1px solid var(--mj-line); border-radius:10px; color:var(--mj-ink); text-align:left; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.mj-page .mj-library-action:hover { border-color:var(--mj-accent); box-shadow:0 2px 8px #0f172a0a; }
.mj-page .mj-library-copy { flex:1; min-width:0; }
.mj-page .mj-library-action strong { display:block; font-size:13px; font-weight:600; margin-bottom:4px; }
.mj-page .mj-library-action small { display:block; font-size:12px; line-height:17px; color:var(--mj-secondary); }
.mj-page .mj-node-description.needs-setup { font-weight:600; color:var(--color-warning-700); }
.mj-page .mj-step-summary { background:var(--color-gray-50); }
.mj-page .mj-step-summary strong { color:var(--mj-ink); }
.mj-page .mj-step-kind { color:var(--mj-secondary); }
.mj-page button:focus-visible,.mj-page summary:focus-visible { outline:2px solid var(--color-primary-hover); outline-offset:3px; }
/* Focus workspace: one identity/navigation row, one canvas toolbar. */
.mj-page .mj-editor-nav,.mj-page .mj-view-select { display:none; }
.mj-page .mj-help-slot { display:flex; flex:0 0 44px; width:44px; height:44px; }
.mj-page .mj-builder-context { display:flex; align-items:center; gap:16px; min-width:0; font-size:12px; color:var(--mj-secondary); }
.mj-page .mj-audience-button { display:flex; align-items:center; gap:6px; min-width:0; min-height:44px; }
.mj-page .mj-audience-brand { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
.mj-page .mj-audience-count { white-space:nowrap; }
.mj-page .mj-purchase-goal { display:flex; align-items:center; gap:6px; min-height:44px; }
.mj-page .mj-purchase-goal > span { white-space:nowrap; }
.mj-page .mj-builder-context svg { flex:none; }
.mj-page .mj-entry-rule .mj-builder-context { flex:1; flex-wrap:wrap; }
.mj-page .mj-entry-rule .mj-purchase-goal { margin-left:auto; }
.mj-page.mj-focus { position:fixed; inset:0; z-index:120; background:#fff; padding:0; border:0; border-radius:0; display:flex; flex-direction:column; overflow:hidden; }
.mj-page.mj-focus .erp-page-header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; column-gap:20px; padding:8px 16px; margin:0; border:0; border-bottom:1px solid var(--mj-line); border-radius:0; box-shadow:none; }
.mj-page.mj-focus .erp-page-header__main { display:contents; }
.mj-page.mj-focus .erp-page-header__identity { grid-column:1; grid-row:1; gap:8px; }
.mj-page.mj-focus .erp-page-header__copy { flex:1; min-width:0; gap:2px; }
.mj-page.mj-focus .erp-page-header__title-row { flex-wrap:nowrap; gap:8px; }
.mj-page.mj-focus .erp-page-header__title { font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mj-page.mj-focus .erp-page-header__badges { flex-shrink:0; }
.mj-page.mj-focus .erp-page-header__meta { font-size:12px; line-height:18px; white-space:nowrap; display:block; overflow:hidden; text-overflow:ellipsis; }
.mj-page.mj-focus .erp-page-header__secondary { grid-column:2; grid-row:1; margin:0; padding:0; border:0; }
.mj-page.mj-focus .erp-page-header__controls { grid-column:3; grid-row:1; flex-wrap:nowrap; gap:8px; }
.mj-page.mj-focus .erp-page-header__controls .btn { white-space:nowrap; }
.mj-page.mj-focus #mjTabs { flex-wrap:nowrap; }
.mj-page.mj-focus #mjTabs button { min-height:44px; }
.mj-page.mj-focus > :first-child { flex-shrink:0; }
.mj-page.mj-focus #mjBody { display:flex; flex-direction:column; flex:1; min-height:0; overflow:auto; }
.mj-page.mj-focus-canvas #mjBody { overflow:visible; }
.mj-page.mj-focus .mj-builder-toolbar { flex-shrink:0; flex-wrap:nowrap; gap:12px; padding:6px 16px; margin:0; border-bottom:1px solid var(--mj-line); }
.mj-page.mj-focus .mj-builder-mode { flex-shrink:0; }
.mj-page.mj-focus .mj-step-jump { order:0; flex:0 1 240px; min-width:140px; max-width:240px; }
.mj-page.mj-focus .mj-builder-context { flex:1; gap:12px; }
.mj-page.mj-focus .mj-canvas-tools { flex-wrap:nowrap; flex-shrink:0; }
.mj-page.mj-focus .mj-canvas-tools .btn { white-space:nowrap; }
.mj-page.mj-focus .mj-builder { flex:1; min-height:0; grid-template-rows:minmax(0,1fr); border:0; border-radius:0; }
.mj-page.mj-focus .mj-canvas,.mj-page.mj-focus .mj-inspector { height:100%; min-height:0; }
.mj-page.mj-focus .mj-inspector-head { flex-shrink:0; padding:8px 16px; }
.mj-page.mj-focus .mj-inspector-body { min-height:0; overscroll-behavior:contain; }
.mj-page.mj-focus .mj-setup-strip { flex-shrink:0; margin:8px 16px; }
@media(max-width:1439px) {
  .mj-page.mj-focus .mj-editor-tabs { display:none; }
  .mj-page.mj-focus .mj-editor-nav { display:block; width:132px; }
  .mj-page.mj-focus .mj-editor-nav .pure-dropdown-trigger { min-height:44px; }
  .mj-page.mj-focus .mj-purchase-goal > span { display:none; }
  .mj-page.mj-focus .mj-purchase-goal { justify-content:center; min-width:32px; }
}
@media(min-width:768px) and (max-width:1100px) {
  .mj-page.mj-focus .erp-page-header { column-gap:12px; padding:8px 12px; }
  .mj-page.mj-focus .mj-builder-toolbar { padding:6px 12px; gap:8px; }
  .mj-page.mj-focus .mj-builder-mode { display:none; }
  .mj-page.mj-focus .mj-view-select { display:block; flex:0 0 108px; }
  .mj-page.mj-focus .mj-view-select .pure-dropdown-trigger { min-height:44px; }
  .mj-page.mj-focus .mj-step-jump { min-width:130px; max-width:200px; flex:1 1 160px; }
  .mj-page.mj-focus .mj-audience-count { display:none; }
  .mj-page.mj-focus .mj-audience-brand { max-width:90px; }
  .mj-page.mj-focus .mj-builder-context { flex:0 1 auto; gap:6px; }
  .mj-page.mj-focus .mj-canvas-tools { gap:4px; }
}
.mj-page .mj-home-section { margin:28px 0; }
.mj-page .mj-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.mj-page .mj-section-heading h2 { margin:0; color:var(--mj-ink); font-size:18px; font-weight:600; }
.mj-page .mj-section-heading h2 span { margin-left:6px; color:var(--mj-muted); font-size:14px; font-weight:500; }
.mj-page .mj-section-heading p { margin:6px 0 0; color:var(--mj-secondary); font-size:13px; line-height:1.6; }
.mj-page .mj-journey-list { border:1px solid var(--mj-line); border-radius:14px; overflow:hidden; }
.mj-page .mj-journey-row { display:flex; align-items:center; gap:16px; padding:20px; background:#fff; }
.mj-page .mj-journey-row + .mj-journey-row { border-top:1px solid var(--mj-line); }
.mj-page .mj-home-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; border:1px solid var(--color-primary-100); border-radius:12px; background:var(--color-primary-light); color:var(--color-primary-hover); }
.mj-page .mj-home-icon svg { width:20px; height:20px; }
.mj-page .mj-journey-copy { min-width:0; flex:1; }
.mj-page .mj-journey-copy .mj-card-title { justify-content:flex-start; margin-bottom:10px; }
.mj-page .mj-journey-copy .mj-card-title strong { flex:initial; color:var(--mj-ink); font-size:15px; }
.mj-page .mj-journey-counts { display:flex; flex-wrap:wrap; gap:20px; font-size:12px; color:var(--mj-secondary); }
.mj-page .mj-journey-counts b { font-weight:600; color:var(--mj-ink); margin-right:3px; }
.mj-page .mj-journey-counts .mj-attention,.mj-page .mj-journey-counts .mj-attention b { color:var(--color-warning-700); }
.mj-page .mj-recipe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.mj-page .mj-recipe { padding:20px; border:1px solid var(--mj-line); border-radius:14px; display:flex; align-items:flex-start; flex-direction:column; background:#fff; transition:border-color .15s,box-shadow .15s; }
.mj-page .mj-recipe:hover { border-color:var(--color-primary-300); box-shadow:0 4px 16px #0f172a08; }
.mj-page .mj-recipe-top { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.mj-page .mj-eyebrow { font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--mj-muted); }
.mj-page .mj-recipe h3 { margin:0; color:var(--mj-ink); font-size:15px; font-weight:600; }
.mj-page .mj-recipe .mj-note { margin:8px 0 16px; }
.mj-page .mj-recipe-route { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:11px; color:var(--mj-secondary); margin:auto 0 20px; }
.mj-page .mj-recipe-route span { padding:5px 6px; border:1px solid var(--mj-line); border-radius:6px; background:var(--color-gray-50); }
.mj-page .mj-recipe-route svg { width:12px; height:12px; }
.mj-page .mj-draft-note,.mj-page .mj-policy-note { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mj-secondary); }
.mj-page .mj-policy-note { align-items:flex-start; line-height:1.6; padding:16px; border-top:1px solid var(--mj-line); }
.mj-page .mj-policy-note svg { margin-top:2px; flex:none; }
.mj-page .mj-empty { padding:32px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; background:var(--color-gray-50); }
.mj-page .mj-empty > svg { color:var(--color-primary-hover); width:28px; height:28px; }
.mj-page .mj-empty strong { color:var(--mj-ink); font-size:15px; }
.mj-page .mj-empty p { color:var(--mj-secondary); margin:0; font-size:13px; line-height:1.6; }
@media(max-width:1100px) { .mj-page .mj-builder.has-selection { grid-template-columns:minmax(0,1fr) 320px; } .mj-page .mj-step-jump { order:3; max-width:none; flex-basis:100%; } .mj-page .mj-recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mj-page .mj-overview-note { bottom:76px; left:16px; right:auto; } }
@media(max-width:767px) { .mj-page .mj-builder-toolbar:empty { display:none; } .mj-page #mjTabs button { min-height:44px; } .mj-page .mj-recipe-grid { grid-template-columns:1fr; } .mj-page .mj-journey-row { align-items:flex-start; flex-wrap:wrap; gap:12px; padding:16px; } .mj-page .mj-journey-row > .btn { width:100%; } .mj-page .mj-journey-counts { gap:8px 14px; } .mj-page .mj-section-heading { align-items:flex-start; flex-direction:column; gap:10px; } .mj-page .mj-recipe { padding:18px; } .mj-page .mj-step-summary { padding:16px; } .mj-page .mj-home-section { margin:24px 0; } }
@media(prefers-reduced-motion:reduce) { .mj-page .mj-canvas-node,.mj-page .mj-library-action,.mj-page .mj-recipe,.mj-page .mj-port-handle { transition:none; } }

/* Step list: readable summaries alongside the shared step inspector. */
.mj-page .mj-step-list { min-width:0; height:clamp(360px,calc(100dvh - 420px),880px); overflow:auto; background:var(--color-gray-50); overscroll-behavior:contain; }
.mj-page.mj-focus .mj-step-list { height:100%; min-height:0; }
.mj-page .mj-step-list-inner { max-width:960px; margin:0 auto; padding:24px 28px 40px; }
.mj-page .mj-list-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.mj-page .mj-list-heading h2 { margin:0 0 6px; font-size:16px; font-weight:600; color:var(--mj-ink); }
.mj-page .mj-list-heading p { margin:0; color:var(--mj-secondary); font-size:12px; line-height:18px; }
.mj-page .mj-list-heading > span { flex-shrink:0; font-size:12px; line-height:22px; color:var(--mj-muted); }
.mj-page .mj-list-cards { display:grid; gap:12px; margin-bottom:16px; }
.mj-page .mj-list-step { min-width:0; background:#fff; border:1px solid var(--mj-line); border-radius:12px; overflow:hidden; }
.mj-page .mj-list-step:has(.mj-list-step-main:hover) { border-color:var(--color-gray-300); }
.mj-page .mj-list-step.is-selected { border-color:var(--color-primary-hover); box-shadow:0 0 0 1px var(--color-primary-hover); }
.mj-page .mj-list-step-main { display:flex; align-items:flex-start; gap:14px; width:100%; min-height:44px; padding:16px 18px; border:0; border-radius:11px; background:transparent; color:var(--mj-body); font:inherit; text-align:left; cursor:pointer; }
.mj-page .mj-list-step-main:hover { background:var(--color-gray-50); }
.mj-page .mj-list-step-main:focus-visible { outline-offset:-3px; }
.mj-page .mj-list-step-main > .mj-type-icon { margin-top:3px; }
.mj-page .mj-list-step-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:7px; }
.mj-page .mj-list-step-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font-size:11px; line-height:16px; color:var(--mj-muted); }
.mj-page .mj-list-step-meta > span+span { border-left:1px solid var(--mj-line); padding-left:10px; }
.mj-page .mj-list-step-meta .mj-list-entry { color:var(--color-primary-hover); font-weight:600; }
.mj-page .mj-list-step-meta .mj-list-warning { color:var(--color-warning-700); font-weight:600; }
.mj-page .mj-list-step-copy > strong { font-size:14px; font-weight:600; line-height:20px; color:var(--mj-ink); overflow-wrap:anywhere; }
.mj-page .mj-list-step-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; line-height:20px; color:var(--mj-secondary); overflow-wrap:anywhere; }
.mj-page .mj-list-edit-icon { flex:none; color:var(--mj-muted); margin-top:4px; }
.mj-page .mj-list-step.is-selected .mj-list-edit-icon { color:var(--color-primary-hover); }
.mj-page .mj-list-routes { display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; padding:0 18px 0 64px; border-top:1px solid var(--mj-line); }
.mj-page .mj-list-route { display:flex; align-items:center; gap:7px; max-width:100%; min-height:44px; padding:6px 0; border:0; background:none; color:var(--mj-body); font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.mj-page .mj-list-route:hover { color:var(--color-primary-hover); }
.mj-page .mj-route-label { color:var(--mj-muted); font-size:11px; }
.mj-page .mj-list-route > svg { flex:none; width:14px; height:14px; color:var(--mj-muted); }
.mj-page .mj-route-target { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mj-page .mj-list-route-terminal { cursor:default; color:var(--mj-secondary); }
.mj-page .mj-path-sequence { display:flex; flex-direction:column; min-width:0; }
.mj-page .mj-path-start { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--color-primary-hover); font-size:13px; font-weight:600; }
.mj-page .mj-path-connector { display:flex; align-items:center; gap:8px; min-height:38px; padding-left:26px; color:var(--mj-muted); font-size:11px; }
.mj-page .mj-path-choice { display:flex; align-items:center; gap:8px; margin:14px 0 10px; color:var(--mj-secondary); font-size:12px; }
.mj-page .mj-path-branch { min-width:0; margin-left:16px; border-left:2px solid var(--mj-line); padding:0 0 0 18px; }
.mj-page .mj-path-branch .mj-path-branch { margin-left:0; padding-left:12px; }
.mj-page .mj-path-branch .mj-path-branch .mj-path-branch { border:0; padding-left:0; }
.mj-page .mj-path-branch-label { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:40px; margin-bottom:8px; color:var(--mj-secondary); font-size:12px; }
.mj-page .mj-path-branch-label strong { padding:4px 9px; border:1px solid var(--mj-line); border-radius:6px; background:#fff; color:var(--mj-ink); font-size:12px; }
.mj-page .mj-path-or { padding:12px 0 4px 17px; color:var(--mj-muted); font-size:12px; }
.mj-page .mj-path-note { display:flex; align-items:center; gap:8px; padding:9px 18px; border-top:1px solid var(--mj-line); color:var(--mj-muted); font-size:12px; }
.mj-page .mj-path-link { display:flex; align-items:center; gap:12px; min-height:60px; width:100%; padding:12px 16px; border:1px dashed var(--color-gray-300); border-radius:10px; background:#fff; color:var(--color-primary-hover); text-align:left; cursor:pointer; }
.mj-page .mj-path-link:hover { background:var(--color-gray-100); border-color:var(--color-primary-hover); }
.mj-page .mj-path-link > span { display:grid; gap:4px; flex:1; min-width:0; }
.mj-page .mj-path-link small { color:var(--mj-muted); font-size:11px; }
.mj-page .mj-path-link strong { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.mj-page .mj-path-ending { display:flex; align-items:center; gap:8px; min-height:44px; color:var(--mj-muted); font-size:12px; }
.mj-page .mj-shared-path { margin:32px 0; padding-top:24px; border-top:1px solid var(--color-gray-300); }
.mj-page .mj-shared-heading { display:flex; align-items:flex-start; gap:10px; color:var(--mj-secondary); }
.mj-page .mj-shared-heading h3 { margin:0 0 5px; color:var(--mj-ink); font-size:14px; font-weight:600; }
.mj-page .mj-shared-heading p { margin:0; font-size:12px; line-height:18px; }
.mj-page .mj-path-origins { display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; margin:6px 0 12px; color:var(--mj-muted); font-size:11px; }
.mj-page .mj-path-origins button { min-height:44px; padding:4px 0; border:0; background:transparent; color:var(--mj-secondary); font:inherit; font-size:12px; cursor:pointer; text-align:left; }
.mj-page .mj-path-origins button:hover { color:var(--color-primary-hover); }
.mj-page .mj-entry-path { margin-bottom:24px; }
@media(min-width:768px) {
  .mj-page .mj-entry-path > .mj-path-sequence > .mj-path-fork,
  .mj-page .mj-shared-path > .mj-path-sequence > .mj-path-fork { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); align-items:start; gap:0 8px; }
  .mj-page .mj-entry-path > .mj-path-sequence > .mj-path-fork > .mj-path-choice,
  .mj-page .mj-shared-path > .mj-path-sequence > .mj-path-fork > .mj-path-choice { grid-column:1 / -1; }
  .mj-page .mj-entry-path > .mj-path-sequence > .mj-path-fork > .mj-path-branch,
  .mj-page .mj-shared-path > .mj-path-sequence > .mj-path-fork > .mj-path-branch { margin-left:0; padding-left:12px; }
  .mj-page .mj-entry-path > .mj-path-sequence > .mj-path-fork > .mj-path-or,
  .mj-page .mj-shared-path > .mj-path-sequence > .mj-path-fork > .mj-path-or { padding:14px 0 0; text-align:center; }
}
.mj-page .mj-mobile-view-label { font-size:13px; font-weight:600; color:var(--mj-ink); }
@media(max-width:1100px) { .mj-page .mj-step-list-inner { padding:20px 18px 32px; } .mj-page .mj-list-routes { padding-left:18px; } }
@media(max-width:767px) {
  .mj-page .mj-list-builder,.mj-page .mj-list-builder.has-selection { grid-template-columns:minmax(0,1fr); border-radius:12px; }
  .mj-page .mj-list-builder.has-selection .mj-step-list { display:none; }
  .mj-page .mj-step-list { height:auto; overflow:visible; }
  .mj-page .mj-step-list-inner { padding:16px 12px 90px; }
  .mj-page .mj-list-heading { display:none; }
  .mj-page .mj-list-step-main { padding:14px 12px; gap:10px; }
  .mj-page .mj-list-step-main > .mj-type-icon { width:28px; height:28px; flex-basis:28px; }
  .mj-page .mj-list-step-meta { gap:5px 7px; }
  .mj-page .mj-list-step-meta > span+span { padding-left:7px; }
  .mj-page .mj-list-routes { padding:0 12px; }
  .mj-page .mj-list-builder .mj-inspector { border:0; height:auto; }
  .mj-page .mj-list-builder .mj-inspector-body { overflow:visible; padding-bottom:90px; }
  .mj-page .mj-builder-toolbar { gap:6px; }
  .mj-page .mj-canvas-tools { gap:4px; }
  .mj-page .mj-canvas-tools > .btn:not(.mj-icon-button) { padding-left:10px; padding-right:10px; }
}

/* Read-only journey test: choose a customer, understand eligibility, then see a route. */
.mj-page .mj-test { width:100%; min-width:0; color:var(--mj-body); }
.mj-page .mj-test-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 20px; }
.mj-page .mj-test h2 { margin:0; color:var(--mj-ink); font-size:20px; line-height:1.4; font-weight:600; }
.mj-page .mj-test h3 { margin:0; color:var(--mj-ink); font-size:16px; line-height:1.5; font-weight:600; }
.mj-page .mj-test p { margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--mj-secondary); }
.mj-page .mj-test-safe { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; padding:6px 0; color:var(--mj-secondary); font-size:12px; line-height:1.5; }
.mj-page .mj-test-safe svg { flex-shrink:0; }
.mj-page .mj-test-setup { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); border:1px solid var(--mj-line); border-radius:12px; background:var(--color-white,#fff); }
.mj-page .mj-test-select { min-width:0; padding:24px; }
.mj-page .mj-test-select>.form-label { display:block; margin-bottom:8px; }
.mj-page .mj-preview-picker { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.mj-page .mj-preview-picker>.pure-dropdown { min-width:0; }
.mj-page .mj-preview-picker .pure-dropdown-trigger { height:48px; min-height:48px; padding:0 12px; }
.mj-page .mj-preview-picker>.btn { min-height:48px; }
.mj-page .mj-preview-picker .pure-dropdown-autocomplete-input { min-width:0; }
.mj-page .mj-preview-picker .pure-dropdown-autocomplete-clear { min-width:44px; min-height:44px; }
.mj-page .mj-preview-picker .pure-dropdown-item { min-height:44px; }
.mj-page .mj-customer-option { display:flex; flex-direction:column; gap:4px; white-space:normal; overflow-wrap:anywhere; }
.mj-page .mj-customer-option strong { font-size:13px; font-weight:600; }
.mj-page .mj-customer-option small { font-size:12px; color:var(--mj-secondary); }
.mj-page .mj-test .mj-text-button { display:inline-flex; align-items:center; gap:6px; text-align:left; min-height:44px; padding:8px 0; font-size:13px; line-height:1.5; }
.mj-page .mj-test-select>.mj-text-button { margin-top:10px; }
.mj-page .mj-test-scope { min-width:0; padding:24px; background:var(--color-gray-50); border-left:1px solid var(--mj-line); border-radius:0 12px 12px 0; }
.mj-page .mj-test-scope>strong { display:block; margin:8px 0; color:var(--mj-ink); font-size:13px; line-height:1.5; font-weight:600; }
.mj-page .mj-test-scope ul { padding-left:16px; margin:8px 0 0; font-size:13px; line-height:1.7; }
.mj-page .mj-test-empty { padding:44px 24px; text-align:center; max-width:520px; margin:20px auto; }
.mj-page .mj-test-empty>svg { width:28px; height:28px; margin-bottom:12px; color:var(--mj-muted); }
.mj-page .mj-test-empty .btn { margin-top:12px; }
.mj-page .mj-test-loading { display:flex; justify-content:center; gap:10px; padding:40px 20px; font-size:13px; color:var(--mj-secondary); }
.mj-page .mj-test-result,.mj-page .mj-test-path { margin-top:20px; border:1px solid var(--mj-line); border-radius:12px; background:var(--color-white,#fff); overflow:hidden; }
.mj-page .mj-test-result-heading { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:start; gap:12px; padding:24px; }
.mj-page .mj-test-result-heading>div { flex:1; min-width:0; }
.mj-page .mj-test-result-heading h3 { font-size:20px; margin-top:4px; }
.mj-page .mj-test-result-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; color:var(--mj-secondary); background:var(--color-gray-100); }
.mj-page .mj-test-result-icon.is-passed { color:var(--color-success); background:var(--color-success-light); }
.mj-page .mj-test-checks { padding:0 24px; margin:0; list-style:none; }
.mj-page .mj-test-checks li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; padding:14px 0; border-top:1px solid var(--mj-line); font-size:13px; line-height:1.5; }
.mj-page .mj-test-checks strong { color:var(--mj-ink); font-weight:600; }
.mj-page .mj-test-checks p { margin-top:2px; }
.mj-page .mj-test-check-icon { justify-self:center; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--color-gray-100); color:var(--mj-secondary); }
.mj-page .is-passed>.mj-test-check-icon { background:var(--color-success-light); color:var(--color-success); }
.mj-page .mj-test-details { margin:0 24px; border-top:1px solid var(--mj-line); }
.mj-page .mj-test-details summary { display:flex; align-items:center; gap:8px; cursor:pointer; min-height:48px; font-size:13px; color:var(--mj-secondary); list-style:none; }
.mj-page .mj-test-details summary::-webkit-details-marker { display:none; }
.mj-page .mj-test-details summary>svg:last-child { margin-left:auto; }
.mj-page .mj-test-details[open] summary>svg:last-child { transform:rotate(180deg); }
.mj-page .mj-test-details .mj-test-checks { padding:0; }
.mj-page .mj-test-details>p { padding-bottom:16px; }
.mj-page .mj-test-next { padding:16px 24px 24px; background:var(--color-gray-50); display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid var(--mj-line); }
.mj-page .mj-test-next>p { flex-basis:100%; margin:0 0 4px; }
.mj-page .mj-test-path-title { display:flex; justify-content:space-between; gap:16px; padding:24px; border-bottom:1px solid var(--mj-line); }
.mj-page .mj-test .mj-test-control { margin:16px 24px 0; }
.mj-page .mj-test-route { padding:8px 24px; margin:0; list-style:none; }
.mj-page .mj-test-route>li { position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); gap:16px; padding:16px 0; }
.mj-page .mj-test-route>li:not(:last-child)::before { content:''; position:absolute; left:15px; top:48px; bottom:-16px; width:1px; background:var(--mj-line); }
.mj-page .mj-test-route-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--mj-line); border-radius:8px; color:var(--mj-secondary); background:var(--color-gray-50); z-index:1; }
.mj-page .mj-test-route-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.mj-page .mj-test-route-heading strong { color:var(--mj-ink); font-size:13px; font-weight:600; }
.mj-page .mj-test-route time { color:var(--mj-secondary); font-size:12px; flex-shrink:0; }
.mj-page .mj-test-route blockquote { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--color-gray-50); border-left:2px solid var(--mj-line); margin:10px 0 0; padding:12px 16px; font-size:13px; line-height:1.6; }
.mj-page .mj-test-timing { display:flex; align-items:flex-start; gap:6px; }
.mj-page .mj-test :is(summary,.mj-text-button):focus-visible { outline:2px solid var(--mj-accent); outline-offset:2px; border-radius:4px; }
@media(max-width:767px) {
 .mj-page .mj-test-heading { flex-direction:column; gap:8px; }
 .mj-page .mj-test-setup { grid-template-columns:1fr; }
 .mj-page .mj-test-select,.mj-page .mj-test-scope { padding:16px; }
 .mj-page .mj-test-scope { border-left:0; border-top:1px solid var(--mj-line); border-radius:0 0 12px 12px; }
 .mj-page .mj-preview-picker { grid-template-columns:1fr; }
 .mj-page .mj-preview-picker>.btn { width:100%; }
 .mj-page .mj-test-result-heading { padding:16px; grid-template-columns:32px minmax(0,1fr); }
 .mj-page .mj-test-result-heading>:last-child { grid-column:2; justify-self:start; }
 .mj-page .mj-test-checks { padding:0 16px; }
 .mj-page .mj-test-details { margin:0 16px; }
 .mj-page .mj-test-next,.mj-page .mj-test-path-title { padding:16px; }
 .mj-page .mj-test-next>.btn { flex:1 1 100%; }
 .mj-page .mj-test-route { padding:8px 16px; }
 .mj-page .mj-test-route-heading { flex-direction:column; gap:4px; }
 .mj-page .mj-test-route>li { gap:12px; }
 .mj-page .mj-test-empty { padding:28px 12px; }
}

/* B2B client history: full-width ledger with touch-friendly mobile rows. */
.b2b-history-preview-header, .b2b-history-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.b2b-history-preview-header { margin-bottom:16px; }
.b2b-history-preview-header .b2b-card-header { margin:0; }
.b2b-history-panel { min-width:0; }
.b2b-history-toolbar h3 { margin:0; font-size:16px; color:var(--color-gray-900); }
.b2b-history-toolbar p, .b2b-history-count { margin:8px 0; font-size:13px; color:var(--color-gray-600); }
.b2b-history-filters { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0; }
.b2b-history-filters > .pure-dropdown, #b2bHistoryStatusControl { min-width:160px; }
.b2b-history-panel .btn, .b2b-history-preview-header .btn { min-height:44px; }
.b2b-history-message { display:flex; align-items:center; justify-content:center; gap:12px; padding:32px 16px; color:var(--color-gray-600); }
.b2b-history-mobile { display:none; }
.b2b-history-mobile-row { display:flex; flex-direction:column; gap:8px; width:100%; padding:16px 0; border:0; border-bottom:1px solid var(--color-gray-200); background:transparent; text-align:start; color:var(--color-gray-600); font:inherit; font-size:13px; cursor:pointer; }
.b2b-history-mobile-row:hover { background:var(--color-gray-50); }
.b2b-history-mobile-top { display:flex; justify-content:space-between; gap:12px; color:var(--color-gray-900); }
.b2b-history-mobile-top strong { font-weight:600; }
@media(max-width:640px) {
  .b2b-history-toolbar { align-items:stretch; flex-direction:column; }
  .b2b-history-filters { align-items:stretch; flex-direction:column; }
  .b2b-history-filters > * { width:100%; }
  .b2b-history-desktop { display:none; }
  .b2b-history-mobile { display:block; }
  .b2b-history-message { flex-wrap:wrap; }
}

@media(min-width:641px) {
  .b2b-history-filters > .pure-dropdown { width:180px; flex:0 1 180px; }
  .b2b-history-filters > #b2bHistoryStatusControl { width:190px; flex:0 1 190px; }
}
/* Meal Plans: day operations, week/month composition and explicit recipient review. */
.meal-plan-page [hidden]{display:none!important}
.meal-plan-page .btn,.meal-plan-page summary{min-height:44px}
.meal-plan-page button:focus-visible,.meal-plan-page summary:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.meal-plan-page input[type="checkbox"]{box-sizing:border-box!important;display:inline-block!important;position:relative!important;flex:0 0 22px!important;width:22px!important;min-width:22px!important;max-width:22px!important;height:22px!important;min-height:22px!important;max-height:22px!important;margin:0!important;padding:0!important;vertical-align:middle;border-radius:6px!important;overflow:visible!important;transform:none!important}
.meal-plan-page input[type="checkbox"]:checked::after{box-sizing:content-box!important;left:7px!important;top:4px!important;width:6px!important;height:10px!important;border:solid #fff!important;border-width:0 2px 2px 0!important;transform:rotate(45deg)!important}
.meal-plan-page input[type="checkbox"]:disabled{cursor:not-allowed;opacity:.45}
.meal-plan-check{min-height:44px;font-weight:500;gap:9px}
.meal-plan-page .meal-plan-card h3{font-size:16px;line-height:1.4}
.meal-plan-workspace-nav,.meal-plan-month-toolbar,.meal-plan-day-heading,.meal-plan-review-heading,.meal-plan-recipient-tools,.meal-plan-coverage-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.meal-plan-workspace-nav{margin:0 0 18px;padding:8px 0;border-bottom:1px solid #e2e8f0}
.meal-plan-day-date-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.meal-plan-day-header-row :is(.btn,.date-picker-trigger,.pure-dropdown-trigger) { height:36px; min-height:36px; margin:0; padding-block:0; font-size:13px; }
@media(max-width:700px) {
 .meal-plan-day-header-row { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; gap:8px; }
 .meal-plan-day-date-controls { grid-column:1 / -1; }
 .meal-plan-day-date-controls .date-picker-wrapper { flex:1 1 100%; }
 .meal-plan-day-date-controls .date-picker-trigger { width:100%; }
 .meal-plan-day-header-row>.pure-dropdown { min-width:0; width:100%; }
 .meal-plan-day-header-row :is(.btn,.date-picker-trigger,.pure-dropdown-trigger) { min-height:44px; height:44px; }
 .meal-plan-day-header-row .dd-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.meal-plan-week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:20px}
.meal-plan-week-strip>button{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;background:#fff;border:1px solid #e2e8f0;border-radius:12px;min-height:90px;cursor:pointer;color:#64748b;padding:10px;font-size:12px}
.meal-plan-week-strip>button strong{font-size:19px;color:#0f172a}.meal-plan-week-strip>button.is-selected{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 1px #2563eb}.meal-plan-week-strip>button.is-selected strong{color:#1d4ed8}
.meal-plan-day-heading{justify-content:space-between;border-bottom:1px solid #e2e8f0;padding-bottom:16px;margin-bottom:12px}.meal-plan-day-heading h2{margin:0 0 5px;font-size:22px}.meal-plan-day-heading p{margin:0;color:#64748b;font-size:13px}
.meal-plan-day-events{display:grid;gap:10px}.meal-plan-day-event{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:18px;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;cursor:pointer}.meal-plan-day-event:hover{border-color:#93c5fd;background:#f8fafc}.meal-plan-day-event strong{display:block;font-size:14px;line-height:1.5}.meal-plan-day-event small{display:block;font-size:12px;color:#64748b;margin-top:4px}.meal-plan-day-event>span:last-child{display:flex;align-items:center;gap:8px}.meal-plan-day-event svg{width:18px;height:18px}
.meal-plan-day-empty{padding:40px 20px;text-align:center;max-width:680px;margin:0 auto}.meal-plan-day-empty>svg{width:32px;height:32px;color:#64748b}.meal-plan-day-empty h3{font-size:19px;margin:12px 0 8px}.meal-plan-day-empty p{font-size:14px;line-height:1.6;color:#64748b;margin:0 0 18px}
.meal-plan-workflow{display:flex;justify-content:space-between;list-style:none;margin:26px 0 0;padding:18px 0 0;gap:12px;border-top:1px solid #e2e8f0}.meal-plan-workflow li{display:flex;align-items:center;gap:8px;font-size:12px;color:#64748b}.meal-plan-workflow svg{width:18px;height:18px}.meal-plan-workflow .is-current{color:#1d4ed8;font-weight:600}
.meal-plan-month-overview{margin-top:20px;border:1px solid #e2e8f0;background:#fff;border-radius:14px;overflow:hidden}.meal-plan-month-overview>summary{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;font-size:14px;font-weight:600}.meal-plan-month-overview summary span{display:flex;gap:10px;align-items:center}.meal-plan-month-overview summary svg{width:18px;height:18px}.meal-plan-month-toolbar{justify-content:space-between;padding:0 18px 16px}
.meal-plan-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:#e2e8f0}.meal-plan-month-grid>div,.meal-plan-month-grid>button,.meal-plan-month-grid>span{background:#fff;padding:10px;min-width:0;text-align:center;border:0;color:#475569}.meal-plan-month-grid>button{min-height:72px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;flex-direction:column}.meal-plan-month-grid>button.is-selected{background:#eff6ff;color:#1d4ed8}.meal-plan-month-grid>button.is-today{box-shadow:inset 0 0 0 1px #93c5fd}.meal-plan-month-grid i,.meal-plan-month-legend i{display:inline-block;width:6px;height:6px;background:#16a34a;border-radius:50%;margin:0 2px}.meal-plan-month-grid i.is-draft,.meal-plan-month-legend i.is-draft{background:#d97706}.meal-plan-month-grid i.is-cancelled{background:#94a3b8}.meal-plan-month-legend{padding:12px 18px;margin:0;color:#64748b;font-size:12px}
.meal-plan-planner-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px;scroll-margin-top:90px}.meal-plan-planner-steps button{display:flex;gap:12px;align-items:center;min-height:64px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 18px;font-size:14px;color:#475569;cursor:pointer}.meal-plan-planner-steps button>span{display:grid;place-items:center;flex:0 0 28px;width:28px;min-width:28px;height:28px;border-radius:50%;background:#f1f5f9;font-weight:600}.meal-plan-planner-steps button.is-current{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.meal-plan-planner-steps button.is-current>span{background:#2563eb;color:#fff}
.meal-plan-planner-panel{max-width:1120px;margin:0 auto}.meal-plan-planner-panel>.meal-plan-section-head{margin-bottom:20px}.meal-plan-planner-footer{max-width:1120px;margin:18px auto;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px}.meal-plan-planner-footer .btn{min-height:48px}.meal-plan-planner-footer>div{min-width:0}
.meal-plan-recipient-tools{margin-bottom:16px;padding:8px 0;justify-content:space-between;font-size:13px}.meal-plan-select-all{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.meal-plan-recipient-list{display:grid;gap:12px}.meal-plan-recipient{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden}.meal-plan-recipient.is-selected{border-color:#93c5fd;background:#f8fbff}.meal-plan-recipient-choice{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;min-height:72px;margin:0!important;max-width:100%!important}.meal-plan-recipient-person{flex:1;min-width:0}.meal-plan-recipient-person strong{display:block;font-size:14px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}.meal-plan-recipient-person small{display:block;color:#64748b;font-size:12px;margin-top:2px}.meal-plan-recipient-state{display:flex;align-items:center;gap:5px;font-size:12px;color:#64748b;white-space:nowrap}.meal-plan-recipient-state svg{width:16px;height:16px}.is-selected .meal-plan-recipient-state{color:#1d4ed8}.meal-plan-recipient-body{margin-left:54px;padding:0 18px 14px}.meal-plan-recipient-meals{font-size:13px;color:#334155;margin:0 0 8px;line-height:1.5}.meal-plan-recipient-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:#64748b}.meal-plan-recipient-meta>span{display:flex;gap:6px;align-items:center}.meal-plan-recipient-meta svg{width:16px;height:16px;flex-shrink:0}.meal-plan-recipient-reason{font-size:13px;color:#92400e;margin:0 0 8px}.meal-plan-recipient-warnings{display:grid;gap:6px;margin-top:12px}.meal-plan-recipient-warnings svg{height:16px;width:16px;vertical-align:middle}.meal-plan-recipient-details{font-size:12px;color:#64748b;margin-top:8px}.meal-plan-recipient-details summary{display:flex;align-items:center;cursor:pointer;color:#475569}.meal-plan-recipient-nutrition{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.meal-plan-review-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:16px;background:#f8fafc;border-radius:10px;margin-bottom:20px}.meal-plan-review-facts span{display:block;font-size:12px;color:#64748b;margin-bottom:6px}.meal-plan-review-facts strong{font-size:14px;overflow-wrap:anywhere}.meal-plan-review-heading{justify-content:space-between;margin-bottom:14px}.meal-plan-review-heading h3{margin:0}.meal-plan-review-heading>span{font-size:13px;color:#64748b}.meal-plan-review-clients{display:grid;gap:10px}.meal-plan-review-clients>div{padding:12px 0;border-bottom:1px solid #e2e8f0;display:grid;gap:5px}.meal-plan-review-clients strong{font-size:14px}.meal-plan-review-clients span,.meal-plan-review-clients small{font-size:13px;color:#64748b}
.meal-plan-order-explanation{display:flex;gap:12px;padding:16px;background:#eff6ff;border-radius:12px;margin:18px 0;color:#334155}.meal-plan-order-explanation>svg{flex:0 0 18px;width:18px;height:18px;color:#2563eb;margin-top:2px}.meal-plan-order-explanation p{font-size:13px;line-height:1.65;margin:0}.meal-plan-order-explanation strong{color:#1e3a8a}
.meal-plan-client-order{display:flex;gap:12px;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid #e2e8f0;padding:14px 0;width:100%;text-align:left;background:#fff;cursor:pointer;margin-bottom:10px}.meal-plan-client-order strong,.meal-plan-client-order small{display:block}.meal-plan-client-order strong{font-size:14px}.meal-plan-client-order small{color:#64748b;font-size:12px;margin-top:5px}.meal-plan-client-order svg{width:16px;height:16px}.meal-plan-empty-note{font-size:13px;line-height:1.6;color:#64748b;padding:16px 0}.meal-plan-empty-note strong{color:#334155;display:block}.meal-plan-history>summary{display:flex;align-items:center;font-size:14px;font-weight:600;cursor:pointer}.meal-plan-client-rail{gap:16px}.meal-plan-coverage-clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;max-height:360px;overflow:auto;padding:3px}.meal-plan-coverage-client{display:flex;gap:12px;align-items:center;border:1px solid #e2e8f0;border-radius:10px;padding:14px;cursor:pointer}.meal-plan-coverage-client.is-selected{border-color:#93c5fd;background:#eff6ff}.meal-plan-coverage-client strong{display:block;font-size:13px;font-weight:600}.meal-plan-coverage-client small{display:block;font-size:12px;line-height:1.5;color:#64748b;margin-top:4px}.meal-plan-coverage-client>span{min-width:0;overflow-wrap:anywhere}.meal-plan-coverage-actions{margin-top:16px}.meal-plan-coverage-days{display:grid;gap:0}.meal-plan-coverage-days>article{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid #e2e8f0;font-size:13px}.meal-plan-coverage-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px}.meal-plan-coverage-line>p{flex-basis:100%;margin:4px 0}.meal-plan-coverage-line svg{width:15px;height:15px}
@media(max-width:1100px){.meal-plan-review-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.meal-plan-planner-steps button{padding:12px;gap:8px}.meal-plan-day-event{grid-template-columns:80px minmax(0,1fr);gap:10px}.meal-plan-day-event>span:last-child{grid-column:2}}
@media(max-width:700px){.meal-plan-planner-steps{gap:6px}.meal-plan-planner-steps button{flex-direction:column;text-align:center;font-size:12px;padding:10px 4px;gap:6px}.meal-plan-recipient-choice{padding:14px 12px;gap:10px;flex-wrap:wrap}.meal-plan-recipient-person{min-width:140px}.meal-plan-recipient-state{margin-left:32px}.meal-plan-recipient-body{margin-left:0;padding:0 12px 14px}.meal-plan-recipient-meta{display:grid;gap:8px}.meal-plan-planner-footer{align-items:stretch}.meal-plan-planner-footer>div:first-child:has(>span){display:none}.meal-plan-planner-footer>div:last-child{flex:1}.meal-plan-planner-footer>div:last-child .btn{width:100%;white-space:normal;font-size:13px}.meal-plan-week-strip{gap:4px}.meal-plan-week-strip>button{padding:8px 2px;font-size:10px;min-height:76px}.meal-plan-week-strip>button strong{font-size:17px}.meal-plan-workflow{display:grid;grid-template-columns:1fr 1fr}.meal-plan-day-empty{padding:28px 4px}.meal-plan-day-heading h2{font-size:19px}.meal-plan-month-grid>button{min-height:56px;padding:6px}.meal-plan-review-facts{gap:14px;padding:12px}.meal-plan-coverage-days>article{grid-template-columns:1fr;gap:4px}.meal-plan-coverage-clients{grid-template-columns:1fr}.meal-plan-client-order{flex-wrap:wrap}.meal-plan-workspace-nav>.btn{font-size:12px;white-space:normal}}
@media(prefers-reduced-motion:reduce){.meal-plan-page *{scroll-behavior:auto!important;transition:none!important}}

.meal-plan-day-event{grid-template-columns:90px minmax(0,1fr) auto auto}.meal-plan-day-event__next{font-size:12px;color:#2563eb}.meal-plan-page .meal-plan-menu-item__remove{width:44px;height:44px;min-height:44px}
@media(max-width:950px){.meal-plan-day-event{grid-template-columns:70px minmax(0,1fr)}.meal-plan-day-event>span:nth-child(n+3){grid-column:2}}

.meal-plan-page input[type="checkbox"]:focus-visible{outline:2px solid #2563eb;outline-offset:3px}

.meal-plan-empty-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:24px!important;max-width:600px}
.meal-plan-page .meal-plan-empty-card h3{margin:0;font-size:18px;line-height:1.45}
.meal-plan-empty-card p{margin:12px 0 0;font-size:14px;line-height:1.65;color:#64748b;max-width:48ch}
.meal-plan-empty-card>.btn{margin-top:24px}
.meal-plan-card-grid>.meal-plan-card:not(.meal-plan-empty-card)>h3{margin:0 0 10px}
.meal-plan-card-grid>.meal-plan-card:not(.meal-plan-empty-card)>p{margin:0 0 20px;line-height:1.6;color:#64748b}
@media(max-width:620px){.meal-plan-empty-card{padding:20px!important}.meal-plan-empty-card>.btn{width:100%}}

@media(max-width:700px){.content-shell.meal-plan-page{padding-bottom:100px!important}}



/* Meal Plans visual roles: recessed workspace, bounded work surfaces and explicit selection. */
.meal-plan-page{--mp-canvas:var(--color-gray-100);--mp-surface:#fff;--mp-line:var(--color-gray-300);--mp-accent:var(--color-primary-hover);--mp-accent-soft:color-mix(in srgb,var(--mp-accent) 8%,white);color:var(--color-gray-700)}
.meal-plan-page .meal-plan-card{border-color:var(--mp-line);box-shadow:none;border-radius:12px;padding:24px}
.meal-plan-page .meal-plan-section-head{gap:12px;margin-bottom:20px}.meal-plan-page .meal-plan-section-head p{margin-top:6px;line-height:1.6;font-size:13px;color:var(--color-gray-600)}
.meal-plan-page .meal-plan-section-head>span{background:var(--mp-accent-soft);color:var(--mp-accent);border-radius:8px}
.meal-plan-workspace-nav{margin:0 0 20px;padding:0 0 12px;border-color:var(--mp-line);gap:12px}
.meal-plan-workspace-nav>.btn.is-active{background:var(--mp-accent-soft);border-color:var(--mp-accent);color:var(--color-primary-dark);box-shadow:inset 0 -2px var(--mp-accent)}
.meal-plan-plan-list{border:1px solid var(--mp-line);border-radius:12px;background:var(--mp-surface);overflow:hidden}
.meal-plan-plan-list>article{display:flex;align-items:center;gap:16px;padding:20px 24px}.meal-plan-plan-list>article+article{border-top:1px solid var(--color-gray-200)}.meal-plan-plan-list>article>div{flex:1;min-width:0}.meal-plan-plan-list h3{margin:0;font-size:16px;line-height:1.45}.meal-plan-plan-list p{margin:6px 0 0;font-size:13px;color:var(--color-gray-500)}
.meal-plan-plan-icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:12px;background:var(--mp-accent-soft);color:var(--mp-accent)}.meal-plan-plan-icon svg{width:24px;height:24px}
.meal-plan-first-plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);border:1px solid var(--mp-line);border-radius:16px;overflow:hidden;max-width:1120px;background:var(--mp-surface)}
.meal-plan-first-plan__start{padding:40px}.meal-plan-first-plan__start h2{margin:24px 0 12px;font-size:28px;line-height:1.3;letter-spacing:-.02em;color:var(--color-gray-900)}.meal-plan-first-plan__start p{margin:0;max-width:46ch;font-size:14px;line-height:1.75;color:var(--color-gray-600)}.meal-plan-first-plan__start>.btn{margin-top:28px}
.meal-plan-first-plan__steps{display:flex;flex-direction:column;justify-content:center;gap:28px;list-style:none;background:var(--color-gray-900);padding:40px;margin:0}.meal-plan-first-plan__steps li{display:flex;align-items:flex-start;gap:16px}.meal-plan-first-plan__steps li>span{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border:1px solid var(--color-gray-600);border-radius:50%;color:white;font-size:13px;font-weight:600}.meal-plan-first-plan__steps h3{margin:3px 0 8px;font-size:15px;line-height:1.4;color:white}.meal-plan-first-plan__steps p{margin:0;font-size:13px;line-height:1.65;color:var(--color-gray-300)}
.meal-plan-planner-steps{gap:0;border:1px solid var(--mp-line);border-radius:12px;overflow:hidden;background:var(--color-gray-50)}.meal-plan-planner-steps button{border:0;border-radius:0;background:transparent}.meal-plan-planner-steps button+button{border-left:1px solid var(--mp-line)}.meal-plan-planner-steps button.is-current{background:var(--mp-accent-soft);box-shadow:inset 0 -3px var(--mp-accent)}
.meal-plan-recipient-tools{background:var(--color-gray-50);border:1px solid var(--color-gray-200);padding:12px 16px;border-radius:8px;margin-bottom:16px}.meal-plan-recipient.is-selected,.meal-plan-coverage-client.is-selected{background:var(--mp-accent-soft);border-color:var(--mp-accent)}.meal-plan-recipient-choice{gap:16px}.meal-plan-recipient-state{color:var(--color-primary-dark)}
.meal-plan-week-strip>button{border-color:var(--mp-line);background:var(--color-gray-50)}.meal-plan-week-strip>button.is-selected{background:var(--mp-accent);border-color:var(--mp-accent);color:white}.meal-plan-week-strip>button.is-selected strong{color:white}.meal-plan-day-empty{background:var(--color-gray-50);border:1px dashed var(--mp-line);border-radius:12px;padding:32px 24px;margin:20px auto}

@media(max-width:700px){
 .meal-plan-page .meal-plan-card{padding:16px}.meal-plan-first-plan{grid-template-columns:1fr}.meal-plan-first-plan__start{padding:24px}.meal-plan-first-plan__start h2{font-size:24px;margin-top:20px}.meal-plan-first-plan__start>.btn{width:100%;margin-top:24px}.meal-plan-first-plan__steps{padding:24px;gap:24px}
 .meal-plan-plan-list>article{flex-wrap:wrap;padding:16px;gap:12px}.meal-plan-plan-list>article>.btn{width:100%}.meal-plan-plan-list>article>div{flex-basis:calc(100% - 60px)}.meal-plan-recipient-tools{padding:12px;gap:12px}.meal-plan-workspace-nav{gap:8px}.meal-plan-workspace-nav>.btn{flex:1}
}
.meal-plan-picker-hint{margin:0 0 20px;font-size:14px;line-height:1.6;color:var(--color-gray-600)}.meal-plan-picker-rows{margin-top:16px;max-height:50vh;overflow:auto}.meal-plan-picker-rows>button{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 4px;text-align:left;border:0;border-bottom:1px solid var(--color-gray-200);background:white;font-size:14px;color:var(--color-gray-700);cursor:pointer}.meal-plan-picker-rows>button>span{flex:1;line-height:1.5}.meal-plan-picker-rows>button>small{color:var(--color-primary-dark)}.meal-plan-picker-rows>button>svg{width:18px;height:18px;color:var(--color-primary-hover)}.meal-plan-picker-rows>button:hover{background:var(--color-gray-50)}.meal-plan-picker-rows>button:disabled{opacity:.55;cursor:default}



/* Meal Planner: OLAP builder shell, shared controls and domain-specific meal cells. */
.meal-plan-matrix-page { min-width:0; max-width:none; }
.meal-plan-matrix-page [hidden] { display:none!important; }
.meal-plan-matrix-header-row { width:100%; min-width:0; }
.meal-plan-builder-stages { flex:0 0 auto; }
.meal-plan-matrix-toolbar { display:flex; align-items:center; flex:1 1 auto; flex-wrap:wrap; gap:8px; min-width:0; }
.meal-plan-matrix-header-row :is(.date-picker-trigger,.btn,.erp-filter-tabs__tab) { box-sizing:border-box; height:36px; min-height:36px; margin:0; padding-top:0; padding-bottom:0; font-size:13px; }
.meal-plan-matrix-inspector :is(.form-input,.pure-dropdown-trigger,.erp-filter-tabs__tab) { box-sizing:border-box; height:36px; min-height:36px; margin:0; padding-top:0; padding-bottom:0; font-size:13px; }
.meal-plan-matrix-toolbar .erp-filter-tabs { gap:4px; }
.meal-plan-matrix-period { display:flex; align-items:center; gap:4px; }
.meal-plan-toolbar-icon { width:36px; min-width:36px; padding-inline:0; justify-content:center; }
#mealPlanMatrixPanelToggle { margin-inline-start:auto; }
#mealPlanMatrixPanelToggle.is-active { color:var(--color-primary-dark); background:var(--primary-50); }
.meal-plan-nutrition-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.meal-plan-nutrition-grid .stat-card-u { padding:14px 16px; }
.meal-plan-nutrition-grid .stat-card-u__value { font-size:24px; line-height:1.3; }
.meal-plan-nutrition-grid .stat-card-u__sub { font-size:12px; line-height:1.5; }
.meal-plan-period-coverage { display:block; margin-bottom:4px; color:var(--color-gray-600); }
.meal-plan-nutrition-status { display:block; min-height:18px; margin-top:4px; font-size:11px; color:var(--color-gray-600); }
.meal-plan-matrix-main { min-width:0; }
.meal-plan-matrix-context { display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; margin-bottom:12px; font-size:12px; color:var(--color-gray-500); }
.meal-plan-matrix-context strong { color:var(--color-gray-700); font-size:13px; font-weight:600; }
.meal-plan-matrix-scroll { overflow-x:auto; overscroll-behavior-x:contain; max-width:100%; }
.meal-plan-matrix-table { table-layout:fixed; width:100%; min-width:930px; border-collapse:separate; border-spacing:0; }
.meal-plan-matrix-table :is(th,td) { vertical-align:top; border-inline-end:1px solid var(--color-gray-200); }
.meal-plan-matrix-table :is(th,td):last-child { border-inline-end:0; }
.meal-plan-matrix-table thead th { position:sticky; top:0; z-index:3; padding:0; background:white; }
.meal-plan-matrix-table thead th:first-child { width:104px; min-width:104px; padding:16px 12px; left:0; z-index:4; }
.meal-plan-matrix-table .meal-plan-slot-heading { width:104px; min-width:104px; position:sticky; left:0; z-index:2; background:white; color:var(--color-gray-700); font-size:12px; font-weight:600; padding:16px 12px; }
.meal-plan-matrix-table th button { display:block; width:100%; min-height:64px; padding:12px; text-align:left; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.meal-plan-matrix-table th strong { display:block; font-size:13px; font-weight:600; }
.meal-plan-matrix-table th small { display:block; font-size:11px; font-weight:400; color:var(--color-gray-500); margin-top:5px; }
.meal-plan-matrix-table thead th.is-selected { background:var(--primary-50); color:var(--color-primary-dark); box-shadow:inset 0 -2px var(--color-primary-hover); }
.meal-plan-matrix-table td[data-menu-date] { padding:6px; background:white; }
.meal-plan-matrix-table td.is-active { background:var(--primary-50); box-shadow:inset 0 0 0 2px var(--color-primary-hover); }
.meal-plan-matrix-table td.is-dragover { background:var(--primary-50); box-shadow:inset 0 0 0 3px var(--color-primary-hover); }
.meal-plan-matrix-cell { min-height:86px; display:grid; align-content:start; gap:6px; }
.meal-plan-cell-add { display:flex; align-items:center; gap:6px; min-height:44px; padding:8px; border:0; border-radius:6px; text-align:left; background:transparent; color:var(--color-gray-500); font:inherit; font-size:12px; cursor:pointer; }
.meal-plan-cell-add:hover { color:var(--color-primary-dark); background:var(--primary-50); }
.meal-plan-cell-add svg { width:14px; height:14px; }
.meal-plan-matrix-dish { display:flex; align-items:flex-start; gap:4px; padding:6px; border:1px solid var(--color-gray-200); border-radius:8px; background:var(--color-gray-100); min-width:0; }
.meal-plan-dish-select { display:flex; align-items:flex-start; flex:1; min-width:0; gap:6px; padding:2px; border:0; background:transparent; color:var(--color-gray-700); text-align:left; font:inherit; font-size:12px; line-height:1.45; cursor:grab; }
.meal-plan-dish-select svg { width:12px; height:16px; flex:0 0 12px; color:var(--color-gray-400); }
.meal-plan-dish-copy { display:grid; min-width:0; gap:6px; overflow-wrap:anywhere; }
.meal-plan-dish-copy small { font-size:11px; line-height:1.45; color:var(--color-gray-600); }
.meal-plan-matrix-dish .meal-plan-dish-remove { flex:0 0 28px; width:28px; height:28px; min-height:28px; padding:0; border-color:transparent; }
.meal-plan-dish-remove svg { width:14px; height:14px; }
.meal-plan-matrix-total { font-size:11px; color:var(--color-gray-500); }
.meal-plan-matrix-total>strong:empty { display:none; }
.meal-plan-matrix-total p { display:flex; flex-wrap:wrap; gap:4px 10px; margin:6px 0 0; }
.meal-plan-matrix-total b { color:var(--color-gray-700); font-weight:600; }
.meal-plan-matrix-daily-totals td { padding:12px; background:white; }
.meal-plan-matrix-hint { margin:12px 0 0; font-size:11px; color:var(--color-gray-500); line-height:1.5; }
.meal-plan-matrix-inspector .erp-builder-settings-body>div { margin:0; padding:0; border:0; }
.meal-plan-matrix-inspector h3 { font-size:14px; margin:0 0 6px; }
.meal-plan-matrix-inspector p,.meal-plan-tool-hint { margin:0 0 12px; color:var(--color-gray-600); font-size:12px; line-height:1.6; }
.meal-plan-matrix-inspector .form-label { font-size:12px; }
.meal-plan-matrix-inspector .meal-plan-day-action { justify-self:start; width:auto; height:36px; min-height:36px; padding:0 8px; font-size:12px; }
.meal-plan-matrix-inspector .erp-builder-settings-close { width:44px; height:44px; }
.meal-plan-library-search { margin-bottom:12px; }
.meal-plan-library-dish { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:10px 8px; margin-bottom:6px; border:1px solid var(--color-gray-200); border-radius:8px; background:white; font:inherit; font-size:12px; line-height:1.4; color:var(--color-gray-700); text-align:left; cursor:grab; }
.meal-plan-library-dish span { flex:1; min-width:0; }
.meal-plan-library-dish svg { width:14px; height:14px; flex:0 0 14px; color:var(--color-gray-400); }
.meal-plan-library-dish:is(:hover,.is-selected) { background:var(--primary-50); border-color:var(--color-primary-hover); }
#mealPlanMatrixCellTools { display:grid; gap:16px; }
.meal-plan-matrix-inspector .meal-plan-cell-heading p { margin:0; }
.meal-plan-day-menu { display:grid; gap:8px; }
.meal-plan-matrix-inspector .form-group { display:grid; gap:6px; margin:0; min-width:0; }
.meal-plan-matrix-inspector .form-label { margin:0; line-height:1.5; }
.meal-plan-matrix-inspector>.erp-filter-tabs { overflow-x:auto; flex-wrap:nowrap; }
.meal-plan-matrix-inspector>.erp-filter-tabs .erp-filter-tabs__tab { flex:0 0 auto; padding-inline:7px; font-size:11px; }
.meal-plan-ai { display:grid; gap:12px; min-width:0; }
.meal-plan-ai__heading { display:flex; align-items:center; gap:10px; }
.meal-plan-ai__heading .erp-icon-tile { --erp-icon-tile-size:36px; --erp-icon-tile-radius:9px; color:white; }
.meal-plan-ai__heading strong,.meal-plan-ai__heading small { display:block; }
.meal-plan-ai__heading strong { color:var(--color-gray-900); font-size:14px; }
.meal-plan-ai__heading small { margin-top:2px; color:var(--color-gray-600); font-size:12px; }
.meal-plan-ai-range { min-width:0; margin:0; padding:10px 12px 12px; border:1px solid var(--color-gray-200); border-radius:12px; }
.meal-plan-ai-range legend { padding:0 4px; color:var(--color-gray-700); font-size:12px; font-weight:600; }
.meal-plan-ai-range__fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.meal-plan-ai__group-label { padding-top:4px; border-top:1px solid var(--color-gray-200); color:var(--color-gray-700); font-size:12px; font-weight:600; }
.meal-plan-ai__actions { display:flex; align-items:center; gap:10px; margin-top:4px; }
.meal-plan-ai__status,.meal-plan-ai__empty { color:var(--color-gray-600); font-size:12px; line-height:1.5; }
.meal-plan-ai__error { color:var(--color-danger); font-size:12px; line-height:1.5; }
.meal-plan-ai__results-heading { display:grid; gap:3px; padding-top:14px; border-top:1px solid var(--color-gray-200); }
.meal-plan-ai__results-heading strong { color:var(--color-gray-900); font-size:13px; }
.meal-plan-ai__results-heading small { color:var(--color-gray-600); font-size:11px; }
.meal-plan-ai-result { display:grid; gap:7px; padding:12px; border:1px solid var(--color-gray-200); border-radius:12px; background:var(--color-gray-50); }
.meal-plan-ai-result>strong { color:var(--color-gray-900); font-size:13px; }
.meal-plan-ai-result p { margin:0; color:var(--color-gray-700); font-size:12px; }
.meal-plan-ai-result small { color:var(--color-gray-600); font-size:11px; line-height:1.5; }
.meal-plan-ai-result .btn { justify-self:start; }
html.meal-plan-ai-open { overflow:hidden; }
html.meal-plan-ai-open .hx-help-launcher { display:none!important; }
.meal-plan-ai-modal { width:min(790px,100%); min-height:0; max-height:calc(100dvh - 48px); }
.meal-plan-ai-modal .onboarding-flow__top { padding:20px 30px 0; }
.meal-plan-ai-modal__body { padding:18px 34px 22px; }
.meal-plan-ai-modal__intro { display:flex; align-items:center; gap:14px; }
.meal-plan-ai-modal__intro .erp-icon-tile { --erp-icon-tile-size:42px; --erp-icon-tile-radius:12px; flex:0 0 42px; color:#fff; }
.meal-plan-ai-modal__intro .erp-icon-tile svg { color:#fff!important; stroke:#fff!important; }
.meal-plan-ai-modal__intro .onboarding-flow__step-label { margin-bottom:4px; font-size:10px; }
.meal-plan-ai-modal__body h2 { font-size:25px; line-height:1.2; }
.meal-plan-ai-modal__intro p { margin:5px 0 0; color:var(--color-gray-600); font-size:13px; }
.meal-plan-ai-modal__body>p { margin-top:7px; font-size:13px; }
.meal-plan-ai-modal__content { display:grid; gap:18px; margin-top:24px; }
.meal-plan-ai-modal__section { display:grid; gap:12px; }
.meal-plan-ai-modal__section+.meal-plan-ai-modal__section { padding-top:16px; border-top:1px solid var(--color-gray-200); }
.meal-plan-ai-modal__section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.meal-plan-ai-modal__section-head strong { color:var(--color-gray-900); font-size:14px; }
.meal-plan-ai-modal__section-head small { color:var(--color-gray-600); font-size:11px; }
.meal-plan-ai-modal__target { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:18px; align-items:end; }
.meal-plan-ai-modal .form-group { display:grid; gap:6px; min-width:0; margin:0; }
.meal-plan-ai-modal .form-label { color:var(--color-gray-700); font-size:12px; font-weight:600; }
.meal-plan-ai-modal .form-input,.meal-plan-ai-modal .pure-dropdown-trigger { min-height:40px; font-size:13px; }
.meal-plan-ai-modal__slots { display:flex; gap:5px; flex-wrap:wrap; }
.meal-plan-ai-modal__slots button { min-height:40px; padding:0 10px; border:1px solid var(--color-gray-200); border-radius:9px; background:white; color:var(--color-gray-700); font:inherit; font-size:11px; cursor:pointer; }
.meal-plan-ai-modal__slots button:hover,.meal-plan-ai-modal__slots button:focus-visible { border-color:var(--color-primary-hover); }
.meal-plan-ai-modal__slots button.is-active { border-color:var(--color-primary-hover); background:var(--color-primary-light); color:var(--color-primary-dark); font-weight:600; }
.meal-plan-ai-modal__ranges { display:grid; gap:8px; }
.meal-plan-ai-modal__range { display:grid; grid-template-columns:minmax(130px,1fr) minmax(0,1.65fr); gap:16px; align-items:center; }
.meal-plan-ai-modal__range-name { display:flex; align-items:baseline; gap:6px; }
.meal-plan-ai-modal__range-name strong { color:var(--color-gray-800); font-size:12px; font-weight:600; }
.meal-plan-ai-modal__range-name span { color:var(--color-gray-500); font-size:11px; }
.meal-plan-ai-modal__range-fields { display:grid; grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr); align-items:center; gap:8px; }
.meal-plan-ai-modal__range-fields>span { color:var(--color-gray-400); text-align:center; }
.meal-plan-ai-modal__bound { display:block; min-width:0; }
.meal-plan-ai-modal__bound .form-input { width:100%; }
.meal-plan-ai-modal__advanced { margin-top:3px!important; padding-top:10px!important; border-top:1px solid var(--color-gray-200)!important; }
.meal-plan-ai-modal__advanced>.erp-disclosure__body { display:grid; gap:10px; padding:10px 0 0!important; }
.meal-plan-ai-modal__advanced .erp-disclosure__meta { font-size:11px; }
.meal-plan-ai-modal__price { display:grid; grid-template-columns:minmax(130px,1fr) minmax(0,1.65fr); gap:3px 16px; align-items:center; }
.meal-plan-ai-modal__price .form-input { grid-column:2; grid-row:1; }
.meal-plan-ai-modal__price small { grid-column:2; color:var(--color-gray-600); font-size:11px; }
.meal-plan-ai-modal__brief textarea.form-input { min-height:64px; padding:9px 12px; resize:vertical; }
.meal-plan-ai-modal__optional { color:var(--color-gray-500); font-weight:400; }
.meal-plan-ai-modal__footer { align-items:center; padding:14px 34px 18px; }
.meal-plan-ai-modal__footer .onboarding-flow__footer-left { max-width:600px; }
.meal-plan-ai-modal__footer #mealPlanAiMeta { color:var(--color-gray-700); font-size:12px; }
.meal-plan-ai-modal__footer .meal-plan-ai-modal__error { color:var(--color-danger); }
.meal-plan-ai-modal__footer .onboarding-flow__continue { min-width:215px; min-height:40px; font-size:13px; white-space:nowrap; }
.meal-plan-ai-modal [hidden] { display:none!important; }
.meal-plan-ai-modal__result-summary { display:flex; justify-content:space-between; gap:12px; color:var(--color-gray-700); font-size:13px; }
.meal-plan-ai-modal__result-summary strong { color:var(--color-gray-900); }
.meal-plan-ai-modal__result { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border:1px solid var(--color-gray-200); border-radius:12px; background:var(--color-gray-50); }
.meal-plan-ai-modal__result-copy { min-width:0; }
.meal-plan-ai-modal__result h3 { margin:0; color:var(--color-gray-900); font-size:16px; }
.meal-plan-ai-modal__result p { margin:7px 0 0; color:var(--color-gray-700); font-size:13px; line-height:1.5; }
.meal-plan-ai-modal__metrics { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:12px; color:var(--color-gray-600); font-size:11px; }
.meal-plan-ai-modal__result .btn { flex:0 0 auto; }
.meal-plan-ai-modal__fineprint { margin:0; color:var(--color-gray-600); font-size:12px; line-height:1.5; }
.meal-plan-ai-modal__empty { display:grid; justify-items:start; gap:8px; padding:24px; border:1px solid var(--color-gray-200); border-radius:12px; background:var(--color-gray-50); }
.meal-plan-ai-modal__empty svg { color:var(--color-primary-hover); }
.meal-plan-ai-modal__empty strong { color:var(--color-gray-900); }
.meal-plan-ai-modal__empty p { margin:0 0 8px; color:var(--color-gray-600); }
.meal-plan-cell-portions { display:grid; gap:16px; padding-top:16px; border-top:1px solid var(--color-gray-200); }
.meal-plan-portion-item { display:grid; gap:8px; }
.meal-plan-portion-name { font-size:12px; font-weight:600; line-height:1.5; color:var(--color-gray-700); }
.meal-plan-portion-controls { display:grid; grid-template-columns:80px minmax(0,1fr); gap:12px; align-items:end; }
.meal-plan-matrix-inspector .meal-plan-move-hint { margin:0; }
.meal-plan-is-dragging,.meal-plan-is-dragging * { cursor:grabbing!important; user-select:none!important; }
.meal-plan-matrix-page .is-moving { opacity:.45; }
.meal-plan-dish-select,.meal-plan-library-dish { user-select:none; }
@media(max-width:900px) {
 .meal-plan-matrix-inspector .erp-builder-settings-header { position:sticky; top:0; z-index:5; background:white; }
 .meal-plan-matrix-inspector>.erp-filter-tabs { top:60px; background:white; }
 .meal-plan-matrix-toolbar { display:grid; grid-template-columns:36px minmax(0,1fr) auto; flex-basis:100%; }
 .meal-plan-builder-stages { max-width:100%; }
 .meal-plan-matrix-toolbar>.erp-filter-tabs { grid-column:1 / 3; grid-row:1; }
 .meal-plan-matrix-toolbar #mealPlanMatrixPanelToggle { grid-column:3; grid-row:1; margin:0; }
 .meal-plan-matrix-toolbar .meal-plan-ai-open { grid-column:3; grid-row:3; margin:0; }
 .meal-plan-matrix-period { grid-column:1 / -1; grid-row:2; justify-content:space-between; }
 .meal-plan-matrix-period>.pure-date-picker { flex:1; min-width:0; }
 .meal-plan-matrix-period .date-picker-trigger { width:100%; white-space:nowrap; justify-content:center; }
 .meal-plan-repeat-week { grid-column:2; justify-self:start; }
 #mealPlanMatrixUndo { grid-column:1; }
 .meal-plan-matrix-period .date-picker-trigger { padding-inline:8px; }
 .meal-plan-matrix-period .date-picker-trigger svg { display:none; }
 .meal-plan-matrix-period .meal-plan-toolbar-icon { width:36px; min-width:36px; }
 .meal-plan-matrix-toolbar>.erp-filter-tabs { flex:1 1 auto; }
 .meal-plan-nutrition-grid { display:flex; overflow-x:auto; }
 .meal-plan-nutrition-grid .stat-card-u { min-width:0; }
 .meal-plan-matrix-table { min-width:1250px; }
 .meal-plan-matrix-table th:first-child,.meal-plan-matrix-table .meal-plan-slot-heading { width:80px; min-width:80px; }
 .meal-plan-matrix-dish .meal-plan-dish-remove { flex-basis:44px; min-height:44px; height:44px; width:44px; }
 .meal-plan-matrix-inspector { background:white; }
 .meal-plan-matrix-inspector :is(.form-input,.pure-dropdown-trigger,.meal-plan-day-action) { height:44px; min-height:44px; }
 .meal-plan-ai .btn { min-height:44px; }
 .meal-plan-matrix-inspector .erp-builder-settings-body { padding-bottom:32px; }
}
@media(max-width:620px) {
 .meal-plan-ai-modal { width:100%; min-height:100%; max-height:100%; }
 .meal-plan-ai-modal .onboarding-flow__top { padding:12px 18px 0; }
 .meal-plan-ai-modal__body { padding:18px 18px 22px; }
 .meal-plan-ai-modal__body h2 { font-size:21px; }
 .meal-plan-ai-modal__intro { align-items:flex-start; }
 .meal-plan-ai-modal__intro .erp-icon-tile { --erp-icon-tile-size:36px; flex-basis:36px; }
 .meal-plan-ai-modal__content { gap:18px; margin-top:20px; }
 .meal-plan-ai-modal__section-head { display:grid; gap:4px; }
 .meal-plan-ai-modal__target { grid-template-columns:minmax(0,1fr); gap:12px; }
 .meal-plan-ai-modal__range { grid-template-columns:minmax(0,1fr); gap:6px; }
 .meal-plan-ai-modal__range-fields { gap:6px; }
 .meal-plan-ai-modal__price { grid-template-columns:minmax(0,1fr); }
 .meal-plan-ai-modal__price .form-input,.meal-plan-ai-modal__price small { grid-column:1; grid-row:auto; }
 .meal-plan-ai-modal__slots button { flex:1 1 auto; }
 .meal-plan-ai-modal .form-input,.meal-plan-ai-modal .pure-dropdown-trigger,.meal-plan-ai-modal__slots button { min-height:44px; }
 .meal-plan-ai-modal__result { align-items:stretch; flex-direction:column; gap:14px; }
 .meal-plan-ai-modal__result .btn { width:100%; min-height:44px; justify-content:center; }
 .meal-plan-ai-modal__footer { display:grid; gap:10px; padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px)); }
 .meal-plan-ai-modal__footer .onboarding-flow__continue { width:100%; min-height:44px; }
}

/* Subscriber forms use shared card headers/bodies; these rules only arrange fields and disclosures. */
.meal-plan-client-page .meal-plan-client-primary { display:grid; gap:16px; }
.meal-plan-client-page .meal-plan-client-primary>.card { margin:0; }
.meal-plan-client-page .form-group { display:grid; gap:6px; min-width:0; margin-bottom:0; }
.meal-plan-client-page .form-label { margin:0; }
.meal-plan-client-page .form-group>small { color:var(--color-gray-500); font-size:12px; line-height:1.5; }
.meal-plan-client-page .meal-plan-client-menu-association { grid-column:1 / -1; }
.meal-plan-client-page .meal-plan-restriction-list--primary { min-height:0; margin:0 0 12px; }
.meal-plan-client-inline-form { display:grid; gap:12px; padding:12px 0; }
.meal-plan-client-page .meal-plan-action-form>.btn { width:auto; justify-self:start; }
.meal-plan-client-page .meal-plan-action-details[open] { padding-bottom:0; }
.meal-plan-client-page .meal-plan-empty-note { border:0; background:transparent; padding:0 0 12px; }

/* Journey customer registry: compare compact rows, then inspect one customer's history. */
.mj-page .mj-customers { min-width:0; }
.mj-page .mj-customer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.mj-page .mj-customer-toolbar h2,.mj-page .mj-activity-heading h2 { margin:0; font-size:20px; font-weight:600; color:var(--mj-ink); }
.mj-page .mj-customer-toolbar h2 span,.mj-page .mj-activity h3 span { color:var(--mj-muted); font-weight:400; margin-inline-start:6px; }
.mj-page .mj-customer-toolbar p { margin:6px 0 0; color:var(--mj-secondary); font-size:13px; }
.mj-page .mj-customer-toolbar > .btn { flex:none; }
.mj-page .mj-customer-search { display:flex; gap:12px; align-items:center; margin:12px 0 16px; }
.mj-page .mj-customer-search .ds-search-wrap { width:320px; max-width:100%; }
.mj-page .mj-customer-search .pure-dropdown { width:220px; max-width:100%; }
.mj-page #mjCustomerFilters { max-width:100%; overflow-x:auto; }
.mj-page #mjCustomerRows[aria-busy="true"] { opacity:.65; pointer-events:none; }
.mj-page #mjCustomersTable td { height:64px; }
.mj-page #mjCustomersTable .mj-customer-identity { display:flex; flex-direction:column; gap:4px; min-width:0; white-space:normal; }
.mj-page #mjCustomersTable .mj-customer-identity strong { font-size:13px; font-weight:600; color:var(--mj-ink); overflow-wrap:anywhere; }
.mj-page #mjCustomersTable .mj-customer-identity small { font-size:12px; color:var(--mj-muted); }
.mj-page #mjCustomersTable .mj-cell-copy { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; overflow-wrap:anywhere; line-height:1.45; font-size:13px; color:var(--mj-body); }
.mj-page #mjCustomersTable .mj-customer-situation { color:var(--mj-secondary); }
.mj-page .mj-customer-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; color:var(--mj-secondary); font-size:12px; }
.mj-page .mj-customer-footer .erp-pagination { margin:0; padding:0; border:0; }
.mj-page .mj-customer-mobile { display:none; }
.mj-page .mj-activity { max-width:1440px; margin-inline:auto; }
.mj-page .mj-activity-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 18px; }
.mj-page .mj-activity-heading h2 { overflow-wrap:anywhere; }
.mj-page .mj-activity-heading p { margin:6px 0 0; font-size:13px; color:var(--mj-muted); }
.mj-page .mj-activity-summary { display:grid; grid-template-columns:minmax(180px,1fr) minmax(240px,2fr) minmax(180px,1fr); gap:20px; padding:20px; border:1px solid var(--mj-line); border-radius:12px; background:var(--color-gray-50); }
.mj-page .mj-activity-summary > div { display:flex; flex-direction:column; gap:7px; }
.mj-page .mj-activity-summary span { font-size:12px; color:var(--mj-secondary); }
.mj-page .mj-activity-summary strong { font-size:14px; font-weight:500; line-height:1.5; color:var(--mj-ink); }
.mj-page .mj-activity-columns { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px; margin:24px 0; }
.mj-page .mj-activity h3 { font-size:15px; font-weight:600; color:var(--mj-ink); margin:0 0 16px; }
.mj-page .mj-activity-message { border:1px solid var(--mj-line); border-radius:12px; padding:16px; margin-bottom:12px; background:var(--bg-secondary, #fff); }
.mj-page .mj-activity-message-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.mj-page .mj-activity-message-head > span:first-child { display:flex; align-items:center; gap:8px; }
.mj-page .mj-activity-message strong { font-size:14px; font-weight:600; color:var(--mj-ink); }
.mj-page .mj-activity-message p,.mj-page .mj-activity-timeline p { color:var(--mj-secondary); font-size:13px; line-height:1.6; margin:8px 0 0; overflow-wrap:anywhere; }
.mj-page .mj-activity-message blockquote { padding:12px 16px; margin:14px 0; border-inline-start:3px solid var(--mj-line); background:var(--color-gray-50); font-size:14px; line-height:1.6; white-space:pre-wrap; }
.mj-page .mj-diagnostics { margin-top:12px; font-size:12px; }
.mj-page .mj-diagnostics summary,.mj-page .mj-customer-actions summary { cursor:pointer; min-height:44px; align-content:center; color:var(--mj-secondary); }
.mj-page .mj-activity-timeline { padding:0 0 0 16px; margin:0; list-style:none; }
.mj-page .mj-activity-timeline li { position:relative; border-inline-start:1px solid var(--mj-line); padding:0 0 22px 22px; }
.mj-page .mj-activity-timeline li::before { content:''; width:9px; height:9px; position:absolute; left:-5px; top:5px; background:var(--color-gray-300); border-radius:50%; }
.mj-page .mj-activity-timeline time { display:block; font-size:12px; color:var(--mj-muted); margin-bottom:6px; }
.mj-page .mj-activity-timeline strong { font-size:13px; font-weight:600; color:var(--mj-ink); }
.mj-page .mj-customer-actions { border-top:1px solid var(--mj-line); padding-top:8px; }
.mj-page .mj-customer-actions > p { font-size:13px; color:var(--mj-secondary); }
@media(max-width:767px) {
  .mj-page .mj-customer-toolbar { align-items:flex-start; gap:10px; }
  .mj-page .mj-customer-toolbar h2 { font-size:18px; }
  .mj-page .mj-customer-search { flex-direction:column; align-items:stretch; }
  .mj-page .mj-customer-search .ds-search-wrap,.mj-page .mj-customer-search .pure-dropdown { width:100%; }
  .mj-page .mj-customer-desktop:has(tbody tr[role="button"]) { display:none; }
  .mj-page .mj-customer-mobile { display:flex; flex-direction:column; border:1px solid var(--mj-line); border-radius:12px; overflow:hidden; }
  .mj-page .mj-customer-mobile-row { display:flex; flex-direction:column; gap:10px; width:100%; padding:16px; border:0; border-bottom:1px solid var(--mj-line); background:var(--bg-secondary, #fff); text-align:start; cursor:pointer; font:inherit; color:var(--mj-body); }
  .mj-page .mj-customer-mobile-row:last-child { border-bottom:0; }
  .mj-page .mj-customer-mobile-row:hover { background:var(--color-gray-50); }
  .mj-page .mj-customer-mobile-row:focus-visible { outline:2px solid var(--mj-accent); outline-offset:-3px; }
  .mj-page .mj-customer-mobile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .mj-page .mj-customer-mobile-top > strong { font-size:14px; font-weight:600; min-width:0; overflow-wrap:anywhere; color:var(--mj-ink); }
  .mj-page .mj-customer-mobile-top > .erp-badge { flex:none; }
  .mj-page .mj-customer-mobile-step { font-size:13px; }
  .mj-page .mj-customer-mobile-reason { font-size:12px; line-height:1.5; color:var(--mj-secondary); }
  .mj-page .mj-customer-mobile-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--mj-muted); font-size:11px; }
  .mj-page .mj-customer-mobile-bottom > span:last-child { display:flex; gap:5px; align-items:center; color:var(--mj-accent); }
  .mj-page .mj-customer-footer .erp-pagination { width:100%; flex-wrap:wrap; }
  .mj-page .mj-activity-heading { flex-wrap:wrap; }
  .mj-page .mj-activity-summary,.mj-page .mj-activity-columns { grid-template-columns:1fr; gap:20px; }
}

@media(max-width:767px) {
  .mj-page.mj-customer-view .mj-editor-tabs { min-width:0; overflow-x:auto; }
  .mj-page.mj-customer-view #mjTabs { flex-wrap:nowrap; width:max-content; max-width:none; }
  .mj-page.mj-customer-view #mjTabs > button { flex:none; }
  .mj-page #mjActivityTitle:focus:not(:focus-visible) { outline:none; }
}

/* Journey results: immediate purchases first, equal-window comparison below. */
.mj-page .mj-results { width:100%; min-width:0; }
.mj-page .mj-results-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.mj-page .mj-results h2 { margin:0; color:var(--mj-ink); font-size:20px; font-weight:600; line-height:1.4; }
.mj-page .mj-results h3 { margin:0; color:var(--mj-ink); font-size:16px; font-weight:600; line-height:1.5; }
.mj-page .mj-results h3>span { margin-left:6px; color:var(--mj-muted); font-size:13px; font-weight:500; }
.mj-page .mj-results h4 { margin:0 0 10px; color:var(--mj-secondary); font-size:13px; font-weight:600; }
.mj-page .mj-results p { margin:6px 0 0; color:var(--mj-secondary); font-size:13px; line-height:1.6; }
.mj-page .mj-result-metrics { margin-bottom:16px; }
.mj-page .mj-result-metrics .stat-card-u__sub { color:var(--mj-secondary); }
.mj-page .mj-result-metrics .stat-card-u__metric-icon { width:36px; height:36px; border-radius:10px; justify-content:center; margin-bottom:12px; }
.mj-page .mj-result-metrics .stat-card-u--green .stat-card-u__metric-icon { background:var(--color-success-light); }
.mj-page .mj-result-metrics .stat-card-u--blue .stat-card-u__metric-icon { background:var(--color-primary-light); }
.mj-page .mj-results .mj-result-customer-link { font-weight:500; white-space:normal; overflow-wrap:anywhere; }
.mj-page .mj-result-metrics .stat-card-u__value { color:var(--mj-ink); font-size:26px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.mj-page .mj-results-message { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:12px 16px; border:1px solid var(--mj-line); border-radius:10px; background:var(--color-gray-50); font-size:13px; }
.mj-page .mj-results-message>span { display:flex; align-items:center; flex:1; gap:8px; min-width:220px; line-height:1.6; }
.mj-page .mj-results-message svg { flex-shrink:0; }
.mj-page .mj-result-section { margin-top:28px; padding-top:24px; border-top:1px solid var(--mj-line); }
.mj-page .mj-result-section .mj-results-heading { margin-bottom:16px; }
.mj-page .mj-results a { display:inline-flex; align-items:center; gap:4px; min-height:44px; color:var(--mj-accent); text-decoration:none; }
.mj-page .mj-results a:hover { text-decoration:underline; }
.mj-page .mj-results a:focus-visible { outline:2px solid var(--mj-accent); outline-offset:3px; border-radius:4px; }
.mj-page .mj-result-sub { display:block; margin-top:3px; color:var(--mj-muted); font-size:12px; line-height:1.5; }
.mj-page .mj-result-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px; background:var(--color-gray-50); border-radius:10px; text-align:center; }
.mj-page .mj-result-empty strong { color:var(--mj-ink); font-size:14px; }
.mj-page .mj-result-method { margin-top:14px!important; }
.mj-page .mj-results-mobile { display:none; }
.mj-page #mjResultsError:not(:empty) { padding:12px 0; font-size:13px; color:var(--mj-secondary); }
@media(max-width:1100px) { .mj-page .mj-result-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) {
 .mj-page .mj-results-heading { flex-wrap:wrap; gap:12px; }
 .mj-page .mj-results h2 { font-size:18px; }
 .mj-page .mj-result-metrics { gap:10px; }
 .mj-page .mj-result-metrics .stat-card-u { padding:14px; }
 .mj-page .mj-result-metrics .stat-card-u__value { font-size:21px; }
 .mj-page .mj-result-metrics .stat-card-u__metric-icon { width:32px; height:32px; border-radius:8px; margin-bottom:10px; }
 .mj-page .mj-results-message>span { min-width:0; flex-basis:100%; }
 .mj-page .mj-results-desktop { display:none; }
 .mj-page .mj-results-mobile { display:block; }
 .mj-page .mj-purchase-mobile { padding:14px 0; border-top:1px solid var(--mj-line); }
 .mj-page .mj-purchase-mobile>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
 .mj-page .mj-purchase-mobile .mj-result-customer-link { min-width:0; }
 .mj-page .mj-purchase-mobile strong { white-space:nowrap; font-size:15px; color:var(--mj-ink); }
 .mj-page .mj-purchase-mobile time { font-size:12px; color:var(--mj-secondary); }
}

/* Experiment comparison keeps the two assigned groups beside each other. */
.mj-page .mj-comparison-status { flex-shrink:0; padding:6px 10px; border-radius:8px; color:var(--mj-secondary); background:var(--color-gray-100); font-size:12px; line-height:1.5; }
.mj-page .mj-comparison-periods { margin:0 0 12px; }
.mj-page #mjComparisonPeriods { flex-wrap:wrap; }
.mj-page #mjComparisonPeriods > button { min-height:44px; }
.mj-page .mj-comparison-context { margin-bottom:16px!important; }
.mj-page .mj-comparison-wait { display:flex; align-items:center; gap:8px; padding:12px 14px; margin-bottom:16px!important; border:1px solid var(--mj-line); border-radius:10px; background:var(--color-gray-50); }
.mj-page .mj-comparison-wait svg { flex-shrink:0; }
.mj-page .mj-comparison-explanation { margin-top:14px; color:var(--mj-secondary); font-size:13px; }
.mj-page .mj-comparison-explanation summary { cursor:pointer; min-height:44px; padding:12px 0; color:var(--mj-body); font-weight:500; }
.mj-page .mj-comparison-mobile-row { padding:14px 0; border-top:1px solid var(--mj-line); }
.mj-page .mj-comparison-mobile-row>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.mj-page .mj-comparison-mobile-row small { display:block; margin-bottom:6px; color:var(--mj-muted); font-size:12px; }
.mj-page .mj-comparison-value { font-variant-numeric:tabular-nums; }
.mj-page .mj-comparison-mobile-row .mj-comparison-value { font-size:18px; font-weight:600; color:var(--mj-ink); }
.mj-page .mj-comparison-mobile-row>p { padding-top:8px; }

/* Optional experiment settings and purchase drilldown filters. */
.mj-page .mj-control-setting { padding-bottom:20px; border-bottom:1px solid var(--mj-line); }
.mj-page .mj-control-setting h2 { margin:0 0 6px; font-size:18px; color:var(--mj-ink); }
.mj-page .mj-control-setting h2 .mj-eyebrow { margin-left:8px; vertical-align:middle; }
.mj-page .mj-control-setting .erp-toggle { flex-shrink:0; min-height:44px; }
.mj-page .mj-control-setting p { color:var(--mj-secondary); font-size:14px; line-height:1.6; }
.mj-page .mj-control-allocation { display:flex; align-items:center; gap:24px; }
.mj-page .mj-control-allocation .form-group { width:240px; flex-shrink:0; margin-bottom:0; }
.mj-page .mj-control-off { padding:12px 16px; border-radius:10px; background:var(--color-gray-50); }
.mj-page #mjPurchaseFilters { flex-wrap:wrap; margin-bottom:12px; }
.mj-page #mjPurchaseFilters>button { min-height:44px; }
@media(max-width:767px) {
 .mj-page .mj-control-setting .mj-results-heading { display:block; }
 .mj-page .mj-control-setting .erp-toggle { margin-top:12px; }
 .mj-page .mj-control-allocation { display:block; }
 .mj-page .mj-control-allocation .form-group { width:100%; }
}

/* Shared VAT / Corporate Tax source analysis; zero-centered signed monthly bars. */
.tax-source-months, .tax-source-calculation { margin: 0 0 16px; border: 1px solid var(--color-gray-200); border-radius: 12px; background: var(--color-white, #fff); }
.tax-source-months__hint { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--color-gray-500); }
.tax-source-months__body { padding: 0 16px 14px; }
.tax-source-months__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--color-gray-600); font-size: 12px; }
.tax-source-month { width: 100%; display: grid; grid-template-columns: 106px minmax(40px,1fr) 158px; align-items: center; gap: 12px; border: 0; border-radius: 6px; background: transparent; padding: 9px 8px; cursor: pointer; text-align: left; color: var(--color-gray-700); }
.tax-source-month:hover, .tax-source-month.is-selected { background: var(--color-gray-100); }
.tax-source-month.is-selected { outline: 1px solid var(--color-primary-hover); }
.tax-source-month__label { font-size: 13px; font-weight: 500; }
.tax-source-month__label small { display: block; font-size: 11px; font-weight: 400; color: var(--color-gray-500); }
.tax-source-month > strong { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.tax-source-month__track { position: relative; height: 24px; }
.tax-source-month__track::before { content: ''; position: absolute; left: 50%; top: 0; height: 100%; width: 1px; background: var(--color-gray-300); }
.tax-source-month__track > span { position: absolute; top: 4px; height: 16px; border-radius: 3px; background: var(--color-primary-hover); }
.tax-source-month.is-negative .tax-source-month__track > span { background: var(--color-gray-600); }
.tax-source-months__total { display: flex; justify-content: space-between; padding: 12px 8px 0; border-top: 1px solid var(--color-gray-200); font-size: 13px; }
.tax-source-calculation { padding: 16px; }
.tax-source-calculation h3 { font-size: 15px; margin: 0 0 8px; }
.tax-source-calculation p { font-size: 13px; color: var(--color-gray-600); }
.tax-source-calculation dl { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; margin: 16px 0 0; }
.tax-source-calculation dt { font-size: 12px; color: var(--color-gray-500); }
.tax-source-calculation dd { margin: 4px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .tax-source-months__body { padding: 0 8px 12px; }
  .tax-source-month { grid-template-columns: 72px minmax(24px,1fr) 116px; gap: 6px; padding: 8px 4px; }
  .tax-source-month > strong { font-size: 12px; }
  .tax-source-months__hint { display: none; }
  .tax-source-months__heading { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .pnl-drilldown-metric strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: 16px; }
  .vat-report-card { min-width: 0; }
}

/* VAT income sources: keyboard/touch-accessible month and order-type amounts. */
.vat-revenue-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:4px 8px; border:0; border-radius:6px; background:transparent; color:var(--color-primary-hover); font:inherit; font-variant-numeric:tabular-nums; cursor:pointer; text-align:inherit; }
.vat-revenue-link:hover, .vat-revenue-link.is-selected { background:var(--color-gray-100); }
.vat-revenue-link:focus-visible { outline:2px solid var(--color-primary-hover); outline-offset:2px; }
.vat-sales-breakdown { min-width:0; }
.vat-sales-breakdown .erp-panel__content { min-width:0; }
.vat-sales-breakdown .erp-panel__title { margin:0; font-size:15px; font-weight:600; }
.vat-sales-breakdown .pure-dropdown-trigger { min-height:44px; }
.vat-sales-breakdown .corporate-tax-optional { min-width:0; }
@media(max-width:600px) {
  .vat-sales-breakdown .erp-grid { grid-template-columns:minmax(0,1fr); }
}

/* Meal Plan delivery release controls, shared by every branch. */
.meal-plan-queue-settings{border-bottom:1px solid var(--color-gray-200);margin:0 0 20px;padding:0 0 12px;color:var(--color-gray-700)}
.meal-plan-queue-settings summary{min-height:44px;cursor:pointer;font-size:14px;font-weight:600;padding:12px 0}
.meal-plan-queue-settings summary span{margin-left:12px;font-weight:400;color:var(--color-gray-600)}
.meal-plan-queue-settings p{font-size:13px;line-height:1.6;color:var(--color-gray-600);margin:8px 0 16px;max-width:80ch}
.meal-plan-queue-fields{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;border:0;padding:0;margin:16px 0;min-width:0}
.meal-plan-queue-fields .form-group{flex:1 1 240px;max-width:360px;margin:0;min-width:0}
.meal-plan-queue-fields :is(.form-input,.pure-dropdown-trigger,.btn){min-height:44px}
.meal-plan-queue-settings [hidden]{display:none!important}
@media(max-width:700px){.meal-plan-queue-settings summary span{display:block;margin:6px 0 0 18px}.meal-plan-queue-fields{flex-direction:column;align-items:stretch}.meal-plan-queue-fields .form-group{flex:auto;max-width:none}.meal-plan-queue-fields>.btn{width:100%}}

/* Meal Planner: ingredient cost stays alongside per-person nutrition. */
.meal-plan-cost-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin-top:8px; color:var(--color-gray-600); font-size:12px; }
.meal-plan-cost-line strong { font-weight:600; color:var(--color-gray-800); }
.meal-plan-cost-line small { flex-basis:100%; font-size:11px; color:var(--color-gray-500); }

.meal-plan-pricing-target { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:12px 20px; border-bottom:1px solid var(--color-gray-200); font-size:12px; }
.meal-plan-pricing-target>div { flex:1 1 240px; min-width:0; }
.meal-plan-pricing-target strong { font-weight:600; }
.meal-plan-pricing-target small { display:block; margin-top:4px; color:var(--color-gray-500); line-height:1.5; }
.meal-plan-target-price { display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:6px; font-size:12px; color:var(--color-gray-600); }
.meal-plan-target-price small { flex-basis:100%; font-size:11px; }
@media(max-width:600px) { .meal-plan-pricing-target { padding:12px; } .meal-plan-pricing-target button { min-height:44px; } }

@media(max-width:600px) {
 .pricing-targets-page button,
 .pricing-targets-page .pure-dropdown-trigger,
 .pricing-targets-page .form-input { min-height:44px; }
}

/* Shared Production Sheet workspace: existing HoreX controls and Precision tables. */
.production-sheet-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
.production-sheet-body { margin-top:16px; min-width:0; }
.production-sheet-prep { border-bottom:1px solid var(--color-gray-200); padding:12px 0; }
.production-sheet-prep summary { cursor:pointer; min-height:44px; font-size:14px; font-weight:600; color:var(--color-gray-900); }
.production-sheet-prep summary span { margin-left:12px; font-weight:400; color:var(--color-gray-600); }
.production-sheet-page :is(.btn,.pure-dropdown-trigger,.date-picker-trigger,.erp-filter-tabs__tab) { min-height:44px; }
.production-sheet-page button.calendar-day { font:inherit; border:0; padding:0; min-height:40px; }
.production-sheet-page button.calendar-day:not(.selected):not(.today):not(:hover) { background:transparent; }
.production-sheet-page .mobile-card__title { white-space:normal; }
.production-sheet-page .mobile-card__row { gap:12px; align-items:flex-start; }
.production-sheet-page .mobile-card__value { min-width:0; overflow-wrap:anywhere; }
@media (max-width:640px) {
  .production-sheet-filters { grid-template-columns:minmax(0,1fr); gap:12px; }
  .production-sheet-prep summary span { display:block; margin:4px 0 8px; }
}

/* Central Kitchen uses shared controls and Precision tables; items stay vertical. */
.ck-page { --ck-gap:16px; color:var(--color-gray-700); }
.ck-workflow-steps { display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0; list-style:none; }
.ck-workflow-steps li { display:flex; align-items:center; gap:12px; font-size:13px; }
.ck-workflow-steps li+li::before { content:'→'; color:var(--color-gray-400); }
.ck-settings-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.ck-settings-summary p { font-size:13px; line-height:1.5; margin:0 0 8px; }
.ck-readiness { margin:20px 0; }
.ck-catalog-settings>summary { cursor:pointer; min-height:44px; display:list-item; align-content:center; font-size:15px; font-weight:600; color:var(--color-gray-900); }
.ck-catalog-content { display:flex; flex-direction:column; gap:16px; margin-top:12px; }
.ck-catalog-content>.ck-hint { margin:0; }
.ck-catalog-content>#ckChoices:empty { display:none; }
.ck-catalog-content>#ckSettingsCatalog { border-top:1px solid var(--color-gray-200); padding-top:20px; margin-top:8px; }
.ck-catalog-content>#ckSettingsCatalog>h3 { margin:0; }
.ck-readiness .ck-item-row>svg { width:20px; height:20px; color:var(--color-primary); flex-shrink:0; }
@media(max-width:640px) { .ck-settings-summary { grid-template-columns:minmax(0,1fr); gap:16px; } }
.ck-order-items { margin:24px 0; min-width:0; }
.ck-order-items h3 { margin:0; font-size:15px; font-weight:600; }
.ck-order-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:16px 0; }
.ck-clear-quantities { margin-left:auto; }
.ck-order-quantity { display:flex; align-items:center; gap:8px; width:140px; max-width:100%; }
.ck-order-quantity .form-input { width:100%; min-width:0; font-variant-numeric:tabular-nums; }
.ck-order-quantity>span { font-size:12px; color:var(--color-gray-500); flex-shrink:0; }
.ck-table-reason { display:block; white-space:normal; font-size:12px; color:var(--color-gray-600); margin-top:4px; }
.ck-item-picker .ck-item-row>.btn { flex-shrink:0; }
.ck-item-picker>.ck-fieldset>.ds-search-wrap { max-width:none; }
.ck-order-page .erp-data-table-wrap { margin:0; }
@media(max-width:640px) {
  .ck-order-page .erp-page-header__controls { display:none; }
  .ck-order-toolbar .btn { flex:1 1 auto; }
  .ck-order-toolbar .ck-clear-quantities { flex-basis:100%; margin-left:0; }
  .ck-order-mobile-line .ck-item-name,.ck-item-picker .ck-item-row .ck-item-name { flex:1 1 120px; }
  .ck-order-mobile-line .ck-order-quantity,.ck-item-picker .ck-order-quantity { width:112px; }
  .ck-order-mobile-line>.ck-remove { margin-left:0; }
  .ck-order-mobile-line .ck-line-progress { flex-basis:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .ck-order-mobile-line .ck-line-progress dd { font-size:12px; }
}
.ck-fieldset { border:0; padding:0; margin:0; min-width:0; }
.ck-fieldset:disabled { opacity:.72; }
.ck-fields,.ck-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ck-gap); margin:16px 0; }
.ck-filters { max-width:600px; }
.ck-section { background:var(--color-white,#fff); border:1px solid var(--color-gray-200); border-radius:12px; padding:20px; margin:20px 0; }
.ck-section h3 { font-size:15px; font-weight:600; color:var(--color-gray-900); margin:0 0 12px; }
.ck-section-heading,.ck-picker-head,.ck-save-bar { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ck-picker-head { padding:12px 0; }
.ck-picker-head .ds-search-wrap { flex:1; }
.ck-item-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--color-gray-200); }
.ck-item-name { flex:1; min-width:0; overflow-wrap:anywhere; }
.ck-item-name strong,.ck-order-link strong { display:block; font-size:13px; font-weight:600; color:var(--color-gray-900); }
.ck-item-name small,.ck-order-link small { display:block; margin-top:5px; font-size:12px; line-height:1.5; color:var(--color-gray-600); }
.ck-remove { width:44px; min-width:44px; padding:10px; }
.ck-hint { color:var(--color-gray-600); font-size:13px; line-height:1.5; }
.ck-value { min-height:44px; display:flex; align-items:center; }
.ck-checks { display:flex; gap:12px 20px; flex-wrap:wrap; }
.ck-checks .checkbox-wrapper { min-height:44px; }
.ck-save-bar { padding:16px 0; justify-content:flex-end; }
.ck-save-bar .ck-hint { margin-right:auto; }
.ck-save-bar>div:first-child { margin-right:auto; display:grid; gap:3px; }
.ck-cost-total { display:block; margin:12px 0 0; color:var(--color-gray-900); font-size:14px; line-height:1.45; font-weight:650; font-variant-numeric:tabular-nums; }
.ck-save-bar .ck-cost-total { margin:0; }
.ck-line-cost { min-width:100px; text-align:right; font-size:13px; font-variant-numeric:tabular-nums; }
.ck-status-line { margin:16px 0; }
.ck-wide { width:100%; margin-top:12px; }
.ck-settings-item { display:grid; grid-template-columns:minmax(160px,1fr) 120px 120px 44px; align-items:center; gap:12px; border-bottom:1px solid var(--color-gray-200); padding:16px 0; }
.ck-line-progress { display:flex; flex-wrap:wrap; gap:16px; margin:0; }
.ck-line-progress dt { font-size:12px; color:var(--color-gray-600); }
.ck-line-progress dd { margin:4px 0 0; font-size:13px; font-variant-numeric:tabular-nums; }
.ck-mobile { display:none; }
.ck-page :is(.btn,.form-input,.pure-dropdown-trigger,.date-picker-trigger,.erp-filter-tabs__tab) { min-height:44px; }
.ck-page .date-picker-wrapper .calendar-day { font:inherit; padding:0; border:0; min-height:40px; }
.ck-page .calendar-day:not(.selected):not(.today):not(:hover) { background:transparent; }
.ck-page [hidden] { display:none!important; }
.ck-order-link { display:flex; align-items:center; gap:12px; width:100%; border:0; border-bottom:1px solid var(--color-gray-200); background:var(--color-white,#fff); text-align:left; padding:16px; cursor:pointer; }
.ck-order-link>span:first-child { flex:1; min-width:0; }
.ck-order-link svg { flex-shrink:0; width:16px; }
@media(max-width:640px) {
  .ck-page .erp-page-header__back { width:44px; height:44px; min-width:44px; min-height:44px; flex-shrink:0; }
  .ck-desktop { display:none; }
  .ck-mobile { display:block; }
  .ck-fields,.ck-filters { grid-template-columns:minmax(0,1fr); }
  .ck-section { padding:16px; }
  .ck-item-row { flex-wrap:wrap; }
  .ck-item-name { flex-basis:100%; }
  .ck-item-row>.ck-remove { margin-left:auto; }
  .ck-save-bar { align-items:stretch; }
  .ck-save-bar .ck-hint { flex-basis:100%; }
  .ck-save-bar>.btn { flex:1; }
  .ck-settings-item { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; }
  .ck-settings-item>.ck-item-name { grid-column:1/-1; }
  .ck-settings-item .form-input { min-width:0; width:100%; }
  .ck-picker-head { align-items:stretch; }
  .ck-picker-head>.ds-search-wrap { flex-basis:100%; }
  .ck-order-link { flex-wrap:wrap; }
  .ck-order-link>span:first-child { flex-basis:75%; }
}
@media(min-width:641px) {
  .ck-save-bar>.btn { flex:0 0 auto; width:auto; }
}
/* CK inline confirmation uses the shared Precision table and form controls. */
.ck-confirm-workspace { display:flex; flex-direction:column; gap:16px; }
.ck-confirm-workspace .ck-workspace-title, .ck-confirm-workspace .ck-hint, .ck-confirm-workspace .ck-filters { margin:0; }
.ck-confirm-workspace #ckDemandRows { margin-bottom:16px; }
.ck-confirm-error { display:block; white-space:normal; color:var(--color-danger-dark); font-size:12px; margin-top:6px; }
.ck-confirm-error:empty, .ck-confirm-warning:empty { display:none; }
.ck-confirm-warning { display:block; white-space:normal; color:var(--color-warning-dark); font-size:12px; line-height:1.5; margin-top:6px; }
.ck-confirm-details { margin-top:8px; padding:6px 10px; min-height:32px; font-size:12px; gap:6px; }
.ck-confirm-details svg { width:14px; height:14px; }
.ck-confirm-branch { padding-left:18px; border-left:2px solid var(--color-gray-200); }
.ck-confirm-branch-row .ck-table-reason { margin-top:4px; }
.ck-confirm-workspace .ck-order-quantity { flex-wrap:nowrap; gap:8px; }
.ck-confirm-workspace .ck-order-quantity .form-input { min-width:72px; }
.ck-confirm-workspace .ck-confirm-pending { display:inline-flex; white-space:nowrap; }
.ck-confirm-workspace .ck-confirm-pending > span { display:inline; }
.ck-confirm-save { position:sticky; bottom:0; z-index:3; padding:16px 0 8px; background:var(--color-white,#fff); border-top:1px solid var(--color-gray-200); }
.ck-confirm-mobile-item { display:grid; gap:10px; padding:16px 0; border-bottom:1px solid var(--color-gray-200); }
.ck-confirm-mobile-item>strong { font-size:14px; font-weight:600; }
.ck-confirm-mobile-line { display:grid; gap:8px; }
.ck-confirm-mobile-line+.ck-confirm-mobile-line { padding-top:12px; border-top:1px solid var(--color-gray-200); }
.ck-confirm-mobile-line .ck-line-progress { margin:8px 0; }
.ck-confirm-mobile-line .ck-order-quantity { width:100%; }
@media(max-width:640px) { .ck-confirm-details, .ck-confirm-mobile-line .form-input { min-height:44px; } .ck-confirm-save { position:static; } }
.ck-stock-summary { padding:20px 0; gap:20px 32px; border-bottom:1px solid var(--color-gray-200); }
.ck-planning-layout { display:grid; grid-template-columns:264px minmax(0,1fr); gap:24px; align-items:start; }
.ck-planning-main { min-width:0; padding:18px; border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm); }
.ck-workspace-title { font-size:16px; font-weight:600; margin:0 0 16px; color:var(--color-gray-900); }
.ck-product-title { font-size:15px; font-weight:600; margin:24px 0 0; color:var(--color-gray-900); }
.ck-branch-nav { min-width:0; }
.ck-branch-mobile { display:none; }
.ck-branch-nav nav { display:grid; gap:16px; margin-top:16px; }
.ck-branch-link { width:100%; text-align:left; align-items:flex-start; border-radius:var(--radius-lg); color:var(--color-gray-900); font:inherit; cursor:pointer; }
.ck-branch-link:hover { border-color:var(--color-gray-400); box-shadow:var(--shadow-sm); }
.ck-branch-link.is-active { border-color:var(--color-primary-hover); box-shadow:inset 0 0 0 1px var(--color-primary-hover); }
.ck-branch-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; width:100%; }
.ck-branch-title svg { flex:none; width:16px; height:16px; margin-top:2px; stroke-width:1.75; color:var(--color-gray-400); }
.ck-branch-link.is-active .ck-branch-title svg { color:var(--color-primary-hover); }
.ck-branch-link strong { display:block; font-weight:600; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.ck-branch-link small { display:block; color:var(--color-gray-500); font-size:13px; line-height:1.4; }
.ck-branch-link:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.ck-nav-history { display:flex; justify-content:space-between; width:100%; min-height:44px; padding:8px 0; color:var(--color-primary-hover); font-size:13px; }
.ck-nav-history svg { width:16px; height:16px; stroke-width:1.75; }
.ck-confirm-section { margin:20px 0; }
@media(max-width:1024px) {
  .ck-planning-layout { grid-template-columns:minmax(0,1fr); }
  .ck-branch-nav nav { display:none; }
  .ck-branch-mobile { display:block; }
  .ck-branch-link { width:auto; flex:1 1 160px; margin:0; }
  .ck-branch-nav>.form-label,.ck-branch-nav>.ds-search-wrap { display:none; }
  .ck-branch-nav nav>.ck-wide { width:auto; margin:0; }
}
@media(max-width:640px) {
  .ck-page .erp-page-header__controls { flex-wrap:wrap; overflow:visible; }
  .ck-page .erp-page-header__controls .btn { flex:1 1 auto; white-space:normal; }
}
.ck-stock-summary dd { font-size:16px; font-weight:600; color:var(--color-gray-900); }
.ck-allocation-row { display:flex; align-items:center; gap:20px; padding:16px 0; border-bottom:1px solid var(--color-gray-200); }
.ck-allocation-row label { width:144px; flex-shrink:0; }
.ck-allocation-row .form-input { width:100%; }
.ck-ingredients summary { min-height:44px; display:list-item; padding:12px 0; cursor:pointer; font-size:13px; font-weight:600; }
.ck-demand-link>span { overflow-wrap:anywhere; }
@media(max-width:640px) {
  .ck-allocation-row { flex-wrap:wrap; gap:12px; }
  .ck-allocation-row .ck-item-name { flex-basis:100%; }
  .ck-allocation-row label { width:100%; }
  .ck-demand-link>span:nth-child(2) { flex:1; }
}
.ck-production-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; border-bottom:1px solid var(--color-gray-200); padding:16px 0; }
.ck-production-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ck-output-editor { padding:16px 0; }
.ck-output-editor label { display:block; max-width:240px; }
.ck-output-editor .btn { margin:8px 8px 0 0; }
@media(max-width:640px) { .ck-production-row .ck-item-name { flex-basis:100%; } .ck-production-actions { width:100%; } .ck-production-actions .btn { flex:1; } }

/* Central Kitchen selection uses the same neutral settings cards as terminal setup. */
.ck-kitchen-picker { max-width:420px; margin:0 0 20px; }
.ck-kitchen-card { min-width:0; display:flex; flex-direction:column; }
.ck-kitchen-card .erp-config-card__icon { background:var(--color-primary-light); color:var(--color-primary-hover); }
.ck-kitchen-card .erp-config-card__title { margin:0; color:var(--color-gray-900); overflow-wrap:anywhere; }
.ck-kitchen-card-status { margin:16px 0; }
.ck-kitchen-card-details { display:grid; gap:6px; margin-bottom:20px; }
.ck-kitchen-card-details .ck-hint { font-size:13px; line-height:1.5; }
.ck-kitchen-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:16px; border-top:1px solid var(--color-gray-200); }
.ck-delivery-schedule { padding:20px 0; border-bottom:1px solid var(--color-gray-200); }
.ck-delivery-schedule:last-child { border-bottom:0; padding-bottom:0; }
.ck-delivery-fields { display:grid; grid-template-columns:minmax(180px,2fr) repeat(3,minmax(140px,1fr)) 44px; gap:16px; align-items:end; margin-bottom:16px; }
.ck-delivery-fields > * { min-width:0; }
@media(max-width:1100px) { .ck-delivery-fields { grid-template-columns:1fr 1fr; } }
@media(max-width:640px) { .ck-delivery-fields { grid-template-columns:1fr; } .ck-delivery-fields .ck-remove { justify-self:end; } }
@media(max-width:640px) {
  .ck-kitchen-picker { max-width:none; }
  .ck-kitchen-card-actions .btn { flex:1; }
}

/* CK v4 05: week, four summary cards, Attention and tomorrow. */
.ck-overview { display:flex; flex-direction:column; gap:24px; }
.ck-overview>.erp-page-header,.ck-overview .ck-kitchen-picker { margin-bottom:0; }
.ck-week { display:flex; align-items:center; gap:8px; }
.ck-week-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; flex:1; min-width:0; }
.ck-week-day { border:0; background:transparent; border-radius:10px; padding:12px; text-align:left; cursor:pointer; color:var(--color-gray-900); font:inherit; min-width:0; }
.ck-week-day:hover,.ck-week-day.is-active { background:var(--color-primary-light,var(--color-gray-100)); }
.ck-week-day:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.ck-week-day strong { display:block; font-size:13px; font-weight:600; }
.ck-week-day small { display:block; font-size:12px; color:var(--color-gray-500); margin:6px 0; }
.ck-week-arrow { flex-shrink:0; padding:10px; }
.ck-overview-columns { display:grid; grid-template-columns:minmax(0,2.15fr) minmax(280px,1fr); gap:24px; align-items:start; }
.ck-overview .ck-section { margin:0; }
.ck-attention-row { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--color-gray-100); }
.ck-attention-row .btn { flex-shrink:0; }
.ck-overview-empty { padding:28px 0; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.ck-overview-empty svg { color:var(--color-primary); width:24px; height:24px; }
.ck-overview-note { margin-top:20px; }
.ck-tomorrow-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--color-gray-100); }
.ck-tomorrow-progress { appearance:none; border:0; height:5px; border-radius:4px; width:100%; background:var(--color-gray-200); }
.ck-tomorrow-progress::-webkit-progress-bar { background:var(--color-gray-200); border-radius:4px; }
.ck-tomorrow-progress::-webkit-progress-value { background:var(--color-primary); border-radius:4px; }
.ck-tomorrow-progress::-moz-progress-bar { background:var(--color-primary); border-radius:4px; }
@media(max-width:1100px) {
  .ck-week { flex-wrap:wrap; }
  .ck-week-days { order:4; flex-basis:100%; }
}
@media(max-width:700px) {
  .ck-overview-columns { grid-template-columns:minmax(0,1fr); }
  .ck-week-days { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px; }
  .ck-week-day { min-width:112px; scroll-snap-align:start; }
  .ck-attention-row { flex-wrap:wrap; }
  .ck-attention-row .ck-item-name { flex-basis:calc(100% - 58px); }
  .ck-attention-row .btn { margin-left:50px; }
}

.ck-kitchen-card .erp-config-card__title { font-size:16px; font-weight:600; }
.ck-overview>.stat-grid { margin-bottom:0; }
.ck-attention-icon { --erp-icon-tile-bg:var(--color-warning-light); color:var(--color-warning-dark); flex-shrink:0; }
@media(max-width:700px) {
  .ck-overview .erp-page-header__controls { flex-wrap:wrap; overflow:visible; }
  .ck-overview .erp-page-header__controls .btn { flex:1 1 auto; }
  .ck-overview .erp-page-header__controls .btn-gradient { flex-basis:100%; justify-content:center; }
}

/* Pen CK Catalog 02–04: bounded, independently scrolling two-pane selection. */
.ck-catalog-modal .erp-dynamic-modal__body { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.ck-catalog-scope { padding:0 24px 16px; margin:0; }
.ck-catalog-columns { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); min-height:0; flex:1; height:min(62vh,620px); }
.ck-catalog-pane { display:flex; flex-direction:column; min-width:0; min-height:0; padding:20px 24px; gap:16px; }
.ck-catalog-pane h4 { font-size:14px; font-weight:600; color:var(--color-gray-900); margin:0; }
.ck-catalog-added { background:var(--color-gray-50); border-left:1px solid var(--color-gray-200); }
.ck-catalog-pane>.ck-hint { margin:0; }
.ck-catalog-scroll { flex:1; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
.ck-catalog-pane .ds-search-wrap { max-width:none; }
.ck-catalog-pane .ck-settings-item { display:grid; grid-template-columns:minmax(0,1fr) 84px 84px 44px; gap:10px; padding:14px 0; align-items:center; }
.ck-catalog-pane .ck-settings-item .ck-item-name { min-width:0; }
.ck-catalog-pane .ck-settings-item input { min-width:0; width:100%; }
.ck-catalog-pane .ck-settings-item .form-label { font-size:11px; }
.ck-catalog-pane :is(.ck-item-row,.ck-settings-item) { border-bottom:1px solid var(--color-gray-200); }
.ck-catalog-pane .ck-item-name strong { font-size:13px; font-weight:600; }
.ck-catalog-footer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 24px; border-top:1px solid var(--color-gray-200); background:var(--color-white,#fff); }
.ck-catalog-footer>.ck-hint { flex:1; margin:0; }
.ck-catalog-mobile-tabs { display:none; }
.ck-catalog-modal :is(.btn,.form-input,.erp-filter-tabs__tab) { min-height:44px; }
.ck-catalog-modal #ckCatalogFeedback:empty { display:none; }
@media(max-width:760px) {
  .ck-catalog-mobile-tabs { display:block; padding:0 16px 12px; }
  .ck-catalog-columns { display:flex; height:54dvh; }
  .ck-catalog-pane { width:100%; padding:16px; }
  .ck-catalog-pane:not(.is-current) { display:none; }
  .ck-catalog-added { border-left:0; }
  .ck-catalog-pane .ck-settings-item { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; }
  .ck-catalog-pane .ck-settings-item .ck-item-name { grid-column:1/-1; }
  .ck-catalog-footer { padding:16px; gap:8px; }
  .ck-catalog-footer>.ck-hint { flex-basis:100%; }
  .ck-catalog-footer>.btn { flex:1; }
  .ck-catalog-scope { padding:0 16px 12px; }
}

/* Branch ordering reuses the approved two-pane CK catalog composition. */
.ck-order-picker-panel { padding:0; overflow:hidden; }
.ck-order-picker-panel .ck-catalog-columns { height:min(62vh,620px); min-height:360px; }
.ck-picker-selected-row { display:grid; grid-template-columns:minmax(0,1fr) 140px 44px; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--color-gray-200); }
.ck-picker-selected-row .ck-item-name { min-width:0; overflow-wrap:anywhere; }
.ck-item-picker .ck-catalog-pane .erp-filter-tabs { margin:0; }
.ck-item-picker .ck-item-name { overflow-wrap:anywhere; }
@media(max-width:760px) {
  .ck-order-picker-panel .ck-catalog-mobile-tabs { padding-top:16px; }
  .ck-order-picker-panel .ck-catalog-columns { height:54dvh; min-height:360px; }
  .ck-picker-selected-row { grid-template-columns:minmax(0,1fr) 44px; }
  .ck-picker-selected-row .ck-item-name { grid-column:1/-1; }
  .ck-item-picker .ck-picker-selected-row .ck-order-quantity { width:100%; }
}

/* CK 4.1 photo policy, FSMS-style evidence control and camera review. */
.ck-photo-policy-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.ck-photo-policy-heading .ck-hint { margin:0; }
.ck-photo-rule-table { border:1px solid var(--color-gray-200); border-radius:12px; overflow:visible; }
.ck-photo-rule { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,320px); align-items:center; gap:24px; padding:16px 20px; }
.ck-photo-rule+.ck-photo-rule { border-top:1px solid var(--color-gray-200); }
.ck-photo-rule strong { display:block; font-size:14px; font-weight:600; }
.ck-photo-rule small { display:block; font-size:12px; color:var(--color-gray-500); margin-top:4px; }
.ck-photo-control { display:flex; align-items:center; gap:16px; margin:16px 0; }
.ck-photo-control>img { width:112px; height:112px; object-fit:cover; border-radius:12px; border:1px solid var(--color-gray-200); }
.ck-photo-control>div { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.ck-photo-preview-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-width:112px; min-height:112px; padding:16px; background:var(--color-gray-50); border:1px solid var(--color-gray-200); border-radius:12px; color:var(--color-gray-500); }
.ck-photo-preview-tile>svg { width:28px; height:28px; }
.ck-camera-media { display:block; width:100%; max-height:55dvh; min-height:160px; object-fit:contain; background:var(--color-gray-900); border-radius:12px; }
.ck-camera-actions { display:flex; gap:12px; margin-top:16px; }
.ck-camera-actions>.btn { flex:1; min-height:44px; }
#ckPhotoUploadStatus { margin-top:12px; color:var(--color-gray-600); font-size:13px; }
@media(max-width:640px) {
  .ck-photo-policy-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .ck-photo-rule { grid-template-columns:minmax(0,1fr); gap:12px; padding:16px; }
}

.ck-weighing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:20px; }
.ck-weighing-grid .ck-section { margin:0; }
.ck-weighing-grid { margin-bottom:16px; }
.ck-weighing-grid~.ck-hint { margin-top:12px; }
[data-ck-settings-tab="photos"] .ck-section>.ck-hint { margin:12px 0; }

.ck-receipt-check { display:grid; gap:20px; }
.ck-receipt-check .ck-photo-control { margin:0; }

/* Approved CK cooking and delivery panels use shared controls and spacing. */
[data-ck-settings-tab="production"] h3,[data-ck-settings-tab="print"] h3 { margin:24px 0 12px; }
[data-ck-settings-tab="production"] h3:first-child,[data-ck-settings-tab="print"] h3:first-child { margin-top:0; }
.ck-execution-settings .ck-workflow-steps { padding-left:24px; display:grid; gap:12px; }
.ck-note { background:var(--color-white,#fff); color:var(--color-gray-900); padding:24px; border:1px solid var(--color-gray-200); text-align:center; margin-bottom:20px; }
.ck-note table { width:100%; border-collapse:collapse; margin:20px 0; text-align:left; }
.ck-note th,.ck-note td { padding:12px 0; border-bottom:1px solid var(--color-gray-200); }
.ck-note th:last-child,.ck-note td:last-child { text-align:right; }
.ck-note-qr { width:180px; margin:24px auto; }
.ck-camera-video { display:block; width:100%; max-height:55dvh; background:var(--color-gray-900); border-radius:12px; }
.ck-delivery-lookup { display:grid; gap:16px; }
.ck-delivery-lookup .ck-hint,.ck-delivery-lookup .ck-camera-actions { margin:0; }
.ck-delivery-lookup [hidden] { display:none!important; }
.ck-photo-thumb { width:112px; height:112px; object-fit:cover; border-radius:12px; }

.ck-recurring-form { display:grid;gap:20px; }
.ck-recurring-list { max-height:45dvh;overflow:auto; }
.ck-recurring-form details summary { cursor:pointer; }

.ck-execution-settings { display:grid;gap:16px; }
.ck-execution-settings p,.ck-execution-settings .ck-hint { margin:0; }
.ck-execution-settings h3:not(:first-child) { margin-top:8px; }

/* CK workspace roles remain visible instead of collapsing operational entry points. */
.ck-nav-section { margin-top:12px; opacity:1; color:var(--color-gray-500); }

/* Pen CK 4.4 N2 / v4 branch order: one bounded working surface. */
.ck-order-workspace { padding:20px; border:1px solid var(--color-gray-200); border-radius:12px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px; }
.ck-order-workspace>.ck-status-line,.ck-order-workspace>.ck-fields,.ck-order-workspace>.ck-hint,.ck-order-workspace>.ck-kitchen-picker,.ck-order-workspace>.ck-order-items { margin:0; }
.ck-order-workspace .ck-workspace-title { margin:0; }
.ck-order-navigation { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.ck-order-navigation>.ck-order-context { margin:0 0 0 auto; grid-template-columns:minmax(180px,240px) minmax(160px,200px); }
.ck-order-context .form-label { font-size:12px; }
.ck-order-workspace #ckFeedback:empty { display:none; }
.ck-order-workspace .ck-order-toolbar { margin:0 0 16px; }
.ck-order-workspace>.ck-save-bar { padding:0; }
.ck-order-note { font-size:13px; color:var(--color-gray-600); }
.ck-order-note summary { cursor:pointer; min-height:32px; align-content:center; }
.ck-order-note .form-input,.ck-order-note p { margin:8px 0 0; }
.ck-order-workspace .ck-order-quantity { position:relative; width:132px; }
.ck-order-workspace .ck-order-quantity .form-input { padding-right:40px; }
.ck-order-workspace .ck-order-quantity>span { position:absolute; right:12px; pointer-events:none; }
@media(max-width:640px) {
  .ck-order-workspace { padding:16px; }
  .ck-order-navigation .erp-filter-tabs { flex:1 1 100%; flex-wrap:wrap; }
  .ck-order-navigation>.ck-order-context { flex:1 1 100%; margin:0; grid-template-columns:minmax(0,1fr); }
  .ck-order-mobile-line .ck-line-progress { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* CK receipt: Pen R4, desktop detail grid and mobile quantity cards. */
.ck-delivery-register,.ck-receipt-panel,.ck-delivery-card { background:var(--color-white,#fff); border:1px solid var(--color-gray-200); border-radius:12px; box-shadow:var(--shadow-sm); padding:20px; }
.ck-delivery-register,.ck-receipt-panel { display:flex; flex-direction:column; gap:16px; min-width:0; }
.ck-delivery-register .ck-workspace-title,.ck-receipt-panel .ck-workspace-title,.ck-receipt-panel p,.ck-delivery-register>.ck-hint { margin:0; }
.ck-receipt-page #ckFeedback:empty { display:none; }
.ck-receipt-page .erp-detail-grid__aside { display:flex; flex-direction:column; gap:20px; }
.ck-receipt-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ck-print-status { display:flex; align-items:center; gap:12px; }
.ck-print-status .btn { flex-shrink:0; }
.ck-receipt-stack { display:grid; gap:12px; }
.ck-remainder-line { display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-size:13px; }
.ck-remainder-line>span { min-width:0; overflow-wrap:anywhere; }
.ck-remainder-line>strong { font-weight:600; white-space:nowrap; }
.ck-receipt-disclosure { border-top:1px solid var(--color-gray-200); }
.ck-receipt-disclosure summary { padding:12px 0; min-height:44px; cursor:pointer; font-size:13px; font-weight:600; color:var(--color-gray-600); }
.ck-receipt-disclosure summary:focus-visible { outline:2px solid var(--color-primary-hover); outline-offset:2px; border-radius:4px; }
.ck-receipt-disclosure .ck-receipt-stack { padding:0 0 12px; }
.ck-receipt-explanation { display:grid; gap:6px; font-size:13px; line-height:1.5; }
.ck-receipt-explanation strong { font-weight:600; }
.ck-receipt-difference { color:var(--color-warning-dark,#92400e); }
.ck-receipt-saved { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--color-gray-600); }
.ck-receipt-saved svg { width:16px; height:16px; flex-shrink:0; color:var(--color-success,#059669); stroke-width:1.75; }
.ck-receipt-photos { display:flex; flex-wrap:wrap; gap:12px; padding-bottom:12px; }
.ck-receipt-photos a { display:grid; gap:6px; font-size:12px; color:var(--color-gray-600); }
.ck-receipt-panel>.btn { align-self:flex-start; }
.ck-delivery-card { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.ck-delivery-card h3 { margin:0; font-size:13px; font-weight:600; }
.ck-delivery-card>.btn { align-self:stretch; }
.ck-receipt-item { padding:16px 0; border-top:1px solid var(--color-gray-200); display:grid; gap:12px; font-size:13px; }
.ck-receipt-item>strong { font-weight:600; }
.ck-receipt-item .ck-line-progress { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
@media(max-width:640px) {
  .ck-delivery-register,.ck-receipt-panel,.ck-delivery-card { padding:16px; }
  .ck-delivery-register { padding:0; border:0; box-shadow:none; background:transparent; }
  .ck-delivery-card:first-child { margin-top:0; }
  .ck-receipt-item:first-child { padding-top:0; border-top:0; }
  .ck-receipt-page .erp-detail-grid { gap:16px; }
  .ck-receipt-page .erp-detail-grid__aside { gap:16px; }
  .ck-receipt-actions>.btn { flex:1 1 auto; }
}

/* Terminal device sessions (Settings → Terminals) */
.erp-terminal-session__body { flex:1; min-width:0; }
.erp-terminal-device { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:4px; font-size:12px; color:var(--color-success-dark,#166534); }
.erp-terminal-device--compact { font-size:11px; gap:2px 6px; margin-top:2px; }
.erp-terminal-device svg { width:12px; height:12px; flex-shrink:0; }
.erp-terminal-device__label { font-weight:500; min-width:0; overflow-wrap:anywhere; }
.erp-terminal-device__code { font-family:'SF Mono',ui-monospace,monospace; font-size:11px; font-weight:600; padding:1px 6px; border-radius:var(--radius-sm,4px); background:var(--color-gray-100); color:var(--color-gray-700); white-space:nowrap; }
.erp-terminal-log { display:flex; flex-direction:column; gap:12px; }
.erp-terminal-log__current { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--color-gray-200); border-radius:var(--radius-lg,12px); background:var(--color-gray-50); }
.erp-terminal-log__current-icon { width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--color-success-light,#dcfce7); color:var(--color-success-dark,#166534); }
.erp-terminal-log__current-title { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:14px; font-weight:600; color:var(--color-gray-900); }
.erp-terminal-log__meta { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:12px; color:var(--color-gray-600); }
.erp-terminal-log__ua { margin-top:4px; font-size:11px; color:var(--color-gray-400); overflow-wrap:anywhere; }
.erp-terminal-log__current>.btn { flex-shrink:0; min-height:36px; }
.erp-terminal-log__section-title { font-size:13px; font-weight:600; color:var(--color-gray-700); }
.erp-terminal-log__note { display:block; margin-top:2px; font-size:11px; color:var(--color-gray-500); }
.erp-terminal-log__hint { font-size:12px; color:var(--color-gray-500); line-height:1.5; }
@media(max-width:640px) {
  .erp-terminal-log__current { flex-wrap:wrap; }
  .erp-terminal-log__current>.btn { width:100%; min-height:44px; justify-content:center; }
}

/* ==================== MEAL PLANS · Clients & packages (elevated cards) ==================== */
.mp-clients-stats{margin-bottom:16px}
.mp-clients-stat{cursor:pointer;transition:box-shadow .15s,transform .15s,border-color .15s}
.mp-clients-stat:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(15,23,42,.03),0 10px 28px rgba(30,64,175,.08)}
.mp-clients-stat.stat-card-u--active:hover{box-shadow:0 0 0 1px rgba(var(--color-primary-rgb),.9),0 10px 28px rgba(var(--color-primary-rgb),.18)}
.mp-clients-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:12px 16px;background:#fff;border:1px solid var(--color-gray-200);border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.025),0 8px 24px rgba(30,64,175,.045)}
.mp-clients-toolbar .ds-search-wrap{flex:1 1 280px}
.mp-clients-toolbar__hint{font-size:12px;color:var(--color-gray-500);white-space:nowrap}
.mp-client-list{display:grid;gap:12px}
.mp-client-card{display:grid;grid-template-columns:minmax(220px,1.35fr) minmax(170px,1fr) minmax(210px,1.15fr) auto;grid-template-areas:"who package next actions" "meta meta meta meta";column-gap:28px;row-gap:14px;align-items:center;padding:18px 22px;background:#fff;border:1px solid var(--color-gray-200);border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.025),0 8px 24px rgba(30,64,175,.045);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.mp-client-card:hover,.mp-client-card:focus-visible{transform:translateY(-1px);box-shadow:0 1px 2px rgba(15,23,42,.03),0 12px 32px rgba(30,64,175,.09);border-color:#c7d7fe;outline:none}
.mp-client-card.is-inactive{background:var(--color-gray-50)}
.mp-client-card.is-inactive .erp-avatar{filter:grayscale(1);opacity:.75}
.mp-client-card__who{grid-area:who;display:flex;align-items:center;gap:14px;min-width:0}
.mp-client-card__identity{min-width:0}
.mp-client-card__identity strong{display:block;font-size:15px;font-weight:600;color:var(--color-gray-900);line-height:1.35;overflow-wrap:anywhere}
.mp-client-card__identity small{display:block;font-size:12px;color:var(--color-gray-500);margin-top:2px;overflow-wrap:anywhere}
.mp-client-card__badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mp-client-card__label{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-gray-500);margin-bottom:4px}
.mp-client-card__package{grid-area:package;min-width:0}
.mp-client-card__kpi{display:flex;align-items:baseline;gap:6px}
.mp-client-card__kpi strong{font-size:24px;font-weight:700;line-height:1.1;color:var(--color-gray-900);letter-spacing:-.01em}
.mp-client-card__kpi span{font-size:13px;color:var(--color-gray-600)}
.mp-client-card__package .erp-progress-row{margin-top:8px}
.mp-client-card__package .erp-progress{height:6px}
.mp-client-card .erp-progress--warning{--erp-progress-bg:var(--color-warning-light,#fef3c7)}
.mp-client-card__package small,.mp-client-card__next small{display:block;font-size:12px;color:var(--color-gray-500);margin-top:6px;line-height:1.45}
.mp-client-card__next{grid-area:next;min-width:0}
.mp-client-card__next-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:28px}
.mp-client-card__next-row strong{font-size:15px;font-weight:600;color:var(--color-gray-900)}
.mp-client-card__actions{grid-area:actions;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-self:center;cursor:default}
.mp-client-card__actions .btn{min-height:36px;white-space:nowrap}
.mp-client-card__meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:12px;border-top:1px solid var(--color-gray-100);font-size:12px;color:var(--color-gray-600)}
.mp-client-card__meta>span{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.mp-client-card__meta svg{width:14px;height:14px;flex:none;color:var(--color-gray-400)}
.mp-client-card__meta>span.is-warning{color:var(--color-warning-dark)}
.mp-client-card__meta>span.is-warning svg{color:inherit}
@media(max-width:1180px){.mp-client-card{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"who package next" "actions actions actions" "meta meta meta"}.mp-client-card__actions{justify-content:flex-start}}
@media(max-width:700px){.mp-clients-stats{margin-bottom:12px}.mp-clients-toolbar{padding:10px 12px;border-radius:14px}.mp-clients-toolbar .ds-search-wrap{max-width:100%!important;width:100%}.mp-clients-toolbar__hint{white-space:normal}.mp-client-card{grid-template-columns:1fr;grid-template-areas:"who" "package" "next" "meta" "actions";padding:16px;column-gap:0;row-gap:14px;border-radius:14px}.mp-client-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mp-client-card__actions .btn{width:100%;min-height:44px;white-space:normal}.mp-client-card__actions .btn:only-child{grid-column:1/-1}}
/* Meal Plans · Automation disclosure (automatic planning + delivery queue) */
.meal-plan-automation-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;font-weight:600;color:var(--color-gray-900)}
.meal-plan-automation-title svg{width:16px;height:16px;color:var(--color-primary)}
.meal-plan-automation-title+.meal-plan-automation-title,.meal-plan-auto-form+.meal-plan-automation-title{margin-top:22px;padding-top:18px;border-top:1px solid var(--color-gray-200)}
.meal-plan-auto-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px;max-width:520px}
.meal-plan-auto-form .erp-toggle{min-height:36px}
@media(max-width:700px){.meal-plan-auto-form__row{grid-template-columns:1fr}}

/* Stock adjustment audit: cause, actor and physical effect stay adjacent. */
.stock-adjustment-cause { display: grid; gap: 6px; white-space: normal; overflow-wrap: anywhere; }
.stock-adjustment-cause + .stock-adjustment-cause { margin-top: 12px; }
.stock-adjustment-note { color: var(--color-gray-600); font-size: 12px; line-height: 1.5; white-space: normal; }
.stock-adjustment-product { display: grid; gap: 4px; padding: 8px 0; white-space: normal; overflow-wrap: anywhere; }
.stock-adjustment-product + .stock-adjustment-product { border-top: 1px solid var(--color-gray-200); }
.stock-adjustment-modal .erp-data-table td { vertical-align: top; }
#stockAdjustmentAudit table { table-layout: fixed; }
#stockAdjustmentAudit col:nth-child(1) { width: 42%; }
#stockAdjustmentAudit col:nth-child(2) { width: 23%; }
#stockAdjustmentAudit col:nth-child(3) { width: 35%; }
@media (max-width: 768px) {
  .stock-adjustment-modal .u-link-blue { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 768px) {
  #stockAdjustmentAudit, #stockAdjustmentAudit table, #stockAdjustmentAudit tbody, #stockAdjustmentAudit tr, #stockAdjustmentAudit td {
    display: block; width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; height: auto !important; max-height: none !important; overflow: visible !important;
  }
  #stockAdjustmentAudit colgroup, #stockAdjustmentAudit thead { display: none; }
  #stockAdjustmentAudit tbody tr { padding: 16px; border-bottom: 1px solid var(--color-gray-200); }
  #stockAdjustmentAudit tbody td { padding: 0 0 16px !important; border: 0; white-space: normal; }
  #stockAdjustmentAudit tbody td:last-child { padding-bottom: 0 !important; }
  #stockAdjustmentAudit tbody td:nth-child(2)::before { content: 'Who & when'; }
  #stockAdjustmentAudit tbody td:nth-child(3)::before { content: 'Stock change'; }
  #stockAdjustmentAudit tbody td::before { display: block; font-size: 12px; color: var(--color-gray-600); margin-bottom: 8px; }
}

/* Current stock is a compact metric; quantities and valuation live in its dialog. */
.pnl-current-stock { min-width: 0; max-width: 360px; margin-bottom: 24px; }
.pnl-stats-grid > .pnl-current-stock { max-width: none; margin-bottom: 0; }
.pnl-current-stock .stat-card-u { height: 100%; box-sizing: border-box; }
.pnl-current-stock .stat-card-u__value, .pnl-stock-total { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pnl-stock-summary { margin-bottom: 16px; }
.pnl-stock-summary p { margin: 8px 0; color: var(--color-gray-600); }
.pnl-stock-total { color: var(--color-gray-900); }
.pnl-stock-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
#pnlStockRows .erp-data-table-wrap { overflow-x: auto; }
.pnl-stock-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--color-primary-hover); font-weight: 600; text-decoration: none; }
.pnl-stock-link .erp-icon { flex-shrink: 0; }
.pnl-stock-link:hover { text-decoration: underline; }
.pnl-stock-sort { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; min-height: 32px; cursor: pointer; text-align: inherit; }
.pnl-stock-sort:focus-visible, .pnl-stock-link:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 768px) {
  .pnl-stock-controls > * { width: 100%; }
  .pnl-stock-sort, .pnl-stock-link { min-height: 44px; }
}
/* WhatsApp integration: each business number is a distinct sending line. */
.whatsapp-lines-card { margin-bottom: 18px; }
.whatsapp-lines-list { display: grid; gap: 0; }
.whatsapp-line-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-gray-200); }
.whatsapp-line-row:last-child { border-bottom: 0; }
.whatsapp-line-identity, .whatsapp-line-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.whatsapp-line-actions { flex-wrap: wrap; }
.whatsapp-line-identity strong, .whatsapp-line-identity small { display: block; }
.whatsapp-line-identity > div { min-width: 0; }
.whatsapp-line-identity strong { overflow-wrap: anywhere; }
.whatsapp-line-name-form:not([hidden]) { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--color-gray-200); }
.whatsapp-line-name-form .form-group { margin: 0; min-width: 0; }
.whatsapp-line-name-form .form-control { width: 100%; }
.whatsapp-line-name-form small { display: block; margin-top: 6px; font-size: 12px; }
.whatsapp-line-name-buttons { display: flex; align-items: center; gap: 8px; }
.whatsapp-line-name-error { grid-column: 1/-1; font-size: 13px; }
.whatsapp-line-identity strong { color: var(--color-gray-900); font-size: 14px; font-weight: 600; }
.whatsapp-line-identity small { color: var(--color-gray-600); font-size: 12px; margin-top: 3px; }
.whatsapp-line-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.whatsapp-line-empty p { margin: 0; color: var(--color-gray-600); }
@media (max-width: 768px) {
  .whatsapp-integration .erp-page-header__controls {
    flex-wrap: wrap;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }
  .whatsapp-line-row, .whatsapp-line-empty { align-items: stretch; flex-direction: column; }
  .whatsapp-line-actions { justify-content: space-between; }
  .whatsapp-line-actions .btn, .whatsapp-line-empty .btn { min-height: 44px; }
  .whatsapp-line-name-form:not([hidden]) { grid-template-columns: minmax(0,1fr); flex-basis: auto; }
  .whatsapp-line-name-form .form-control, .whatsapp-line-name-buttons .btn { min-height: 44px; }
}

/* Buyer price pages reuse the shared surface and registry components. */
.buyer-price-fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:16px}
.buyer-price-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.buyer-price-fields .form-group{margin:0}
.buyer-price-add{margin-bottom:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.buyer-price-add__hint{margin:0}
.buyer-pricing-page .erp-stack{gap:2px}
.buyer-picker-modal .ck-catalog-columns{height:min(66vh,640px)}
.buyer-picker-modal .ck-picker-selected-row .buyer-price-input{width:100%;min-width:0}
.buyer-picker-modal .ck-catalog-added{border-left:1px solid var(--color-gray-200)}
@media(max-width:760px){.buyer-picker-modal .ck-catalog-added{border-left:0}.buyer-picker-modal .ck-catalog-columns{height:60dvh}}
.buyer-price-input{width:120px;min-height:34px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:768px){.buyer-price-input{width:100%;text-align:left}}
.buyer-pricing-page .erp-detail-grid__aside{display:grid;gap:16px}
.buyer-pricing-page .erp-detail-grid > *{min-width:0}
.b2b-item-price-basis,.b2b-item-unit{display:block;color:var(--color-gray-600);font-size:12px;margin-top:8px}
@media(max-width:768px){.buyer-price-fields{grid-template-columns:1fr}}
@media(max-width:1024px){.buyer-pricing-page .erp-detail-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:768px){
  :is(.buyer-pricing-page,.purchase-approval-page,.transfer-detail-page,.bd-page) :is(.btn,.pure-dropdown-trigger,.form-input:not(textarea)){min-height:44px}
  :is(.buyer-pricing-page,.purchase-approval-page,.transfer-detail-page,.bd-page) .erp-page-header__back{width:44px;min-width:44px;height:44px}
  .purchase-approval-page .form-group:has(input[type="checkbox"]){min-height:44px}
}


/* ==================== MEAL PLANS REDESIGN (2026-10-03): stage timeline + day page ==================== */
.erp-stage-timeline{display:grid;grid-template-columns:repeat(var(--erp-stage-steps,6),minmax(0,1fr));gap:0}
.erp-stage-timeline__step{position:relative;min-width:0;padding-right:12px}
.erp-stage-timeline__rail{position:relative;height:24px;display:flex;align-items:center;margin-bottom:8px}
.erp-stage-timeline__rail::before{content:'';position:absolute;left:24px;right:-12px;top:11px;height:2px;background:var(--color-gray-200,#e2e8f0);border-radius:2px}
.erp-stage-timeline__step:last-child .erp-stage-timeline__rail::before{display:none}
.erp-stage-timeline__step.is-done .erp-stage-timeline__rail::before{background:var(--color-primary,#3b82f6)}
.erp-stage-timeline__dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--color-gray-300,#cbd5e1);color:var(--color-gray-400,#94a3b8)}
.erp-stage-timeline__dot svg{width:13px;height:13px}
.erp-stage-timeline__step.is-done .erp-stage-timeline__dot{background:var(--color-primary,#3b82f6);border-color:var(--color-primary,#3b82f6);color:#fff}
.erp-stage-timeline__step.is-current .erp-stage-timeline__dot{border-color:var(--color-primary,#3b82f6);color:var(--color-primary,#3b82f6);box-shadow:0 0 0 4px var(--color-primary-light,#dbeafe)}
.erp-stage-timeline__step.is-blocked .erp-stage-timeline__dot{border-color:var(--color-danger,#ef4444);color:var(--color-danger,#ef4444);box-shadow:0 0 0 4px #fee2e2}
.erp-stage-timeline__label{font-size:13px;font-weight:600;color:var(--color-gray-900,#0f172a);line-height:1.3}
.erp-stage-timeline__step.is-upcoming .erp-stage-timeline__label{color:var(--color-gray-500,#64748b);font-weight:500}
.erp-stage-timeline__time{font-size:12px;color:var(--color-gray-500,#64748b);margin-top:2px;line-height:1.35}
.erp-stage-timeline__step.is-current .erp-stage-timeline__time{color:var(--color-primary-dark,#1d4ed8);font-weight:500}
.erp-stage-timeline__step.is-blocked .erp-stage-timeline__time{color:#b91c1c;font-weight:500}
@media (max-width:900px){
  .erp-stage-timeline{grid-template-columns:1fr}
  .erp-stage-timeline__step{display:grid;grid-template-columns:24px 1fr;column-gap:12px;padding:0 0 14px}
  .erp-stage-timeline__rail{margin:0;height:auto;align-items:flex-start}
  .erp-stage-timeline__rail::before{left:11px;right:auto;top:24px;bottom:-14px;width:2px;height:auto}
  .erp-stage-timeline__step:last-child{padding-bottom:0}
}
.meal-plan-shell .erp-page-header{margin-bottom:16px}
.meal-plan-shell .erp-data-table-wrap{overflow-x:auto}
.meal-plan-shell .erp-grid>.erp-action-card{margin-block:0}
.meal-plan-stack{display:flex;flex-direction:column;gap:16px}
.meal-plan-menu-issues__list{list-style:none;margin:0;padding:0}
.meal-plan-menu-issues__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.meal-plan-menu-issues__row+.meal-plan-menu-issues__row{border-top:1px solid var(--color-gray-200,#e2e8f0)}
.meal-plan-menu-issues__row:first-child{padding-top:0}
.meal-plan-menu-issues__row:last-child{padding-bottom:0}
.meal-plan-menu-issues__copy{min-width:0}
.meal-plan-menu-issues__identity{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:13px}
.meal-plan-menu-issues__identity strong{font-weight:600;color:var(--color-gray-900,#0f172a)}
.meal-plan-menu-issues__identity span{color:var(--color-gray-500,#64748b);font-size:12px}
.meal-plan-menu-issues__copy p{margin:5px 0 0;color:var(--color-gray-600,#475569);font-size:12px;line-height:1.5}
.meal-plan-menu-issues__row>.btn{flex-shrink:0;white-space:nowrap;height:36px;min-height:36px;padding-block:0;font-size:12px}
@media(max-width:768px){
  .meal-plan-menu-issues__row{align-items:stretch;flex-direction:column;gap:12px}
  .meal-plan-menu-issues__row>.btn{height:44px;min-height:44px;justify-content:center}
}
.meal-plan-muted{color:var(--color-gray-500,#64748b);font-size:12px}
.meal-plan-cell-title{font-weight:600;color:var(--color-gray-900,#0f172a)}
.meal-plan-cell-sub{font-size:12px;color:var(--color-gray-500,#64748b);margin-top:1px}
.meal-plan-link{color:var(--color-primary-dark,#1d4ed8);text-decoration:none;font-weight:500}
.meal-plan-link:hover{text-decoration:underline}
.meal-plan-overview-day.is-today{border-color:#93c5fd;box-shadow:0 0 0 3px var(--color-primary-light,#dbeafe),var(--surface-shadow,0 8px 24px rgba(30,64,175,.045))}
.meal-plan-overview-day__facts{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--color-gray-500,#64748b)}
.meal-plan-overview-day__facts span{display:inline-flex;align-items:center;gap:4px;min-width:0}
.meal-plan-overview-day__facts svg{width:13px;height:13px;flex:0 0 13px}
.meal-plan-overview-day__facts .is-warn{color:#b45309}
.meal-plan-ready{display:flex;flex-direction:column;gap:8px}
.meal-plan-ready__row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--color-gray-200,#e2e8f0);border-radius:10px;background:var(--color-gray-50,#f8fafc)}
.meal-plan-ready__row.is-warning{background:#fffbeb;border-color:#fde68a}
.meal-plan-ready__row.is-danger{background:#fef2f2;border-color:#fecaca}
.meal-plan-ready__row.is-ok{background:#f0fdf4;border-color:#bbf7d0}
.meal-plan-ready__icon{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--color-gray-200,#e2e8f0);color:var(--color-gray-500,#64748b)}
.meal-plan-ready__icon svg{width:15px;height:15px}
.meal-plan-ready__row.is-warning .meal-plan-ready__icon{color:#b45309;border-color:#fde68a}
.meal-plan-ready__row.is-danger .meal-plan-ready__icon{color:#b91c1c;border-color:#fecaca}
.meal-plan-ready__row.is-ok .meal-plan-ready__icon{color:#15803d;border-color:#bbf7d0}
.meal-plan-ready__text{font-size:13px;color:var(--color-gray-900,#0f172a);min-width:0}
.meal-plan-ready__text small{display:block;color:var(--color-gray-500,#64748b);font-size:12px;margin-top:1px}
.meal-plan-ready__actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.meal-plan-ready__row{grid-template-columns:28px 1fr}.meal-plan-ready__actions{grid-column:2;justify-content:flex-start}}
.meal-plan-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.meal-plan-menu-slot{border:1px solid var(--color-gray-200,#e2e8f0);border-left:3px solid var(--meal-slot-color,#94a3b8);border-radius:12px;padding:12px 14px;background:#fff}
.meal-plan-menu-slot[data-slot="breakfast"]{--meal-slot-color:#f59e0b}.meal-plan-menu-slot[data-slot="lunch"]{--meal-slot-color:#3b82f6}.meal-plan-menu-slot[data-slot="dinner"]{--meal-slot-color:#8b5cf6}.meal-plan-menu-slot[data-slot="snack"]{--meal-slot-color:#10b981}.meal-plan-menu-slot[data-slot="dessert"]{--meal-slot-color:#f43f5e}
.meal-plan-menu-slot h4{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--color-gray-500,#64748b);display:flex;justify-content:space-between;gap:8px}
.meal-plan-menu-slot h4 span{font-weight:500;text-transform:none;letter-spacing:0}
.meal-plan-menu-dish{font-size:13px;color:var(--color-gray-900,#0f172a);display:flex;justify-content:space-between;gap:8px;padding:4px 0}
.meal-plan-menu-dish small{color:var(--color-gray-500,#64748b);white-space:nowrap}
.erp-action-list{display:flex;flex-direction:column;gap:2px;margin:-4px -6px 0}
.erp-action-list__item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 8px;border:0;border-radius:8px;background:none;text-align:left;font-size:13px;font-weight:500;line-height:1.3;font-family:inherit;color:var(--color-gray-900,#0f172a);cursor:pointer}
.erp-action-list__item:hover{background:var(--color-gray-100,#f1f5f9)}
.erp-action-list__item:disabled{opacity:.5;cursor:default}
.erp-action-list__item svg{width:16px;height:16px;color:var(--color-gray-500,#64748b);flex:0 0 16px}
.erp-action-list__item.is-danger{color:#b91c1c}
.erp-action-list__item.is-danger svg{color:#b91c1c}
.erp-action-list__item small{margin-left:auto;color:var(--color-gray-400,#94a3b8);font-weight:400}
.meal-plan-settings{max-width:960px}
.meal-plan-settings-form .form-group{margin-bottom:12px}
.meal-plan-sticky-confirm{display:none}
@media (max-width:900px){
  .meal-plan-sticky-confirm{display:block;position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(255,255,255,0),#fff 30%)}
  .meal-plan-sticky-confirm .btn{width:100%;justify-content:center;min-height:44px}
  .meal-plan-shell .erp-action-list__item{min-height:44px}
}

/* Meal Plans redesign (2026-10-03, round 2): day template page, menu KPIs, packages table */
.meal-plan-slot-list{gap:12px}
.meal-plan-slot-card{border:1px solid var(--color-gray-200,#e2e8f0);border-radius:12px;overflow:hidden;background:#fff}
.meal-plan-slot-card__head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;background:var(--color-gray-100,#f1f5f9);border-bottom:1px solid var(--color-gray-200,#e2e8f0);border-left:3px solid var(--meal-slot-color,#94a3b8);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--color-gray-600,#475569)}
.meal-plan-slot-card__head small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--color-gray-500,#64748b)}
.meal-plan-slot-card[data-slot="breakfast"]{--meal-slot-color:#f59e0b}.meal-plan-slot-card[data-slot="lunch"]{--meal-slot-color:#3b82f6}.meal-plan-slot-card[data-slot="dinner"]{--meal-slot-color:#8b5cf6}.meal-plan-slot-card[data-slot="snack"]{--meal-slot-color:#10b981}.meal-plan-slot-card[data-slot="dessert"]{--meal-slot-color:#f43f5e}
.meal-plan-slot-card .meal-plan-menu-item{display:grid;grid-template-columns:minmax(0,1fr) 110px 40px;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--color-gray-100,#f1f5f9)}
.meal-plan-slot-card .meal-plan-menu-item__recipe{grid-column:auto}
.meal-plan-slot-card .meal-plan-menu-item__remove{align-self:center}
.meal-plan-slot-card__rows:empty+.meal-plan-slot-card__add{border-top:0}
.meal-plan-slot-card__add{padding:6px 10px}
@media (max-width:640px){.meal-plan-slot-card .meal-plan-menu-item{grid-template-columns:minmax(0,1fr) 90px 40px;padding:8px 10px}}
.meal-plan-nutri-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.meal-plan-nutri-tiles div{padding:10px 6px;border:1px solid var(--color-gray-200,#e2e8f0);border-radius:10px;text-align:center;min-width:0}
.meal-plan-nutri-tiles strong{display:block;font-size:16px;font-weight:600;color:var(--color-gray-900,#0f172a);font-variant-numeric:tabular-nums}
.meal-plan-nutri-tiles small{font-size:10px;color:var(--color-gray-500,#64748b);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.meal-plan-dish-lines{display:flex;flex-direction:column;gap:6px}
.meal-plan-dish-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--color-gray-100,#f1f5f9);font-size:13px;color:var(--color-gray-900,#0f172a)}
.meal-plan-dish-line:last-child{border-bottom:0}
.meal-plan-dish-line>span:first-child{min-width:0}
.meal-plan-dish-line>span:first-child small{display:block;font-size:11px;color:var(--color-gray-500,#64748b)}
.meal-plan-dish-line .meal-plan-dish-kbju{display:inline-flex;gap:0;flex:0 0 auto}
.meal-plan-dish-line .meal-plan-dish-kbju>span{display:flex;flex-direction:column;align-items:center;min-width:34px;padding:0 4px;font-size:11px}
.meal-plan-dish-line .meal-plan-dish-kbju strong{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.meal-plan-dish-line .meal-plan-dish-kbju small{font-size:9px;color:var(--color-gray-400,#94a3b8);text-transform:uppercase}
.meal-plan-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
@media (max-width:900px){.meal-plan-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.meal-plan-kpi{padding:12px 14px;border:1px solid var(--color-gray-200,#e2e8f0);border-radius:12px;background:#fff;min-width:0}
.meal-plan-kpi small{display:block;font-size:12px;color:var(--color-gray-500,#64748b)}
.meal-plan-kpi strong{display:block;font-size:18px;font-weight:600;color:var(--color-gray-900,#0f172a);margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meal-plan-kpi strong em{font-style:normal;font-size:12px;font-weight:500;color:var(--color-gray-500,#64748b);margin-left:4px}
.meal-plan-kpi__note{font-size:11px;color:var(--color-gray-500,#64748b);margin-top:4px}
.meal-plan-kpi__note.is-warn{color:#b45309}
.meal-plan-packages-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.meal-plan-package-bar{min-width:90px;flex:0 0 90px}

.erp-detail-grid__aside .meal-plan-ready__row{grid-template-columns:28px 1fr}
.erp-detail-grid__aside .meal-plan-ready__actions{grid-column:2;justify-content:flex-start}

/* Meal Plans menu grid restyle (2026-10-03, quiet): slot accents, card dishes */
.meal-plan-matrix-table{min-width:860px}
.meal-plan-matrix-table thead th,.meal-plan-matrix-table thead th:first-child,.meal-plan-matrix-table .meal-plan-slot-heading{background:var(--color-gray-50,#f8fafc)}
.meal-plan-matrix-table thead th{border-bottom:2px solid var(--color-gray-200,#e2e8f0)}
.meal-plan-matrix-table thead th button{min-height:56px;padding:10px 12px}
.meal-plan-matrix-table thead th.is-selected{background:var(--primary-50,#eff6ff)}
.meal-plan-matrix-table .meal-plan-slot-heading{padding:12px 10px;border-bottom:1px solid var(--color-gray-200,#e2e8f0)}
.meal-plan-slot-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--color-gray-600,#475569)}
.meal-plan-slot-dot{width:8px;height:8px;border-radius:50%;background:var(--meal-slot-color,#94a3b8);flex:0 0 8px}
.meal-plan-matrix-table tr[data-slot="breakfast"],.meal-plan-slot-label[data-slot="breakfast"]{--meal-slot-color:#f59e0b}
.meal-plan-matrix-table tr[data-slot="lunch"],.meal-plan-slot-label[data-slot="lunch"]{--meal-slot-color:#3b82f6}
.meal-plan-matrix-table tr[data-slot="dinner"],.meal-plan-slot-label[data-slot="dinner"]{--meal-slot-color:#8b5cf6}
.meal-plan-matrix-table tr[data-slot="snack"],.meal-plan-slot-label[data-slot="snack"]{--meal-slot-color:#10b981}
.meal-plan-matrix-table tr[data-slot="dessert"],.meal-plan-slot-label[data-slot="dessert"]{--meal-slot-color:#f43f5e}
.meal-plan-matrix-table td[data-menu-date]{border-bottom:1px solid var(--color-gray-200,#e2e8f0)}
.meal-plan-matrix-table td.is-active{background:var(--primary-50,#eff6ff)}
.meal-plan-matrix-cell{min-height:84px;gap:6px}
.meal-plan-matrix-dish{padding:6px 6px 6px 7px;border:1px solid var(--color-gray-200,#e2e8f0);border-left:3px solid var(--meal-slot-color,#94a3b8);border-radius:8px;background:#fff;align-items:center}
.meal-plan-matrix-dish:hover{border-color:var(--color-gray-300,#cbd5e1);border-left-color:var(--meal-slot-color,#94a3b8);box-shadow:0 1px 2px rgba(15,23,42,.06)}
.meal-plan-matrix-dish .meal-plan-dish-select{display:flex;align-items:flex-start;gap:4px;min-width:0;flex:1 1 auto;padding:0;border:0;background:none;text-align:left;cursor:grab;font:inherit;color:inherit}
.meal-plan-matrix-dish .meal-plan-dish-select>svg{width:12px;height:12px;flex:0 0 12px;margin-top:3px;color:var(--color-gray-300,#cbd5e1)}
.meal-plan-dish-copy{display:block;min-width:0}
.meal-plan-dish-copy>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;font-weight:600;line-height:1.3;color:var(--color-gray-900,#0f172a)}
.meal-plan-dish-copy>small{display:block;font-size:11px;color:var(--color-gray-500,#64748b);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meal-plan-matrix-dish .meal-plan-dish-remove{flex:0 0 22px;width:22px;height:22px;min-height:22px;border-radius:4px;color:var(--color-gray-400,#94a3b8)}
.meal-plan-matrix-dish .meal-plan-dish-remove:hover{background:#fee2e2;color:#b91c1c}
.meal-plan-cell-add{font-size:12px;font-weight:500;color:var(--color-gray-400,#94a3b8)}
td[data-menu-date]:hover .meal-plan-cell-add,td.is-active .meal-plan-cell-add{color:var(--color-primary-dark,#1d4ed8)}
.meal-plan-matrix-daily-totals td{background:var(--color-gray-50,#f8fafc);border-top:2px solid var(--color-gray-200,#e2e8f0);padding:10px 12px}
.meal-plan-pricing-target{padding:8px 20px;font-size:12px}
.meal-plan-pricing-target small{margin-top:2px;line-height:1.4}
/* day template page: one quiet dish table */
.meal-plan-dish-table{border:1px solid var(--color-gray-200,#e2e8f0);border-radius:12px;overflow:hidden;background:#fff}
.meal-plan-dish-table__head,.meal-plan-dish-table .meal-plan-menu-item{display:grid;grid-template-columns:150px minmax(0,1fr) 100px 72px 40px;gap:10px;align-items:center;padding:8px 12px}
.meal-plan-dish-table__head{background:var(--color-gray-50,#f8fafc);border-bottom:1px solid var(--color-gray-200,#e2e8f0);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--color-gray-500,#64748b)}
.meal-plan-dish-table .meal-plan-menu-item{border-bottom:1px solid var(--color-gray-100,#f1f5f9)}
.meal-plan-dish-table .meal-plan-menu-item>.form-group{min-width:0;margin:0}
.meal-plan-dish-table .meal-plan-menu-item__recipe{grid-column:auto}
.meal-plan-dish-table .meal-plan-menu-item__remove{align-self:center}
.meal-plan-menu-item__kcal{font-size:13px;font-variant-numeric:tabular-nums;color:var(--color-gray-700,#334155)}
.meal-plan-dish-table__empty{padding:22px 12px;font-size:13px;color:var(--color-gray-500,#64748b);text-align:center}
.meal-plan-dish-table__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--color-gray-50,#f8fafc)}
@media (max-width:700px){.meal-plan-dish-table__head{display:none}.meal-plan-dish-table .meal-plan-menu-item{grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"meal remove" "recipe recipe" "portions kcal"}.meal-plan-dish-table .meal-plan-menu-item__meal{grid-area:meal}.meal-plan-dish-table .meal-plan-menu-item__recipe{grid-area:recipe}.meal-plan-dish-table .meal-plan-menu-item__portions{grid-area:portions}.meal-plan-menu-item__kcal{grid-area:kcal;text-align:right}.meal-plan-dish-table .meal-plan-menu-item__remove{grid-area:remove}}

/* ===== Group Supply redesign (2026-10-04): phone card tables, readiness list, timeline phone fix ===== */
.erp-data-cards{display:flex;flex-direction:column;gap:10px}
.erp-data-card{border:1px solid var(--color-gray-200,#e2e8f0);border-radius:12px;padding:12px 14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.erp-data-card--link{cursor:pointer}
.erp-data-card--link:active{background:var(--color-gray-50,#f8fafc)}
.erp-data-card__head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.erp-data-card__title{min-width:0;font-weight:600;color:var(--color-gray-900,#0f172a)}
.erp-data-card__head+.erp-data-card__facts{margin-top:10px;padding-top:10px;border-top:1px solid var(--color-gray-100,#f1f5f9)}
.erp-data-card__facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0;font-size:13px}
.erp-data-card__facts>div{min-width:0}
.erp-data-card__facts>div.is-wide{grid-column:1/-1}
.erp-data-card__facts dt{font-size:11px;color:var(--color-gray-500,#64748b);text-transform:uppercase;letter-spacing:.03em;margin-bottom:1px}
.erp-data-card__facts dd{margin:0;overflow-wrap:anywhere}
.erp-data-card__facts dd input.form-input,.erp-data-card__facts dd .pure-dropdown{width:100%;min-height:44px}
.erp-data-card__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.erp-data-cards__empty{padding:16px;color:var(--color-gray-500,#64748b);text-align:center}
.erp-data-card.is-issue{background:#fffbeb;border-color:#fde68a}
.erp-readiness{display:flex;flex-direction:column;gap:8px}
.erp-readiness__row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--color-gray-200,#e2e8f0);border-radius:10px;background:var(--color-gray-50,#f8fafc)}
.erp-readiness__row.is-warning{background:#fffbeb;border-color:#fde68a}
.erp-readiness__row.is-blocker{background:#fef2f2;border-color:#fecaca}
.erp-readiness__row.is-ok{background:#f0fdf4;border-color:#bbf7d0}
.erp-readiness__icon{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--color-gray-200,#e2e8f0);color:var(--color-gray-500,#64748b)}
.erp-readiness__icon svg{width:15px;height:15px}
.is-warning .erp-readiness__icon{color:#b45309;border-color:#fde68a}
.is-blocker .erp-readiness__icon{color:#b91c1c;border-color:#fecaca}
.is-ok .erp-readiness__icon{color:#15803d;border-color:#bbf7d0}
.erp-readiness__text{font-size:13px;color:var(--color-gray-900,#0f172a);min-width:0}
.erp-readiness__text small{display:block;color:var(--color-gray-500,#64748b);font-size:12px;margin-top:1px}
.erp-readiness__actions{display:flex;gap:6px}
@media (max-width:640px){.erp-readiness__row{grid-template-columns:28px 1fr}.erp-readiness__actions{grid-column:2}}
/* renderStageTimeline below 900px: the step grid has two columns but three children; keep the time in the text column */
@media (max-width:900px){.erp-stage-timeline__rail{grid-row:1/3}.erp-stage-timeline__label,.erp-stage-timeline__time{grid-column:2}}
/* Tables inside detail panels scroll sideways instead of clipping headers */
.erp-detail-grid__main .erp-data-table-wrap,.erp-detail-grid__aside .erp-data-table-wrap{max-width:100%}
.erp-detail-grid__main,.erp-detail-grid__aside,.erp-panel-card,.erp-action-card{min-width:0}
.erp-stage-chip{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--color-gray-100,#f1f5f9);color:var(--color-gray-600,#475569);margin-left:6px;vertical-align:middle}
.erp-stage-chip.is-warn{background:#fef3c7;color:#b45309}.erp-stage-chip.is-danger{background:#fee2e2;color:#b91c1c}.erp-stage-chip.is-ok{background:#dcfce7;color:#15803d}
.erp-sticky-primary{display:none}
@media (max-width:900px){.erp-sticky-primary{display:block;position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(255,255,255,0),#fff 30%)}.erp-sticky-primary .btn{width:100%;justify-content:center;min-height:44px}}

/* Central Kitchen supply terms, history tabs and delivery timeline (2026-10-04) */
.ck-supply-editor{border:1px solid #93c5fd;background:#eff6ff;border-radius:12px;padding:14px 16px;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.ck-supply-editor h4{margin:0;font-size:14px;font-weight:600}
.ck-supply-editor .ck-hint{margin:0}
.ck-supply-vat{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ck-supply-vat label{display:flex;flex-direction:column;gap:4px;max-width:160px}
#ckSupplyTermsTable tr.is-selected td{background:#eff6ff}
.ck-history-tabs{margin:12px 0}
.ck-page .ck-delivery-timeline{margin:12px 0 16px}

/* Standalone regrading uses the shared header, panels and table surfaces. */
.stock-regrading-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:stretch; }
.stock-regrading-page .erp-panel-card { margin-block:0; }
.stock-regrading-layout > aside { display:flex; min-width:0; }
.stock-regrading-layout > aside > .erp-panel-card { width:100%; }
.stock-regrading-summary > .erp-summary-rows { margin-block:0; font-variant-numeric:tabular-nums; }
.stock-regrading-summary > .erp-inline-notice { margin-bottom:0; }
.stock-regrading-page :is(input.form-input,.pure-dropdown-trigger,.date-picker-trigger) { box-sizing:border-box; height:40px; min-height:40px; }
.stock-regrading-main { display:grid; gap:16px; min-width:0; }
.stock-regrading-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.stock-regrading-fields > *, .stock-regrading-page .pure-dropdown { min-width:0; }
.stock-regrading-page .pure-dropdown-trigger .dd-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stock-regrading-history { display:grid; gap:8px; font-size:12px; }
.stock-regrading-details { display:grid; grid-template-columns:minmax(0,2fr) minmax(150px,1fr) minmax(120px,1fr); gap:16px; }
.stock-regrading-details > * { min-width:0; }
.stock-regrading-line-side { display:grid; grid-template-columns:minmax(0,1fr) 90px; gap:12px; align-items:start; }
.stock-regrading-line-side > * { min-width:0; }
.stock-regrading-line-error { color:var(--color-danger); font-size:12px; font-weight:400; text-align:left; margin:8px 0 0; }
.stock-regrading-line-error:empty { display:none; }
.stock-regrading-add { display:flex; gap:12px; align-items:end; }
.stock-regrading-add label { width:90px; }
.stock-regrading-add .btn { flex-shrink:0; }
@media(max-width:1100px) {
  .stock-regrading-details { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .stock-regrading-details > :first-child { grid-column:1/-1; }
}
@media(max-width:768px) {
  .stock-regrading-layout,.stock-regrading-fields,.stock-regrading-details { grid-template-columns:minmax(0,1fr); }
  .stock-regrading-page .btn,.stock-regrading-page .pure-dropdown-trigger,.stock-regrading-page .date-picker-trigger { min-height:44px; }
  .stock-regrading-page :is(input.form-input,.pure-dropdown-trigger,.date-picker-trigger) { height:44px; min-height:44px; }
  .stock-regrading-add .form-input { min-height:44px; }
  .stock-regrading-lines { padding:16px; }
}

.stock-regrading-product-name { overflow-wrap: anywhere; margin-bottom: 0; }

@media (max-width:768px) {
  .stock-regrading-journal .btn,.stock-regrading-journal .pure-dropdown-trigger,.stock-regrading-journal .erp-filter-tabs__tab,.stock-regrading-journal .ds-search-input { min-height:44px; }
}

/* Shared table text: independent header/cell modes, including legacy tables.
   Flex labels shrink inside their own box; help and sort controls stay out of
   that box, so right/center alignment cannot clip the beginning of a label. */
.erp-table-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.erp-data-table.erp-data-table--precision .erp-table-text {
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.erp-data-table.erp-data-table--precision thead .erp-table-text-container,
.erp-data-table.erp-data-table--precision thead .erp-data-table__th-content {
    display: flex !important;
    align-items: center !important;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
}
.erp-data-table.erp-data-table--precision thead .erp-table-text-container > :is(button, svg, i, .sort-arrow, .sort-indicator, .sort-icon, .sort-caret, .erp-data-table__sort-caret),
.erp-data-table.erp-data-table--precision thead .erp-data-table__th-content > :is(button, svg, i) {
    flex: 0 0 auto !important;
}
.erp-data-table.erp-data-table--precision thead .erp-table-text {
    line-height: 20px !important;
}
.erp-table-text[data-erp-table-text-mode="wrap"],
.erp-data-table.erp-data-table--precision .erp-table-text[data-erp-table-text-mode="wrap"] {
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-overflow: clip !important;
}
.erp-table-text[data-erp-table-text-mode="clamp"],
.erp-data-table.erp-data-table--precision .erp-table-text[data-erp-table-text-mode="clamp"] {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--erp-table-text-lines, 2);
    white-space: normal !important;
    overflow-wrap: anywhere;
}
.erp-table-text[data-erp-table-text-lines="1"] { --erp-table-text-lines: 1; }
.erp-table-text[data-erp-table-text-lines="2"] { --erp-table-text-lines: 2; }
.erp-table-text[data-erp-table-text-lines="3"] { --erp-table-text-lines: 3; }
.erp-table-text[data-erp-table-text-lines="4"] { --erp-table-text-lines: 4; }
.erp-table-text[data-erp-table-text-lines="5"] { --erp-table-text-lines: 5; }
.erp-table-text[data-erp-table-text-lines="6"] { --erp-table-text-lines: 6; }
.erp-table-text[data-erp-table-text-mode="clip"],
.erp-data-table.erp-data-table--precision .erp-table-text[data-erp-table-text-mode="clip"] {
    text-overflow: clip !important;
}
.erp-table-text:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: 2px;
}
.erp-global-info-tooltip[data-kind="table-text"] {
    max-width: min(420px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    overflow: auto;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.erp-data-table.erp-data-table--precision thead .app-sortable-th__arrow:empty,
.erp-data-table.erp-data-table--precision thead .sort-arrow:empty {
    display: none !important;
}
.erp-data-table.erp-data-table--precision thead .erp-table-text-container > .erp-info-hint {
    margin-inline: 0 !important;
}

/* An ordinal rail is readable but compact. The normal 20px inset would leave
   only 4px inside an authored 44px index column after wrapping its text. */
.erp-data-table.erp-data-table--precision
> :is(thead, tbody, tfoot)
> tr
> :is(th, td).erp-data-table__cell--index {
    padding: 8px !important;
    text-align: center !important;
}

/* CK buyer estimates are selling prices; stock cost remains kitchen-only. */
.ck-buyer-price { font-weight:600; color:var(--color-gray-900); }
.ck-order-price-total { margin:16px 0 0; padding-top:12px; border-top:1px solid var(--color-gray-200); font-size:13px; color:var(--color-gray-700); line-height:1.5; overflow-wrap:anywhere; }
@media (max-width: 768px) {
  .meal-plan-day-page #mealPlanDayMenu .btn { min-height: 44px; }
}

/* POS account selection uses the shared focused dialog and table surfaces. */
.pos-account-orders{margin-top:20px}
.pos-account-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:16px}
.pos-account-order-meta{display:block;margin:4px 0 8px;color:var(--text-secondary);font-size:12px}
.pos-account-summary{padding:24px;display:grid;gap:12px}
.pos-account-summary h3{font-size:18px;margin:0}
.pos-account-summary p{margin:0;font-size:13px}
.pos-account-summary small,.pos-account-summary dt,.pos-account-summary__note{color:var(--text-secondary)}
.pos-account-summary dl{display:grid;gap:14px;margin:12px 0}
.pos-account-summary dl div{display:flex;gap:18px;justify-content:space-between;font-size:13px}
.pos-account-summary dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.pos-account-summary dl div:last-child{padding-top:14px;border-top:1px solid var(--border-color)}
.onboarding-flow__segments[hidden]{visibility:hidden;display:flex}
@media(max-width:768px){.pos-account-summary{padding:16px}.pos-account-actions button{min-height:44px}.pos-account-orders input[type=checkbox]{width:24px;height:24px}}

/* Account selection remains focusable after the shared checkbox upgrade. */
.pos-account-orders .checkbox-wrapper{position:relative;min-width:44px;min-height:44px;margin:0}
.pos-account-orders .checkbox-wrapper input[type=checkbox]{display:block;position:absolute;inset:0 auto auto 0;width:44px;height:44px;margin:0;opacity:0;cursor:pointer}
.pos-account-orders .checkbox-wrapper input:focus-visible + .checkbox-box{outline:2px solid var(--color-primary-hover);outline-offset:3px}
.pos-account-selection-copy{display:none}
@media(max-width:768px){.pos-account-selection-copy{display:grid;gap:4px;font-size:12px;font-weight:400;color:var(--text-secondary)}.pos-account-selection-copy strong{font-size:13px;font-weight:600;color:var(--text-primary)}.pos-account-selection-copy small{font-size:12px}}

.pos-account-mobile-invoice{display:none}
@media(max-width:768px){.pos-account-mobile-invoice{display:inline-flex;min-height:44px;margin-top:8px}}

/* Linked CRM documents use the same page surface and compact action rhythm. */
.crm-lead-document-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.crm-lead-document-row + .crm-lead-document-row { border-top:1px solid var(--color-gray-200); }
.crm-lead-document-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
@media (max-width:768px) {
  .crm-lead-document-row { align-items:flex-start; flex-direction:column; }
  .crm-lead-document-row .btn, .crm-lead-document-actions .btn { min-height:44px; }
}

.pos-account-report{display:flex;flex-direction:column;gap:16px}
.pos-account-report__filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pos-account-report__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:12px 0}
.pos-account-report__facts dt{color:var(--color-gray-500);font-size:12px;margin-bottom:5px}
.pos-account-report__facts dd{margin:0;color:var(--color-gray-900);font-size:13px;font-weight:600;overflow-wrap:anywhere}
@media(max-width:768px){.pos-account-report__filters,.pos-account-report__facts{grid-template-columns:1fr}.pos-account-report .btn{min-height:44px}}

@media(max-width:768px){.pos-account-report .stat-grid{grid-template-columns:minmax(0,1fr)!important}.pos-account-report .erp-page-header__filter-row{display:grid;grid-template-columns:1fr}.pos-account-report .erp-page-header__filter-row>*{width:100%;max-width:none}}

.pos-account-order-link{display:inline-flex;align-items:center;gap:6px;min-height:32px}
@media(max-width:768px){.pos-account-order-link{min-height:44px}}

.order-hero .erp-page-header__back{background:#fff;color:var(--text-primary);width:44px;height:44px}
.order-hero .erp-page-header__back:hover{background:var(--gray-100);color:var(--text-primary)}
.order-hero .erp-page-header__back:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* The official ChatGPT favicon uses a white mark; retain its dark app tile. */
.int-brand-logo img[src$="/chatgpt.png"],
.erp-action-card__icon--logo img[src$="/chatgpt.png"] { background: #000; border-radius: 6px; }

/* Report cancellation uses the shared empty-state action; keep it tappable. */
@media (max-width: 768px) {
  #marketingTabContent .empty-state .btn,
  #cohortHeatmap .empty-state .btn { min-height: 44px; }
}
/* Physical inventory investigation: consistent controls, scrollable evidence on phones. */
.inventory-investigation-action { min-height:44px; min-width:44px; }
.inventory-investigation-focus { background:var(--color-primary-50,#eff6ff); }
.inventory-investigation p, .inventory-investigation li { overflow-wrap:anywhere; }
.inventory-investigation .inv-master-table-wrap { max-width:100%; overflow-x:auto; }

.inventory-investigation .stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.inventory-investigation .stat-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.inventory-investigation .stat-card-u { min-width:0; }
.inventory-investigation .stat-card-u__value { font-size:24px; overflow-wrap:anywhere; }
.inventory-investigation .inv-master-table { min-width:740px; }
.inventory-investigation .inv-master-table td { white-space:normal; overflow:visible; text-overflow:clip; max-width:none; }
.inventory-investigation-focus td { background:var(--color-primary-50,#eff6ff); }
@media(max-width:768px) {
  .inventory-investigation .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .inventory-investigation .stat-card-u__value { font-size:17px; word-break:normal; }
  .inventory-investigation-modal .erp-dynamic-modal__body { padding:16px; }
}

.inventory-investigation p { margin:12px 0; }
.inventory-investigation-modal .erp-dynamic-modal__close { min-width:44px; min-height:44px; }
@media(min-width:769px) { .inventory-investigation .inv-master-table td:nth-child(2) { white-space:nowrap; } }

@media(min-width:769px) {
  .inventory-investigation-queue th:not(:first-child), .inventory-investigation-queue td:not(:first-child) { min-width:120px; white-space:nowrap; }
  .inventory-investigation-queue th:nth-child(5), .inventory-investigation-queue td:nth-child(5) { min-width:72px; }
}

body.inventory-investigation-page-locked { position:fixed; top:calc(-1 * var(--inventory-investigation-page-scroll,0px)); width:100%; overflow:hidden; }

@media (max-width:768px) {
  .meta-ads-connect .btn, .meta-ads-connect .form-input,
  .meta-ads-connect .pure-dropdown-trigger { min-height:44px; }
}

@media (max-width: 768px) {
  .erp-page-header [data-source-report-refresh] { min-height: 44px; height: 44px; }
}