/* Shared UI primitives. Modules keep their domain-specific layouts and charts. */

.ui-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 5px 0 28px;
}

.ui-page-header h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 68px);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.ui-page-header .eyebrow,
.ui-kicker {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ui-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.ui-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.ui-section-header h2,
.ui-section-header h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.ui-section-header h2 { font-size: 28px; }
.ui-section-header h3 { font-size: 21px; }

.ui-muted {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.ui-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.ui-button:hover { transform: translateY(-1px); }
.ui-button:disabled { cursor: wait; opacity: 0.6; transform: none; }

.ui-button-primary {
  background: var(--brand);
  color: var(--text-on-brand);
}

.ui-button-primary:hover { background: var(--interactive-hover); }

.ui-button-secondary {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  color: var(--text-default);
}

.ui-button-secondary:hover { border-color: color-mix(in srgb, var(--interactive) 40%, var(--border)); }

.ui-field-inline {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-field-inline input {
  min-height: 42px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
}

.ui-field-inline input:focus-visible,
.ui-button:focus-visible,
.ui-status:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 38%, transparent);
  outline-offset: 2px;
}

.ui-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.ui-status-ready { background: var(--surface-success); color: var(--text-success); }
.ui-status-forecast_only { background: var(--surface-warning); color: var(--text-warning); }
.ui-status-partial { background: var(--surface-warning); color: var(--text-warning); }
.ui-status-unavailable,
.ui-status-error { background: var(--surface-danger); color: var(--text-danger); }
.ui-status-empty,
.ui-status-neutral { background: var(--surface-muted); color: var(--text-subtle); }

.ui-notice {
  margin: 0 0 18px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
}

.ui-notice-error { border-color: color-mix(in srgb, var(--bad) 22%, var(--border)); background: var(--surface-danger); color: var(--text-danger); }
.ui-empty { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Legacy module aliases: these keep existing markup working while the views
   migrate to the shared primitives above. */
.module-intro h2,
.panel-header h2 {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.tab-button,
.accounting-view-switcher__item,
.estimator-area-tab,
.stock-subtabs button,
.planning-tabs button {
  min-height: 40px;
  border-radius: var(--radius-sm);
}

.controls input,
.controls button,
.stock-toolbar input,
.stock-toolbar select,
.stock-mapping-form input,
.stock-mapping-form select,
.planning-form input,
.planning-form select,
.planning-form textarea,
#accountingModule input,
#accountingModule select,
#accountingModule textarea {
  border-radius: var(--radius-sm);
}

.status,
.planning-status,
.planning-badge,
.planning-exception-tag,
.stock-status,
.stock-pill,
.stock-flag {
  border-radius: 99px;
}

.status,
.planning-status,
.stock-status,
.stock-pill,
.stock-flag {
  font-size: 11px;
  font-weight: 800;
}

.ui-metric-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ui-metric {
  min-width: 0;
  padding: 16px 15px;
  border-right: 1px solid var(--border);
}

.ui-metric:last-child { border-right: 0; }
.ui-metric > span,
.ui-metric > small { display: block; color: var(--muted); }
.ui-metric > span { font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.ui-metric > strong { display: block; margin: 8px 0 4px; color: var(--text); font-family: var(--font-display); font-size: clamp(24px, 2.5vw, 34px); font-weight: 400; letter-spacing: -0.035em; line-height: 1; }
.ui-metric > small { min-height: 15px; font-size: 10px; line-height: 1.35; }

@media (max-width: 960px) {
  .ui-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-metric:nth-child(3n) { border-right: 0; }
  .ui-metric:nth-child(n + 4) { border-top: 1px solid var(--border); }
}

@media (max-width: 640px) {
  .ui-page-header { align-items: stretch; flex-direction: column; gap: 18px; }
  .ui-page-header h1 { font-size: 48px; }
  .ui-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-metric:nth-child(3n) { border-right: 1px solid var(--border); }
  .ui-metric:nth-child(2n) { border-right: 0; }
  .ui-metric:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

/* -------------------------------------------------------------------------
   Shared interaction contract
   -------------------------------------------------------------------------
   A module may keep its geometry (calendar, charts and dense operational
   tables), but controls, tabs, panels and states use these same primitives.
   Legacy selectors below are intentionally kept as compatibility aliases so
   incremental migrations do not change behaviour or event hooks.
*/

.ui-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ui-toolbar--spaced { margin-bottom: var(--space-6); }

.ui-toolbar > .ui-button,
.ui-toolbar > button {
  align-self: end;
}

.ui-field,
.ui-field-inline,
.ui-toolbar label {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
}

.ui-field input,
.ui-field select,
.ui-field textarea,
.ui-field-inline input,
.ui-field-inline select,
.ui-toolbar input,
.ui-toolbar select {
  width: 100%;
  min-height: var(--control-height-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-default);
  font-size: var(--text-md);
  letter-spacing: normal;
  text-transform: none;
}

.ui-field textarea { min-height: 88px; padding-block: var(--space-2); resize: vertical; }

.ui-field small,
.ui-toolbar small {
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
}

.ui-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  padding: var(--space-1);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--surface-muted));
  overflow-x: auto;
  scrollbar-width: thin;
}

.ui-tab,
.ui-tabs > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-md);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-subtle);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.ui-tab:hover:not(:disabled) { color: var(--text-default); }
.ui-tab:active:not(:disabled) { transform: translateY(1px); }
.ui-tab.is-active,
.ui-tab[aria-selected="true"],
.ui-tab.tab-button-active,
.ui-tab.active {
  background: var(--interactive);
  color: var(--text-on-brand);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--interactive) 18%, transparent);
}
.ui-tab:disabled { cursor: not-allowed; opacity: 0.48; }

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-md);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.ui-button:hover:not(:disabled) { transform: translateY(-1px); }
.ui-button:active:not(:disabled) { transform: translateY(0); }
.ui-button:disabled { cursor: wait; opacity: 0.58; }
.ui-button-primary { background: var(--interactive); color: var(--text-on-brand); box-shadow: 0 7px 16px color-mix(in srgb, var(--interactive) 16%, transparent); }
.ui-button-primary:hover:not(:disabled) { background: var(--interactive-hover); }
.ui-button-secondary { border-color: var(--border); background: var(--surface-raised); color: var(--text-default); }
.ui-button-secondary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--interactive) 45%, var(--border)); background: var(--interactive-soft); }
.ui-button-ghost { background: transparent; color: var(--interactive); }
.ui-button-ghost:hover:not(:disabled) { background: var(--interactive-soft); }
.ui-button-danger { border-color: color-mix(in srgb, var(--bad) 22%, var(--border)); background: var(--surface-danger); color: var(--bad); }
.ui-button-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 14%, var(--panel)); }

.ui-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--elevation-2);
}

.ui-panel--content { padding: var(--space-5); margin-bottom: var(--space-5); }

.ui-panel--flat { box-shadow: none; }
.ui-panel--subtle { background: var(--surface-subtle); }
.ui-panel-header,
.ui-panel-footer { padding: var(--space-4) var(--space-5); }
.ui-panel-header { border-bottom: 1px solid var(--border-subtle); }
.ui-panel-footer { border-top: 1px solid var(--border-subtle); }

.ui-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.ui-kpi-grid--spaced { margin-bottom: var(--space-5); }

.ui-kpi {
  min-width: 0;
  padding: var(--space-4);
}

.ui-kpi > .label,
.ui-kpi > span:first-child {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ui-kpi > strong {
  display: block;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th,
.ui-table td { border-bottom: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-2); text-align: left; vertical-align: top; }
.ui-table th { color: var(--text-subtle); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.ui-table tbody tr:hover { background: color-mix(in srgb, var(--interactive) 3%, transparent); }

.ui-pill,
.ui-status,
.ui-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px var(--space-2); border-radius: 999px; font-size: var(--text-xs); font-weight: 800; line-height: 1; white-space: nowrap; }
.ui-status-ready,
.ui-status-success,
.ui-badge-success { background: var(--surface-success); color: var(--text-success); }
.ui-status-warning,
.ui-status-forecast_only,
.ui-status-partial,
.ui-badge-warning { background: var(--surface-warning); color: var(--text-warning); }
.ui-status-danger,
.ui-status-error,
.ui-status-unavailable,
.ui-badge-danger { background: var(--surface-danger); color: var(--text-danger); }
.ui-status-neutral,
.ui-status-empty,
.ui-badge-neutral { background: var(--surface-muted); color: var(--text-subtle); }

.ui-state {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-subtle);
  text-align: left;
}

.ui-state strong { color: var(--text-default); font-size: var(--text-md); }
.ui-state p { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.ui-numeric { font-variant-numeric: tabular-nums; }

/* Bring the remaining legacy actions onto the same interaction contract. */
.secondary-button,
.stock-inline-button,
.planning-secondary-button,
.ghost-button,
.accounting-inline-action,
.planning-icon-link,
.planning-close-button {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
}

.secondary-button,
.planning-secondary-button { min-height: var(--control-height-md); border-radius: var(--radius-sm); }
.stock-primary-button,
.planning-primary-button,
.primary-button { min-height: var(--control-height-md); border-radius: var(--radius-sm); background: var(--interactive); color: var(--text-on-brand); }
.stock-primary-button:hover,
.planning-primary-button:hover,
.primary-button:hover { background: var(--interactive-hover); }
.stock-inline-button,
.planning-icon-link,
.planning-close-button,
.accounting-inline-action,
.ghost-button { color: var(--interactive); }
.stock-inline-button:hover,
.planning-icon-link:hover,
.planning-close-button:hover,
.accounting-inline-action:hover,
.ghost-button:hover { background: var(--interactive-soft); text-decoration: none; }

/* Shared panel and tab aliases. These only normalize primitives; charts and
   calendars continue to own their visual geometry in module CSS. */
.panel.ui-panel,
.panel.ui-panel--flat { box-shadow: var(--elevation-2); }
.panel-header.ui-section-header { margin-bottom: var(--space-4); }
.tabs.ui-tabs { margin-bottom: var(--space-5); }
.controls.ui-toolbar { margin-bottom: var(--space-6); }

.product-nav.ui-tabs {
  margin-bottom: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.product-nav.ui-tabs .product-nav-button {
  min-width: 136px;
  border-radius: 999px;
}

.product-nav.ui-tabs .product-nav-button-active,
.product-nav.ui-tabs .product-nav-button[aria-current="page"] {
  background: var(--interactive);
  color: var(--text-on-brand);
}

.stock-subtabs.ui-tabs {
  margin-bottom: var(--space-2);
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--surface-muted));
}

.stock-subtabs.ui-tabs .ui-tab {
  min-height: var(--control-height-md);
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
}

.stock-subtabs.ui-tabs .ui-tab.active,
.stock-subtabs.ui-tabs .ui-tab[aria-selected="true"] {
  background: var(--interactive);
  color: var(--text-on-brand);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--interactive) 18%, transparent);
}

.planning-tabs.ui-tabs {
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
}

.planning-tabs.ui-tabs .ui-tab {
  min-height: var(--control-height-md);
  border-radius: var(--radius-sm);
}

.planning-summary.ui-metric-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
}

.planning-summary.ui-metric-strip .ui-metric {
  min-height: 116px;
  padding: var(--space-4) var(--space-5);
  border-right: 0;
  background: color-mix(in srgb, var(--surface-raised) 84%, var(--surface-muted));
}

.estimator-area-tabs .ui-tab {
  border-radius: var(--radius-sm);
}

/* The estimator keeps its tabs inside the header panel, but uses the same
   interaction contract as the other modules. The modifier preserves the
   full-width header band while inheriting shared tab states and spacing. */
.estimator-area-tabs.ui-tabs {
  width: 100%;
  max-width: none;
  padding: var(--space-3) var(--space-6);
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-subtle);
}

.estimator-area-tabs.ui-tabs .ui-tab {
  min-height: var(--control-height-sm);
  padding-inline: var(--space-3);
}

.estimator-area-tabs.ui-tabs .ui-tab.is-active {
  background: var(--text-strong);
  color: var(--text-on-brand);
  box-shadow: var(--elevation-1);
}

.planning-primary-button.ui-button,
.stock-primary-button.ui-button,
.primary-button.ui-button {
  box-shadow: 0 7px 16px color-mix(in srgb, var(--interactive) 16%, transparent);
}

@media (max-width: 960px) {
  .product-nav.ui-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    padding: 5px;
    border-radius: 999px;
  }
  .product-nav.ui-tabs::-webkit-scrollbar {
    display: none;
  }
  .product-nav.ui-tabs .product-nav-button {
    flex: 0 0 auto;
    min-width: auto;
    padding: 10px 16px;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .ui-tabs { width: 100%; flex-wrap: nowrap; justify-content: flex-start; }
  .ui-tab { flex: 1 0 auto; }
  .ui-toolbar { align-items: stretch; }
  .ui-toolbar > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .ui-toolbar > .ui-button,
  .ui-toolbar > button { min-height: var(--control-height-lg); }
  .ui-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-field input,
  .ui-field select,
  .ui-field textarea,
  .ui-field-inline input,
  .ui-field-inline select,
  .ui-toolbar input,
  .ui-toolbar select,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}