/* =============================================================================
   core.css — shared design system for the platform (loaded by every module).
   ONE source of truth for the look: change a token here and all modules update.

   It restyles the "skin" only (colour, type, depth, controls, cards) and never
   touches layout (display/grid/flex/width), so each module's bespoke structure
   is left intact. The header is owned separately by brand-boot.js.

   Everything is driven by --brand / --brand-strong, which company-access.js sets
   per company (with a contrast guard), so colour + branding stay fully dynamic.
   ========================================================================== */

:root {
  /* Brand — overwritten at runtime by company-access.js / brand-boot.js. The
     fallbacks here only apply before branding resolves or when logged out. */
  --brand: #0f766e;
  --brand-strong: var(--brand);
  /* Brand tints derived from the live brand colour (dynamic, any hue). */
  --brand-wash: color-mix(in srgb, var(--brand) 5%, #ffffff);
  --brand-50:   color-mix(in srgb, var(--brand) 8%, #ffffff);
  --brand-100:  color-mix(in srgb, var(--brand) 14%, #ffffff);
  --brand-200:  color-mix(in srgb, var(--brand) 26%, #ffffff);
  --brand-border: color-mix(in srgb, var(--brand) 32%, #ffffff);
  /* Brand at alpha — for tinted selected states, outlines and brand-coloured
     shadows that used to be hardcoded rgba(207,20,43,…). */
  --brand-a10: color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-a20: color-mix(in srgb, var(--brand) 22%, transparent);
  --brand-a30: color-mix(in srgb, var(--brand) 32%, transparent);

  /* Neutral surfaces & text */
  --bg:        #f4f5f7;
  --surface:   #ffffff;
  --surface-2: #f8f9fb;
  --text:      #111827;
  --text-2:    #475467;
  --text-3:    #667085;
  --line:      #e7e9ee;
  --line-2:    #d6dae1;

  /* Semantic colours */
  --ok: #0f766e;     --ok-bg: #e7f5f1;     --ok-border: #b7e0d6;
  --warn: #92400e;   --warn-bg: #fdf2dd;   --warn-border: #f0d9a8;
  --danger: #b42318; --danger-bg: #fdeceb; --danger-border: #f4c2bd;
  --info: #1d4ed8;   --info-bg: #eaf0fc;   --info-border: #c3d4f6;

  /* Shape, depth, spacing, type */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 10px 30px rgba(16, 24, 40, .10);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Legacy aliases so existing markup that reads these keeps working + themed. */
  --red: var(--brand);
  --card: var(--surface);
  --soft: var(--surface-2);
  --muted: var(--text-3);
  --black: var(--text);
}

/* ---- Base ---------------------------------------------------------------- */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { color: var(--text); }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; color: var(--text); }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { line-height: 1.55; }

.muted, .small { color: var(--text-3); }
.small { font-size: 12px; }

a { color: var(--brand-strong); text-underline-offset: 2px; }

/* ---- Cards / surfaces ---------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}

.empty, .empty-state, .notice {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-2);
  padding: 16px 18px;
}

/* ---- Buttons ------------------------------------------------------------- */
button, .button, .btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--brand-strong);
  background: var(--brand-strong);
  color: #fff;
  min-height: 40px;
  padding: 9px 16px;
  cursor: pointer;
  transition: filter .12s ease, background .12s ease, box-shadow .12s ease;
}
button:hover, .button:hover, .btn:hover { filter: brightness(.94); }
button:active, .button:active, .btn:active { filter: brightness(.88); }
button:focus-visible, .button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); }

/* Secondary / quiet */
button.secondary, .button.secondary, .btn.secondary, button.ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-2);
}
button.secondary:hover, .button.secondary:hover, .btn.secondary:hover { background: var(--surface-2); filter: none; }

/* Brand-tinted (the old .red / .primary) — stays the live brand colour */
button.red, .button.red, button.primary, .button.primary { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
button.danger, .button.danger, .danger-button { background: var(--danger); border-color: var(--danger); color: #fff; }

button:disabled, .button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* ---- Form controls ------------------------------------------------------- */
input, textarea, select {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  min-height: 40px;
  padding: 9px 12px;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--line-2)); }
label { font-weight: 600; font-size: 13px; color: var(--text-2); }

/* ---- Pills / badges ------------------------------------------------------ */
.pill, .badge {
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 11px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line);
}
.pill.completed, .pill.ok, .badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.pill.active, .pill.invited, .pill.warn, .badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.pill.failed, .pill.removed, .pill.bad, .badge.bad { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }

/* ---- Status text --------------------------------------------------------- */
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
.status.danger, .status.bad { color: var(--danger); }

/* ---- Tables -------------------------------------------------------------- */
table { border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--text-2); }
th, td { border-color: var(--line); }

/* ---- Progress ------------------------------------------------------------ */
.progress { background: var(--surface-2); border-radius: var(--radius-pill); }
.progress span { background: var(--brand-strong); }

/* =============================================================================
   Customer module UI contract

   This is the final shared skin for customer-facing modules. Page files may own
   domain layout, but not the basic product language for chrome, controls, tabs,
   cards, typography, and repeated toolbars. company-access.js moves this file to
   the end of the cascade so these rules win consistently across modules.
   ========================================================================== */

html {
  --system-page-max: min(1760px, calc(100vw - 48px));
  --system-gap: 14px;
  --system-card-radius: var(--radius-lg);
  --system-control-radius: var(--radius-sm);
  --system-control-height: 40px;
  --system-tab-height: 38px;
  --system-module-bar-height: 42px;
  --system-module-anchor-width: 150px;
}

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

body {
  background: var(--customer-app-bg, var(--bg)) !important;
}

main {
  width: min(100%, var(--system-page-max));
  margin-left: auto;
  margin-right: auto;
}

.grid, .grid2, .grid3, .grid4, .statsGrid {
  gap: var(--system-gap) !important;
}

.card, .panel, fieldset, .notice, .empty, .empty-state,
.installCard, .invoiceCard, .projectCard, .kpi, .kpi-card,
.material-card, .plannedUseCard, .receiptCard, .exportCard,
.materialApprovalCard, .invoiceLineCard, .companyLookupBox {
  background: var(--customer-card-bg, var(--surface)) !important;
  border: 1px solid var(--customer-card-border, var(--line)) !important;
  border-radius: var(--customer-card-radius, var(--system-card-radius)) !important;
  box-shadow: var(--customer-card-shadow, var(--shadow)) !important;
}

.card, .panel, fieldset, .notice, .installCard, .invoiceCard,
.projectCard, .kpi, .kpi-card, .material-card, .plannedUseCard,
.receiptCard, .exportCard, .materialApprovalCard, .invoiceLineCard {
  padding: 18px !important;
}

.card::before, .appCard::before {
  background: var(--customer-section-accent, linear-gradient(90deg, var(--brand-strong), transparent)) !important;
}

h1, h2, h3, h4,
.card h2, .card h3, .appCard h2, .appCard h3 {
  color: var(--text) !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

h1 { font-size: 24px !important; }
h2 { font-size: 20px !important; }
h3 { font-size: 16px !important; }
h4 { font-size: 14px !important; }

p, .muted, .small, td, label {
  line-height: 1.42 !important;
}

.muted, .small, .help, .field-help {
  color: var(--text-3) !important;
}

button, .button, .btn,
input, select, textarea {
  border-radius: var(--system-control-radius) !important;
  font-family: var(--font) !important;
  box-shadow: none !important;
}

button, .button, .btn {
  min-height: var(--system-control-height) !important;
  padding: 9px 14px !important;
  font-weight: 700 !important;
}

button.red, button.primary, .button.red, .button.primary {
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  border-color: var(--customer-button-bg, var(--brand-strong)) !important;
  color: var(--customer-button-text, #fff) !important;
}

button.secondary, .button.secondary, button.ghost, .button.ghost,
.toolbar button.secondary, .toolbar .button.secondary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text) !important;
}

button.secondary:hover, .button.secondary:hover, button.ghost:hover,
.toolbar button.secondary:hover, .toolbar .button.secondary:hover {
  background: color-mix(in srgb, var(--brand-strong) 7%, transparent) !important;
  filter: none !important;
}

.toolbar, .btnrow, .compactActions, .accountingTools,
.row-actions, .materialApprovalActions {
  gap: 10px !important;
  align-items: center !important;
}

.toolbar, .compactActions, .accountingTools, .draftTools, .exportCards {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.tabnav, .moduleHeaderToggle, .salaryTabRow, .receiptTabs, .offer-section-nav {
  gap: 10px !important;
  border-bottom: 0 !important;
}

.tabnav button, .moduleHeaderToggle button, .moduleToggleBtn,
.salaryTabBtn, .receiptTabs button, .offer-section-nav button,
.choice-toggle-btn {
  min-height: var(--system-tab-height) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--text-2) !important;
  border-radius: var(--system-control-radius) !important;
  font-weight: 600 !important;
}

.tabnav button:hover, .moduleHeaderToggle button:hover, .moduleToggleBtn:hover,
.salaryTabBtn:hover, .receiptTabs button:hover, .offer-section-nav button:hover,
.choice-toggle-btn:hover {
  background: transparent !important;
  color: var(--customer-button-bg, var(--brand-strong)) !important;
  filter: none !important;
}

.tabnav button.active, .moduleHeaderToggle button.active, .moduleToggleBtn.active,
.salaryTabBtn.active, .receiptTabs button.active, .offer-section-nav button.active,
.choice-toggle-btn.active, .choice-toggle-btn[aria-checked="true"] {
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  border-color: transparent !important;
  color: var(--customer-button-text, #fff) !important;
  box-shadow: none !important;
}

.pill, .badge, .statusBadge, .assignBadge, .sourceBadge,
.quickProjectInfo span, .plannedMeta span, .installDeviceBadge {
  border-radius: 7px !important;
  border: 1px solid color-mix(in srgb, var(--brand-strong) 14%, var(--line)) !important;
  background: var(--customer-muted-panel-bg, var(--surface-2)) !important;
  color: var(--text-2) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Semantic status colours survive the muted-pill contract above — without these
   re-assertions its !important block flattens completed/active/failed to grey. */
.pill.completed, .pill.ok, .badge.ok {
  background: var(--ok-bg) !important;
  color: var(--ok) !important;
  border-color: var(--ok-border) !important;
}
.pill.active, .pill.invited, .pill.warn, .badge.warn {
  background: var(--warn-bg) !important;
  color: var(--warn) !important;
  border-color: var(--warn-border) !important;
}
.pill.failed, .pill.removed, .pill.bad, .badge.bad {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-color: var(--danger-border) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--customer-card-border, var(--line)) !important;
  border-radius: var(--customer-card-radius, var(--system-card-radius)) !important;
  overflow: hidden !important;
  background: var(--customer-card-bg, var(--surface)) !important;
}

th, td {
  border-bottom: 1px solid color-mix(in srgb, var(--brand-strong) 10%, var(--line)) !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

tr:hover td {
  background: color-mix(in srgb, var(--brand-strong) 4%, #fff) !important;
}

.projectRow, .admin-material-card, .materialApprovalCard,
.invoiceLineCard, .offer-work-preview .work-section {
  border-color: var(--customer-card-border, var(--line)) !important;
  border-radius: var(--customer-card-radius, var(--system-card-radius)) !important;
  background: var(--customer-card-bg, var(--surface)) !important;
  box-shadow: none !important;
}

.column {
  background: color-mix(in srgb, var(--brand-strong) 3%, #fff) !important;
  border-color: var(--customer-card-border, var(--line)) !important;
  border-top-color: var(--brand-strong) !important;
  border-radius: var(--customer-card-radius, var(--system-card-radius)) !important;
  box-shadow: none !important;
}

.projectCard {
  box-shadow: none !important;
  border-left: 0 !important;
  border-top: 3px solid color-mix(in srgb, var(--brand-strong) 36%, #fff) !important;
}

/* ---- Shared module content surfaces ------------------------------------- */
.installCard,
.salaryReminderBanner,
.projectHeaderBox,
.plannedUseCard,
.planRow,
.salaryPlanSummary > div,
.projectRow,
.roofing-viewer,
.roofing-chat,
.roofing-source-tab-wrap,
.offer-nav-card,
.offer-summary-card,
.offer-preview-card {
  background: var(--customer-card-bg, var(--surface)) !important;
  border: 1px solid var(--customer-card-border, var(--line)) !important;
  border-radius: var(--customer-card-radius, var(--system-card-radius)) !important;
  box-shadow: none !important;
}

.installCard,
.projectHeaderBox,
.plannedUseCard,
.projectRow,
.roofing-workspace-panel,
.offer-preview-card {
  border-top: 3px solid color-mix(in srgb, var(--customer-button-bg, var(--brand-strong)) 42%, #fff) !important;
}

.installCard {
  border-left: 1px solid var(--customer-card-border, var(--line)) !important;
}

.installActions,
.workspace-panel-header,
.plannedUseTop,
.materialApprovalTop {
  align-items: flex-start !important;
  gap: 14px !important;
}

.fieldStep {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.stepNo {
  width: 30px !important;
  height: 30px !important;
  border-radius: var(--system-control-radius) !important;
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  color: var(--customer-button-text, #fff) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.fieldStep h2,
.workspace-panel-header h2,
.installCard h2 {
  margin: 0 !important;
}

.quickHours {
  gap: 10px !important;
}

.quickHours button,
.row-actions button,
.offer-summary-actions button,
.offer-section-actions button {
  min-height: 38px !important;
  border-radius: var(--system-control-radius) !important;
  box-shadow: none !important;
}

.plannedUseTitle,
.materialApprovalTitle,
.projectMain strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.plannedMeta,
.quickProjectInfo,
.roofing-steps {
  gap: 8px !important;
}

.salaryReminderBanner {
  background: var(--warn-bg) !important;
  border-color: var(--warn-border) !important;
  color: var(--warn) !important;
  border-radius: var(--system-card-radius) !important;
  box-shadow: none !important;
}

.stickySubmit {
  border-color: var(--customer-card-border, var(--line)) !important;
  border-radius: var(--customer-card-radius, var(--system-card-radius)) !important;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .08) !important;
}

.roofing-viewer-head,
.roofing-chat-head,
.roofing-source-list {
  background: var(--customer-muted-panel-bg, var(--surface-2)) !important;
  border-color: var(--customer-card-border, var(--line)) !important;
}

.roofing-chat-log,
.roofing-viewer-empty {
  background: var(--customer-card-bg, var(--surface)) !important;
}

.chat-message,
.citation-button {
  border-color: var(--customer-card-border, var(--line)) !important;
  border-radius: var(--system-control-radius) !important;
  box-shadow: none !important;
}

@media (min-width: 1024px) {
  .roofing-viewer,
  .roofing-chat {
    min-height: 500px !important;
  }
}

header {
  background: var(--customer-header-bg, var(--surface)) !important;
  color: var(--customer-header-text, var(--text)) !important;
  border-top: 3px solid var(--brand-strong) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-strong) 34%, #fff) !important;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .08) !important;
  padding: 12px 28px !important;
  z-index: 20 !important;
}

header .bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 26px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 72px !important;
  margin: 0 !important;
}

header .logo {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

header h1,
header p,
header .brandKicker,
header .logo > div:not(.brandFallback) {
  display: none !important;
}

header .brandLogo {
  display: block !important;
  width: clamp(148px, 16vw, 220px) !important;
  height: 72px !important;
  max-width: 32vw !important;
  object-fit: contain !important;
  background: var(--customer-logo-plate-bg, transparent) !important;
  border: var(--customer-logo-plate-border, 0) !important;
  border-radius: var(--customer-logo-plate-radius, 0) !important;
  padding: var(--customer-logo-plate-padding, 0) !important;
  box-shadow: var(--customer-logo-plate-shadow, none) !important;
}

header .brandFallback {
  display: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--customer-header-text, var(--text)) !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

header .headerNav {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: center !important;
  gap: 10px !important;
  scrollbar-width: none !important;
}

header .headerNav::-webkit-scrollbar {
  display: none !important;
}

header .headerNav .navPill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--system-control-radius) !important;
  padding: 8px 14px !important;
  min-height: var(--system-tab-height) !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: none !important;
  flex: 0 0 auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

header .headerNav .navPill:not(.active) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--customer-header-text, var(--text-2)) !important;
}

header .headerNav .navPill:not(.active):hover {
  background: transparent !important;
  color: var(--customer-button-bg, var(--brand-strong)) !important;
}

header .headerNav .navPill.active {
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  border-color: transparent !important;
  color: var(--customer-button-text, #fff) !important;
}

header .headerNav #globalAuthBar {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

header #globalAuthBar,
header .auth-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
}

header #globalAuthBar summary {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: var(--system-control-radius) !important;
  box-shadow: none !important;
}

header #globalAuthBar details.accountMenuWrap:not([open]) > .accountMenu {
  display: none !important;
}

header #globalAuthBar details.accountMenuWrap[open] > .accountMenu {
  display: grid !important;
  position: fixed !important;
  top: var(--account-menu-top, 82px) !important;
  right: var(--account-menu-right, 24px) !important;
  z-index: 9999 !important;
}

/* ---- Customer module chrome --------------------------------------------- */
main > .tabnav,
main > #economyContent > .tabnav,
main > .boardLegend,
main > section.noPrint > .toolbar,
main > .module-control-strip,
main > .module-control-strip > .toolbar,
main > .offer-sticky-actions,
body.offer-step-mode .offer-sticky-actions,
.moduleHeaderToggle,
.salaryTabRow,
.receiptTabs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

main > .tabnav,
main > #economyContent > .tabnav,
main > section.noPrint > .toolbar,
main > .module-control-strip,
main > .module-control-strip > .toolbar,
main > .offer-sticky-actions,
main > .moduleHeaderToggle,
body.offer-step-mode .offer-sticky-actions {
  min-height: var(--system-module-bar-height) !important;
  height: var(--system-module-bar-height) !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-content: center !important;
  scrollbar-width: none !important;
}

main > .tabnav::-webkit-scrollbar,
main > #economyContent > .tabnav::-webkit-scrollbar,
main > section.noPrint > .toolbar::-webkit-scrollbar,
main > .module-control-strip::-webkit-scrollbar,
main > .module-control-strip > .toolbar::-webkit-scrollbar,
main > .offer-sticky-actions::-webkit-scrollbar,
main > .moduleHeaderToggle::-webkit-scrollbar,
body.offer-step-mode .offer-sticky-actions::-webkit-scrollbar {
  display: none !important;
}

main > .tabnav,
main > #economyContent > .tabnav,
main > .module-control-strip,
.receiptTabs,
.salaryTabRow,
.moduleHeaderToggle {
  margin: 0 0 34px !important;
}

main > section.noPrint {
  margin: 0 0 16px !important;
}

main > section.noPrint > .toolbar,
main > .boardLegend {
  margin: 0 0 18px !important;
}

main > .boardLegend {
  min-height: var(--system-tab-height) !important;
}

main > .boardLegend .small {
  color: var(--text-3) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.tabnav button,
.moduleHeaderToggle button,
.moduleToggleBtn,
.salaryTabBtn,
.receiptTabs button,
.offer-section-nav button,
.choice-toggle-btn,
main > section.noPrint > .toolbar button,
main > .boardLegend .pill.black {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--system-tab-height) !important;
  padding: 8px 14px !important;
  border: 1px solid transparent !important;
  border-radius: var(--system-control-radius) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

main > .tabnav button,
main > #economyContent > .tabnav button,
main > section.noPrint > .toolbar button,
main > .moduleHeaderToggle button,
main > .offer-sticky-actions button,
main > .offer-sticky-actions .offer-action-title,
main > .offer-sticky-actions .pill,
body.offer-step-mode .offer-sticky-actions button,
body.offer-step-mode .offer-sticky-actions .offer-action-title,
body.offer-step-mode .offer-sticky-actions .pill {
  min-height: var(--system-module-bar-height) !important;
  height: var(--system-module-bar-height) !important;
}

main > section.noPrint > .toolbar button,
main > .tabnav button,
main > #economyContent > .tabnav button,
main > .moduleHeaderToggle button,
main > .offer-sticky-actions button,
main > .offer-sticky-actions .pill,
body.offer-step-mode .offer-sticky-actions button,
body.offer-step-mode .offer-sticky-actions .pill {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

main > .tabnav > button:first-child,
main > #economyContent > .tabnav > button:first-child,
main > section.noPrint > .toolbar > button:first-child,
main > .moduleHeaderToggle > button:first-child,
main > .offer-sticky-actions .offer-action-title,
body.offer-step-mode .offer-sticky-actions .offer-action-title,
.module-control-title {
  flex: 0 0 var(--system-module-anchor-width) !important;
  width: var(--system-module-anchor-width) !important;
  min-width: var(--system-module-anchor-width) !important;
  max-width: var(--system-module-anchor-width) !important;
}

main > section.noPrint.module-control-strip > .toolbar,
main > .module-control-strip > .toolbar {
  width: 100% !important;
  margin: 0 !important;
  justify-content: space-between !important;
}

.module-control-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.module-control-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--system-module-bar-height) !important;
  height: var(--system-module-bar-height) !important;
  padding: 8px 14px !important;
  border-radius: var(--system-control-radius) !important;
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  color: var(--customer-button-text, #fff) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.module-control-muted {
  display: inline-flex !important;
  align-items: center !important;
  min-height: var(--system-module-bar-height) !important;
  height: var(--system-module-bar-height) !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.status:empty,
.module-status-line:empty {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

main > .moduleHeaderToggle + .installCard {
  margin-top: 0 !important;
}

.tabnav button:not(.active),
.moduleHeaderToggle button:not(.active),
.moduleToggleBtn:not(.active),
.salaryTabBtn:not(.active),
.receiptTabs button:not(.active),
.offer-section-nav button:not(.active),
.choice-toggle-btn:not(.active):not([aria-checked="true"]) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-2) !important;
}

.tabnav button.active,
.moduleHeaderToggle button.active,
.moduleToggleBtn.active,
.salaryTabBtn.active,
.receiptTabs button.active,
.offer-section-nav button.active,
.choice-toggle-btn.active,
.choice-toggle-btn[aria-checked="true"],
main > .boardLegend .pill.black {
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  border-color: transparent !important;
  color: var(--customer-button-text, #fff) !important;
}

main > section.noPrint > .toolbar button.secondary {
  min-height: var(--system-module-bar-height) !important;
  height: var(--system-module-bar-height) !important;
  padding: 8px 14px !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

main > section.noPrint > .toolbar button.secondary:hover {
  background: transparent !important;
  color: var(--customer-button-bg, var(--brand-strong)) !important;
}

main > section.noPrint > .toolbar button.red,
main > section.noPrint > .toolbar button.primary {
  min-height: var(--system-module-bar-height) !important;
  height: var(--system-module-bar-height) !important;
  padding: 8px 14px !important;
  border-radius: var(--system-control-radius) !important;
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  border-color: transparent !important;
  color: var(--customer-button-text, #fff) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

main > section.noPrint > .toolbar input,
main > section.noPrint > .toolbar select {
  min-height: 42px !important;
  border-radius: var(--system-control-radius) !important;
  border: 1px solid var(--customer-card-border, var(--line)) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.statsGrid {
  margin: 0 0 18px !important;
}

.statsGrid .card,
.statsGrid > *,
.kpi,
.kpi-card {
  min-height: 86px !important;
  display: grid !important;
  align-content: center !important;
  border-top: 3px solid var(--customer-button-bg, var(--brand-strong)) !important;
  box-shadow: none !important;
}

html[data-customer-design] .statsGrid > .card,
html[data-customer-design] .statsGrid > * {
  border-top: 3px solid var(--customer-button-bg, var(--brand-strong)) !important;
  box-shadow: none !important;
}

.statsGrid .card p,
.statsGrid > * p,
.kpi span,
.kpi-card span {
  margin: 0 !important;
  color: var(--text-3) !important;
  font-size: 13px !important;
}

.statsGrid .card h2,
.statsGrid .card strong,
.statsGrid > * h2,
.statsGrid > * strong,
.kpi strong,
.kpi-card strong {
  margin: 6px 0 0 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
}

.offer-sticky-actions {
  width: min(100%, var(--system-page-max)) !important;
  max-width: var(--system-page-max) !important;
  margin: 0 auto 16px !important;
  min-height: var(--system-tab-height) !important;
  justify-content: space-between !important;
}

.offer-sticky-actions .offer-action-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.offer-sticky-actions .offer-action-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--system-tab-height) !important;
  padding: 8px 14px !important;
  border-radius: var(--system-control-radius) !important;
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  color: var(--customer-button-text, #fff) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.offer-sticky-actions .pill,
html[data-customer-design] body.offer-step-mode .offer-sticky-actions .pill {
  min-height: var(--system-tab-height) !important;
  padding: 8px 14px !important;
  border-radius: var(--system-control-radius) !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

.offer-sticky-actions .btnrow {
  margin: 0 0 0 auto !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.offer-sticky-actions button {
  min-height: var(--system-tab-height) !important;
  padding: 8px 14px !important;
  border-radius: var(--system-control-radius) !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.offer-sticky-actions button.secondary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-2) !important;
  font-weight: 700 !important;
}

.offer-sticky-actions button.red,
.offer-sticky-actions button.primary {
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  border-color: transparent !important;
  color: var(--customer-button-text, #fff) !important;
}

html[data-customer-design] body.offer-step-mode main {
  padding: 0 16px !important;
}

html[data-customer-design] body.offer-step-mode .offer-sticky-actions {
  width: min(100%, var(--system-page-max)) !important;
  max-width: var(--system-page-max) !important;
  min-height: var(--system-module-bar-height) !important;
  height: var(--system-module-bar-height) !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 auto 16px !important;
}

html[data-customer-design] body.offer-step-mode .offer-sticky-actions .btnrow {
  margin: 0 0 0 auto !important;
}

html[data-customer-design] body.offer-step-mode .offer-sticky-actions button {
  min-height: var(--system-module-bar-height) !important;
  height: var(--system-module-bar-height) !important;
  padding: 8px 14px !important;
  border-radius: var(--system-control-radius) !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}

html[data-customer-design] body.offer-step-mode .offer-sticky-actions button.secondary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-2) !important;
  font-weight: 700 !important;
}

html[data-customer-design] body.offer-step-mode .offer-sticky-actions button.red,
html[data-customer-design] body.offer-step-mode .offer-sticky-actions button.primary {
  background: var(--customer-button-bg, var(--brand-strong)) !important;
  border-color: transparent !important;
  color: var(--customer-button-text, #fff) !important;
  font-weight: 700 !important;
}

@media (min-width: 1024px) {
  body.offer-step-mode .offer-workspace-sidebar,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    align-content: start !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  body.offer-step-mode .offer-nav-card,
  body.offer-step-mode .offer-summary-card,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-nav-card,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-summary-card,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-nav-card,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-card {
    margin: 0 !important;
    padding: 10px 11px !important;
    border-radius: 10px !important;
  }

  body.offer-step-mode .offer-nav-card h3,
  body.offer-step-mode .offer-summary-card h3,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-nav-card h3,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-card h3 {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
  }

  body.offer-step-mode .offer-section-nav,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-section-nav,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-section-nav {
    gap: 4px !important;
    margin: 0 !important;
  }

  body.offer-step-mode .offer-section-nav button,
  body.offer-step-mode .offer-section-nav button.active,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-section-nav button,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-section-nav button.active,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-section-nav button:not(.red):not(.primary):not(.secondary),
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-section-nav button:not(.red):not(.primary):not(.secondary).active {
    min-height: 30px !important;
    height: 30px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    border-radius: 7px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  body.offer-step-mode .offer-summary-row,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-summary-row,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-row {
    min-height: 22px !important;
    padding: 3px 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body.offer-step-mode .offer-summary-total,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-summary-total,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-total {
    margin-top: 6px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  body.offer-step-mode .offer-summary-total span,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-total span {
    font-size: 11px !important;
  }

  body.offer-step-mode .offer-summary-total strong,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-total strong {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  body.offer-step-mode .offer-section-nav button,
  body.offer-step-mode .offer-section-nav button.active,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-section-nav button,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-section-nav button.active,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-section-nav button:not(.red):not(.primary):not(.secondary),
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-section-nav button:not(.red):not(.primary):not(.secondary).active {
    min-height: 30px !important;
    height: 30px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body.offer-step-mode .offer-nav-card,
  body.offer-step-mode .offer-summary-card,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-nav-card,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-summary-card,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-nav-card,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-card {
    padding: 9px 10px !important;
  }

  body.offer-step-mode .offer-summary-row,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-summary-row,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-row {
    min-height: 22px !important;
    padding: 3px 0 !important;
    font-size: 12px !important;
  }

  body.offer-step-mode .offer-summary-total,
  html[data-customer-design] body.offer-step-mode .offer-workspace-sidebar .offer-summary-total,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-total {
    padding: 8px 10px !important;
  }

  body.offer-step-mode .offer-summary-total strong,
  html[data-customer-design] body.offer-step-mode #wizardSections .offer-workspace-sidebar .offer-summary-total strong {
    font-size: 18px !important;
  }
}

html[data-module-transition] header .headerNav .navPill {
  pointer-events: none !important;
}

html[data-module-transition] header .headerNav .navPill[aria-busy="true"] {
  opacity: .82 !important;
}

@media (max-width: 900px) {
  header {
    padding: 12px 16px !important;
  }

  header .bar {
    gap: 14px !important;
  }

  header .brandLogo {
    width: clamp(112px, 30vw, 156px) !important;
    height: 56px !important;
    max-width: 34vw !important;
  }
}