:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-strong: #edf4f2;
  --ink: #1e2a28;
  --muted: #64706d;
  --line: #d8e0dd;
  --accent: #176b5c;
  --accent-strong: #0f5145;
  --accent-soft: #dbeee9;
  --danger: #b23b3b;
  --warning: #9a6a13;
  --shadow: 0 10px 30px rgba(30, 42, 40, 0.08);
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
  min-width: 0;
  max-width: 100%;
}

button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  min-height: 38px;
  padding: 0 14px;
}

button:hover {
  border-color: var(--accent);
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

button.primary:hover {
  background: var(--accent-strong);
}

button.danger {
  color: var(--danger);
}

button.small {
  min-height: 32px;
  padding: 0 10px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 10px 11px;
}

input[type="date"] {
  min-width: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
  inline-size: 100%;
  appearance: none;
  -webkit-appearance: none;
}

textarea {
  min-height: 86px;
  resize: vertical;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  line-height: 1.35;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

.is-hidden {
  display: none !important;
}

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

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-panel {
  width: min(420px, 100%);
  display: grid;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.login-step {
  display: grid;
  gap: 16px;
}

.login-step h2,
.login-step p {
  margin: 0;
}

.login-trust-choice input,
.security-profile .checkbox-label input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.form-error {
  min-height: 20px;
  margin: 0;
  color: var(--danger);
  font-size: 14px;
}

.app {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand-link {
  display: grid;
  gap: 0;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.brand-link:hover {
  color: var(--accent);
  border-color: transparent;
}

.brand-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.topnav {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.topnav-button {
  border: 0;
  background: transparent;
  min-height: 34px;
}

.topnav-button.is-active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(30, 42, 40, 0.08);
}

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

.workspace {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 0;
}

.workspace.settings-view {
  grid-template-columns: minmax(0, 1fr);
}

.workspace.customer-detail-view {
  grid-template-columns: minmax(0, 1fr);
}

.sidebar {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
  min-height: 0;
  padding: 18px;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.sidebar-header,
.section-header,
.row-actions,
.form-actions,
.tabs,
.split-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.search-label {
  font-size: 12px;
}

.customer-filters {
  display: grid;
  gap: 10px;
}

.date-filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-list {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 2px;
}

.customer-list-more {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 0 4px;
}

.customer-list-more button {
  width: auto;
}

.invoice-list-more {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 4px;
}

.database-list-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 4px;
}

.customer-item {
  min-width: 0;
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  min-height: auto;
  padding: 12px;
  border-color: var(--line);
}

.customer-item.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.customer-name {
  min-width: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.customer-meta,
.record-meta {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.main-panel {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px;
}

.notice {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: #fff;
  padding: 12px 14px;
}

.button-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  padding: 0 14px;
  text-decoration: none;
}

.button-link:hover {
  border-color: var(--accent);
}

.button-link.small {
  min-height: 32px;
  padding: 0 10px;
}

.invoice-page {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 24px;
}

.invoice-editor {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 0;
  border-top: 3px solid var(--accent);
  background: var(--panel);
}

.invoice-editor > .split-header {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.invoice-editor > .split-header p {
  margin: 6px 0 0;
  font-size: 13px;
}

.invoice-section {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.invoice-section-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoice-grid {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 220px));
  gap: 14px;
  justify-content: start;
}

.invoice-grid .wide {
  grid-column: 1 / -1;
  width: min(720px, 100%);
}

.invoice-grid > label:not(.wide) {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
}

.invoice-grid > label:not(.wide) > :where(input:not([type="checkbox"]):not([type="radio"]), select) {
  width: auto;
  min-width: 170px;
  max-width: 100%;
}

.invoice-grid input[name="bank_account"],
.invoice-grid input[type="email"],
#invoice-customer-search,
#invoice-customer-select {
  width: 280px;
}

.invoice-grid input[name="invoice_number"],
.invoice-grid input[name="variable_symbol"] {
  width: 160px;
  min-width: 160px;
}

.invoice-grid input[name="customer_first_name"],
.invoice-grid input[name="customer_last_name"],
.invoice-grid input[name="customer_company"],
.invoice-grid input[name="customer_city"] {
  width: 210px;
  min-width: 170px;
}

.invoice-grid input[name="customer_postal_code"],
.invoice-grid input[name="work_price"],
.invoice-grid input[name="transport_price"],
.invoice-grid input[name="transport_km"] {
  width: 140px;
  min-width: 140px;
}

.invoice-section > label {
  width: min(720px, 100%);
}

.segmented-control {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.segmented-control label {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.segmented-control label + label {
  border-left: 1px solid var(--line);
}

.segmented-control input {
  width: auto;
  margin: 0;
}

.invoice-customer-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 10px 18px;
  margin-top: 14px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  padding: 12px 14px;
  font-size: 13px;
}

.invoice-customer-summary span,
.invoice-customer-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.invoice-transport-mode {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}

.invoice-transport-mode > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.invoice-calculation {
  align-self: end;
  min-height: 42px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}

.invoice-calculation strong {
  margin-left: 5px;
  color: var(--ink);
}

.invoice-work-items-panel,
.invoice-work-items {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 8px;
}

.invoice-work-items-panel > .small {
  justify-self: start;
}

.invoice-work-item-row {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 300px) 68px 76px minmax(130px, 150px) 38px;
  gap: 10px;
  align-items: end;
  justify-content: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.invoice-parts {
  display: grid;
}

.invoice-part-row {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(150px, 220px) 68px 76px minmax(130px, 150px) 38px;
  gap: 10px;
  align-items: end;
  justify-content: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.invoice-grid > *,
.invoice-work-item-row > *,
.invoice-part-row > * {
  min-width: 0;
  max-width: 100%;
}

.invoice-add-part {
  justify-self: start;
}

.invoice-total-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding: 22px 0;
  color: var(--accent-strong);
  font-weight: 800;
}

.invoice-total-line strong {
  min-width: 170px;
  font-size: 24px;
  text-align: right;
}

.invoice-editor > .form-actions {
  padding-bottom: 22px;
}

.invoice-history {
  display: grid;
  gap: 14px;
}

.invoice-filters {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 170px 170px 180px;
  gap: 12px;
  align-items: end;
  justify-content: start;
}

.invoice-filters > * {
  min-width: 0;
}

.invoice-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.invoice-filter-actions .muted {
  font-size: 13px;
}

.invoice-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.invoice-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 110px minmax(170px, 1.2fr) minmax(150px, 0.8fr) 120px minmax(130px, 0.7fr) 90px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.invoice-row-header {
  min-height: 38px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.invoice-row.is-cancelled {
  background: #fff7f7;
}

.invoice-row.is-cancelled .invoice-cell-number strong,
.invoice-row.is-cancelled .invoice-cell-amount strong {
  color: var(--muted);
  text-decoration: line-through;
}

.invoice-row > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  overflow-wrap: anywhere;
}

.invoice-row small {
  color: var(--muted);
  font-size: 12px;
}

.invoice-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px !important;
}

.invoice-history-stats {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.invoice-total-status {
  background: var(--accent);
  color: #fff;
}

.text-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.invoice-detail {
  display: grid;
  gap: 18px;
  padding: 20px 0;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--line);
}

.invoice-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
}

.invoice-detail-grid > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.invoice-detail-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.invoice-detail-grid strong {
  overflow-wrap: anywhere;
}

.invoice-detail-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.invoice-cancellation-summary {
  width: min(720px, 100%);
  display: grid;
  gap: 5px;
  border-left: 4px solid var(--danger);
  background: #fff7f7;
  padding: 12px 14px;
}

.invoice-cancellation-summary > strong {
  color: var(--danger);
}

.invoice-cancellation-summary > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.invoice-cancellation-summary p {
  margin: 3px 0 0;
  line-height: 1.45;
}

.invoice-total-line.is-cancelled {
  color: var(--danger);
}

.invoice-total-line.is-cancelled strong {
  text-decoration: line-through;
}

.invoice-detail-items {
  display: grid;
  border-top: 1px solid var(--line);
}

.invoice-detail-items > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.invoice-detail-items span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.invoice-detail-items small {
  color: var(--muted);
  font-size: 12px;
}

.invoice-paid-option {
  align-self: end;
  min-height: 42px;
}

.empty-state {
  min-height: 360px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  color: var(--muted);
}

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

.detail-header p {
  margin: 7px 0 0;
}

.detail-heading {
  min-width: 0;
}

.detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.back-button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.tabs {
  justify-content: flex-start;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.tab-button {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 0 12px;
}

.tab-button.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.content-band {
  display: grid;
  gap: 18px;
}

.profile-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

.profile-field,
.profile-note {
  display: grid;
  gap: 5px;
}

.profile-field span,
.profile-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-field strong {
  font-size: 15px;
  line-height: 1.4;
}

.profile-note p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
}

.consent-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.consent-summary > div {
  min-width: 0;
}

.consent-request-meta,
.consent-contact {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.consent-contact {
  margin-top: 3px;
}

.consent-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.review-request-summary,
.email-delivery-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.email-delivery-summary + .review-request-summary {
  border-top: 0;
}

.review-request-summary h4,
.email-delivery-summary h4 {
  margin: 0;
}

.review-request-summary .consent-request-meta,
.email-delivery-summary .consent-request-meta {
  margin-top: 4px;
}

.consent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.consent-history {
  font-size: 13px;
}

.consent-history summary {
  width: fit-content;
  color: var(--accent-strong);
  cursor: pointer;
  font-weight: 700;
}

.consent-history > div {
  display: grid;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.consent-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.consent-history-row strong {
  color: var(--ink);
}

.communication-history-row span:first-child {
  display: grid;
  gap: 2px;
}

.communication-history-row small {
  color: var(--muted);
  font-size: 11px;
}

.communication-history-row .communication-error {
  grid-column: 1 / -1;
  color: var(--danger);
}

.status.neutral {
  background: #eef1f0;
  color: #52615d;
}

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

.profile-boiler-list {
  display: grid;
  gap: 10px;
}

.profile-boiler-item {
  width: 100%;
  min-height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.profile-boiler-item:first-child {
  border-top: 0;
}

.profile-boiler-item span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-boiler-item strong {
  color: var(--ink);
}

.profile-boiler-item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.chevron {
  color: var(--accent);
  font-size: 28px;
  line-height: 1;
}

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

.form-grid > *,
.date-filter-row > *,
.preview-grid > *,
.measurement-grid > * {
  min-width: 0;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.unit-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.unit-input span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.form-section {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

.service-list,
.catalog-grid {
  display: grid;
  gap: 12px;
}

.boiler-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: start;
}

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

.boiler-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.boiler-card.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.boiler-select {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.boiler-select span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.boiler-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.boiler-facts span {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.boiler-facts strong {
  color: var(--ink);
  overflow-wrap: normal;
}

.boiler-frequent-parts {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.boiler-frequent-parts > strong {
  font-size: 14px;
}

.boiler-frequent-parts p {
  margin: 0;
}

.frequent-part-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.frequent-part-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
}

.frequent-part-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.nfc-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.nfc-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

.nfc-panel summary::-webkit-details-marker {
  display: none;
}

.nfc-panel summary::after {
  content: "+";
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.nfc-panel[open] summary {
  border-bottom: 1px solid var(--line);
}

.nfc-panel[open] summary::after {
  content: "-";
}

.nfc-panel-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.nfc-panel-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.nfc-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.boiler-identification-panel {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.boiler-identification-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.boiler-identification-panel summary::-webkit-details-marker {
  display: none;
}

.boiler-identification-panel summary::after {
  content: "+";
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.boiler-identification-panel[open] summary {
  border-bottom: 1px solid var(--line);
}

.boiler-identification-panel[open] summary::after {
  content: "-";
}

.boiler-identification-body {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.boiler-identification-header {
  display: grid;
  gap: 4px;
}

.boiler-identification-header strong {
  font-size: 14px;
}

.boiler-identification-header span,
.boiler-identification-result span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.boiler-identification-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.boiler-identification-result {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
}

.boiler-identification-result.warning {
  border-color: #e7c16d;
  background: #fff8e8;
}

.boiler-serial-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-left: 4px solid var(--warning);
  background: #fff8e8;
  padding: 12px 14px;
}

.boiler-serial-warning > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.boiler-serial-warning strong {
  color: #6f4a08;
}

.boiler-serial-warning span {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.boiler-serial-warning button {
  flex: 0 0 auto;
}

.measurement-scan-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.measurement-scan-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.measurement-scan-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
}

.option-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.option-group > span {
  width: 100%;
  color: var(--muted);
}

.option-group label:not(.checkbox-label) {
  min-width: min(260px, 100%);
  flex: 1;
}

.defects-group {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 8px;
}

.defects-group .checkbox-label {
  width: 100%;
}

.service-record,
.catalog-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.service-record.is-clickable {
  cursor: pointer;
}

.service-record.is-clickable:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.service-preview {
  scroll-margin-top: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.service-preview h3 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.service-preview > .split-header h3 {
  font-size: 17px;
}

.service-preview .muted {
  font-size: 14px;
  line-height: 1.45;
}

.service-preview-section {
  display: grid;
  gap: 10px;
}

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

.preview-field,
.preview-note {
  display: grid;
  gap: 5px;
}

.preview-field span,
.preview-note span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.preview-field strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.preview-note p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-wrap;
}

.preview-plain-list {
  display: grid;
  gap: 5px;
}

.preview-plain-item {
  display: grid;
  gap: 2px;
}

.preview-plain-item strong,
.preview-plain-text {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.preview-plain-item span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.preview-plain-text {
  margin: 0;
}

.record-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.record-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

.status.warning {
  background: #fff3d8;
  color: var(--warning);
}

.status.danger {
  background: #fde8e8;
  color: var(--danger);
}

.selector-table {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.selector-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.selector-row.parts {
  grid-template-columns: minmax(0, 1fr) 92px auto;
}

.selector-row.custom-service-row {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px) 36px;
}

.selector-row.parts.custom-service-row {
  grid-template-columns: minmax(0, 1fr) 78px 72px minmax(140px, 200px) 36px;
}

.custom-selector-table:empty {
  display: none;
}

.custom-selector-table {
  border-top: 0;
}

.custom-entry-name {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.custom-entry-name input,
.part-quantity-inline select {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
}

.custom-entry-remove {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
}

.selector-add-action {
  margin-top: 8px;
}

.service-choice-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.selector-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
}

.inline-name {
  min-width: 0;
}

.inline-name strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.part-quantity-inline {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.part-quantity-inline input {
  min-width: 0;
  padding: 7px 8px;
}

.selector-note {
  min-width: min(220px, 100%);
  justify-self: end;
}

.selector-note summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.selector-note summary::-webkit-details-marker {
  display: none;
}

.selector-note input {
  width: 100%;
  margin-top: 6px;
  padding: 8px 9px;
}

.catalog-columns {
  display: grid;
  gap: 18px;
}

.catalog-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto;
  gap: 10px;
  align-items: end;
}

.catalog-form.operations {
  grid-template-columns: minmax(0, 1fr) auto;
}

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

.email-settings-form,
.email-settings-section,
.email-template-editor,
.email-upload-panel,
.email-asset-list {
  display: grid;
  gap: 14px;
}

.email-settings-section {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.email-settings-section:last-of-type {
  border-bottom: 0;
}

.email-template-grid,
.email-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.email-review-grid {
  display: grid;
  grid-template-columns: 180px repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.review-email-actions {
  justify-content: flex-end;
}

.email-review-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(17, 35, 31, 0.24);
}

.email-review-test-dialog {
  width: min(520px, calc(100% - 32px));
}

.email-review-dialog::backdrop {
  background: rgba(17, 35, 31, 0.52);
}

.email-review-dialog-content {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.email-review-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.email-review-dialog-heading > div {
  display: grid;
  gap: 4px;
}

.email-review-dialog-heading h3,
.email-review-dialog-content p {
  margin: 0;
}

.review-preview-toolbar {
  display: inline-flex;
  width: fit-content;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
}

.review-preview-toolbar button {
  border-color: transparent;
  background: transparent;
}

.review-preview-toolbar button.is-active {
  border-color: var(--line);
  background: var(--panel);
  color: var(--accent-strong);
}

.review-email-preview-document {
  width: 100%;
  min-height: 360px;
  margin: 0 auto;
  background: #fff;
  border-top: 3px solid var(--accent);
  transition: max-width 160ms ease;
}

.review-email-preview-document.is-mobile {
  max-width: 390px;
}

.review-email-preview-meta {
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.review-email-preview-meta span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.review-email-preview-content {
  padding: 20px 18px 28px;
  color: #17201f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.review-email-preview-content a {
  color: var(--accent-strong);
  font-weight: 700;
}

.review-email-preview-content .email-signature-image {
  max-width: 100%;
}

.review-email-test-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.email-automation-header {
  align-items: center;
  gap: 16px;
}

.settings-switch {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  gap: 9px;
  color: var(--ink);
  cursor: pointer;
}

.settings-switch input {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 40px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #d8dfdc;
  cursor: pointer;
}

.settings-switch input::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  content: "";
  transition: transform 140ms ease;
}

.settings-switch input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.settings-switch input:checked::after {
  transform: translateX(18px);
}

.settings-switch input:focus-visible {
  outline: 3px solid rgb(23 107 92 / 22%);
  outline-offset: 2px;
}

.settings-switch span {
  white-space: nowrap;
}

.email-template-editor + .email-template-editor {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.email-variable-legend {
  padding-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.email-variable-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.email-variable-group {
  min-width: 0;
}

.email-variable-group + .email-variable-group {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.email-variable-group h4 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 13px;
}

.email-variable-list {
  display: grid;
  gap: 7px;
}

.email-variable-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}

.email-variable-item code {
  color: var(--accent-strong);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;
}

.email-template-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.email-template-heading h4,
.email-upload-panel h4,
.email-preview-wrap h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.email-preview-wrap {
  display: grid;
  gap: 8px;
}

.email-preview {
  min-height: 120px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.email-preview img {
  display: block;
  max-width: min(100%, 520px);
  max-height: 260px;
  width: auto;
  height: auto;
  margin: 12px 0;
  object-fit: contain;
}

.email-template-heading label {
  width: 150px;
}

.email-template-editor textarea,
.email-settings-section > label textarea {
  min-height: 150px;
  line-height: 1.45;
}

.email-upload-panel {
  align-content: start;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

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

.email-asset-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.email-asset-item.is-selectable {
  grid-template-columns: auto 56px minmax(0, 1fr) auto;
}

.email-asset-select {
  display: grid;
  justify-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
}

.email-asset-select input {
  margin: 0;
}

.email-asset-item img,
.email-asset-file {
  width: 56px;
  height: 44px;
  display: grid;
  place-items: center;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}

.email-asset-file {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.email-asset-name {
  min-width: 0;
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
}

.email-asset-name strong {
  font-size: 13px;
}

.email-asset-name small {
  color: var(--muted);
  font-size: 11px;
}

.email-settings-actions {
  position: sticky;
  bottom: 0;
  padding: 12px 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.email-signature-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.email-signature-controls {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
}

.email-signature-actions {
  justify-content: flex-start;
}

.email-signature-preview {
  min-height: 180px;
}

.email-signature-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 18px;
  object-fit: contain;
}

.database-page {
  display: grid;
  gap: 18px;
}

.database-tabs {
  margin-bottom: 0;
}

.database-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.database-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.database-date-range {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 12px;
}

.database-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
}

.database-list {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.database-row {
  width: 100%;
  min-width: 0;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(125px, 0.7fr) minmax(150px, 0.9fr) minmax(210px, 1.25fr) minmax(170px, 1fr) minmax(105px, 0.55fr);
  gap: 14px;
  align-items: center;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.database-row.consents {
  grid-template-columns: minmax(125px, 0.65fr) minmax(150px, 0.8fr) minmax(190px, 1fr) minmax(390px, 2.4fr);
}

.database-consent-values {
  display: grid;
  gap: 6px;
}

.database-consent-value {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.35;
}

.database-consent-value:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

button.database-row:hover {
  background: var(--accent-soft);
}

.quality-page {
  min-width: 0;
}

.quality-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.quality-summary-item {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 16px 14px;
  border-right: 1px solid var(--line);
}

.quality-summary-item:last-child {
  border-right: 0;
}

.quality-summary-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.quality-summary-item strong {
  font-size: 24px;
  line-height: 1;
}

.quality-summary-item.critical strong {
  color: #b92e2e;
}

.quality-summary-item.warning strong {
  color: #996311;
}

.quality-summary-item.info strong {
  color: var(--accent);
}

.quality-generated {
  margin: 10px 0 0;
  font-size: 12px;
}

.quality-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.quality-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quality-list {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.quality-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(105px, 0.55fr) minmax(150px, 0.8fr) minmax(260px, 1.7fr) minmax(180px, 1fr) 64px;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

button.quality-row:hover {
  background: var(--accent-soft);
}

.quality-row > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
}

.quality-row strong {
  font-size: 13px;
  line-height: 1.4;
}

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

.quality-row-action {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.quality-row-header {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.database-row > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
}

.database-row strong {
  font-size: 13px;
  line-height: 1.4;
}

.database-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.database-row-header {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.database-empty {
  margin: 10px 0;
}

.automation-page {
  min-width: 0;
}

.automation-status-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  padding: 16px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.automation-status-band > div:first-child {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  align-items: center;
}

.automation-status-band > div:first-child small {
  grid-column: 2;
  color: var(--muted);
  line-height: 1.45;
}

.automation-status-band dl {
  display: flex;
  gap: 24px;
  margin: 0;
}

.automation-status-band dl div {
  display: grid;
  gap: 3px;
}

.automation-status-band dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.automation-status-band dd {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.automation-modules,
.automation-history {
  margin-top: 24px;
}

.automation-module-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(390px, 1.45fr);
  gap: 18px;
  align-items: center;
  padding: 14px 4px;
  border-top: 1px solid var(--line);
}

.automation-module-row:last-child {
  border-bottom: 1px solid var(--line);
}

.automation-module-row > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.automation-module-row > div:first-child small {
  color: var(--muted);
  font-size: 12px;
}

.automation-counts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(58px, 1fr));
  gap: 6px;
}

.automation-counts > span {
  display: grid;
  gap: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.automation-counts strong {
  font-size: 15px;
}

.automation-counts small {
  color: var(--muted);
  font-size: 10px;
}

.automation-counts .has-error strong {
  color: var(--danger);
}

.automation-run-list {
  min-width: 0;
  border-top: 1px solid var(--line);
}

.automation-run-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.05fr) minmax(155px, 0.9fr) minmax(135px, 0.8fr) minmax(135px, 0.8fr) 80px;
  gap: 14px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}

.automation-run-row > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
}

.automation-run-row strong {
  font-size: 13px;
}

.automation-run-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.automation-run-row .automation-run-error {
  color: var(--danger);
}

.automation-run-header {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.marketing-builder,
.marketing-page,
.marketing-section {
  min-width: 0;
}

.marketing-builder {
  display: grid;
  gap: 0;
}

.marketing-section {
  display: grid;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.marketing-section:first-child {
  padding-top: 4px;
}

.marketing-message-grid,
.marketing-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.marketing-filter-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.marketing-choice-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.marketing-choice-groups fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.marketing-choice-groups legend {
  margin-bottom: 9px;
  color: var(--ink);
  font-weight: 800;
}

.marketing-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.marketing-filter-choice {
  min-height: 32px;
}

.marketing-safety-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.marketing-safety-note strong {
  color: var(--ink);
}

.marketing-assets-note,
.marketing-empty {
  margin: 0;
}

.marketing-recipient-list,
.marketing-campaign-list {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.marketing-recipient-row,
.marketing-campaign-row {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}

.marketing-recipient-row {
  grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1fr) minmax(240px, 1.5fr) minmax(115px, 0.65fr);
}

.marketing-campaign-row {
  grid-template-columns: minmax(160px, 0.9fr) minmax(210px, 1.3fr) minmax(120px, 0.65fr) minmax(130px, 0.65fr) auto;
}

.marketing-campaign-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px !important;
}

.marketing-recipient-row > span,
.marketing-campaign-row > span,
.marketing-counts {
  min-width: 0;
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
}

.marketing-recipient-row strong,
.marketing-campaign-row strong {
  font-size: 13px;
  line-height: 1.4;
}

.marketing-recipient-row small,
.marketing-campaign-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.marketing-report-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 20px 0 14px;
}

.marketing-report-heading h3 {
  margin: 0 0 4px;
}

.marketing-report-heading p {
  margin: 0;
}

.marketing-message-details {
  margin-bottom: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.marketing-message-details summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.marketing-message-details summary::before {
  content: "›";
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
  transform-origin: center;
  transition: transform 140ms ease;
}

.marketing-message-details[open] summary::before {
  transform: rotate(90deg);
}

.marketing-message-details summary small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.marketing-message-detail-content {
  display: grid;
  gap: 18px;
  padding: 2px 0 20px;
}

.marketing-message-subject {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
}

.marketing-message-subject > span,
.marketing-message-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.marketing-message-preview {
  display: grid;
  gap: 8px;
}

.marketing-message-preview p {
  margin: 0;
  font-size: 12px;
}

.marketing-campaign-email-body {
  max-width: 760px;
  min-height: 0;
}

.marketing-campaign-email-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 14px 0;
}

.marketing-message-attachments {
  display: grid;
  gap: 8px;
}

.marketing-message-attachments h4 {
  margin: 0;
}

.marketing-message-attachment {
  min-width: 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.marketing-message-attachment > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
}

.marketing-message-attachment small {
  color: var(--muted);
  font-size: 11px;
}

.marketing-message-attachment > span:last-child {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.marketing-measurement-note {
  padding: 12px 14px;
  border-left: 3px solid #b77b18;
  background: #fff8e8;
  color: #5f481f;
  font-size: 13px;
  line-height: 1.5;
}

.marketing-report-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.marketing-report-metric {
  min-width: 0;
  min-height: 94px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  background: #fff;
}

.marketing-report-metric > span,
.marketing-report-metric small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.marketing-report-metric strong {
  font-size: 24px;
  line-height: 1;
}

.marketing-report-bars {
  display: grid;
  gap: 13px;
}

.marketing-report-bar-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(180px, 2fr) 48px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.marketing-report-bar {
  height: 12px;
  overflow: hidden;
  background: #e8eceb;
}

.marketing-report-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: #687571;
}

.marketing-report-bar i.accepted {
  background: #176b5c;
}

.marketing-report-bar i.opened {
  background: #b77b18;
}

.marketing-report-bar i.clicked {
  background: #176b5c;
}

.marketing-report-recipients {
  display: grid;
  border-top: 1px solid var(--line);
}

.marketing-report-recipient {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(155px, 0.85fr) minmax(145px, 0.75fr) minmax(145px, 0.75fr);
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}

.marketing-report-recipient > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
}

.marketing-report-recipient strong {
  font-size: 13px;
}

.marketing-report-recipient small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.marketing-report-recipient-header {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.marketing-recipient-header {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.marketing-test-row {
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto;
  align-items: end;
  gap: 10px;
}

.marketing-send-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.marketing-send-actions p {
  margin: 0;
  max-width: 720px;
}

.service-overview-page {
  display: grid;
  gap: 18px;
}

.service-overview-tabs {
  margin-bottom: 0;
}

.service-overview-range {
  max-width: 520px;
}

.service-overview-list {
  display: grid;
  gap: 10px;
}

.service-overview-card {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.service-overview-item {
  width: 100%;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(190px, 1.3fr) minmax(130px, 0.65fr) minmax(170px, 1fr) minmax(120px, 0.8fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
}

.service-overview-item:hover {
  background: var(--accent-soft);
}

.service-overview-item span,
.service-overview-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.service-overview-item strong {
  color: var(--ink);
}

.service-overview-item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.service-overview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.service-overview-actions > small {
  color: var(--muted);
  font-size: 12px;
}

.settings-tabs {
  justify-content: flex-start;
  margin-bottom: 0;
}

.security-profile,
.security-section,
.security-device-list,
.security-event-list {
  display: grid;
  gap: 14px;
}

.security-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
}

.security-status.is-warning {
  border-left-color: var(--warning);
  background: #fff7e5;
}

.security-status > div,
.security-method > div:first-child,
.security-device-row > div,
.security-event-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.security-status span,
.security-method span,
.security-device-row small,
.security-event-row small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.security-config-warning {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #ead7a7;
  background: #fff7e5;
  color: #714d0d;
}

.security-section {
  padding: 4px 0 22px;
  border-bottom: 1px solid var(--line);
}

.security-section:last-of-type {
  border-bottom: 0;
}

.security-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 260px));
  gap: 14px;
  align-items: end;
}

.security-form .wide {
  grid-column: 1 / -1;
}

.security-method,
.security-device-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.security-inline-form {
  display: grid;
  grid-template-columns: minmax(220px, 320px) auto;
  align-items: end;
  gap: 12px;
}

.security-username-form {
  grid-template-columns: minmax(180px, 260px) minmax(220px, 320px) auto;
}

.security-event-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.security-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(17, 35, 31, 0.24);
}

.security-dialog::backdrop {
  background: rgba(17, 35, 31, 0.52);
}

.security-dialog-content {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.security-dialog-content p {
  margin: 0;
  line-height: 1.5;
}

.totp-qr {
  width: min(260px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  image-rendering: pixelated;
}

.totp-secret {
  display: block;
  margin-top: 8px;
  padding: 10px;
  overflow-wrap: anywhere;
  background: var(--bg);
}

.recovery-code-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding-left: 28px;
}

.recovery-code-list code {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}

.recovery-print-note {
  color: var(--muted);
  font-size: 13px;
}

@media print {
  body.print-recovery-codes * {
    visibility: hidden !important;
  }

  body.print-recovery-codes .recovery-print-sheet,
  body.print-recovery-codes .recovery-print-sheet * {
    visibility: visible !important;
  }

  body.print-recovery-codes .recovery-print-sheet {
    position: fixed;
    inset: 0;
    width: 100%;
    padding: 18mm;
    background: #fff;
    color: #000;
  }

  body.print-recovery-codes .no-print {
    display: none !important;
  }
}

.backup-settings,
.backup-list {
  display: grid;
  gap: 14px;
}

.backup-header {
  align-items: flex-start;
}

.backup-header > div {
  display: grid;
  gap: 5px;
}

.backup-header p {
  margin: 0;
}

.backup-security,
.backup-note {
  display: grid;
  gap: 4px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 12px 14px;
}

.backup-security.is-warning {
  border-left-color: var(--warning);
  background: #fff7e5;
}

.backup-security span,
.backup-note span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cloud-backup-card {
  display: grid;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cloud-backup-card h3,
.cloud-backup-card p {
  margin: 0;
}

.cloud-backup-card.is-warning {
  border-left: 3px solid var(--warning);
  padding-left: 14px;
}

.cloud-backup-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.cloud-backup-heading > div,
.cloud-backup-form {
  display: grid;
  gap: 10px;
}

.cloud-backup-form > label:not(.check-line) {
  width: min(240px, 100%);
}

.cloud-backup-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  font-size: 13px;
}

.cloud-backup-details > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cloud-backup-details dt,
.cloud-backup-details strong {
  color: var(--ink);
  font-size: 12px;
}

.cloud-backup-details dd,
.cloud-backup-details span {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.cloud-backup-actions {
  align-items: center;
}

.backup-list-header {
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.backup-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.backup-item-main {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.backup-item-main .record-title strong {
  overflow-wrap: anywhere;
}

.backup-meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.backup-meta span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.backup-meta strong {
  color: var(--ink);
  font-size: 11px;
  text-transform: uppercase;
}

.backup-meta code {
  overflow-wrap: anywhere;
}

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

.backup-restore-list {
  display: grid;
  gap: 2px;
}

.backup-restore-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.backup-restore-item p {
  margin: 4px 0 0;
  font-size: 12px;
}

.backup-restore-safety {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: 12px;
}

.backup-restore-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(17, 35, 31, 0.24);
  color: var(--ink);
}

.backup-restore-dialog::backdrop {
  background: rgba(17, 35, 31, 0.52);
}

.backup-restore-dialog form {
  display: grid;
  gap: 17px;
  padding: 22px;
}

.backup-restore-dialog h3,
.backup-restore-dialog p {
  margin: 0;
}

.backup-restore-dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.backup-restore-dialog-heading > div {
  display: grid;
  gap: 4px;
}

.backup-restore-warning {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-left: 3px solid var(--danger);
  background: #fff1f0;
}

.backup-restore-warning span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.backup-restore-check {
  align-items: flex-start;
}

.backup-restore-check input {
  margin-top: 3px;
}

.backup-restore-dialog-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.catalog-list {
  display: grid;
  gap: 10px;
}

.catalog-item {
  position: relative;
}

.catalog-item.is-hidden-item {
  background: #fafafa;
}

.catalog-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 92px minmax(120px, 0.45fr) auto;
  gap: 10px;
  align-items: end;
}

.catalog-row.operations {
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 0.45fr) auto;
}

.order-controls {
  display: grid;
  grid-template-columns: repeat(2, 36px);
  gap: 6px;
  align-self: end;
}

.icon-button {
  min-width: 36px;
  padding: 0;
}

.icon-button:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.38;
}

.catalog-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px 76px;
  gap: 10px;
  align-items: center;
}

.catalog-edit-grid.operations {
  grid-template-columns: minmax(0, 1fr) 76px;
}

.checkbox-label input {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.scroll-top-button {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.scroll-top-button:hover {
  background: var(--accent-strong);
}

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

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 380px;
  }

  .catalog-columns,
  .boiler-layout,
  .form-grid,
  .profile-grid,
  .preview-grid {
    grid-template-columns: 1fr;
  }

  .security-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .boiler-facts {
    grid-template-columns: 1fr;
  }

  .service-overview-item {
    grid-template-columns: 1fr 1fr;
  }

  .database-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .invoice-grid {
    grid-template-columns: repeat(2, minmax(170px, 220px));
  }

  .invoice-filters {
    grid-template-columns: repeat(2, minmax(170px, 220px));
  }

  .invoice-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-part-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-work-item-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-work-item-row .icon-button,
  .invoice-part-row .icon-button {
    justify-self: end;
  }

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

  .invoice-row-header {
    display: none;
  }

  .invoice-row > span::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .invoice-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .quality-summary-item:nth-child(2) {
    border-right: 0;
  }

  .quality-summary-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .quality-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .quality-row > span:nth-child(3),
  .quality-row > span:nth-child(4) {
    grid-column: 1 / -1;
  }

  .quality-row-header {
    display: none;
  }

  .quality-row > span::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .quality-row-action {
    align-self: end;
    text-align: right;
  }

  .automation-status-band {
    grid-template-columns: 1fr;
  }

  .automation-status-band dl {
    justify-content: flex-start;
  }

  .automation-module-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .automation-counts {
    grid-column: 1 / -1;
  }

  .automation-run-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .automation-run-header {
    display: none;
  }

  .automation-run-row > span::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .marketing-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-recipient-row,
  .marketing-campaign-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-report-recipient {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-report-recipient-header {
    display: none;
  }

  .marketing-recipient-header {
    display: none;
  }

  .marketing-recipient-row > span::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .email-template-grid,
  .email-upload-grid,
  .email-review-grid,
  .email-signature-layout {
    grid-template-columns: 1fr;
  }

  .email-template-editor + .email-template-editor {
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .email-variable-groups {
    grid-template-columns: 1fr;
  }

  .email-variable-group + .email-variable-group {
    padding-top: 18px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

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

  .database-row.consents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .database-row.consents .database-consent-values {
    grid-column: 1 / -1;
  }

  .database-row-header {
    display: none;
  }

  .database-row > span::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .nfc-link-row {
    grid-template-columns: 1fr;
  }

  .measurement-scan-controls,
  .boiler-identification-controls {
    grid-template-columns: 1fr;
  }

  .boiler-serial-warning {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar,
  .detail-header,
  .split-header {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-actions {
    justify-content: flex-start;
  }

  .topnav {
    width: 100%;
  }

  .topnav-button {
    flex: 1;
  }

  .backup-header {
    align-items: stretch;
    flex-direction: column;
  }

  .backup-header button {
    width: 100%;
  }

  .backup-item {
    grid-template-columns: 1fr;
  }

  .backup-meta {
    grid-template-columns: 1fr 1fr;
  }

  .backup-actions {
    justify-content: flex-start;
  }

  .cloud-backup-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    min-width: 0;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .app,
  .topbar,
  .workspace,
  .main-panel,
  .sidebar,
  .content-band {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .topbar > *,
  .workspace > *,
  .main-panel > *,
  .content-band > * {
    min-width: 0;
    max-width: 100%;
  }

  .automation-status-band > div:first-child {
    grid-template-columns: 1fr;
  }

  .security-status,
  .security-section .section-header,
  .security-method,
  .security-device-row {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .security-form,
  .security-inline-form,
  .security-event-row {
    grid-template-columns: 1fr;
  }

  .security-inline-form button,
  .security-method > button,
  .security-method .row-actions,
  .security-dialog-actions {
    width: 100%;
  }

  .security-method .row-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .security-dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
  }

  .security-dialog-content {
    padding: 18px;
  }

  .recovery-code-list {
    grid-template-columns: 1fr;
  }

  .automation-status-band > div:first-child small {
    grid-column: 1;
  }

  .automation-status-band dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .automation-module-row,
  .automation-run-row {
    grid-template-columns: 1fr;
  }

  .automation-module-row > .status,
  .automation-counts {
    grid-column: 1;
  }

  .automation-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .automation-counts > span {
    min-height: 38px;
  }

  .sidebar {
    max-height: none;
  }

  .customer-list {
    overflow-y: visible;
  }

  .main-panel,
  .sidebar,
  .topbar {
    padding: 14px;
  }

  .topbar {
    padding-top: max(14px, env(safe-area-inset-top));
  }

  .topbar,
  .section-header,
  .row-actions,
  .form-actions,
  .topbar-actions {
    flex-wrap: wrap;
  }

  .consent-summary {
    display: grid;
  }

  .consent-summary button,
  .review-request-summary button {
    width: 100%;
  }

  .review-request-summary,
  .email-delivery-summary,
  .email-automation-header {
    display: grid;
    align-items: start;
  }

  .consent-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .consent-history-row time {
    grid-column: 1 / -1;
  }

  .topnav-button {
    flex: 0 0 auto;
    min-width: 0;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .topnav {
    overflow-x: auto;
  }

  .database-filters,
  .database-date-range,
  .database-row,
  .database-row.consents,
  .quality-filters,
  .quality-row,
  .invoice-filters {
    grid-template-columns: 1fr;
  }

  .invoice-filter-actions {
    align-items: flex-start;
  }

  .invoice-grid,
  .invoice-customer-summary,
  .invoice-detail-grid {
    grid-template-columns: 1fr;
  }

  .invoice-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-items: start;
  }

  .invoice-grid > label:not(.wide) {
    width: fit-content;
    max-width: 100%;
    justify-self: start;
  }

  .invoice-editor > .split-header {
    align-items: flex-start;
  }

  .invoice-editor > .split-header #close-invoice-editor {
    width: auto;
    align-self: flex-start;
  }

  .invoice-grid > *,
  .invoice-section > *,
  .invoice-parts,
  .invoice-work-items,
  .invoice-work-items-panel {
    min-width: 0;
    max-width: 100%;
  }

  .invoice-part-row,
  .invoice-work-item-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(70px, 88px) minmax(68px, 82px) minmax(0, 1fr);
    column-gap: 8px;
    overflow: hidden;
  }

  .invoice-part-select,
  .invoice-custom-part,
  .invoice-part-price,
  .invoice-work-name,
  .invoice-work-price {
    grid-column: 1 / -1;
  }

  .invoice-part-quantity,
  .invoice-work-quantity {
    grid-column: 1;
  }

  .invoice-part-unit,
  .invoice-work-unit {
    grid-column: 2;
  }

  .invoice-part-quantity input,
  .invoice-part-unit select,
  .invoice-work-quantity input,
  .invoice-work-unit select {
    min-height: 40px;
    padding: 8px;
  }

  .invoice-part-row .icon-button,
  .invoice-work-item-row .icon-button {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .invoice-row {
    grid-template-columns: minmax(72px, 0.75fr) minmax(100px, 1.25fr) auto auto;
    gap: 8px;
    padding: 10px 0;
  }

  .invoice-row > span::before {
    display: none;
  }

  .invoice-row > .invoice-cell-date,
  .invoice-row > .invoice-cell-amount,
  .invoice-cell-customer small,
  .invoice-email-status {
    display: none;
  }

  .invoice-cell-number strong,
  .invoice-cell-customer strong {
    font-size: 13px;
  }

  .invoice-cell-status .status {
    padding: 5px 7px;
    font-size: 10px;
    white-space: nowrap;
  }

  #detail,
  #invoice-editor-root,
  .invoice-page,
  .invoice-editor,
  .invoice-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .invoice-section-heading,
  .invoice-total-line,
  .invoice-transport-mode {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-history-stats {
    justify-content: flex-start;
  }

  .invoice-detail-actions {
    justify-content: flex-end;
  }

  .segmented-control {
    width: 100%;
  }

  .segmented-control label {
    flex: 1;
    justify-content: center;
  }

  .invoice-total-line strong {
    min-width: 0;
    text-align: left;
  }

  .invoice-editor > .form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 76px;
  }

  .invoice-editor > .form-actions .primary {
    width: 100%;
    min-height: 46px;
    height: auto;
    padding: 10px 12px;
    line-height: 1.3;
    white-space: normal;
  }

  .invoice-work-item-row .icon-button,
  .invoice-part-row .icon-button {
    justify-self: end;
  }

  .invoice-actions {
    grid-column: auto;
    display: flex !important;
    justify-content: flex-end;
  }

  .invoice-actions .small {
    min-height: 32px;
    padding: 5px 8px;
  }

  .database-row.consents .database-consent-values {
    grid-column: auto;
  }

  .database-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .quality-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .database-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .marketing-message-grid,
  .marketing-filter-grid,
  .marketing-choice-groups,
  .marketing-recipient-row,
  .marketing-campaign-row,
  .marketing-test-row {
    grid-template-columns: 1fr;
  }

  .marketing-send-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .marketing-report-heading {
    display: grid;
  }

  .marketing-report-metrics {
    grid-template-columns: 1fr;
  }

  .marketing-report-bar-row {
    grid-template-columns: 1fr 42px;
    gap: 6px 10px;
  }

  .marketing-report-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .marketing-report-bar-row > strong {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .marketing-report-recipient {
    grid-template-columns: 1fr;
  }

  .marketing-campaign-actions {
    justify-content: flex-start;
  }

  .marketing-send-actions button,
  .marketing-test-row button {
    width: 100%;
  }

  .marketing-safety-note {
    grid-template-columns: 1fr;
  }

  .email-template-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .email-template-heading label {
    width: 100%;
  }

  .review-email-actions,
  .review-email-test-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .review-email-actions button,
  .review-email-test-actions button {
    width: 100%;
  }

  .email-review-dialog,
  .email-review-test-dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
  }

  .email-review-dialog-content {
    padding: 17px;
  }

  .review-email-preview-document,
  .review-email-preview-document.is-mobile {
    max-width: 100%;
    min-height: 320px;
  }

  .email-variable-item {
    align-items: flex-start;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .email-asset-upload,
  .email-asset-item {
    grid-template-columns: 1fr;
  }

  .email-asset-item.is-selectable,
  .marketing-message-attachment,
  .marketing-message-subject {
    grid-template-columns: 1fr;
  }

  .email-asset-select {
    justify-items: start;
    grid-template-columns: auto auto;
    align-items: center;
  }

  .email-signature-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .email-asset-item .row-actions {
    justify-content: flex-start;
  }

  .backup-header {
    align-items: stretch;
  }

  .backup-header button {
    width: 100%;
  }

  .backup-item {
    grid-template-columns: 1fr;
  }

  .backup-meta {
    grid-template-columns: 1fr 1fr;
  }

  .backup-actions {
    justify-content: flex-start;
  }

  .cloud-backup-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .cloud-backup-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cloud-backup-actions > * {
    width: 100%;
  }

  .backup-restore-item {
    grid-template-columns: 1fr;
  }

  .backup-restore-safety {
    justify-items: start;
  }

  .backup-restore-dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
  }

  .backup-restore-dialog form {
    padding: 17px;
  }

  .backup-restore-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .service-overview-actions {
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
  }

  .service-overview-actions button {
    width: auto;
  }

  .service-overview-actions > small,
  .service-overview-contact,
  .service-overview-address,
  .service-overview-boiler {
    display: none;
  }

  .service-overview-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: 12px 14px;
  }

  .service-overview-main {
    grid-column: 1 / -1;
  }

  .service-overview-city {
    grid-column: 1;
    grid-row: 2;
  }

  .service-overview-date {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }

  .service-overview-date strong {
    white-space: nowrap;
  }

  .date-filter-row {
    grid-template-columns: 1fr;
  }

  .selector-row,
  .selector-row.parts,
  .catalog-form,
  .catalog-form.operations,
  .catalog-row,
  .catalog-row.operations,
  .catalog-edit-grid,
  .catalog-edit-grid.operations {
    grid-template-columns: 1fr;
  }

  .selector-row.parts {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .selector-row.custom-service-row {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .selector-row.parts.custom-service-row {
    grid-template-columns: 72px 72px minmax(0, 1fr) 36px;
  }

  .custom-service-row .custom-entry-name {
    grid-column: 1;
  }

  .custom-service-row.parts .custom-entry-name {
    grid-column: 1 / -1;
  }

  .custom-service-row .selector-note {
    grid-column: 1 / -1;
  }

  .custom-service-row:not(.parts) .custom-entry-remove {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .custom-service-row.parts .custom-entry-remove {
    grid-column: 4;
    align-self: end;
  }

  .selector-row .selector-note {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .custom-service-row.parts .selector-note {
    grid-column: 1 / 4;
  }

  .tabs {
    overflow-x: auto;
  }
}